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 &&
}
{ (!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" &&

}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") &&
String(isclassimage) === "False" &&

}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") &&
String(isclassimage) === "False" &&

}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") &&
String(isclassimage) === "False" &&

}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") &&
String(isclassimage) === "False" &&

}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") &&
String(isclassimage) === "False" &&

}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") &&
String(isclassimage) === "False" &&

}
{!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" &&

}
{String(isclassimage) === "True" &&

}
}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50 ) && String(ismetiermanaged) === "0" && String(userimgclassprofil).length > 100 &&

{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 &&

{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" &&

{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 &&
A venir
}
{!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") &&
}
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;