import React, { useRef, useState, useEffect } from "react"; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css import Button from '@mui/material/Button'; import axios from "axios"; import { getCookie, setCookie } from 'react-use-cookie'; import { useHistory } from "react-router-dom"; import CheckOut from "./CheckOut"; import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid'; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import { Editor } from '@tinymce/tinymce-react'; import parse from 'html-react-parser'; import { FcViewDetails, FcDisapprove } from "react-icons/fc"; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import add_plus from "../mysy_img/plus.png"; import excel_icone from "../mysy_img/excel_icone.png"; import participants from "../mysy_img/participants.png"; import fileDownload from 'js-file-download' import Autocomplete from '@mui/material/Autocomplete'; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint } from "react-icons/fc"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { format } from 'date-fns' import moment from "moment"; import InputAdornment from '@mui/material/InputAdornment'; import { AiFillCloseCircle } from "react-icons/ai"; import Box from '@mui/material/Box'; import { Typography, LinearProgress } from '@mui/material'; import styled from 'styled-components'; import { CiTrash } from "react-icons/ci"; import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md"; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import { TransitionProps } from '@mui/material/transitions'; import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5"; import { useParams } from 'react-router-dom' import Header from "./Header"; import Footer from "./Fotter"; import { FcInfo } from "react-icons/fc"; import { Document, Page } from 'react-pdf' import SignatureCanvas from 'react-signature-canvas'; import Module_Alert_Confirmation from "./Module_Alert_Confirmation"; import { makeStyles } from "@material-ui/core/styles"; import Paper from '@material-ui/core/Paper'; import Draggable from 'react-draggable'; import { IconButton } from '@material-ui/core'; import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'; import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; function PaperComponent(props) { return ( ); } const useStyles = makeStyles((theme) => ({ dialog: { position: 'absolute', // left: 10, top: 400 }, paper: { overflowY: 'unset', }, customizedButton: { position: 'absolute', left: '98%', top: '-3%', backgroundColor: 'lightgray', color: 'gray', }, })); function ESign() { const classes = useStyles(); const history = useHistory(); const { document_id, local_secret_key_signature, local_partner_owner_recid } = useParams(); const [isLoading, setLoading] = useState(); const [get_E_Document_PDF, setget_E_Document_PDF] = useState(); const [selected_e_doc_id, setselected_e_doc_id] = useState(); const [selected_e_doc_email, setselected_e_doc_email] = useState(); const [selected_e_doc_secret, setselected_e_doc_secret] = useState(); const [is_valide_e_document, setis_valide_e_document] = useState(false); const [get_E_Document_api, setget_E_Document_api] = useState(); const [get_E_Document_message, setget_E_Document_message] = useState(); const [get_E_Document_result, setget_E_Document_result] = useState(); function get_E_Document() { var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Given_E_Document_Not_Signed_No_Token/"; var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append("e_doc_id", document_id); form.append("secret_key_open", selected_e_doc_secret); form.append("user_email", user_email); setLoading(true); axios.post(myurl, form).then(res => { setLoading(false); //console.log(" get_E_Document : In test res.data.status = " + res.data.status); //console.log(" get_E_Document: res.data.message.img = " + res.data.message); if (String(res.data.status) === "true") { setget_E_Document_api("true"); if (JSON.parse(res.data.message).document_data) { setis_valide_e_document(true); var document_data = "data:application/pdf;base64," + JSON.parse(res.data.message).document_data; setget_E_Document_PDF(document_data); setselected_e_doc_id(JSON.parse(res.data.message)._id); //setselected_e_doc_email(JSON.parse(res.data.message).email_destinataire); //setselected_e_doc_secret(JSON.parse(res.data.message).secret_key_open); setDialog_1_open(false); seterreur_recup_e_doc(); setselected_e_doc_secret(""); setselected_e_doc_email(""); } } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); return; } else { setget_E_Document_api("false"); seterreur_recup_e_doc(res.data.message); get_E_Document_message(res.data.message) alert(res.data.message); } }).catch((error) => { setLoading(false); console.warn('get_E_Document ee: Not good man :( = ', error); setget_E_Document_api("false"); get_E_Document_message(" Impossible de recuperer le E-Document") }) } const [Signature_E_Document_api, setSignature_E_Document_api] = useState(); const [Signature_E_Document_message, setSignature_E_Document_message] = useState(); const [Signature_E_Document_result, setSignature_E_Document_result] = useState(); function Signature_E_Document(material_id) { var myurl = process.env.REACT_APP_API_URL + "myclass/api/Create_E_Signature_For_E_Document/"; var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append("e_doc_id", selected_e_doc_id); form.append("secret_key_signature", selected_e_doc_secret); form.append("email_destinataire", selected_e_doc_email); form.append("signature_img_selected", userimgclassprofil); if (isimgclassSelectedfile) form.append('signature_img', isimgclassSelected); else form.append('signature_img', ""); // console.log(" isimgclassSelected #### = ", isimgclassSelected); setLoading(true); axios.post(myurl, form).then(res => { setLoading(false); //console.log(" Signature_E_Document : In test res.data.status = " + res.data.status); //console.log(" Signature_E_Document: res.data.message.img = " + res.data.message); if (String(res.data.status) === "true") { setSignature_E_Document_api("true"); setDialog_Message_open(true); // alert(" Le document a été correctement signé"); } else if (String(res.data.status) === String("Err_Connexion")) { alert('Erreur: ' + res.data.message); history.push("/Connexion"); return; } else { setSignature_E_Document_api("false"); Signature_E_Document_message(res.data.message); seterreur_recup_e_doc(res.data.message); alert(res.data.message); } }).catch((error) => { setLoading(false); console.warn('Signature_E_Document ee: Not good man :( = ', error); setSignature_E_Document_api("false"); Signature_E_Document_message(" Impossible de signer le E-Document") }) } useEffect(() => { setselected_e_doc_id(document_id); // get_E_Document(); window.scrollTo({ top: 0, behavior: "smooth", }); }, []) const [user_nom, setuser_nom] = React.useState(""); const [user_prenom, setuser_prenom] = React.useState(""); const [user_email, setuser_email] = React.useState(""); const [erreur_recup_e_doc, seterreur_recup_e_doc] = React.useState(); const [Dialog_1_message, setDialog_1_message] = React.useState(false); const [Dialog_1_open, setDialog_1_open] = React.useState(true); function Dialog_1_handle_change_participant_session(message) { setDialog_1_message(message); setDialog_1_open(true); } const Dialog_1_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_1_handleClose_buton = () => { setDialog_1_open(false); history.push("/"); }; const [Dialog_Message_message, setDialog_Message_message] = React.useState(false); const [Dialog_Message_open, setDialog_Message_open] = React.useState(false); function Dialog_Message_handle_change_participant_session(message) { setDialog_Message_message(message); setDialog_Message_open(true); } const Dialog_Message_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_Message_handleClose_buton = () => { setDialog_Message_open(false); history.push("/"); }; const [Dialog_SIGN_VALIDATION_open, setDialog_SIGN_VALIDATION_open] = React.useState(false); const Dialog_SIGN_VALIDATION_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_SIGN_VALIDATION_handleClose_buton = () => { setDialog_SIGN_VALIDATION_open(false); history.push("/"); }; const [isimgclassSelected, setisimgclassSelected] = useState(false); const [isimgclassSelected_recid, setisimgclassSelected_recid] = useState(""); const [isimgclassSelectedfile, setisimgclassSelectedfile] = useState(false); const [userimgclassprofil, setuserimgclassprofil] = useState(); const [userimgclassprofilchanged, setuserimgclassprofilchanged] = useState(""); function reader(file, callback) { const fr = new FileReader(); fr.onload = () => callback(null, fr.result); fr.onerror = (err) => callback(err); fr.readAsDataURL(file); } const imglogoclasschangeHandler = (event) => { let file_size = event.target.files[0].size; //or if you like to have name and type //console.log(event.target.files); let file_name = event.target.files[0].name; let file_type = event.target.files[0].type; //alert("file_size = "+file_size+" file_type = "+file_type+" a = "+a); if (file_size > 1000000) { alert("L'image ne doit pas dépasser un 1 Méga octets"); return; } setisimgclassSelected(event.target.files[0]); setisimgclassSelectedfile(true); //setuserimgclassprofil(URL.createObjectURL(event.target.files[0])); setuserimgclassprofilchanged("1"); reader(event.target.files[0], (err, res) => { //console.log(res); // Base64 `data:image/...` String result. setuserimgclassprofil(res); }); }; const [isimgclassSaved, setisimgclassSaved] = useState(""); const [isimgclassSaved_message, setisimgclassSaved_message] = useState(""); const [Dialog_SIGN_MANUSCRITE_open, setDialog_SIGN_MANUSCRITE_open] = React.useState(false); const Dialog_SIGN_MANUSCRITE_handleClose = () => { //alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const Dialog_SIGN_MANUSCRITE_handleClose_buton = () => { setDialog_SIGN_MANUSCRITE_open(false); }; const signatureCanvasRef = useRef(null); // API method examples const checkIfEmpty = () => { const isEmpty = signatureCanvasRef.current.isEmpty(); if (signatureCanvasRef) { setuserimgclassprofil(signatureCanvasRef.current.toDataURL()); setisimgclassSelected(signatureCanvasRef.current.toDataURL()) } setuserimgclassprofilchanged("1"); Dialog_SIGN_MANUSCRITE_handleClose_buton(); }; const clearCanvas = () => { signatureCanvasRef.current.clear(); }; return (
{/* POUR SIGNATURE MANUSCRITE */} Signature Manuscrite
{/* FIN POUR SIGNATURE MANUSCRITE */} {/* POUR SIGNATURE E-DOCUMENT */} null} PaperProps={{ className: classes.paper, // Apply the paper style style: { overflowY: 'unset', position: 'absolute', top: '10rem', margin: "2px", }, }} hideBackdrop={true} disableScrollLock classes={{ paper: classes.dialog }} PaperComponent={PaperComponent} aria-labelledby="draggable-dialog-title" > {!erreur_recup_e_doc && Signature } {erreur_recup_e_doc && Signature - Identifiants invalides }
Email { setselected_e_doc_email(e.target.value); } } />
Clé de signature { setselected_e_doc_secret(e.target.value); } } />
{/* FIN POUR SIGNATURE E-DOCUMENT */} {/* POUR OUVERTURE E-DOCUMENT */} null} PaperProps={{ className: classes.paper, // Apply the paper style style: { overflowY: 'unset', position: 'absolute', top: '10rem', margin: "2px", }, }} hideBackdrop={true} disableScrollLock classes={{ paper: classes.dialog }} PaperComponent={PaperComponent} aria-labelledby="draggable-dialog-title" > {!erreur_recup_e_doc && Authentification } {erreur_recup_e_doc && Authentification - Identifiants invalides }
Email { setuser_email(e.target.value); } } />
Clé d'ouverture { setselected_e_doc_secret(e.target.value); } } />
{/* FIN POUR OUVERTURE E-DOCUMENT */} Information
Le document a été signée. Vous allez recevoir le document par email
 
{isLoading &&
}

Signature Electronique


{is_valide_e_document &&
 


{} {isimgclassSelected && String(isimgclassSaved) === "0" && }
 
} {!is_valide_e_document &&
 
}
 
); } export default ESign;