import React, { useState, useEffect } from "react"; import ReactPlayer from 'react-player' import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share"; import { SocialIcon } from 'react-social-icons'; import { Button, } from "reactstrap"; import { useHistory } from "react-router-dom"; import { Helmet } from "react-helmet"; import { useCookies } from "react-cookie"; import { confirmAlert } from 'react-confirm-alert'; import topimg from "../mysy_img/top.png"; import coeurimg from "../mysy_img/coeur.png"; import img_met_program from "../mysy_img/met_programmation.jpg"; import img_met_hotel from "../mysy_img/met_hotel.jpg"; import img_met_graphisme from "../mysy_img/metier_graphisme.jpg"; import img_met_autre from "../mysy_img/met_autre.jpg"; import img_met_digital from "../mysy_img/met_digital.jpg"; import img_met_management from "../mysy_img/met_management.jpg"; import img_met_projet from "../mysy_img/met_projet.jpg"; import img_met_market from "../mysy_img/met_market.jpg"; import img_met_autre2 from "../mysy_img/met_autre2.jpg"; import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg"; import img_met_rh from "../mysy_img/met_rh.jpg"; import img_met_bureautic from "../mysy_img/met_burautic.jpg"; import img_met_vente from "../mysy_img/met_vente.jpg"; import axios from "axios"; //import { Rating } from 'react-simple-star-rating' import Rating from '@mui/material/Rating'; import parse from 'html-react-parser' import { CiLocationOn } from "react-icons/ci"; const Formation_Partner_Catalog = (props) => { const [userconnected, setuserconnected] = useState("0"); const [partnerconnected, setpartnerconnected] = useState("0"); const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']); const history = useHistory(); const [myfilter, setmyfilter] = useState(props.formation.price); const [profileimg, setprofileimg] = useState(props.formation.price); // Gestion des Cookies const stored_partner = cookie_part.tokenmysypart; const stored_user = cookie.tokenmysych; function test(val) { if (userconnected === "0" && partnerconnected === "0") { confirmAlert({ title: 'Activer votre session ?', message: 'Merci de vous connecter pour acceder au detail de cette formation', buttons: [ { label: 'Oui', onClick: () => { history.push("/mysy-training-login/training/" + props.formation.internal_url) } }, { label: 'Non', onClick: () => { return } } ], closeOnEscape: false, closeOnClickOutside: false, keyCodeForClose: [8, 32], willUnmount: () => { }, afterClose: () => { }, onClickOutside: () => { }, onKeypress: () => { }, onKeypressEscape: () => { }, }); } else { window.open( "/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url, '_blank' ); } } const [myclassimage, setmyclassimage] = useState(); const [isclassimage, setisclassimage] = useState("False"); const [userimgclassprofil, setuserimgclassprofil] = useState(""); const [class_img_stored_in_bdd, setclass_img_stored_in_bdd] = useState(""); function getClassImage_no_token() { var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_no_token/"; var form = new FormData(); form.append("type", "partner"); form.append("related_collection", "myclass"); form.append("related_collection_recid", props.formation._id); form.append("class_external_code", props.formation.external_code); axios.post(myurl, form).then(res => { if (res.data.status != "False") { //console.log(" getClassImage : In test res.data.status = " + res.data.status); //console.log(" getClassImage: res.data.message.img = " + res.data.message); if (res.data.message.img.length > 0) { setisclassimage("True"); } else { setisclassimage("False"); } setisclassimage(res.data.message.img); var ch_img = "data:image/png;base64," + res.data.message.img; setclass_img_stored_in_bdd(ch_img); } else { //console.log(" In Erreur res.data.status = " + res.data.status); //console.log(" In Erreur res.data.message = " + res.data.message); setisclassimage("False"); setuserimgclassprofil(); setclass_img_stored_in_bdd(); } }).catch((error) => { console.warn('getClassImage ee: Not good man :( getClassImage = '); setisclassimage("False"); setuserimgclassprofil(""); setclass_img_stored_in_bdd(""); }) } /* Cette variable accompagne la gestion des images par defaut. idée : si la valeur de "DetailTraining.metier" != "management, digital, office, rh, vente, dev_perso" alors l'utilisateur à créer une formation avec un metier qui n'est pas geré, donc on met une image par defaut */ const [ismetiermanaged, setismetiermanaged] = useState(); const liste_metier = ["management", "digital", "office", "rh", "vente", "dev_perso"]; useEffect(() => { setmyfilter(props.myfil); if (typeof (stored_user) === "undefined" || String(stored_user) === '') { setuserconnected("0"); } else { setuserconnected("1"); } if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { setpartnerconnected("0"); } else { setpartnerconnected("1"); } getClassImage_no_token(); GetCurrentClass_trainingsession(); GetCurrentClass_trainingsession_cities(); // Verifier si le metier est geré if (props.formation.metier) { if (!liste_metier.includes(props.formation.metier)) { setismetiermanaged("0"); // j'ai une valeur dans metier, mais qui n'est pas geré } } else { setismetiermanaged("0"); } if (props.formation.img_url && String(props.formation.img_url).length > 0) { setismetiermanaged("1"); } }, []); const [GetCurrentClass_api, setGetCurrentClass_api] = useState(); const [GetCurrentClass_message, setGetCurrentClass_message] = useState(); const [GetCurrentClass_result, setGetCurrentClass_result] = useState(); function GetCurrentClass_trainingsession(event) { var form = new FormData(); form.append("class_internal_url", props.formation.internal_url); form.append("token", stored_partner); var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/"; axios.post(myurl, form).then(res => { if (res.data.status != "false") { //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status); //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message); setGetCurrentClass_api("true"); setGetCurrentClass_result(res.data.message); } else { setGetCurrentClass_api("false"); setGetCurrentClass_message(res.data.message); } }).catch((error) => { console.warn('Not good man :( GetCurrentClass_trainingsession = ', error); setGetCurrentClass_api("false"); //setmyApimyApiMessage("") }) } const [GetCurrentClass_trainingsession_cities_api, setGetCurrentClass_trainingsession_cities_api] = useState(); const [GetCurrentClass_trainingsession_cities_message, setGetCurrentClass_trainingsession_cities_message] = useState(); const [GetCurrentClass_trainingsession_cities_result, setGetCurrentClass_trainingsession_cities_result] = useState([]); function GetCurrentClass_trainingsession_cities(event) { var form = new FormData(); form.append("class_internal_url", props.formation.internal_url); form.append("token", stored_partner); var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSession_Cities_And_Distance_Formation_List/"; axios.post(myurl, form).then(res => { if (res.data.status != "false") { //console.log(" In GetCurrentClass_trainingsession_cities res.data.status = " + res.data.status); //console.log(" In GetCurrentClass_trainingsession_cities res.data.message r_class = " + res.data.message); setGetCurrentClass_trainingsession_cities_api("true"); setGetCurrentClass_trainingsession_cities_result(res.data.message); } else { setGetCurrentClass_trainingsession_cities_api("false"); setGetCurrentClass_trainingsession_cities_message(res.data.message); } }).catch((error) => { console.warn('Not good man :( GetCurrentClass_trainingsession_cities = ', error); setGetCurrentClass_trainingsession_cities_api("false"); //setmyApimyApiMessage("") }) } return (
{class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 &&
informatique
} { (!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50 ) && String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" &&
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("it") && String(isclassimage) === "False" && informatique} {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") && String(isclassimage) === "False" && graphisme} {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") && String(isclassimage) === "False" && management} {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") && String(isclassimage) === "False" && digital} {(!props.formation.img_url || String(props.formation.img_url).length <= 0) && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") && String(isclassimage) === "False" && office} {!props.formation.img_url || String(props.formation.img_url).length <= 0 && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") && String(isclassimage) === "False" && ressources humaines} {!props.formation.img_url || String(props.formation.img_url).length <= 0 && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") && String(isclassimage) === "False" && vente} {!props.formation.img_url || String(props.formation.img_url).length <= 0 && props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("dev_perso") && String(isclassimage) === "False" && developpement personnel} {String(isclassimage) === "True" && developpement personnel}
} {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50 ) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 &&
autre {props.formation.institut_formation &&
Dispensé par :
{String(props.formation.institut_formation)}
}
} {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50 ) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length <= 100 &&
autre {props.formation.institut_formation &&
Dispensé par :
{String(props.formation.institut_formation)}
}
} {(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50 ) && String(ismetiermanaged) === "1" &&
autre {props.formation.institut_formation &&
Dispensé par :
{String(props.formation.institut_formation)}
}
}
{ e.preventDefault(); if (props.formation.url && props.formation.url.length > 5) { window.open( props.formation.url, '_blank' ); } else { window.open( "/Display-Partner-Catalog-Detail-formation/" + props.formation.internal_url, '_blank' ); } }}>
{props.formation.note && String(props.formation.note).length === 1 && parseInt(String(props.formation.note)) <= 5 && }
{props.formation.cpf && String(props.formation.cpf) === String("1") &&
OUI Éligible au CPF  
} {props.formation.cpf && String(props.formation.cpf) !== String("1") &&
NON Éligible au CPF  
} {!props.formation.cpf &&
NON Éligible au CPF  
}

