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 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'; 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 "); 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 = 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 "); 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); 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); var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/"; axios.post(myurl, form).then(res => { if (res.data.status != "false") { //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status); //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message); setGetCurrentClass_api("true"); setGetCurrentClass_result(res.data.message); } else { setGetCurrentClass_api("false"); setGetCurrentClass_message(res.data.message); } }).catch((error) => { console.warn('Not good man :( GetCurrentClass_trainingsession = ', error); setGetCurrentClass_api("false"); //setmyApimyApiMessage("") }) } useEffect(() => { GetCurrentClass_trainingsession(); GetListOpco(); }, []); 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(); setSendInformationRequest_status("false"); } const editorRef_description = useRef(null); const [field_description, setfield_description] = useState(""); const [editor_tochange, seteditor_tochange] = useState(""); function editor_keyup() { seteditor_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 = document.getElementsByName("nom_info")[0].value; if (String(nom).trim().length <= 0) { document.getElementsByName("nom_info")[0].style.borderColor = "red"; alert(" Le nom d'utilisateur est obligatoire "); return; } var prenom = document.getElementsByName("prenom_info")[0].value; if (String(prenom).trim().length <= 0) { document.getElementsByName("telephone_info")[0].style.borderColor = "red"; alert(" Le prenom d'utilisateur est obligatoire "); return; } var telephone = document.getElementsByName("telephone_info")[0].value; 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 = document.getElementsByName("email_info")[0].value; 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 (document.getElementById('employeur_info') && document.getElementById('employeur_info').value) { employeur = document.getElementById('employeur_info').value; } 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(); }); }; function AnnulerInformationRequest() { } return (
{String(RecordData_status) === "true" && String(action).toLocaleLowerCase() === "inscription" &&
Votre inscription bien été prise en compte. Vous allez recevoir une email de confirmation dans votre boite email. Merci.
} {String(SendInformationRequest_status) === "true" && String(action).toLocaleLowerCase() === "information" &&
Votre demande d'information été prise en compte. Merci.
} {(String(RecordData_status) === "false" || String(RecordData_status).length === 0) && String(action).toLocaleLowerCase() === "inscription" && String(AnnulerFction_status) !== "1" &&
:not(style)': { m: 1 }, width: '100%', }}> {String(RecordData_status) === "false" &&
{RecordData_message}
}
Je m'inscris
Choisir une session :  
{/* {GetCurrentClass_result && } */}
{mysession && :not(style)': { m: 1 }, width: '100%', }}> ), }} variant="standard" /> ), }} variant="standard" /> ), }} variant="standard" /> ), }} variant="standard" /> ), }} variant="standard" />
 
Nous vous aidons à financer la formation
:not(style)': { m: 1 }, width: '100%', }}>
Choisir le mode financement :  
 
:not(style)': { m: 1 }, width: '100%', }}>
Choisir votre centre de rattachement
*Laisser "Choisir" si vous ne le connaissez pas.
{
}
}
} {/* Gestion des demandes d'information */} { String(action).toLocaleLowerCase() === "information" && String(AnnulerFction_status) !== "1" &&
:not(style)': { m: 1 }, width: '100%', }}> {String(RecordData_status) === "false" &&
{RecordData_message}
}
Je m'informe
{ :not(style)': { m: 1 }, width: '100%', }}> ), }} variant="standard" /> ), }} variant="standard" /> ), }} variant="standard" /> ), }} variant="standard" /> ), }} variant="standard" />
 
Dites nous en plus sur votre besoin :)
:not(style)': { m: 1 }, width: '100%', }}> editorRef_description.current = editor} initialValue={field_description} onKeyUp={editor_keyup} onEditorChange={(newValue, editor) => { if (String(editor_tochange) === "1") { //alert(" change"); DataUpdated() seteditor_tochange(""); } }} init={{ resize: false, height: 200, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' + 'alignleft aligncenter alignright alignjustify | ' + 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }' }} />
 
{
}
}
}
); } export default Inscription_Information;