import React, { useState, useEffect, useRef } from "react"; import { useForm } from "react-hook-form"; import { getCookie, setCookie } from 'react-use-cookie'; import Box from '@mui/material/Box'; import InputLabel from '@mui/material/InputLabel'; import InputAdornment from '@mui/material/InputAdornment'; import FormControl from '@mui/material/FormControl'; import TextField from '@mui/material/TextField'; import AccountCircle from '@mui/icons-material/AccountCircle'; import PhoneIcon from '@mui/icons-material/Phone' import HomeWorkIcon from '@mui/icons-material/HomeWork'; import AssignmentSharpIcon from '@mui/icons-material/AssignmentSharp'; import EmailIcon from '@mui/icons-material/Email' import HomeIcon from '@mui/icons-material/Home' import { Button, Form, FormGroup, Label } from "reactstrap"; import PasswordIcon from '@mui/icons-material/Password' import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import IconButton from '@mui/material/IconButton'; import OutlinedInput from '@mui/material/OutlinedInput'; import { useHistory } from "react-router-dom"; import TwitterIcon from '@mui/icons-material/Twitter'; import FacebookIcon from '@mui/icons-material/Facebook'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import axios from "axios"; import MenuItem from '@mui/material/MenuItem'; import { Redirect } from 'react-router-dom' import { Editor } from '@tinymce/tinymce-react'; import SendIcon from '@mui/icons-material/Send'; import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5"; import Rating from '@mui/material/Rating'; import parse from 'html-react-parser' function Inscription_Information(props) { const [action, setaction] = useState(props.action); const [class_internal_url, setclass_internal_url] = useState(props.internal_url); ; const modefinancement = [ { value: 'cpf', label: 'CPF', }, { value: 'perso', label: 'Fonds Propres', }, { value: 'entreprise', label: 'Votre entreprise', }, { value: 'mixte_cpf_perso', label: 'CPF & Fonds Propres', }, { value: 'autre', label: 'Autre', }, ]; const opco = [ { value: 'opco Paris', label: 'paris', }, { value: 'opco Nanterre', label: 'Nanterre', }, { value: 'inconnu', label: 'inconnu', }, ]; const [myopco, setmyopco] = useState(""); function handleChangeOpco(event) { setmyopco(event.target.value); }; const [mysession, setmysession] = useState(""); const [monfinancement, setmonfinancement] = useState(""); function handleChangeSession(event) { setmysession(event.target.value); }; function handleChangeFinancement(event) { setmonfinancement(event.target.value); }; const [RecordData_api, setRecordData_api] = useState(""); const [RecordData_status, setRecordData_status] = useState(""); const [RecordData_message, setRecordData_message] = useState(""); function RecordData() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/AddStagiairetoClass/"; var nom = document.getElementsByName("nom")[0].value; if (String(nom).trim().length <= 0) { document.getElementsByName("nom")[0].style.borderColor = "red"; alert(" Le nom d'utilisateur est obligatoire 3"); return; } var prenom = document.getElementsByName("prenom")[0].value; if (String(prenom).trim().length <= 0) { document.getElementsByName("telephone")[0].style.borderColor = "red"; alert(" Le prenom d'utilisateur est obligatoire "); return; } var telephone = document.getElementsByName("telephone")[0].value; if (String(telephone).trim().length < 10) { document.getElementsByName("telephone")[0].style.borderColor = "red"; alert(" Le numero de telephone doit comporter 10 chiffres "); return; } var email = document.getElementsByName("email")[0].value; var re2 = /\S+@\S+\.\S+/; if (re2.test(email) === false) { alert("L'email est incorrect "); document.getElementsByName("email")[0].style.borderColor = "red"; return; } var modefinancement = document.getElementById('modefinancement').value; if (String(modefinancement).trim().length <= 0) { alert("Vous devez choisir une mode de financement "); return; } var opco = "inconnu" if (document.getElementById('opco') && document.getElementById('opco').value) { opco = document.getElementById('opco').value; if (String(opco).trim().length <= 0) { alert("Vous devez choisir un centre Opco "); return; } } var session = mysession; if (String(nom).trim().length <= 0) { alert(" Le nom d'utilisateur est obligatoire 2 "); return; } var employeur = "" if (document.getElementById('employeur') && document.getElementById('employeur').value) { employeur = document.getElementById('employeur').value; } // var class_internal_url = document.getElementsByName("adr_country")[0].value; formData.append('nom', nom); formData.append('employeur', employeur); formData.append('prenom', prenom); formData.append('telephone', telephone); formData.append('email', email); formData.append('modefinancement', modefinancement); formData.append('opco', opco); formData.append('session_id', session); formData.append('class_internal_url', props.internal_url); formData.append('price', props.trainig_price); /* Ceci est une preinscription faite par un end user, depuis le font, donc on force le 'status' à 0 (0 = préinscription)*/ formData.append('status', '0'); /* Update du 22/10/2023 - Gestion des champs spécifiques ajoutés par le partenaire */ for (let i = 0; i < spec_field_updated_values_hooks.length; i++) { if (String(spec_field_updated_values_hooks[i].field_name) === "float") { } else if (String(spec_field_updated_values_hooks[i].field_name) === "string") { } formData.append(String(spec_field_updated_values_hooks[i].field_name), String(spec_field_updated_values_hooks[i].field_value)); } fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message'], "result['status'] = ", result['status']); setRecordData_api(result['status']); setRecordData_status(result['status']); setRecordData_message(result['message']); }) .catch((error) => { console.error('Error:', error); setRecordData_api("false"); setRecordData_status("false"); setRecordData_message(); }); }; const [GetListOpco_api, setGetListOpco_api] = useState(); const [GetListOpco_message, setGetListOpco_message] = useState(); const [GetListOpco_result, setGetListOpco_result] = useState(); function GetListOpco(event) { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetListOpco/"; fetch(myurl, { method: 'POST', body: form, }) .then((data) => data.json()) .then((data) => { //console.log(' GetListOpco Success:', data['message'], "data['status'] = ", data['status']); if (String(data['status']) === String("false")) { //console.log("erreur rrrr:" + data['status']) setGetListOpco_api("false"); setGetListOpco_message(data['message']) } else { setGetListOpco_api("true"); setGetListOpco_result(data['message']); } }).catch((error) => { console.error('Error:', error); setGetListOpco_api("false"); }); } const [closeform, setcloseform] = useState(""); function close_inscription_form() { window.location.reload(); } 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("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); const stored_cookie = getCookie('tokenmysych'); form.append("class_internal_url", props.internal_url); form.append("token", stored_cookie); var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/"; axios.post(myurl, form).then(res => { if (String(res.data.status) !== "false") { //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status); //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message); setGetCurrentClass_api("true"); setGetCurrentClass_result(res.data.message); } else { setGetCurrentClass_api("false"); setGetCurrentClass_message(res.data.message); } }).catch((error) => { console.warn('Not good man :( GetCurrentClass_trainingsession = ', error); setGetCurrentClass_api("false"); //setmyApimyApiMessage("") }) } const [class_sales_price, setclass_sales_price] = useState("0"); useEffect(() => { //Get_Partner_Object_Specific_Fields("inscription"); if (String(props.action).toLocaleLowerCase() !== "inscription" && String(props.action).toLocaleLowerCase() !== "information") { CheckEvaluationToken(); setclass_sales_price(props.trainig_price); } GetCurrentClass_trainingsession(); GetListOpco(); }, []); // 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"); const stored_cookie = getCookie('tokenmysych'); form.append("eval_token", props.action); form.append("class_internal_url", props.internal_url); var myurl = process.env.REACT_APP_API_URL + "myclass/api/ckeckEvaluationToken/"; axios.post(myurl, form).then(res => { if (String(res.data.status) !== "false") { //console.log(" In tokenEval_trainingsession res.data.status = " + res.data.status); //console.log(" In tokenEval_trainingsession res.data.message r_class = " + res.data.message); settokenEval_api("true"); settokenEval_result(res.data.message); } else { settokenEval_api("false"); settokenEval_message(res.data.message); } }).catch((error) => { console.warn('Not good man :( CheckEvaluationToken = ', error); settokenEval_api("false"); //setmyApimyApiMessage("") }) } function clearfileds() { if (document.getElementsByName("nom")[0]) { document.getElementsByName("nom")[0].value = ""; } if (document.getElementsByName("prenom")[0]) { document.getElementsByName("prenom")[0].value = ""; } if (document.getElementsByName("email")[0]) { document.getElementsByName("email")[0].value = ""; } if (document.getElementsByName("telephone")[0]) { document.getElementsByName("telephone")[0].value = ""; } if (document.getElementsByName("employeur")[0]) { document.getElementsByName("employeur")[0].value = ""; } } function clearfileds_info() { if (document.getElementsByName("nom_info")[0]) { document.getElementsByName("nom_info")[0].value = ""; } if (document.getElementsByName("prenom_info")[0]) { document.getElementsByName("prenom_info")[0].value = ""; } if (document.getElementsByName("email_info")[0]) { document.getElementsByName("email_info")[0].value = ""; } if (document.getElementsByName("telephone_info")[0]) { document.getElementsByName("telephone_info")[0].value = ""; } if (document.getElementsByName("employeur_info")[0]) { document.getElementsByName("employeur_info")[0].value = ""; } } const [AnnulerFction_status, setAnnulerFction_status] = useState(""); function AnnulerFction() { clearfileds(); setRecordData_status("false"); setmysession(""); } const [AnnulerFction_info_status, setAnnulerFction_info_status] = useState(""); function AnnulerFction_info() { clearfileds_info(); setAnnulerFction_info_status("false"); if (props.Close_info_form) props.Close_info_form(); } const editorRef_description = useRef(null); const [field_description, setfield_description] = useState(""); const [editor_tochange, seteditor_tochange] = useState(""); function editor_keyup() { seteditor_tochange("1"); } const editorRef_evaluation = useRef(null); const [field_evaluation, setfield_evaluation] = useState(""); const [editor_evaluation_tochange, seteditor_evaluation_tochange] = useState(""); function editor_evalution_keyup() { seteditor_evaluation_tochange("1"); } const [datamodification, setdatamodification] = useState("0"); function DataUpdated() { setdatamodification("1"); } const [SendInformationRequest_api, setSendInformationRequest_api] = useState(""); const [SendInformationRequest_status, setSendInformationRequest_status] = useState(""); const [SendInformationRequest_message, setSendInformationRequest_message] = useState(""); function SendInformationRequest() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/RenseignementClass/"; var nom = valnom_info; //console.log(" nom = ", nom, ); if (String(nom).trim().length <= 0) { document.getElementsByName("nom_info")[0].style.borderColor = "red"; alert(" Le nom d'utilisateur est obligatoire 1 "); return; } var prenom = valprenom_info; if (String(prenom).trim().length <= 0) { document.getElementsByName("telephone_info")[0].style.borderColor = "red"; alert(" Le prenom d'utilisateur est obligatoire "); return; } var telephone = valtelephone_info; if (String(telephone).trim().length < 10) { document.getElementsByName("telephone_info")[0].style.borderColor = "red"; alert(" Le numero de telephone doit comporter 10 chiffres "); return; } var email = valemail_info; var re2 = /\S+@\S+\.\S+/; if (re2.test(email) === false) { alert("L'email est incorrect "); document.getElementsByName("email_info")[0].style.borderColor = "red"; return; } var employeur = "" if (valemployeur_info) { employeur = valemployeur_info; } var message = ""; if (editorRef_description.current) { message = editorRef_description.current.getContent(); } formData.append('nom', nom); formData.append('employeur', employeur); formData.append('prenom', prenom); formData.append('telephone', telephone); formData.append('email', email); formData.append('message', message); formData.append('class_internal_url', props.internal_url); fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message'], "result['status'] = ", result['status']); setSendInformationRequest_api(result['status']); setSendInformationRequest_status(result['status']); setSendInformationRequest_message(result['message']); }) .catch((error) => { console.error('Error:', error); setSendInformationRequest_api("false"); setSendInformationRequest_status("false"); setSendInformationRequest_message(); }); }; const [SendEvaluationClass_api, setSendEvaluationClass_api] = useState(""); const [SendEvaluationClass_status, setSendEvaluationClass_status] = useState(""); const [SendEvaluationClass_message, setSendEvaluationClass_message] = useState(""); function SendEvaluationClass() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/Evaluation_Class/"; var message = ""; if (editorRef_evaluation.current) { message = editorRef_evaluation.current.getContent(); } /* var pedagogie = ""; var ele = document.getElementsByName('pedagogie'); for (let i = 0; i < ele.length; i++) { if (ele[i].checked) pedagogie = ele[i].value; } var logistique = ""; ele = document.getElementsByName('log'); for (let i = 0; i < ele.length; i++) { if (ele[i].checked) logistique = ele[i].value; } */ if (!RatingValue) { alert(" Aidez-nous à nous améliorer, donnez une appréciation globale svp. Le point N° 1. Merci d'avance") return; } if (!RatinpedagogiegValue) { alert(" Aidez-nous à nous améliorer, donnez une appréciation sur notre pédagigie svp. Le point N° 2. Merci d'avance") return; } formData.append('inscription_id', props.eval_token); formData.append('eval_note', RatingValue); formData.append('eval_pedagogie', RatinpedagogiegValue); formData.append('eval_eval', message); formData.append('class_internal_url', class_internal_url); fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message'], "result['status'] = ", result['status']); if (String(result['status']) === "true") { setSendEvaluationClass_api("true"); } else if (String(result['status']) === "false") { setSendEvaluationClass_api("false"); setSendEvaluationClass_message(result['message']); } }) .catch((error) => { console.error('Error:', error); setSendEvaluationClass_api("false"); }); }; const [RatingValue, setRatingValue] = useState(0); const [RatinpedagogiegValue, setRatinpedagogiegValue] = useState(0); let datafromchild = "yaaaaa child"; const [valnom_info, setvalnom_info] = useState(); const [valprenom_info, setvalprenom_info] = useState(); const [valemail_info, setvalemail_info] = useState(); const [valtelephone_info, setvaltelephone_info] = useState(); const [valemployeur_info, setvalemployeur_info] = useState(); const handlervalnom_info = event => { var val = event.target.value; setvalnom_info(val); }; const handlervalprenom_info = event => { var val = event.target.value; setvalprenom_info(val); }; const handlervalemail_info = event => { var val = event.target.value; setvalemail_info(val); }; const handlervaltelephone_info = event => { var val = event.target.value; setvaltelephone_info(val); }; const handlervalemployeur_info = event => { var val = event.target.value; setvalemployeur_info(val); }; // Gestion champs specifiques /* *** ALGORITHME 1 - Récuperer la liste des champs specifiques de la collection concernée - Array : list_nom_champs_spec 2 - Récupérer les caracteristiques de champs champs spécifique : "id, nom, label, type valeur, etc" - avec un champ 'value' à vide. Mettre dans le tableau JSON, 'spec_champs_valeur' 3 - Créer une nouvelle table qui permettra de gerer les hook : const [rows_champs_specifics, setrows_champs_specifics] = useState([]); 4 - Afficher en html les elements 'rows_champs_specifics' 5 - Gerer la modification avec la fonction 'change_champs_spec_handle' 6 - On recuperer les valeur lors du click d'enregistrement. */ const list_nom_champs_spec = [] const [spec_champs_valeur, setspec_champs_valeur] = useState([]); //const spec_champs_valeur = "" const [Get_Partner_Object_Specific_Fields_api, setGet_Partner_Object_Specific_Fields_api] = useState(); const [Get_Partner_Object_Specific_Fields_message, setGet_Partner_Object_Specific_Fields_message] = useState(); const [Get_Partner_Object_Specific_Fields_result, setGet_Partner_Object_Specific_Fields_result] = useState(); function Get_Partner_Object_Specific_Fields(local_collection_obj_metier) { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append("object_name", local_collection_obj_metier); var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Partner_Object_Specific_Valide_Displayed_Fields/"; axios.post(myurl, form).then(res => { if (String(res.data.status) === String("true")) { //console.log(" In Get_Partner_Object_Specific_Fields res.data.status = " + res.data.status); //console.log(" In Get_Partner_Object_Specific_Fields res.data.message r_class = " + res.data.message); setGet_Partner_Object_Specific_Fields_api("true"); setGet_Partner_Object_Specific_Fields_result(res.data.message); setrows_champs_specifics(res.data.message); } else { setGet_Partner_Object_Specific_Fields_api("false"); setGet_Partner_Object_Specific_Fields_message(res.data.message); alert(res.data.message) } }).catch((error) => { console.warn('Not good man :( Get_Partner_Object_Specific_Fields = ', error); setGet_Partner_Object_Specific_Fields_api("false"); alert(" Impossible de recuperer la liste des collection et champs personnalisables"); //setmyApimyApiMessage("") }) } const [rows_champs_specifics, setrows_champs_specifics] = useState([]); const [display_champs_specifics, setdisplay_champs_specifics] = useState("0"); function afficher_champs_spec() { setdisplay_champs_specifics("1"); //setrows_champs_specifics(spec_champs_valeur); } function findIndexByProperty(data, key, value) { for (var i = 0; i < data.length; i++) { if (data[i][key] == value) { return i; } } return -1; } function findValueByProperty(data, key, value) { for (var i = 0; i < data.length; i++) { if (data[i][key] == value) { var tmp_val = JSON.parse(data[i]); return tmp_val.field_value } } return ""; } const spec_field_updated_values = [] const [spec_field_updated_values_hooks, setspec_field_updated_values_hooks] = useState([]); function change_champs_spec_handle() { for (let i = 0; i < rows_champs_specifics.length; i++) { var field_name = JSON.parse(rows_champs_specifics[i]).field_name; var field_type = JSON.parse(rows_champs_specifics[i]).field_type; var field_label = JSON.parse(rows_champs_specifics[i]).field_label; var is_mandatory = JSON.parse(rows_champs_specifics[i]).is_mandatory; if (document.getElementsByName(String(field_name))[0]) { var field_value = document.getElementsByName(String(field_name))[0].value; var new_val = { 'field_name': field_name, 'field_value': field_value, 'field_type': field_type, 'field_label': field_label, 'is_mandatory': is_mandatory } var johnIndex = findIndexByProperty(spec_field_updated_values, 'field_name', field_name); if (johnIndex > -1) { spec_field_updated_values[johnIndex] = new_val; } else { spec_field_updated_values.push(new_val); } } } //setrows_champs_specifics(spec_champs_valeur); //console.log(" OUTT spec_field_updated_values = ", spec_field_updated_values); setspec_field_updated_values_hooks(spec_field_updated_values) } // -- end champs specifiques return (