{String(parse(String(props.formation.title).replace(/(<([^>]+)>)/ig, ''))).substring(0, 100)}

{String(props.formation.price).length == 9 &&
Prix : Non communiqué  
} {String(props.formation.price).length != 9 && String(props.formation.price) === String("0") &&
Gratuit  
} {String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") && (!props.formation.business_prices || Object.keys(props.formation.business_prices).length <= 0) &&
{props.formation.price} € HT 
} {String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") && props.formation.business_prices && Object.keys(props.formation.business_prices).length > 0 &&
}
{parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, ''))}
{GetCurrentClass_trainingsession_cities_result && GetCurrentClass_trainingsession_cities_result.length > 0 && } {!GetCurrentClass_result || GetCurrentClass_result.length <= 0 && }

{!props.formation.extented_search &&
{props.formation.duration_unit &&
Durée
{String(props.formation.duration_unit) === "heure" &&
{props.formation.duration} hr(s)  
} {String(props.formation.duration_unit) === "heures" &&
{props.formation.duration} hr(s)  
} {String(props.formation.duration_unit) === "jour" &&
{props.formation.duration} jr(s)  
} {String(props.formation.duration_unit) === "mois" &&
{props.formation.duration} mois(s)
} {String(props.formation.duration_unit) === "semaine" &&
{props.formation.duration} Sem (s)
} {String(props.formation.duration_unit) === "user_rythme" &&
A votre rythme
}
} {!props.formation.duration_unit &&
Durée
{props.formation.duration &&
{props.formation.duration} jr(s)  
} {!props.formation.duration &&
En traitement  
}
}
Certification
{props.formation.certif && String(props.formation.certif) === String("1") &&
Oui  
} {props.formation.certif && String(props.formation.certif) !== String("1") &&
Non  
} {!props.formation.certif &&
NC  
}
   
{/*
Type
{props.formation.type}  
Support
{props.formation.support}  
*/} {/*props.formation.zone_diffusion && props.formation.zone_diffusion.country &&
Test : pays
{props.formation.zone_diffusion.country}  
*/} {/*props.formation.zone_diffusion && props.formation.zone_diffusion.city &&
Test : Ville
{props.formation.zone_diffusion.city}  
*/} {/* {props.formation.presentiel && props.formation.presentiel.presentiel &&
Presentiel
{props.formation.presentiel.presentiel}  
} {props.formation.presentiel && props.formation.presentiel.distantiel &&
Distantiel
{props.formation.presentiel.distantiel}  
} */}
}
{String(props.formation.coeur) === String("1") &&
coup de coeur
}
Sur site
{props.formation.presentiel && props.formation.presentiel.presentiel && String(props.formation.presentiel.presentiel) === String("1") &&
Oui
} {props.formation.presentiel && props.formation.presentiel.presentiel && String(props.formation.presentiel.presentiel) !== String("1") &&
Non
} {!props.formation.presentiel || !props.formation.presentiel.presentiel &&
NC
}
A distance
{props.formation.presentiel && props.formation.presentiel.distantiel && String(props.formation.presentiel.distantiel) === String("1") &&
Oui
} {props.formation.presentiel && props.formation.presentiel.distantiel && String(props.formation.presentiel.distantiel) !== String("1") &&
Non
} {!props.formation.presentiel || !props.formation.presentiel.distantiel &&
NC
}
Support
{props.formation.support &&
{props.formation.support}
} {!props.formation.support &&
NC
}
{/*
Type
{props.formation.type &&
{props.formation.type}
} {!props.formation.type &&
NC
}
*/}
{!props.formation.extented_search && props.formation.coeur != "1" &&
{GetCurrentClass_result && GetCurrentClass_result.length > 0 && }
}
) } export default Formation_Partner_Catalog;