Ela_Front/src/components/Partner.js

664 lines
27 KiB
JavaScript

import React, { useState, useEffect } from "react";
import axios from "axios";
import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import profileimg from "../mysy_img/MYSY-profil-2.png";
import TrainingForm from "./AddClassManual"
import PartnerTranings from "./DisplayPartnerTrainingsPagination";
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';
import { getCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import PartnerInfo from "./UpdatePartnerInfo";
import PartenairStat from "./PartenairStat";
import { Helmet } from "react-helmet";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import Header from "./Header";
import Facture from "./Facture";
import Abonnement from "./Abonnement";
import { useLocation } from "react-router-dom";
import { useParams } from 'react-router-dom'
import CheckOut from "./CheckOut";
import { IoCheckmarkCircleSharp } from "react-icons/io5";
import { FaHandPointRight } from "react-icons/fa";
const Partner = (props) => {
const { commingmenu, commingpack } = useParams();
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const stored_part = getCookie('tokenmysypart');
const [parntername, setparntername] = useState("");
const [selectedfilt1, setselectedfilt1] = useState("");
const [selectedfilt2, setselectedfilt2] = useState("");
const [selectedfilt3, setselectedfilt3] = useState("");
const [excelimportmessage, setexcelimportmessage] = useState("");
const [apiexcelimportmessage, setapiexcelimportmessage] = useState("");
const [gotocheckout, setgotocheckout] = useState("");
// Constante permet de savoir a fonction du menu on a faire
const [menu, setmenu] = useState("affichage");
const [selectedFile, setSelectedFile] = useState();
const [isSelected, setIsSelected] = useState(false);
const [partnerPackService, setpartnerPackService] = useState("");
const [isimgSelected, setisimgSelected] = useState(false);
const [isimgSelectedfile, setisimgSelectedfile] = useState(false);
const [userimgprofil, setuserimgprofil] = useState();
const [partnerstatus, setpartnerstatus] = useState();
const [refesh, setrefesh] = useState("init");
const [firstConnexion, setfirstConnexion] = useState("");
const changeHandler = (event) => {
setSelectedFile(event.target.files[0]);
setIsSelected(true);
setapiexcelimportmessage("");
};
const history = useHistory();
const stored_cookie = getCookie('tokenmysypart');
const location = useLocation();
// Si le partenaire n'est pas connecté, il est renvoyé vers la page de connexion
if (!stored_cookie || stored_cookie.length <= 0) {
if (location && location.state && location.state.mysy_arg) {
//alert(" mysy arg (dans partner) = " + location.state.mysy_arg);
history.push("/Connexion", { mysy_arg: location.state.mysy_arg });
}
else {
history.push("/Connexion");
}
}
const formData = new FormData();
const handleSubmission = () => {
formData.append('File', selectedFile);
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
//console.log("token = " + stored_cookie);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/add_class_mass/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message']);
setexcelimportmessage(result['message']);
setmyApiResponse("true");
setapiexcelimportmessage(result['status']);
//alert("result['status'] " + result['status']);
})
.catch((error) => {
console.error('Error:', result);
setmyApiResponse("false");
setapiexcelimportmessage("-1");
});
};
const [myimage, setmyimage] = useState();
const [isimage, setisimage] = useState();
function getImage(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedImage/";
var form = new FormData();
form.append("token", stored_cookie);
form.append("type", "partner");
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
console.log(" getImage : In test res.data.status = " + res.data.status);
console.log(" getImage: res.data.message.img = " + res.data.message);
if (res.data.message.img.length > 0) {
setisimage("True");
}
else {
setisimage("False");
}
setmyimage(res.data.message.img);
var ch_img = "data:image/png;base64," + res.data.message.img;
setuserimgprofil(ch_img);
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setisimage("False");
setuserimgprofil();
//alert("4");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setisimage("False");
setuserimgprofil(profileimg);
})
}
useEffect(() => {
setapiexcelimportmessage("");
getImage();
GetPartnerNameFromToken();
DiplaytrainingList();
if (location && location.state && location.state.local_sub_menu) {
setmenu(location.state.local_sub_menu);
setpartnerPackService(location.state.currentpack);
//alert(" le pack = "+location.state.currentpack);
}
}, [])
function CreateTraining(event) {
setmenu("creation");
}
function PersonnalData(event) {
setmenu("infopartner");
}
function DisplayStat(event) {
setmenu("statistique");
}
function DisplayFacure(event) {
setmenu("facture");
}
function Abonnement_func(event) {
setmenu("abonnement");
}
function DiplaytrainingList(event) {
setmenu("affichage");
var server_address = "127.0.0.1";
//var server_address = "89.156.84.196";
var form = new FormData();
// Recuperation des parametres
var filtre1 = selectedfilt1;
var filtre2 = selectedfilt2;
var filtre3 = selectedfilt3;
var filtre1_value = "";
var filtre2_value = "";
var filtre3_value = "";
// Recuperation des valeurs de filtres
if (selectedfilt1) {
filtre1_value = document.getElementsByName("filtre1")[0].value;
form.append(filtre1, filtre1_value);
}
if (selectedfilt2) {
filtre2_value = document.getElementsByName("filtre2")[0].value;
form.append(filtre2, filtre2_value);
}
if (selectedfilt3) {
filtre3_value = document.getElementsByName("filtre3")[0].value;
form.append(filtre3, filtre3_value);
}
//console.log(" filtres1 = " + filtre1 + " = " + filtre1_value);
//console.log(" filtres2 = " + filtre2 + " = " + filtre2_value);
//console.log(" filtres3 = " + filtre3 + " = " + filtre3_value);
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_class/";
axios.post(myurl, form).then(res => {
if (res.data.status !== "False") {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("true");
setResult(res.data.message)
//setmyApimyApiMessage("OK")
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("false");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("false");
//setmyApimyApiMessage("")
})
}
function logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
removeCookie_part('tokenmysypart', { path: '/' });
history.push("/recherche-formation");
}
}
function logout() {
confirmAlert({
title: 'Deconnexion ?',
message: 'Confirmez la deconnexion',
buttons: [
{
label: 'Oui',
onClick: () => logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
const imgchangeHandler = (event) => {
let file_size = event.target.files[0].size;
//or if you like to have name and type
let file_name = event.target.files[0].name;
let file_type = event.target.files[0].type;
//alert("file_size = "+file_size+" file_type = "+file_type+" a = "+a);
if (file_size > 100000) {
alert("L'image doit faire moins de 1 mega Kilo Octets");
return;
}
setisimgSelectedfile(event.target.files[0]);
setisimgSelected(true);
setuserimgprofil(URL.createObjectURL(event.target.files[0]));
};
function GetPartnerNameFromToken(event) {
var form = new FormData();
console.log(" GetPartnerNameFromToken stored_cookie = ",stored_cookie);
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
console.log(" In GetPartnerNameFromToken res.data.status = " + res.data.status);
console.log(" In GetPartnerNameFromToken res.data.message = " + res.data.message);
setparntername(JSON.parse(res.data.message).nom);
if (JSON.parse(res.data.message).pack_service) {
setpartnerPackService(JSON.parse(res.data.message).pack_service);
}
else {
setpartnerPackService("Aucun Service");
}
if (JSON.parse(res.data.message).ispending) {
setpartnerstatus(JSON.parse(res.data.message).ispending);
}
if (JSON.parse(res.data.message).firstconnexion &&
String(JSON.parse(res.data.message).firstconnexion) === "0") {
setfirstConnexion("0");
} else {
setfirstConnexion("1");
}
}
else {
console.log(" In GetPartnerNameFromToken res.data.status = " + res.data.status);
//console.log(" In GetPartnerNameFromToken res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('In GetPartnerNameFromToken Not good man :( mysearchtext = ');
})
}
function sendImage(e) {
var formData = new FormData();
formData.append('File', isimgSelectedfile);
formData.append("token", stored_part);
formData.append("type", "partner");
fetch(
process.env.REACT_APP_API_URL + "myclass/api/recordImage/",
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message']);
setisimgSelected(false);
})
.catch((error) => {
console.error('Error:');
setisimgSelected(true);
});
};
// Create a reference to the hidden file input element
const hiddenFileInput = React.useRef(null);
// Programatically click the hidden file input element
// when the Button component is clicked
const handleClick = event => {
hiddenFileInput.current.click();
};
// Call a function (passed as a prop from the parent component)
// to handle the user-selected file
const handleChange = event => {
const fileUploaded = event.target.files[0];
props.handleFile(fileUploaded);
};
function alertactivecompte() {
alert(" Vous devez ajouter un mode de Paiement pour acceder à cette fonctionnalité");
}
function ValideFirstConnexion(){
setfirstConnexion("");
setmenu("abonnement");
}
return (
<div className="partner">
<Helmet>
<title>Partenaires editeurs formations</title>
<meta name="description" content="backoffice partenaire editeurs formation" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
<div className="sub_dib_mobile">
<div className="div_gauche">
<img class="img-responsive img_user" src={userimgprofil} />
{!isimgSelected && <div className="nonlable">
<input type="file" id="files" accept="image/*" onChange={imgchangeHandler} style={{ opacity: "0", zIndex: "-1", maxWidth: "5px", maxHeight: "0px" }} />
<label for="files" className="label">Changer image</label>
</div>}
{isimgSelected && <div className="nonlable">
<Button variant="outlined" onClick={sendImage} className="enreg">Enregistrer</Button>
</div>}
<div className="nom_prenom"> {parntername && <b> {parntername}&nbsp;-&nbsp;{String(partnerPackService).toUpperCase()} </b>}
{!parntername && <b> Partenaire </b>} </div>
<hr className="my_hr" />
{String(menu) !== "infopartner" && <div className="sousmenu" onClick={PersonnalData} > INFORMATIONS PERSONNELLES</div>}
{String(menu) === "infopartner" && <div className="sousmenu_selected" onClick={PersonnalData} > INFORMATIONS PERSONNELLES</div>}
<hr className="my_hr" />
{String(menu) !== "creation" && <div className="sousmenu" onClick={CreateTraining}> CREER FORMATION</div>}
{String(menu) === "creation" && <div className="sousmenu_selected" onClick={CreateTraining}> CREER FORMATION</div>}
<hr className="my_hr" />
{String(menu) !== "affichage" &&<div className="sousmenu" onClick={DiplaytrainingList} > MES FORMATIONS</div>}
{String(menu) === "affichage" &&<div className="sousmenu_selected" onClick={DiplaytrainingList} > MES FORMATIONS</div>}
<hr className="my_hr" />
{String(menu) !== "abonnement" &&<div className="sousmenu" onClick={Abonnement_func} > ABONNEMENT </div>}
{String(menu) === "abonnement" &&<div className="sousmenu_selected" onClick={Abonnement_func} > ABONNEMENT </div>}
<hr className="my_hr" />
{String(menu) !== "facture" &&<div className="sousmenu" onClick={DisplayFacure} > FACTURATION</div>}
{String(menu) === "facture" &&<div className="sousmenu_selected" onClick={DisplayFacure} > FACTURATION</div>}
<hr className="my_hr" />
{String(menu) !== "statistique" &&<div className="sousmenu" onClick={DisplayStat}> STATISTIQUES</div>}
{String(menu) === "statistique" &&<div className="sousmenu_selected" onClick={DisplayStat}> STATISTIQUES</div>}
<hr className="my_hr" />
</div>
{String(firstConnexion) === "1" &&
<div className="div_droite firstConnexion">
<div className="firstConnexion_text">
<b>Cher partenaire, c'est votre première connexion, </b> <br /> &nbsp;<br/>
Nous sommes ravis de vous accueillir dans notre aventure MySy.
Pour commencer à publier vos formations, veuillez choisir une formule d'abonnement en cliquant <Button onClick={ValideFirstConnexion} className="firstConnexion_bton"> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; &nbsp; ici</Button><br />
&nbsp; <br/> Merci.
</div>
</div>}
{String(myApiResponse) === String("false") && <div className="div_droite">
<div className="koUpdateData"> Impossible de contacter l'hote distant </div>
</div>
}
{String(myApiResponse) === String("true") && menu === "affichage" &&
<div className="div_droite">
{/*String(partnerstatus) === String("1") &&
<div className="accountsatatus"> Finalisez la création de votre compte en ajoutant le moyen de payement de votre choix :)
</div>*/}
<PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} />
</div>
}
</div>
{String(menu) === "checkout" && <div className="div_droite">
<Button onClick={"returntoorder"} className="btn_retour_ps"> Retour aux produits & Services </Button>
<CheckOut packs={location.state.new_pack} periodicity={location.state.period} mypackprice={location.state.price} />
</div>
}
{String(myApiResponse) === String("true") && menu === "creation" &&
<div className="div_droite">
{/*String(partnerstatus) === String("1") &&
<div className="accountsatatus"> Finalisez la création de votre compte en ajoutant le moyen de payement de votre choix :)
</div>*/}
<div className="parter_div_droite_haut">
{String(apiexcelimportmessage) === String("true") &&
<div className="parter_div_filtrer_row okUpdateData">
{excelimportmessage}<br />&nbsp;<br />
</div>
}
{String(apiexcelimportmessage) === String("false") &&
<div className="parter_div_filtrer_row koUpdateData">
Impossible de traiter le fichier <br />
<u> <b> {excelimportmessage} </b></u>
<br />&nbsp;<br />
</div>
}
{String(apiexcelimportmessage) === String("-1") &&
<div className="parter_div_filtrer_row koUpdateData">
Impossible de traiter le fichier <br />&nbsp;<br />
</div>
}
<div className="parter_div_filtrer_row">
<div>
{String(partnerstatus) === String("0") && <div className="parter_div_filtrer_row_gauche">
Import excel d'une formation <a href='/sample/template_import.csv' download>Télécharger un fichier modèle</a>
<br />
<input type="file" name="file" accept=".csv" onChange={changeHandler} /> <br />
<br />&nbsp;
<div className="import_excel_text">
<nav className="titre1"> Comment utiliser le fichier ? </nav>
<nav style={{"color":"orange"}}>
Dans le fichier à importer, seules les colonnes suivantes sont obligatoires :
<ul>
<li>external_code : C'est le code de la formation chez vous, editeur de la formation </li>
<li> titre : Le titre de la formation </li>
<li> domaine : Le domaine au quel est rattaché la formation</li>
<li> description : La descriptin de la formation</li>
</ul>
</nav>
Pour le reste, <br/>
<ul>
<li> Il s'agit d'un fichier csv. Les colonnes sont separées par des ";"</li>
<li> A l'interieur d'une même colonne, les informations sont separées par des ";" </li>
<li> La zone de diffusion est sous la forme "Code iso du pays-nom ville". </li>
<li> Champ 'Metier' : les valeurs acceptées sont : IT, RH, vente, dev_perso, Graphisme, Management, Digital, Office, Autre</li>
<li> ...</li>
</ul>
<a href='/sample/MySy_Import_formation_csv.pdf' download>Télécharger le guide complet pour plus d'informations</a><br />
</div>
<div style={{ "width": "50%" }}> &nbsp; </div>
<div className="zone_import_fichier">
<Button onClick={handleSubmission}
variant="contained" endIcon={<SendIcon />}
className="bt_import_mass"> Importer le fichier </Button>
</div>
</div>}
{String(partnerstatus) !== String("0") && <div className="parter_div_filtrer_row_gauche">
Import excel d'une formation <a href='/sample/template_import.csv' download>Télécharger un fichier modèle</a>
<br />
<input type="file" name="file" onChange={""} accept=".csv" />
<br />
<div align="right">
<Button onClick={alertactivecompte} variant="contained" endIcon={<SendIcon />}> Importer </Button>
</div>
</div>}
</div>
<br />
</div>
</div>
<div className="parter_div_droite_bas">
<div className="titre1_bis"> Création manuelle d'une formation </div>
<TrainingForm mytrainingclass={{ 'ref': '', 'dist': 'Oui', 'plus_produit': '0' }} ispending={partnerstatus}
currentpack={String(partnerPackService).toUpperCase()} />
</div>
</div>
}
{String(myApiResponse) == String("true") && menu == "infopartner" &&
<div className="div_droite">
{/*String(partnerstatus) === String("1") &&
<div className="accountsatatus"> Finalisez la création de votre compte en ajoutant le moyen de payement de votre choix :)
</div>*/}
<PartnerInfo />
</div>
}
{String(menu) === "statistique" &&
<div className="div_droite">
{/*String(partnerstatus) === String("1") &&
<div className="accountsatatus"> Finalisez la création de votre compte en ajoutant le moyen de payement de votre choix :)
</div>*/}
<PartenairStat />
</div>
}
{String(menu) === "facture" && <div className="div_droite">
{/*String(partnerstatus) === String("1") &&
<div className="accountsatatus"> Finalisez la création de votre compte en ajoutant le moyen de payement de votre choix :)
</div>*/}
<Facture currentpack={partnerPackService} />
</div>
}
{String(menu) === "abonnement" && <div className="div_droite">
{/*String(partnerstatus) === String("1") &&
<div className="accountsatatus"> Finalisez la création de votre compte en ajoutant le moyen de payement de votre choix :)
</div>*/}
<Abonnement currentpack={partnerPackService} />
</div>
}
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
}
export default Partner;