Ela_Front/src/components/DisplayDetailClass_new_v2.js

3061 lines
120 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React, { useRef, useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import { Helmet } from "react-helmet";
import 'react-slideshow-image/dist/styles.css'
import { Fade } from 'react-slideshow-image';
import slideimg1 from "../mysy_img/education.jpg";
import slideimg4 from "../mysy_img/mysy_img.png";
import Footer from "./Fotter";
import Header from "./Header";
import bannerimg from "../mysy_img/MYSY_banner_compte.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 img_met_sport from "../mysy_img/met_sport.png";
import img_met_sante_nat from "../mysy_img/met_sante_nat.jpeg";
/*
/!\ important: les images du slides doivent avoir une dimension de : 250 X 450
*/
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { useCookies } from "react-cookie";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { confirmAlert } from 'react-confirm-alert';
//import { Rating } from 'react-simple-star-rating';
import Rating from '@mui/material/Rating';
import parse from 'html-react-parser';
import Inscription from "./Inscription_Information";
import mysy_logo2 from "../mysy_img2/Logo_MySy.png"
import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
import { areOptionsEqual } from "@mui/base";
import { style } from "@mui/system";
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
const DisplayDetailClass_new_v2 = (props) => {
const { classId, action } = useParams();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState();
const [DetailTraining, setDetailTraining] = useState([]);
const [closepopup, setclosepopup] = useState(0);
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [mynote, setmynote] = useState(0);
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const [inscritpion, setinscritpion] = useState("");
const [ratingvalue, setratingvalue] = useState(0);
const [text_size, settext_size] = useState("0");
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
const [childdata, setchilddata] = useState();
// Cette fonction verifier si le token de l'evaluation est valide
//si $action != 'information' et 'inscription', alors la valeur est forcement celle d'un token.
const [tokenEval_api, settokenEval_api] = useState();
const [tokenEval_message, settokenEval_message] = useState();
const [tokenEval_result, settokenEval_result] = useState();
function CheckEvaluationToken() {
var form = new FormData();
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
form.append("eval_token", action);
form.append("class_internal_url", classId);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/MySyckeckEvaluationToken/";
axios.post(myurl, form).then(res => {
//console.log(" In CheckEvaluationToken res.data.status = " + res.data.status);
//console.log(" In CheckEvaluationToken res.data.message r_class = " + res.data.message);
if (String(res.data.status) !== "false") {
settokenEval_api("true");
settokenEval_result(res.data.message);
}
else {
//console.log(" In tokenEval_trainingsession res.data.status = " + res.data.status);
settokenEval_api("false");
settokenEval_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( CheckEvaluationToken = ', error);
settokenEval_api("false");
//setmyApimyApiMessage("")
})
}
useEffect(() => {
async function funclocaltoken() {
if (action && String(action).toLocaleLowerCase() !== "inscription" &&
String(action).toLocaleLowerCase() !== "information") {
CheckEvaluationToken();
}
}
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',);
setuserIp(result.data.IPv4);
setcountry_code(result.data.country_code);
setcountry_name(result.data.country_name);
setcity(result.data.city);
setpostal(result.data.postal);
setlatitude(result.data.latitude);
setlongitude(result.data.longitude);
setIPv4(result.data.IPv4);
setstate(result.data.state);
setuserIp(result.data.IPv4);
submenu_datelieu();
}
fetchData();
GetCurrentClass_trainingsession();
Display();
GetAssociatedTraning();
funclocaltoken();
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
function contactUs(e) {
var sender_mail = "";
var sender_tel = "";
var token = "";
if (String(userconnected) === "0") {
sender_mail = document.getElementsByName("usermail")[0].value;
sender_tel = document.getElementsByName("usernumtel")[0].value;
if (sender_mail.length == 0 && sender_tel.length == 0) {
alert(" Les information fournies sont incorrectes ");
return;
}
} else {
token = String(stored_user)
}
var useravis = document.getElementsByName("useravis")[0].value;
var usersupqual = document.getElementsByName("userqualsup")[0].value;
var usernote = document.getElementsByName("usernote")[0].value;
if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) {
alert("Merci de saisir le nombre minimum de caractère requis pour les champs ");
return;
}
var re = /\S+@\S+\.\S+/;
if (re.test(sender_mail) == false) {
alert("l'email est incorrecte");
return;
}
////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
//alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = "
//+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
var form = new FormData();
form.append("type", "email");
form.append("recever_mail", "");
form.append("recever_tel", "");
form.append("sender_mail", sender_mail);
form.append("sender_tel", sender_tel);
form.append("object", DetailTraining["external_code"]);
form.append("token", "");
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
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);
setclosepopup(1);
document.getElementsByName("usermail")[0].value = "";
document.getElementsByName("usernumtel")[0].value = "";
document.getElementsByName("usercomment")[0].value = "";
}
else {
//console.log(" contact-nous statut = " + res.data.status);
//console.log(" contact-nous res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('contact-nous Not good man :( mysearchtext = ');
})
}
/* 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"];
const [nb_pave_a_afficher, setnb_pave_a_afficher] = useState();
const [isdatadock, setisdatadock] = useState();
const [isqualiopi, setisqualiopi] = useState();
const [iscertitrace, setiscertitrace] = useState();
const [isbureaucertitrace, setisbureaucertitrace] = useState();
const [iscertifvoltaire, setiscertifvoltaire] = useState();
const [partnair_name, setpartnair_name] = useState();
const [website_partenaire, setwebsite_partenaire] = useState();
const [class_sales_price, setclass_sales_price] = useState("0");
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(class_id, class_external_code) {
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", class_id);
form.append("class_external_code", class_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("");
})
}
function Display(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/";
var form = new FormData();
form.append("internal_url", classId);
var my_local_user_connect;
var my_local_part_connect;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
my_local_user_connect = 0;
} else {
my_local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
my_local_part_connect = 0;
} else {
my_local_part_connect = 1;
}
if (String(my_local_user_connect) === "1") {
form.append("token", stored_user);
form.append("connection_type", "user");
}
else if (String(my_local_part_connect) === "1") {
form.append("token", stored_partner);
form.append("connection_type", "partner");
}
else {
form.append("token", "");
form.append("connection_type", "");
}
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
var cpt_pave = 0;
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
// console.log(" In Display res.data.status = " + res.data.status);
console.log(" In Display res.data.message = " + res.data.message);
if (String(res.data.status) === String("true")) {
if (res.data.message.length > 0) {
setmyApiResponse("True");
if (String(JSON.parse(res.data.message).coeur) !== String("1") &&
String(JSON.parse(res.data.message).freeacces) !== String("1")) {
//alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur)
// Verification si on est en e connecté ou non.
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
if (local_user_connect === 0 && local_part_connect === 0) {
confirmAlert({
title: 'Connexion ?',
message: 'Connectez-vous pour acceder&nbsp; au&nbsp;detail de cette formation',
buttons: [
{
label: 'Vous avez un compte',
onClick: () => { history.push("/mysy-training-login/training/" + classId) }
},
{
label: "Vous n'avez pas de compte",
onClick: () => { history.push("/create_account") }
},
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
} else {
//alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur)
}
}
else {
setmyApiResponse("False");
}
//console.log(" In displaydetailclass res.data.status = " + res.data.status);
//console.log(" In displaydetailclass res.data.message = " + res.data.message);
//console.log(" In displaydetailclass taille res.data.message = " + res.data.message.length);
setResult(res.data.message);
setDetailTraining(JSON.parse(res.data.message));
getClassImage_no_token(JSON.parse(res.data.message)._id, JSON.parse(res.data.message).external_code);
if (JSON.parse(res.data.message).note) {
setratingvalue(JSON.parse(res.data.message).note);
}
if (JSON.parse(res.data.message).isdatadock) {
setisdatadock(JSON.parse(res.data.message).isdatadock);
}
if (JSON.parse(res.data.message).business_prices && JSON.parse(res.data.message).business_prices.length == 1) {
setclass_sales_price(JSON.parse(res.data.message).business_prices[0].discounted_price);
} else {
setclass_sales_price(JSON.parse(res.data.message).price);
setclass_sales_price(JSON.parse(res.data.message).price);
}
if (JSON.parse(res.data.message).isqualiopi) {
setisqualiopi(JSON.parse(res.data.message).isqualiopi);
}
if (JSON.parse(res.data.message).iscertitrace) {
setiscertitrace(JSON.parse(res.data.message).iscertitrace);
}
if (JSON.parse(res.data.message).isbureaucertitrace) {
setisbureaucertitrace(JSON.parse(res.data.message).isbureaucertitrace);
}
if (JSON.parse(res.data.message).iscertifvoltaire) {
setiscertifvoltaire(JSON.parse(res.data.message).iscertifvoltaire);
}
if (JSON.parse(res.data.message).nom_partenaire) {
setpartnair_name(JSON.parse(res.data.message).nom_partenaire);
}
if (JSON.parse(res.data.message).nb_pave_a_afficher) {
setnb_pave_a_afficher(JSON.parse(res.data.message).nb_pave_a_afficher);
//console.log(" ### NB setnb_pave_a_afficher = ", JSON.parse(res.data.message).nb_pave_a_afficher);
}
if (JSON.parse(res.data.message).website_partenaire) {
setwebsite_partenaire(JSON.parse(res.data.message).website_partenaire);
}
// Verifier si le metier est geré
if (JSON.parse(res.data.message).metier) {
if (!liste_metier.includes(JSON.parse(res.data.message).metier)) {
setismetiermanaged("0"); // j'ai une valeur dans metier, mais qui n'est pas geré
}
}
else {
setismetiermanaged("0");
}
if (JSON.parse(res.data.message).img_url && String(JSON.parse(res.data.message).img_url).length > 0) {
setismetiermanaged("1");
}
if (JSON.parse(res.data.message).text_size) {
settext_size(JSON.parse(res.data.message).text_size);
//"block_crossell_meme_orga"
var local_tmp;
var val;
var footer_top;
var main_h;
var main_h_px;
//console.log("nb_partner_certificat = ", JSON.parse(res.data.message).nb_partner_certificat);
if (window.screen.width < 601) {
var decalage_pr_certificat = parseInt(String(JSON.parse(res.data.message).nb_partner_certificat)) * 150;
//console.log("decalage_pr_certificat = ", decalage_pr_certificat);
var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
//console.log("### local_val = ", local_val)
if (local_val >= 5) {
//console.log(" ON PASSE&nbsp; au&nbsp;MAX")
var local_tmp_val = 2300 + decalage_pr_certificat;
var local_main_h_px = 4000 + decalage_pr_certificat;
//console.log("### local_tmp_val = ", local_tmp_val, " local_main_h_px = ",local_main_h_px);
local_tmp = local_tmp_val + "px";
main_h_px = local_main_h_px + "px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
var local_tmp_val = 2800 + decalage_pr_certificat;
var local_main_h_px = 4500 + decalage_pr_certificat;
local_tmp = local_tmp_val + "px";
main_h_px = local_main_h_px + "px";
}
} else {
//console.log(" ON PASSE&nbsp; au&nbsp;MIN");
var local_tmp_val = 2100 + decalage_pr_certificat;
var local_main_h_px = 4800 + decalage_pr_certificat;
local_tmp = local_tmp_val + "px";
main_h_px = local_main_h_px + "px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
var local_tmp_val = 2600 + decalage_pr_certificat;
var local_main_h_px = 5300 + decalage_pr_certificat;
local_tmp = local_tmp_val + "px";
main_h_px = local_main_h_px + "px";
}
}
document.getElementById('mob_block_cross_sell_cat').style.top = local_tmp;
document.getElementById('mobile').style.height = main_h_px;
}
if (window.screen.width >= 601 && window.screen.width <= 991) {
var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
if (local_val >= 5) {
//console.log(" ON PASSE&nbsp; au&nbsp;MAX")
local_tmp = "2000px";
main_h_px = "2700px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
local_tmp = "2500px";
main_h_px = "3200px";
}
} else {
console.log(" ON PASSE&nbsp; au&nbsp;MIN");
local_tmp = "1700px";
main_h_px = "2500px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
local_tmp = "2200px";
main_h_px = "3000px";
}
}
document.getElementById('block_crossell_meme_orga').style.top = local_tmp;
document.getElementById('desktop').style.height = main_h_px;
}
if (window.screen.width >= 992 && window.screen.width <= 1199) {
var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
if (local_val >= 5) {
console.log(" ON PASSE&nbsp; au&nbsp;MAX")
local_tmp = "2000px";
main_h_px = "2800px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
local_tmp = "2500px";
main_h_px = "3200px";
}
} else {
console.log(" ON PASSE&nbsp; au&nbsp;MIN");
local_tmp = "1700px";
main_h_px = "2500px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
local_tmp = "2200px";
main_h_px = "3000px";
}
}
document.getElementById('block_crossell_meme_orga').style.top = local_tmp;
document.getElementById('desktop').style.height = main_h_px;
}
if (window.screen.width >= 1200) {
var local_val = parseInt(String(JSON.parse(res.data.message).nb_pave_a_afficher));
if (local_val >= 5) {
console.log(" ON PASSE&nbsp; au&nbsp;MAX")
local_tmp = "2000px";
main_h_px = "2800px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
local_tmp = "2500px";
main_h_px = "3200px";
}
} else {
console.log(" ON PASSE&nbsp; au&nbsp;MIN");
local_tmp = "1700px";
main_h_px = "2500px";
if (String(action).toLowerCase() === "information" || String(action).toLowerCase() === "inscription") {
local_tmp = "2300px";
main_h_px = "3000px";
}
}
document.getElementById('block_crossell_meme_orga').style.top = local_tmp;
document.getElementById('desktop').style.height = main_h_px;
}
}
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setmyApiResponse("false");
history.push("/formation-inconnue/");
}
}).catch((error) => {
console.warn('Not good man :( Display = ', error);
//console.log(error);
setmyApiResponse("false");
})
}
const [associatedtraining_api, setassociatedtraining_api] = useState("");
const [associatedtraining_message, setassociatedtraining_message] = useState("");
function GetAssociatedTraning(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_associated_class_of_partnair/";
var form = new FormData();
form.append("internal_url", classId);
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
if (String(res.data.status) !== String("false")) {
//console.log(" In GetAssociatedTraning res.data.status = " + res.data.status);
//console.log(" In GetAssociatedTraning res.data.message = " + res.data.message);
setassociatedtraining_api("True");
setassociatedtraining_message(res.data.message);
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setassociatedtraining_api("False");
}
}).catch((error) => {
console.warn('Not good man :( GetAssociatedTraning = ');
setassociatedtraining_api("False");
})
}
const history = useHistory();
const fadeImages = [
{
url: slideimg1,
},
{
url: slideimg4,
},
];
function CheckAvis(e) {
const val = document.getElementById("useravis").value
//alert(" evalu " + val);
if (val.length < 20) {
alert(" Le champ 'Avis' doit etre plus renseigné");
}
//alert(val);
}
function CheckNote(e) {
const val = e.target.value;
if (isNaN(val)) {
//alert(val + " is not a number <br/> mynote = "+mynote);
document.getElementById("usernote").value = mynote;
} else {
if (val > 5) {
alert(" Valeur Maxi doit etre 5");
document.getElementById("usernote").value = mynote;
} else {
setmynote(val);
}
}
}
const [submenu, setsubmenu] = useState("datelieu");
function submenu_info() {
setsubmenu("formateur");
//if (document.getElementsByName("menu_formateur")[0])
// document.getElementsByName('menu_formateur')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_datelieu() {
setsubmenu("datelieu");
//if (document.getElementsByName("menu_datelieu")[0])
// document.getElementsByName('menu_datelieu')[0].focus();
if (document.getElementsByName("menu_formateur")[0])
document.getElementsByName('menu_formateur')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_divers() {
setsubmenu("divers");
//if (document.getElementsByName("submenu_divers")[0])
//document.getElementsByName('submenu_divers')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function Inscription_bton(event) {
if (DetailTraining["internal_url"] && String(DetailTraining["class_inscription_url"]).length > 10) {
window.open(
String(DetailTraining["class_inscription_url"]),
'_blank'
);
} else {
setinscritpion("1");
}
if (window.screen.width < 601) {
var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height;
var sticky_div_hilight_top = "1300";
var new_meme_orga_top = parseInt(meme_orga_top) + 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900;
var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) + 900;
document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px";
document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px";
document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px";
window.scrollTo(0, 500);
}
else if (window.screen.width >= 601 && window.screen.width <= 991) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) + 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
else if (window.screen.width >= 992 && window.screen.width <= 1199) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) + 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
else if (window.screen.width >= 1200) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) + 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
}
function Contact_bton(event) {
setinscritpion("2");
if (window.screen.width < 601) {
//document.getElementById('mob_block_cross_sell_cat').style.display = "none";
var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height;
var sticky_div_hilight_top = "1300";
var new_meme_orga_top = parseInt(meme_orga_top) + 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900;
var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) + 900;
document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px";
document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px";
document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px";
window.scrollTo(0, 500);
}
else if (window.screen.width >= 601 && window.screen.width <= 991) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) + 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 900;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
else if (window.screen.width >= 992 && window.screen.width <= 1199) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) + 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
else if (window.screen.width >= 1200) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) + 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) + 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
else {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
}
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", classId);
form.append("token", stored_partner);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/";
axios.post(myurl, form).then(res => {
//console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status);
// console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message);
if (String(res.data.status) === String("true")) {
//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 handleAccountCreation = () => {
history.push("/create_account")
};
const handleAccountConnexion = () => {
history.push("/Connexion")
};
function handleAccountLogout() {
if (String(userconnected) === String("1")) {
user_logout();
}
else if (String(partnerconnected) === String("1")) {
part_logout();
}
}
function part_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
setCookie_part("tokenmysypart", "", { path: '/' });
}
history.push("/recherche-formation");
}
function part_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (pro)',
buttons: [
{
label: 'Oui',
onClick: () => part_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Oui',
onClick: () => user_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
function Close_info_form() {
setinscritpion();
document.getElementById('mob_block_cross_sell_cat').style.display = "flex";
if (window.screen.width < 601) {
var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height;
var sticky_div_hilight_top = document.getElementById('sticky_div_hilight_pave').style.top;
var new_meme_orga_top = parseInt(meme_orga_top) - 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) - 900;
document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px";
document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px";
document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px";
}
else if (window.screen.width >= 601 && window.screen.width <= 991) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) - 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
else if (window.screen.width >= 992 && window.screen.width <= 1199) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) - 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
else if (window.screen.width >= 1200) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) - 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
function Close_inscrip_form() {
setinscritpion();
document.getElementById('mob_block_cross_sell_cat').style.display = "flex";
if (window.screen.width < 601) {
var meme_orga_top = document.getElementById('mob_block_cross_sell_cat').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('mobile').style.height;
var sticky_div_hilight_top = document.getElementById('sticky_div_hilight_pave').style.top;
var new_meme_orga_top = parseInt(meme_orga_top) - 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
var new_sticky_div_hilight_top = parseInt(sticky_div_hilight_top) - 900;
document.getElementById('mob_block_cross_sell_cat').style.top = new_meme_orga_top + "px";
document.getElementById('mobile').style.height = new_displaydetailclass_new_v2_hei + "px";
document.getElementById('sticky_div_hilight_pave').style.top = new_sticky_div_hilight_top + "px";
}
else if (window.screen.width >= 601 && window.screen.width <= 991) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) - 900;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 900;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
else if (window.screen.width >= 992 && window.screen.width <= 1199) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) - 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
else if (window.screen.width >= 1200) {
var meme_orga_top = document.getElementById('block_crossell_meme_orga').style.top;
var displaydetailclass_new_v2_hei = document.getElementById('desktop').style.height;
var new_meme_orga_top = parseInt(meme_orga_top) - 500;
var new_displaydetailclass_new_v2_hei = parseInt(displaydetailclass_new_v2_hei) - 500;
document.getElementById('block_crossell_meme_orga').style.top = new_meme_orga_top + "px";
document.getElementById('desktop').style.height = new_displaydetailclass_new_v2_hei + "px";
}
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
const [expanded, setExpanded] = React.useState(false);
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
/// ----
return (
<div className="displaydetailclass_new_v2">
<div className="mobile">
<div style={{ "display": "flex", "flexDirection": "column", }}>
<div className="displaydetailclass_new_v2" id="mobile"
style={{
"background": "#F7F7F7", "width": "100%",
"display": "flex", "flexDirection": "column", "minHeight": "100vh",
}}>
<Helmet>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
<meta name="title" content={DetailTraining["title"]} />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/" + `${DetailTraining["internal_url"]}`} />
<title> {`${DetailTraining["title"]}`} </title>
</Helmet>
<Header />
{String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" && <div className="mob_img">
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="mob_training_img" />}
</div>}
{String(ismetiermanaged) === "0" && <div className="mob_img">
<img src={img_met_autre} alt="autre" className="mob_training_img" />
</div>}
{String(ismetiermanaged) === "1" && <div className="mob_img">
<img src={DetailTraining.img_url} alt="autre" className="mob_training_img" />
</div>}
<div className="mob_block_content">
<div className="mob_block_content_rating">
<Rating name="half-rating-reade"
precision={0.5}
value={ratingvalue}
readOnly={true}
/>
</div>
<div className="mob_block_content_title">
{DetailTraining["title"]}
</div>
<div className="mob_tag_cpf">
<div className="mob_tag_cpf_txt">
{DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" &&
"Éligible au CPF"}
{!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" &&
"NON Éligible au CPF"}
</div>
</div>
</div>
{String(DetailTraining["price"]) && String(DetailTraining["price"]) === String("0") &&
<div className="mob_price">Gratuit
</div>
}
{String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && String(DetailTraining["price"]) === String("0") && (!DetailTraining.business_prices || Object.keys(DetailTraining.business_prices).length <= 0)
&& DetailTraining["price"] &&
<div className="mob_price">
{String(DetailTraining["price"])} HT
</div>}
{String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && DetailTraining.business_prices && Object.keys(DetailTraining.business_prices).length > 0
&& DetailTraining["price"] && <div className="mob_price">
<nav className="discounted_price">{String(DetailTraining.business_prices[0].discounted_price)} HT</nav>
<nav className="training_price_barre"> {String(DetailTraining["price"])} HT </nav>
<nav className="discount_block"> (- {String(DetailTraining.business_prices[0].discount)} % ) </nav>
</div>}
{String(action).toLowerCase() !== "information" && String(action).toLowerCase() !== "inscription" &&
<div className="mob_cats">
<div className="mob_cats_bton_inscr" onClick={Inscription_bton}>
<div className="mob_cats_bton_inscr_txt">
M'inscrire
</div>
</div>
<div className="mob_cats_bton_info" onClick={Contact_bton}>
<div className="mob_cats_bton_info_txt">
M'informer sur la formation
</div>
</div>
</div>}
<div className="mob_caracteristic">
<div className="mob_caracteristic_title">
Caractéristiques :
</div>
<div className="mob_caracteristic_list">
<ul style={{ "width": "80%" }}>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
A Distance :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "}
</div>
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Présentiel :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
</div>
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Durée :
</div>
{String(DetailTraining["duration_unit"]) !== "user_rythme" &&
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]} (s)
</div>
}
{String(DetailTraining["duration_unit"]) === "user_rythme" &&
<div className="mob_caracteristic_list_title_desc_desc">
A votre rythme
</div>
}
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Certification :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && " Non "
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && " Oui "
}
</div>
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Support :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining["support"] && <nav> {DetailTraining["support"]} </nav>}
{!DetailTraining["support"] && "Non précisé"}
</div>
</div>
</li>
</ul>
</div>
</div>
<div className="mob_block_social_icon">
<div className="mob_block_social_icon_RS">
<SocialIcon network="facebook" className="mob_social_icone_SocialIcon" />
</div>
<div className="mob_block_social_icon_RS">
<SocialIcon network="linkedin" className="mob_social_icone_SocialIcon" />
</div>
<div className="mob_block_social_icon_RS">
<SocialIcon network="twitter" className="mob_social_icone_SocialIcon" />
</div>
</div>
<div className="mob_block_organisme_ftion" id="mob_block_organisme_ftion">
<div className="mob_block_organisme_ftion_orga">
Organisme de formation
</div>
<div className="mob_block_organisme_ftion_link">
{partnair_name && <nav
style={{ "cursor": "pointer" }}
onClick={(e) => {
e.preventDefault();
window.open(
website_partenaire,
'_blank'
);
}}
> {partnair_name} </nav>}
</div>
</div>
<div className="mob_info_page" id="mob_info_page">
<div className="mob_info_page_title_desc">
{String(inscritpion) === "2" && <div>
<Inscription internal_url={DetailTraining["internal_url"]} action="information"
Close_info_form={Close_info_form} trainig_price={class_sales_price} />
</div>
}
{String(inscritpion) === "1" && <div className="description detail_element">
<Inscription internal_url={DetailTraining["internal_url"]} action="inscription"
Close_info_form={Close_inscrip_form} trainig_price={class_sales_price} />
</div>
}
<div className="mob_info_page_title_desc_title">
Description
</div>
<div className="mob_info_page_title_desc_desc description_block">
{parse(String(DetailTraining["description"]))}
</div>
</div>
{GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<div className="mob_info_page_title_desc">
<div className="mob_info_page_title_desc_title">
Les sessions
</div>
<div className="mob_info_page_title_desc_desc session_block">
<ul style={{ "width": "100%" }}>
{GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => (
<li style={{ "height": "2.8rem" }}>
{(JSON.parse(formation).session_ondemande) && (JSON.parse(formation).session_ondemande) === "1" && <nav> Sessions de formation à la demande</nav>}
{(!(JSON.parse(formation).session_ondemande) || (JSON.parse(formation).session_ondemande) === "0") && <nav>
{(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
(JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
{(JSON.parse(formation).date_debut).substring(0, 10)} au
{(JSON.parse(formation).date_fin).substring(0, 10)} <b> A Distance</b> et <b>En Présentiel </b>- {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>
}
{(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
(JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
Le &nbsp;
{(JSON.parse(formation).date_fin).substring(0, 10)} <b> A Distance</b> et <b>En Présentiel </b>- {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>
}
{(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
{(JSON.parse(formation).date_debut).substring(0, 10)} au
{(JSON.parse(formation).date_fin).substring(0, 10)} <b>A Distance </b> </nav>
}
{(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
Le &nbsp;
{(JSON.parse(formation).date_fin).substring(0, 10)} <b>A Distance </b> </nav>
}
{(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
{(JSON.parse(formation).date_debut).substring(0, 10)}&nbsp; au&nbsp;{(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
{(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>}
{(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
Le &nbsp; {(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
{(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>}
</nav>}
</li>
))}
</ul>
</div>
</div>}
<div className="mob_info_page_title_desc">
<div className="mob_info_page_title_desc_title">
Objectif
</div>
{DetailTraining["objectif"] && <div className="mob_info_page_title_desc_desc objectif_block">
{parse(String(DetailTraining["objectif"]))}
</div>
}
</div>
<div className="mob_info_page_title_desc_long_txt">
<div className="mob_info_page_title_desc_title">
Programme
</div>
{DetailTraining["programme"] && <div className="mob_info_page_title_desc_desc programme_block">
{parse(String(DetailTraining["programme"]))}sticky_div_hilight
</div>
}
</div>
{DetailTraining["pourqui"] && <div className="mob_info_page_title_desc_long_txt">
<div className="mob_info_page_title_desc_title">
Pour Qui ?
</div>
{DetailTraining["pourqui"] && <div className="mob_info_page_title_desc_desc pourqui_block">
{parse(String(DetailTraining["pourqui"]))}
</div>
}
</div>}
{<div className="sticky_div_hilight" id="sticky_div_hilight_pave">
{String(isqualiopi) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Qualiopi.jpg" alt="Qualiopi" className="img_hili" />
</div>}
{String(isdatadock) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Datadock.jpg" alt="DataDock" className="img_hili" />
</div>}
{String(iscertitrace) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Certitrace.jpg" alt="Certitrace" className="img_hili" />
</div>}
{String(isbureaucertitrace) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Bureau_Certitrace.jpg" alt="Certitrace" className="img_hili" />
</div>}
{String(iscertifvoltaire) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_CertifVoltaire.gif" alt="Certitrace" className="img_hili" />
</div>}
</div>}
</div>
<div className="mob_block_cross_sell_cat" id="mob_block_cross_sell_cat">
<div className="mob_block_sous_cross_sell" id="mob_block_sous_cross_sell">
{associatedtraining_message && associatedtraining_message.length > 0 &&
<div className="mob_block_sous_cross_sell_title">
Cela pourrait au ssi vous intéresser :
</div>}
<div className="mob_cross_sell_list_card">
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.slice(0, 3).map((formation) => (
<div className="mob_cross_sell_list_card_card">
<div className="mob_cross_sell_card_img">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sport") &&
<img src={img_met_sport} alt="sport" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sante_nat") &&
<img src={img_met_sante_nat} alt="sante naturelle" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="mob_training_img_crossel" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="mob_training_img_crossel" />}
</div>
<div className="mob_cross_sell_card_tag_cpf">
<div className="mob_cross_sell_card_tag_cpf_txt">
{JSON.parse(formation).cpf && (String(JSON.parse(formation).cpf)) === "1" &&
"Éligible au CPF"}
{!JSON.parse(formation).cpf || String(JSON.parse(formation).cpf) !== "1" &&
"NON Éligible au CPF"}
</div>
</div>
<div className="mob_cross_sell_card_content">
<div className="mob_cross_sell_card_content_rating">
{JSON.parse(formation).note && String(JSON.parse(formation).note).length === 1 &&
parseInt(String(JSON.parse(formation).note)) <= 5 &&
<Rating name="half-rating-reade"
precision={0.5}
readOnly={true}
value={(String(JSON.parse(formation).note))}
/>}
</div>
<div className="mob_cross_sell_card_content_title">
{parse(String(JSON.parse(formation).title))}
</div>
{JSON.parse(formation).price && <div className="mob_cross_sell_card_content_price">
{(String(JSON.parse(formation).price))} HT
</div>}
</div>
<div className="mob_cross_sell_card_content_cat">
<div className="mob_cross_sell_card_content_cat_bton_detail" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_self'
);
}}>
<div className="mob_cross_sell_card_content_cat_bton_detail_txt">
Voir les détails
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div style={{ "width": "100%", "position": "relative" }} >
<Footer />
</div>
</div>
</div>
<div className="desktop">
<div style={{ "display": "flex", "flexDirection": "column", }}>
<div className="displaydetailclass_new_v2" id="desktop" style={{
"background": "#F7F7F7", "minHeight": "100vh",
"width": "100%", "display": "flex", "flexDirection": "column",
}}>
<Helmet>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
<meta name="title" content={DetailTraining["title"]} />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/" + `${DetailTraining["internal_url"]}`} />
<title> {`${DetailTraining["title"]}`} </title>
</Helmet>
<Header />
<div className="block_header_menu">
<div className="header_menu">
<a href={process.env.REACT_APP_BASE_URL} style={{ "textDecoration": "none" }}>
<div className="hader_menu_logo_mysy">
<img className="logo_mysy" src={mysy_logo2} alt="MySy Training Technology" />
<nav className="training">TRAINING</nav>
</div>
</a>
<div className="menu_header">
<div className="menu_header_menu" onClick={(e) => { history.push("/") }}>
<FaSearch /> &nbsp; Les formations
</div>
{/* <div className="menu_header_menu" onClick={(e) => { history.push("/Recherche-Article-formation") }}>
Le blog
</div> */}
<div className="menu_header_menu" onClick={(e) => { history.push("/QuiSommesNous") }}>
Qui Sommes nous?
</div>
<div className="menu_header_menu" onClick={(e) => { history.push("/Produits-Services") }}>
Nos Services
</div>
<div className="menu_header_rectangle">
</div>
<div className="menu_header_cat">
<div className="menu_header_cat_buton_inscr">
<div className="menu_header_cat_buton_inscr_box">
</div>
<div className="menu_header_cat_buton_inscr_txt">
{String(someoneconnected) !== String("1") && <nav className="cta2">
<nav className="minscrire">
<div className="minscrire" onClick={handleAccountCreation}>
Minscrire
</div>
</nav>
</nav>}
</div>
</div>
<div className="menu_header_cat_buton_connex">
<div className="menu_header_cat_buton_connex_box">
</div>
<div className="menu_header_cat_buton_connex_txt">
{String(someoneconnected) !== String("1") && <nav className="meconnecter" onClick={handleAccountConnexion}>
Me connecter
</nav>}
{String(someoneconnected) === String("1") && <nav className="meconnecter" onClick={handleAccountLogout}>
Me deconnecter
</nav>}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="block_sous_header">
<div className="block_sous_header_rate_title">
<div className="rating">
{ratingvalue && String(ratingvalue).length === 1 &&
parseInt(String(ratingvalue)) <= 5 &&
<Rating name="half-rating-reade"
readOnly={true}
precision={0.5}
value={ratingvalue}
/>}
</div>
<div className="sous_header_title">
{DetailTraining["title"]}
</div>
<div className="block_sous_header_tag">
<div className="block_sous_header_tag_cpf">
{DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" &&
"Éligible au CPF"}
{!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" &&
"NON Éligible au CPF"}
</div>
</div>
</div>
</div>
<div className="block_info_page" id="block_info_page">
{String(inscritpion) === "1" && <div className="description detail_element">
<Inscription internal_url={DetailTraining["internal_url"]} action="inscription"
Close_info_form={Close_info_form} trainig_price={class_sales_price} />
</div>
}
{String(inscritpion) === "2" && <div className="description detail_element">
<Inscription internal_url={DetailTraining["internal_url"]} action="information"
Close_info_form={Close_inscrip_form} trainig_price={class_sales_price} />
</div>
}
{(String(action).toLocaleLowerCase() === "inscription" || String(action).toLocaleLowerCase() === "information")
&& String(action).toLocaleLowerCase() !== "evaluation"
&& <div className="description detail_element" name='section_info'>
<Inscription internal_url={classId} action={action} trainig_price={class_sales_price} />
</div>
}
{String(action).toLocaleLowerCase() !== "inscription" && String(action).toLocaleLowerCase() !== "information" && String(tokenEval_api) === "true"
&& <div className="description detail_element" name='section_info'>
<Inscription internal_url={classId} action={"evaluation"} eval_token={action} />
</div>
}
<div className="block_info_page_pave_title_desc">
<div className="block_info_page_pave_title_desc_title">
Description
</div>
{DetailTraining["description"] && <div className="block_info_page_pave_title_desc description_block">
{parse(String(DetailTraining["description"]))}
</div>
}
</div>
{GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<div className="block_info_page_pave_title_desc">
<div className="block_info_page_pave_title_desc_title">
Les sessions
</div>
<div className="block_info_page_pave_title_desc_desc session_block">
<ul style={{ "width": "100%" }}>
{GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => (
<li style={{ "height": "2.8rem" }}>
{(JSON.parse(formation).session_ondemande) && (JSON.parse(formation).session_ondemande) === "1" && <nav> Sessions de formation à la demande</nav>}
{(!(JSON.parse(formation).session_ondemande) || (JSON.parse(formation).session_ondemande) === "0") && <nav>
{(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
(JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
{(JSON.parse(formation).date_debut).substring(0, 10)}&nbsp; au&nbsp;
{(JSON.parse(formation).date_fin).substring(0, 10)} <b> A Distance</b> et <b>En Présentiel </b>- {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>
}
{(JSON.parse(formation).distantiel) === "1" && (JSON.parse(formation).presentiel) === "1" &&
(JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
Le &nbsp;
{(JSON.parse(formation).date_fin).substring(0, 10)} <b> A Distance</b> et <b>En Présentiel </b>- {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>
}
{(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
{(JSON.parse(formation).date_debut).substring(0, 10)}&nbsp; au&nbsp;
{(JSON.parse(formation).date_fin).substring(0, 10)} <b>A Distance </b> </nav>
}
{(JSON.parse(formation).distantiel) === "1" && ((JSON.parse(formation).presentiel) === "0" || !(JSON.parse(formation).presentiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
Le &nbsp;
{(JSON.parse(formation).date_fin).substring(0, 10)} <b>A Distance </b> </nav>
}
{(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) !== (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
{(JSON.parse(formation).date_debut).substring(0, 10)}&nbsp; au&nbsp;{(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
{(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>}
{(JSON.parse(formation).presentiel) === "1" && ((JSON.parse(formation).distantiel) === "0" || !(JSON.parse(formation).distantiel)) &&
(JSON.parse(formation).date_debut).substring(0, 10) === (JSON.parse(formation).date_fin).substring(0, 10) &&
<nav>
Le &nbsp; {(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
{(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</nav>}
</nav>}
</li>
))}
</ul>
</div>
</div>
}
<div className="block_info_page_pave_title_desc">
<div className="block_info_page_pave_title_desc_title">
Objectif
</div>
{DetailTraining["objectif"] && <div className="block_info_page_pave_title_desc_desc objectif_block">
{parse(String(DetailTraining["objectif"]))}
</div>
}
</div>
<div className="block_info_page_pave_title_desc_long_text" >
<div className="block_info_page_pave_title_desc_title">
Programme
</div>
{DetailTraining["programme"] && <div className="block_info_page_pave_title_desc_desc programme_block">
{parse(String(DetailTraining["programme"]))}
</div>
}
</div>
{DetailTraining["tab_ue_detail_data"] && < div className="block_info_page_pave_title_desc_long_text" >
<div className="block_info_page_pave_title_desc_title">
Modules
</div>
{DetailTraining["tab_ue_detail_data"] && <div>
<div>
{DetailTraining["tab_ue_detail_data"] && DetailTraining["tab_ue_detail_data"].map((val) => (
<div>
<Accordion expanded={expanded === val._id} onChange={handleChange(val._id)}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={val._id}
id={val._id}
>
<Typography sx={{ width: '33%', flexShrink: 0 }}>{val.code}</Typography>
<Typography sx={{ color: 'text.secondary' }}>
{val.titre}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
{parse(String(val.description).replace(/(<([^>]+)>)/ig, ''))}
</Typography>
</AccordionDetails>
</Accordion>
</div>
))}
</div>
</div>}
</div>}
{DetailTraining["pourqui"] && String(DetailTraining["pourqui"]).length > 2 && <div className="block_info_page_pave_title_desc_long_text">
<div className="block_info_page_pave_title_desc_title ">
Pour Qui ?
</div>
{DetailTraining["pourqui"] && <div className="block_info_page_pave_title_desc_desc pourqui_block">
{parse(String(DetailTraining["pourqui"]))}
</div>
}
</div>}
{DetailTraining["plus_produit"] && String(DetailTraining["plus_produit"]).length > 2 && <div className="block_info_page_pave_title_desc_long_text">
<div className="block_info_page_pave_title_desc_title ">
Points forts
</div>
{DetailTraining["plus_produit"] && <div className="block_info_page_pave_title_desc_desc objectif_block">
{parse(String(DetailTraining["plus_produit"]))}
</div>
}
</div>}
</div>
<div className="block_sticky_info">
{String(DetailTraining["price"]) && String(DetailTraining["price"]) === String("0") &&
<div className="block_sticky_info_price">Gratuit
</div>
}
{String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && (!DetailTraining.business_prices || Object.keys(DetailTraining.business_prices).length <= 0)
&& DetailTraining["price"] && <div className="block_sticky_info_price"> {String(DetailTraining["price"])} HT </div>}
{String(DetailTraining["price"]) && String(DetailTraining["price"]) !== String("0") && DetailTraining.business_prices && Object.keys(DetailTraining.business_prices).length > 0
&& DetailTraining["price"] && <div className="block_sticky_info_price">
<nav className="discounted_price">{String(DetailTraining.business_prices[0].discounted_price)} HT</nav>
<nav className="training_price_barre"> {String(DetailTraining["price"])} HT </nav>
<nav className="discount_block"> (- {String(DetailTraining.business_prices[0].discount)} % ) </nav>
</div>}
{class_img_stored_in_bdd && String(class_img_stored_in_bdd).length > 50 && <div className="block_sticky_info_img">
<img src={class_img_stored_in_bdd} className="training_img" />
</div>
}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) !== "0" && String(ismetiermanaged) !== "1" && <div className="block_sticky_info_img">
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("sport") &&
<img src={img_met_sport} alt="sport" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("sante_nat") &&
<img src={img_met_sante_nat} alt="sante naturelle" className="training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
</div>}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "0" && <div className="block_sticky_info_img">
<img src={img_met_autre} alt="autre" className="training_img" />
</div>}
{(!class_img_stored_in_bdd || String(class_img_stored_in_bdd).length < 50) && String(ismetiermanaged) === "1" && <div className="">
<img src={DetailTraining.img_url} alt="autre" className="" style={{ "maxWidth": "100%" }} />
</div>}
<div className="block_sticky_info_caracteristique">
<div className="block_sticky_info_caracteristique_title"> Caractéristiques : </div>
<div className="block_sticky_info_caracteristique_list">
<ul style={{ "width": "100%" }}>
<li>
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Durée :
</div>
{String(DetailTraining["duration_unit"]) !== "user_rythme" &&
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]} (s)
</div>
}
{String(DetailTraining["duration_unit"]) === "user_rythme" &&
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
A votre rythme
</div>
}
</div>
</li>
<li>
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Certification :
</div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && <div>
Non &nbsp; </div>
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
Oui &nbsp; </div>
}
</div>
</div>
</li>
<li>
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Distanciel :
</div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
</div>
</li>
<li>
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Presentiel :
</div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
</div>
</li>
<li>
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Support :
</div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
{DetailTraining["support"] && <div>
{DetailTraining["support"]} &nbsp; </div>
}
{!DetailTraining["support"] && <div>
Non précisé &nbsp; </div>
}
</div>
</div>
</li>
</ul>
<hr style={{ "width": "100%" }} />
</div>
</div>
{/*GetCurrentClass_result && GetCurrentClass_result.length > 0 && <div className="block_sticky_info_Sessions">
<div className="block_sticky_info_Sessions_title">
Les sessions :
</div>
<div className="block_sticky_info_Sessions_list">
<ul style={{ "width": "100%" }}>
{GetCurrentClass_result && GetCurrentClass_result.slice(0, 3).map((formation) => (
<li>
<div className="block_sticky_info_Sessions_list_title_desc">
<div className="block_sticky_info_Sessions_list_title_desc_title">
{(JSON.parse(formation).date_debut).substring(0, 10)}&nbsp; au&nbsp;{(JSON.parse(formation).date_fin).substring(0, 10)}
</div>
<div className="block_sticky_info_Sessions_list_title_desc_desc">
{(JSON.parse(formation).distantiel) === "1" && " A Distance - "}
{(JSON.parse(formation).presentiel) === "1" && " En Présentiel - "}
{(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)}
</div>
</div>
</li>
))}
</ul>
</div>
</div>*/}
{String(action).toLowerCase() !== "information" && String(action).toLowerCase() !== "inscription" && <div className="sticky_cats">
<div className="sticky_cats_buton_inscrire" onClick={Inscription_bton}>
<div className="sticky_cats_buton_inscrire_box" > </div>
<div className="sticky_cats_buton_inscrire_txt" >Minscrire </div>
</div>
<div className="sticky_cats_buton_info" onClick={Contact_bton}>
<div className="sticky_cats_buton_info_box"> </div>
<div className="sticky_cats_buton_info_txt" > Minformer sur la formation</div>
</div>
</div>}
<div className="sticky_div_hilight">
{String(isqualiopi) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Qualiopi.jpg" alt="Qualiopi" className="img_hili" />
</div>}
{String(isdatadock) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Datadock.jpg" alt="DataDock" className="img_hili" />
</div>}
{String(iscertitrace) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Certitrace.jpg" alt="Certitrace" className="img_hili" />
</div>}
{String(isbureaucertitrace) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_Bureau_Certitrace.jpg" alt="Bureau Certitrace" className="img_hili" />
</div>}
{String(iscertifvoltaire) === "1" && <div className="sticky_img_hilight1">
<img src="https://img.mysy-training.com/certificat_img/IMG_CertifVoltaire.gif" alt="Certitrace" className="img_hili" />
</div>}
</div>
<div className="sticky_social_icone">
<div className="sticky_social_icone_facebook">
<SocialIcon network="facebook" className="sticky_social_icone_SocialIcon" />
</div>
<div className="sticky_social_icone_link">
<SocialIcon network="linkedin" className="sticky_social_icone_SocialIcon" />
</div>
<div className="sticky_social_icone_twitter">
<SocialIcon network="twitter" className="sticky_social_icone_SocialIcon" />
</div>
</div>
<div className="sticky_organisme_title_desc">
<div className="sticky_organisme_title_desc_title">
Organisme de formation
</div>
<div className="sticky_organisme_title_desc_desc">
{partnair_name && <nav
style={{ "cursor": "pointer" }}
onClick={(e) => {
e.preventDefault();
window.open(
website_partenaire,
'_blank'
);
}}
> {partnair_name} </nav>}
</div>
</div>
</div>
<div className="block_crossell_meme_orga" id="block_crossell_meme_orga">
<div className="sous_crossell">
{associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.length > 0 &&
<div className="sous_crossell_title"> Cela pourrait au ssi vous intéresser</div>}
<div className="sous_crossell_list_card">
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.slice(0, 3).map((formation) => (
<div className="sous_crossell_list_card_card">
<div className="sous_crossell_list_card_card_img">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sport") &&
<img src={img_met_sport} alt="sport" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("sante_nat") &&
<img src={img_met_sante_nat} alt="sante naturelle" className="training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img_crossel" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img_crossel" />}
</div>
<div className="sous_crossell_list_card_card_tag_cpf">
<div className="sous_crossell_list_card_card_tag_cpf_txt">
{JSON.parse(formation).cpf && (String(JSON.parse(formation).cpf)) === "1" &&
"Éligible au CPF"}
{!JSON.parse(formation).cpf || String(JSON.parse(formation).cpf) !== "1" &&
"NON Éligible au CPF"}
</div>
</div>
<div className="sous_crossell_list_card_card_content">
<div className="sous_crossell_list_card_card_content_rating">
{JSON.parse(formation).note && String(JSON.parse(formation).note).length === 1 &&
parseInt(String(JSON.parse(formation).note)) <= 5 &&
<Rating name="half-rating-reade"
readOnly={true}
precision={0.5}
value={(String(JSON.parse(formation).note))}
/>}
</div>
<div className="sous_crossell_list_card_card_content_title"> {parse(String(JSON.parse(formation).title)).substring(0, 50)}
</div>
{JSON.parse(formation).price && <div className="sous_crossell_list_card_card_content_price">
{(String(JSON.parse(formation).price))} HT
</div>}
<div className="sous_crossell_list_card_card_CAT">
<div className="sous_crossell_list_card_card_CAT_bton" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_self'
);
}}>
<div className="sous_crossell_list_card_card_CAT_bton_txt">
Voir les détails
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
{/*<div className="div_mobile">
<h1 className="h1_transparent">{`${DetailTraining["title"]}`}</h1>
<div className="left_box">
<div className="hilightsoustitre" > A voir au ssi</div>
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.map((formation) => (
<div className="autres_formations" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_blank'
);
}}>
<div className="forma_img_logo_class">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img" />}
</div>
<div >
<div className="vignet_title">
{parse(String(JSON.parse(formation).title))}
</div>
<div className="vignet_desc">
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
</div>
</div>
</div>
))}
</div>
<div className="right_box">
{DetailTraining["img_banner_detail_class"] && <div>
<img src={`${DetailTraining["img_banner_detail_class"]}`} className="img_bannermg_WOimg" />
<Button variant="contained" color="success"
className="bton_inscription"
onClick={Inscription_bton}
>
Je m'inscris
</Button> <br />
<Button variant="contained" color="success"
className="bton_recontact"
onClick={Contact_bton}
>
Une question ?
</Button>
</div>}
{(!DetailTraining["img_banner_detail_class"] || String(DetailTraining["img_banner_detail_class"]).length < 5) &&
<div className="img_banner">
<div className="text_surna"> &nbsp; </div>
<div className="row_inscription">
<Button variant="contained" color="success"
className="bton_inscription"
onClick={Inscription_bton}
>
Je m'inscris
</Button>
</div>
</div>}
{/*
/!\ important :
Certains partenaire ont leur propre système d'inscription.
Donc si le champs "myclass.class_inscription_url" existe et est valide, alors
on renvoi l'utilisateur vers ce lien.
Si non, on utilise le formumaire de mysy,.
* /}
{String(inscritpion) === "1" && <div className="description detail_element">
<Inscription internal_url={DetailTraining["internal_url"]} action="inscription" />
</div>
}
{String(inscritpion) === "2" && <div className="description detail_element">
<Inscription internal_url={DetailTraining["internal_url"]} action="information" />
</div>
}
<div className="titre_formation">
{parse(String(DetailTraining["title"]))}
</div>
<div className="description detail_element">
<b className="sous_titre">Descriptions </b> {DetailTraining["description"] &&
<p style={{ "fontSize": "smal", "marginTop": "0.3rem" }}>
{parse(String(DetailTraining["description"]))}
</p>}
</div>
{DetailTraining["objectif"] && <div className="description detail_element">
<b className="sous_titre">Objectif </b>
<p style={{ "fontSize": "smal", "marginTop": "0.3rem" }}>
{parse(String(DetailTraining["objectif"]))} &nbsp;
</p>
</div>}
<br />
{DetailTraining["prerequis"] && <div className="description detail_element">
<b className="sous_titre">Pré-requis </b> {DetailTraining["prerequis"] &&
<p style={{ "fontSize": "smal", "marginTop": "0.3rem" }}>
{parse(String(DetailTraining["prerequis"]))} &nbsp;
</p>}
{!DetailTraining["prerequis"] && <p style={{ "fontStyle": "italic" }}>
--- &nbsp;
</p>}
<br />
</div>}
{DetailTraining["pourqui"] && <div className="description detail_element">
<b className="sous_titre">Pour Qui </b> {DetailTraining["pourqui"] &&
<p style={{ "fontSize": "smal", "marginTop": "0.3rem" }}>
{parse(String(DetailTraining["pourqui"]))} &nbsp;
</p>}
{!DetailTraining["pourqui"] && <p style={{ "fontStyle": "italic" }}>
--- &nbsp;
</p>}
<br />
</div>}
{DetailTraining["programme"] && <div className="description detail_element">
<b className="sous_titre">Programme </b>
{DetailTraining["programme"] && <p style={{ "fontSize": "small", "marginTop": "0.3rem" }}>
{parse(String(DetailTraining["programme"]))} &nbsp;
</p>}
{!DetailTraining["programme"] && <p style={{ "fontStyle": "italic" }}>
--- &nbsp;
</p>}
<br />
</div>}
{DetailTraining["plus_produit"] && <div className="description detail_element">
<b className="sous_titre">Points forts </b>
{DetailTraining["plus_produit"] &&
<p style={{ "fontSize": "small", "marginTop": "0.3rem" }}>
{parse(String(DetailTraining["plus_produit"]))} &nbsp;
</p>}
<br />
</div>}
<div className="caracteristique">
Caracteristiques <br />
<hr style={{ "width": "20%", "textAlign": "center", "marginLeft": "auto", "marginRight": "auto" }} />
</div>
<div className="div_row">
<div className="div_row_critere">
<div className="div_row_critere_gauche"> Prix :
</div>
<div className="div_row_critere_droite">
{DetailTraining["price"]} €
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Durée :
</div>
<div className="div_row_critere_droite">
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Certification :
</div>
<div className="div_row_critere_droite">
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && <div>
Non &nbsp; </div>
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
Oui &nbsp; </div>
}
</div>
</div>
<div className="calage"> </div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Distanciel :
</div>
<div className="div_row_critere_droite">
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Presentiel :
</div>
<div className="div_row_critere_droite">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Support :
</div>
<div className="div_row_critere_droite">
{DetailTraining["support"] && <div>
{DetailTraining["support"]} &nbsp; </div>
}
{!DetailTraining["certif"] && <div>
Inconnu &nbsp; </div>
}
</div>
</div>
<div className="calage"> </div>
</div>
<div className="div_row">
<div className="div_row_critere_note">
<div className="div_row_critere_gauche" style={{ "paddingTop": "3px", "textAlign": "center", "width": "50%" }}> Note
</div>
<div className="div_row_critere_droite" style={{ "textAlign": "left", "width": "50%" }}>
<Rating name="half-rating-reade"
precision={0.5}
value={ratingvalue}
/>
</div>
</div>
</div>
<div className="div_row" style={{ "float": "left" }}> &nbsp; </div>
<div style={{ "textAlign": "left", "float": "left", "width": "99%" }}>
<Button variant="outlined" onClick={submenu_datelieu} className="detail_class_submenu" id='menu_datelieu' name='menu_datelieu'>Sessions</Button>
<Button variant="outlined" onClick={submenu_info} className="detail_class_submenu" id='menu_formateur' name='menu_formateur'>Formateur</Button>
<Button variant="outlined" onClick={submenu_divers} className="detail_class_submenu" id='menu_divers' name='menu_divers'>Divers</Button>
{/*<hr className="hr_height" />* /}
<div>
{String(submenu) === String("formateur") && <div className="detail_class_submenu_data">
{DetailTraining.trainer && <div>
<br />
{DetailTraining.trainer}
</div>}
{!DetailTraining.trainer && <div>
<br />
</div>}
</div>}
{String(submenu) === String("datelieu") && <div className="detail_class_submenu_data">
{GetCurrentClass_result && GetCurrentClass_result.map((formation) => (
<div>
{String(JSON.parse(formation).code_postal) === "0" &&
String(JSON.parse(formation).date_debut) === String(JSON.parse(formation).date_fin) && <nav>
Le {JSON.parse(formation).date_debut} En ligne
</nav>}
{String(JSON.parse(formation).code_postal) !== "0" && String(JSON.parse(formation).date_debut) === String(JSON.parse(formation).date_fin) &&
<nav>
Le {JSON.parse(formation).date_debut} ; &nbsp; au&nbsp; {JSON.parse(formation).adresse} , {JSON.parse(formation).ville} &nbsp; {JSON.parse(formation).code_postal}
</nav>}
{String(JSON.parse(formation).code_postal) === "0" && <nav> String( JSON.parse(formation).date_debut) !== String( JSON.parse(formation).date_fin) &&
Le {JSON.parse(formation).date_debut} ; En ligne
</nav>}
{String(JSON.parse(formation).code_postal) !== "0" && String(JSON.parse(formation).date_debut) !== String(JSON.parse(formation).date_fin) && <nav>
Du {JSON.parse(formation).date_debut}&nbsp; au&nbsp;{JSON.parse(formation).date_fin} ; &nbsp; au&nbsp; {JSON.parse(formation).adresse} , {JSON.parse(formation).ville} &nbsp; {JSON.parse(formation).code_postal}
</nav>}
</div>
))}
</div>}
{String(submenu) === String("divers") && <div className="detail_class_submenu_data">
</div>}
</div>
</div>
</div>
<div className="left_box_for_mobile">
<div className="hilightsoustitre" > A voir au ssi</div>
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.map((formation) => (
<div className="autres_formations" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_blank'
);
}}>
<div className="forma_img_logo_class">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img" />}
</div>
<div >
<div className="vignet_title">
{parse(String(JSON.parse(formation).title))}
</div>
<div className="vignet_desc">
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
</div>
</div>
</div>
))}
</div>
<div className="pieddepage">
<Footer />
</div>
</div>*/}
</div>
<div className="footer" id="footer">
<Footer />
</div>
</div>
</div>
</div >
)
}
export default DisplayDetailClass_new_v2;