2897 lines
114 KiB
JavaScript
2897 lines
114 KiB
JavaScript
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";
|
||
|
||
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(0, 0);
|
||
|
||
|
||
}, []);
|
||
|
||
|
||
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();
|
||
|
||
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 au 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));
|
||
|
||
|
||
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).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 au 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 au 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 au 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 au 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 au 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 au 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 au 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 au 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 = ');
|
||
//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(0, 0);
|
||
|
||
}
|
||
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(0, 0);
|
||
}
|
||
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(0, 0);
|
||
}
|
||
|
||
|
||
}
|
||
|
||
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(0, 0);
|
||
}
|
||
}
|
||
|
||
|
||
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);
|
||
|
||
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) === "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", "");
|
||
}
|
||
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: 'Yes',
|
||
onClick: () => user_logout_confirmation()
|
||
},
|
||
{
|
||
label: 'No',
|
||
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(0, 0);
|
||
|
||
}
|
||
|
||
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(0, 0);
|
||
|
||
}
|
||
|
||
|
||
/// ----
|
||
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)
|
||
&&
|
||
<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
|
||
&& <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"]} {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} />
|
||
|
||
</div>
|
||
}
|
||
{String(inscritpion) === "1" && <div className="description detail_element">
|
||
<Inscription internal_url={DetailTraining["internal_url"]} action="inscription"
|
||
Close_info_form={Close_inscrip_form} />
|
||
|
||
</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)} {(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
|
||
{(JSON.parse(formation).date_fin).substring(0, 10)} <b> A Distance</b> et <b>En Présentiel </b>- {(JSON.parse(formation).adresse)} {(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
|
||
{(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)} au {(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
|
||
{(JSON.parse(formation).adresse)} {(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 {(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
|
||
{(JSON.parse(formation).adresse)} {(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 /> 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("/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}>
|
||
M’inscrire
|
||
</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} />
|
||
</div>
|
||
|
||
}
|
||
|
||
{String(inscritpion) === "2" && <div className="description detail_element">
|
||
<Inscription internal_url={DetailTraining["internal_url"]} action="information"
|
||
Close_info_form={Close_inscrip_form} />
|
||
|
||
</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} />
|
||
</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)} au
|
||
{(JSON.parse(formation).date_fin).substring(0, 10)} <b> A Distance</b> et <b>En Présentiel </b>- {(JSON.parse(formation).adresse)} {(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
|
||
{(JSON.parse(formation).date_fin).substring(0, 10)} <b> A Distance</b> et <b>En Présentiel </b>- {(JSON.parse(formation).adresse)} {(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
|
||
{(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)} au {(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
|
||
{(JSON.parse(formation).adresse)} {(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 {(JSON.parse(formation).date_fin).substring(0, 10)} <b>En Présentiel </b> -
|
||
{(JSON.parse(formation).adresse)} {(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["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)
|
||
&& <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
|
||
&& <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>}
|
||
|
||
|
||
{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>}
|
||
|
||
{String(ismetiermanaged) === "0" && <div className="block_sticky_info_img">
|
||
<img src={img_met_autre} alt="autre" className="training_img" />
|
||
|
||
</div>}
|
||
|
||
{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"]} {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 </div>
|
||
}
|
||
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
|
||
|
||
Oui </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"]} </div>
|
||
}
|
||
{!DetailTraining["support"] && <div>
|
||
|
||
Non précisé </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)} au {(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)} {(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" >M’inscrire </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" > M’informer 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"> </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"]))}
|
||
</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"]))}
|
||
</p>}
|
||
{!DetailTraining["prerequis"] && <p style={{ "fontStyle": "italic" }}>
|
||
---
|
||
</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"]))}
|
||
</p>}
|
||
{!DetailTraining["pourqui"] && <p style={{ "fontStyle": "italic" }}>
|
||
---
|
||
</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"]))}
|
||
</p>}
|
||
{!DetailTraining["programme"] && <p style={{ "fontStyle": "italic" }}>
|
||
---
|
||
</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"]))}
|
||
</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"]} {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 </div>
|
||
}
|
||
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
|
||
|
||
Oui </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"]} </div>
|
||
}
|
||
{!DetailTraining["certif"] && <div>
|
||
|
||
Inconnu </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" }}> </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} ; au {JSON.parse(formation).adresse} , {JSON.parse(formation).ville} {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} au {JSON.parse(formation).date_fin} ; au {JSON.parse(formation).adresse} , {JSON.parse(formation).ville} {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; |