import React, { useState, useEffect } from "react"; import UpdateUserInfo from "../components/UpdateUserInfo"; import Button from '@mui/material/Button'; import { AiOutlineEdit } from "react-icons/ai"; import { getCookie } from 'react-use-cookie'; import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid'; import axios from "axios"; 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 EmailIcon from '@mui/icons-material/Email' import HomeIcon from '@mui/icons-material/Home' import { Button2, Form, FormGroup, Label } from "reactstrap"; import { faBullseye } from "@fortawesome/fontawesome-free-solid"; import tick_ok from "../mysy_img/tick_OK.png"; import tick_ko from "../mysy_img/tick_KO.png"; import { useHistory } from "react-router-dom"; import CheckOut from "./CheckOut"; import PaymentMethod from "./PaymentMethode"; import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5"; import fileDownload from 'js-file-download' import PayementComponent_Carte from "./PaymentMethode_Carte" import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png"; import SendIcon from '@mui/icons-material/Send'; import { confirmAlert } from 'react-confirm-alert'; // Import function Abonnement(props) { const [myApiResponse, setmyApiResponse] = useState(""); const [result, setResult] = useState(""); const [menu, setmenu] = useState("default"); const [fields1desabled, setfields1desabled] = useState(true); const [periode, setperiode] = useState("Mensuel"); const [testval, settestval] = useState(); const [gotocheckout, setgotocheckout] = useState("0"); const [selectedpacks, setselectedpacks] = useState(""); const [currentpack, setcurrentpack] = useState(props.currentpack); const [currentpack2, setcurrentpack2] = useState(""); const columns = [ { field: 'id', headerName: 'id', hide: true }, { field: 'num_facture', headerName: 'Num Facture', width: 200, hideable: false, flex: 1 }, { field: 'client_nom', headerName: 'Client', width: 200, hideable: false, flex: 1 }, { field: 'montant_ht', headerName: 'Montant HT €', width: 200, hideable: false, flex: 1 }, { field: 'montant_ttc', headerName: 'Montant TTC €', width: 100, hideable: false, flex: 1 }, { field: 'reduction', headerName: 'Discount', width: 150, flex: 1 }, { field: 'date_facture', headerName: 'Date Facture', width: 150, flex: 1 }, { field: 'mode_payement', headerName: 'Mode paiement', width: 150, flex: 1 }, { field: 'date_payement', headerName: 'Date paiement', width: 150, flex: 1 }, { field: "lien_pdf", headerName: 'Télécharger', renderCell: (cellValues) => { return ( ); } } ] function handleClick(event, cellValues) { var nom_facture = cellValues.row.num_facture + ".pdf"; //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); const stored_cookie = getCookie('tokenmysypart'); var num_facture = cellValues.row.num_facture; var url = process.env.REACT_APP_API_URL + "myclass/api/GetCustomerInvoice/" + stored_cookie + "/" + num_facture; axios.get(url, { responseType: 'blob', },) .then((res) => { fileDownload(res.data, nom_facture) }) } const [selectionModel, setSelectionModel] = React.useState([]); const [rowss, setRows] = useState([]); const [tableData, setTableData] = useState([]) function GetInvoices(event) { var form = new FormData(); //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_invoice_by_customer/"; fetch(myurl, { method: 'POST', body: form, }) .then((data) => data.json()) .then((data) => { console.log('Success:', data['message'], "data['status'] = ", data['status']); setTableData(data['message']); setRows(data['message']); if (String(data['status']) === String("false")) { //console.log("erreur rrrr:" + data['status']) setmyApiResponse("False"); } else { setmyApiResponse("True"); } }).catch((error) => { console.error('Error:', error); setmyApiResponse("false"); }); } const [paymentmode, setpaymentmode] = useState([]); const [paymentmodeapi, setpaymentmodeapi] = useState([]); function GetPayementMode(event) { var form = new FormData(); //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_payement_mode/"; fetch(myurl, { method: 'POST', body: form, }) .then((data) => data.json()) .then((data) => { //console.log('LAAAAAAAAA Success:', data['message'], "data['status'] = ", data['status']); if (String(data['status']) === String("false")) { //console.log("erreur rrrr:" + data['status']) setpaymentmodeapi("False"); } else { setpaymentmodeapi("True"); if (data['message'] && data['message'][0] && Object.keys(data['message'][0]).length > 0) { setpaymentmode(data['message']); //setnew_mode_payement("0"); } else { setpaymentmode([]); } } }).catch((error) => { console.error('Error:', error); setpaymentmodeapi("False"); }); } function menu_defaut() { setmenu("default"); } const [new_mode_payement, setnew_mode_payement] = useState(""); function menu_paymentmethode() { setmenu("paymentmethode"); setnew_mode_payement("1"); } function menu_paymentmethode_close() { setnew_mode_payement(""); } function menu_info() { setmenu("info"); getCurrentUserData(); GetPayementMode(); } function Clik_bton_mensuel(e) { document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#81BC3A"; document.getElementsByName("bton_mensuel")[0].style.opacity = "100%"; document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#F8F9F9"; document.getElementsByName("bton_annuel")[0].style.opacity = "80%"; document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#81BC3A"; document.getElementsByName("bton_mensuel2")[0].style.opacity = "100%"; document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#F8F9F9"; document.getElementsByName("bton_annuel2")[0].style.opacity = "80%"; setperiode("Mensuel"); } function Clik_bton_annuel(e) { document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#81BC3A"; document.getElementsByName("bton_annuel")[0].style.opacity = "100%"; document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#F8F9F9"; document.getElementsByName("bton_mensuel")[0].style.opacity = "80%"; document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#81BC3A"; document.getElementsByName("bton_annuel2")[0].style.opacity = "100%"; document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#F8F9F9"; document.getElementsByName("bton_mensuel2")[0].style.opacity = "80%"; setperiode("Annuel"); } function menu_plan() { setmenu("plan"); } // recuperation et gestion du token utilisateur const history = useHistory(); const stored_part = getCookie('tokenmysypart'); if (!stored_part || stored_part.length <= 0) { history.push("/PartnerLogin"); } function RecordData() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_account/"; var nom = document.getElementsByName("nom")[0].value; var vat_num = document.getElementsByName("vat_num")[0].value; var telephone = document.getElementsByName("telephone")[0].value; var email = document.getElementsByName("email")[0].value; var adr_street = document.getElementsByName("adr_street")[0].value; var adr_zip = document.getElementsByName("adr_zip")[0].value; var adr_city = document.getElementsByName("adr_city")[0].value; var adr_country = document.getElementsByName("adr_country")[0].value; formData.append('token', stored_part); formData.append('invoice_vat_num', vat_num); formData.append('invoice_nom', nom); formData.append('invoice_adr_street', adr_street); formData.append('invoice_adr_city', adr_city); formData.append('invoice_adr_zip', adr_zip); formData.append('invoice_adr_country', adr_country); formData.append('invoice_email', email); formData.append('invoice_telephone', telephone); fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { console.log('Success:', result['message'], "result['status'] = ", result['status']); setmyApiResponse(result['status']); setResult(result['message']); if (String(result['status']) == String("true")) { settestval(true); desablefield1(); } }) .catch((error) => { console.error('Error:', error); setmyApiResponse("false"); }); }; function enablefieds1() { setfields1desabled(false); document.getElementsByName("nom")[0].disabled = false; document.getElementsByName("nom")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("telephone")[0].disabled = false; document.getElementsByName("telephone")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("email")[0].disabled = false; document.getElementsByName("email")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_street")[0].disabled = false; document.getElementsByName("adr_street")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_zip")[0].disabled = false; document.getElementsByName("adr_zip")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_city")[0].disabled = false; document.getElementsByName("adr_city")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_country")[0].disabled = false; document.getElementsByName("adr_country")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("vat_num")[0].disabled = false; document.getElementsByName("vat_num")[0].style.backgroundColor = "#FFFFFF"; } function desablefield1() { setfields1desabled(true); document.getElementsByName("nom")[0].disabled = true; //document.getElementsByName("nom")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("telephone")[0].disabled = true; //document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("email")[0].disabled = true; // document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_street")[0].disabled = true; //document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_zip")[0].disabled = true; //document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_city")[0].disabled = true; //document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_country")[0].disabled = true; //document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("vat_num")[0].disabled = true; //document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1"; } const [getCurrentUserData_result, setgetCurrentUserData_result] = useState([]); function getCurrentUserData() { settestval('d'); // ==> Do not delete const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/"; formData.append('token', stored_part); axios.post(url, formData).then(res => { if (String(res.data.status) === String("true") ) { //console.log(" In getCurrentUserData res.data.status = " + res.data.status); //console.log(" In getCurrentUserData res.data.message = " + res.data.message); setmyApiResponse("True"); setResult(res.data.message); setgetCurrentUserData_result(res.data.messag) var mylocaltraining = JSON.parse(res.data.message); if (mylocaltraining) { if (mylocaltraining.invoice_vat_num) { document.getElementsByName("vat_num")[0].value = mylocaltraining.invoice_vat_num; document.getElementsByName("vat_num")[0].disabled = true; document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_nom) { document.getElementsByName("nom")[0].value = mylocaltraining.invoice_nom; document.getElementsByName("nom")[0].disabled = true; document.getElementsByName("nom")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_adr_street) { document.getElementsByName("adr_street")[0].value = mylocaltraining.invoice_adr_street; document.getElementsByName("adr_street")[0].disabled = true; document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_adr_city) { document.getElementsByName("adr_city")[0].value = mylocaltraining.invoice_adr_city; document.getElementsByName("adr_city")[0].disabled = true; document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_adr_zip) { document.getElementsByName("adr_zip")[0].value = mylocaltraining.invoice_adr_zip; document.getElementsByName("adr_zip")[0].disabled = true; document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_adr_country) { document.getElementsByName("adr_country")[0].value = mylocaltraining.invoice_adr_country; document.getElementsByName("adr_country")[0].disabled = true; document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_email) { document.getElementsByName("email")[0].value = mylocaltraining.invoice_email; document.getElementsByName("email")[0].disabled = true; document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_telephone) { document.getElementsByName("telephone")[0].value = mylocaltraining.invoice_telephone; document.getElementsByName("telephone")[0].disabled = true; document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.pack_service) { setcurrentpack2(String(mylocaltraining.pack_service).toLocaleLowerCase()); } desablefield1(); } } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("False"); //setmyApimyApiMessage("") } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); setmyApiResponse("False"); //setmyApimyApiMessage("") }) } function menu_facture() { setmenu("facture"); GetInvoices(); } useEffect(() => { //menu_info(); getCurrentUserData(); GetPayementMode(); setpackprice(); }, []); function confirmAbonnement(packs) { window.scrollTo(0, 0); if (String(packs).toLowerCase() === String("decouverte")) { if (String(periode) === String("Mensuel")) { if (String(packs).toLowerCase() === String("standard")) { setpackprice("50"); } else if (String(packs).toLowerCase() === String("gold")) { setpackprice("90"); } else if (String(packs).toLowerCase() === String("decouverte")) { setpackprice("0"); } } if (String(periode) === String("Annuel")) { if (String(packs).toLowerCase() === String("standard")) { setpackprice("600"); } else if (String(packs).toLowerCase() === String("gold")) { setpackprice("1080"); } else if (String(packs).toLowerCase() === String("decouverte")) { setpackprice("0"); } } setgotocheckout("1"); setselectedpacks(packs); window.scrollTo(0, 0); return; } if (!paymentmode || Object.keys(paymentmode).length <= 0) { alert(" Vous devez ajouter un mode de Paiement pour activer de ce pack") return; } else { if (String(periode) === String("Mensuel")) { if (String(packs).toLowerCase() === String("standard")) { setpackprice("50"); } else if (String(packs).toLowerCase() === String("gold")) { setpackprice("90"); } else if (String(packs).toLowerCase() === String("decouverte")) { setpackprice("0"); } } if (String(periode) === String("Annuel")) { if (String(packs).toLowerCase() === String("standard")) { setpackprice("600"); } else if (String(packs).toLowerCase() === String("gold")) { setpackprice("1080"); } else if (String(packs).toLowerCase() === String("decouverte")) { setpackprice("0"); } } setgotocheckout("1"); setselectedpacks(packs); window.scrollTo(0, 0); } } const [StopAbonnement_api, setStopAbonnement_api] = useState([]); const [StopAbonnement_message, setStopAbonnement_message] = useState([]); const [StopAbonnement_result, setStopAbonnement_result] = useState([]); function StopAbonnement(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/stop_strip_subscription/"; fetch(myurl, { method: 'POST', body: form, }) .then((data) => data.json()) .then((data) => { console.log(" In getCurrentUserData res.data.status = " + data.status); console.log(" In getCurrentUserData res.data.message = " + data.message); if (String(data['status']) === String("false")) { setStopAbonnement_api("false"); setStopAbonnement_message(data['message']); } else if (String(data['status']) === String("true")) { setStopAbonnement_api("true"); setStopAbonnement_result(data['message']); } }).catch((error) => { console.error('StopAbonnement Error:', error); setStopAbonnement_api("false"); }); } function confirmSTOPAbonnement(localpacks) { confirmAlert({ title: '', message: "Confirmez l'arret de votre abonnement " + String(localpacks), buttons: [ { label: 'Yes', onClick: () => { StopAbonnement(); } }, { label: 'No', onClick: () => { return } } ] }); } function returntoorder() { setgotocheckout("0"); } const [packprice, setpackprice] = useState(); return (