Ela_Front/src/components/Abonnement.js

1352 lines
58 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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 (
<Button
onClick={(event) => {
handleClick(event, cellValues);
}}
>
<AiOutlineEdit />
</Button>
);
}
}
]
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 (
<div className="abonnement">
{String(gotocheckout) === String("1") && <div>
<Button onClick={returntoorder} className="btn_retour_ps"> Retour aux produits & Services </Button>
<CheckOut packs={selectedpacks} periodicity={periode} mypackprice={packprice} /> </div>
}
{String(StopAbonnement_api) === String("true") && <div className="div_row">
<nav className="okUpdateData"> Votre demande a été bien prise en compte <br /> {StopAbonnement_result} </nav>
</div>}
{String(StopAbonnement_api) === String("false") && <div className="div_row">
<nav className="koUpdateData"> {StopAbonnement_message} </nav>
</div>}
{String(gotocheckout) === String("0") && <div>
<div className="div_row">
<div className="div_row_gauche">
<div className="titre1"> Votre plan actuel </div>
Vous êtes actuellement sur un plan : {String(currentpack2).toUpperCase()}
{result && (JSON.parse(result).end_date_abonnement) &&
<nav>Cet abonnement expire le {(JSON.parse(result).end_date_abonnement)} </nav>}
<div style={{ "marginBottom": "2rem" }}> &nbsp; </div>
<div className="titre1"> Mode de Paiement </div>
{paymentmode && Object.keys(paymentmode).length > 0 && paymentmode.map((payment) => (
<ul className="list_produits_service">
<div>
<ul>
Type carte : {(JSON.parse(payment).brand)}
</ul>
<ul>
Nom carte : {(JSON.parse(payment).nom_carte)}
</ul>
<ul>
Num carte : XXXXXX{(JSON.parse(payment).last4)}
</ul>
<ul>
Expiration : {(JSON.parse(payment).exp_month)}/{(JSON.parse(payment).exp_year)}
</ul>
<ul>
Date Creation : {(JSON.parse(payment).createdatetime)}
</ul>
</div>
</ul>
))}
{String(paymentmodeapi) === String("True") && Object.keys(paymentmode).length <= 0 && <div>
<div className="warninigUpdateData">
Aucun mode de paiement enregistré.
</div>
<div className="okUpdateData">
Profitez du pack découverte gratuitement sans moyen de paiement, pendant 15 jours.
</div>
</div>}
{String(paymentmodeapi) === String("True") && <div>
{paymentmode && Object.keys(paymentmode).length > 0 && paymentmode.map((payment) => (
<ul className="list_produits_service">
<div> {String(JSON.parse(payment).type) === String("cb") &&
<b> Carte Bleue </b>} </div>
<div> {String(JSON.parse(payment).type) === String("sepa") &&
<b> SEPA </b>} </div>
{String(JSON.parse(payment).type) === String("sepa") && <div>
<ul>
BIC : {JSON.parse(payment).bic}
</ul>
<ul>
IBAN : {(JSON.parse(payment).iban).substring(0, 4)}XXXXXXXX
</ul>
<ul>
Titulaire du compte : {JSON.parse(payment).nom_compte}
</ul>
<ul>
Dernière mise à jour : {(JSON.parse(payment).date_update).substring(0, 10)}
</ul>
</div>}
{String(JSON.parse(payment).type) === String("cb") && <div>
<ul>
Num carte : {(JSON.parse(payment).num_carte).substring(0, 10)}XXX
</ul>
<ul>
Date expiration : {JSON.parse(payment).date_exp_carte}
</ul>
<ul>
Titulaire de la carte : {JSON.parse(payment).nom_carte}
</ul>
<ul>
Dernière mise à jour : {(JSON.parse(payment).date_update).substring(0, 10)}
</ul>
</div>}
</ul>
))}
{paymentmode && Object.keys(paymentmode).length > 0 &&
String(new_mode_payement) !== "1" && <div className="div_row_central">
<img src={img_logo_stripe} className="img_payment" /> &nbsp;
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={menu_paymentmethode}>Editer</Button>
</div>}
{/* new_mode_payement = {new_mode_payement} <br />
paymentmode && Object.keys(paymentmode).length > 0 &&
String(new_mode_payement) === "1" &&
<div style={{
"width": "10%", "marginLeft": "auto", "marginLeft": "auto", "marginRight": "auto", "textAlign": "center",
"marginTop": "1rem", "cursor": "pointer"
}}
onClick={menu_paymentmethode}> <IoAddCircleOutline /><br />Ajouter aa</div>
*/ }
{(!paymentmode || Object.keys(paymentmode).length <= 0) &&
String(new_mode_payement) !== "1" &&
<div style={{
"width": "10%", "marginLeft": "auto", "marginLeft": "auto", "marginRight": "auto", "textAlign": "center",
"marginTop": "1rem", "cursor": "pointer"
}}
onClick={menu_paymentmethode}> <IoAddCircleOutline /><br />Ajouter</div>
}
{String(menu) === "paymentmethode" && String(new_mode_payement) === "1" && <div style={{ "width": "90%" }}>
<div style={{
"width": "10%", "marginLeft": "auto", "marginLeft": "auto", "marginRight": "auto", "textAlign": "center",
"marginTop": "1rem", "cursor": "pointer", "marginBottom": "1rem"
}}
onClick={menu_paymentmethode_close}> <IoCloseCircleOutline /><br />Fermer </div>
<PayementComponent_Carte currentpack={String(currentpack).toUpperCase()} />
</div>
}
</div>}
</div>
<div className="div_row_droite">
<div className="titre1"> Detail de Facturation </div>
{String(testval) === String("true") && <div className="okUpdateData"> La modification a ete prise en compte </div>}
{String(testval) === String("false") && <div className="koUpdateData"> Impossible de modifier les informations </div>}
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
disabled
label="Raison sociale"
name="nom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
disabled
label="num TVA"
name="vat_num"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
disabled
name="telephone"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="email"
disabled
label="Adresse mail"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<EmailIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="adr_street"
disabled
label="Adresse"
className="texte_area_adress"
sx={{ m: 1, width: '96%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="adr_zip"
disabled
label="Code Postal"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="adr_city"
disabled
label="Ville"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="adr_country"
label="Pays"
disabled
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<div className="div_row22">
{fields1desabled == false && <div className="div_row">
<div className="div_row_gauche">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregister</Button>
</div>
<div className="div_row_droite">
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={getCurrentUserData}>Annuler</Button>
</div>
</div>
}
{fields1desabled == true &&
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={enablefieds1}>Editer</Button>
}
</div>
</Box>
</div>
</div>
<hr style={{ "width": "100%" }} />
<div className="div_row">
<div className="produitsservices">
<div className="critere">
<div className="critere_gauche">
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm3">Devise </span>
<select className="form-select form-select-sm limite_input" onChange={"ChangeDevise"} aria-label=".form-select-sm example"
id={"devise"} name={"devise"} >
<option selected value="euro"></option>
{/*<option value="dollard">$ US</option>*/}
</select>
</div>
</div>
<div className="critere_droite">
<span className="span1"> Periodicité &nbsp; </span>
<button
onClick={Clik_bton_mensuel}
className="bton_radius_gauche"
id="bton_mensuel" name="bton_mensuel">Mensuelle
</button>
<button
onClick={Clik_bton_annuel}
className="bton_radius_droite"
id="bton_annuel" name="bton_annuel">Annuelle
</button>
</div>
</div>
<div className="div_row">
<div className="div_row_description">
<div className="div_basique_header"> &nbsp;
</div>
<div style={{ "marginBottom": "1rem", "background": "#E9ECEF" }}>
Produits & Services
</div>
<div className="produits_service_label">
<b> Publication des
formations </b>
<ul>
<li>Mise en ligne de votre formation
(Description, Objectif,
Programme, etc).</li>
<li>Mise en forme des textes selon
votre souhait. </li>
<li>Définition du pays et la région
de
publication</li>
<li>Import/Export Excel</li>
</ul>
</div>
<div className="produits_service_label height_Reporting">
<b> Reporting standard
automatique </b>
<ul>
<li>Nombre de fois que vos
formations ont été vues
</li>
<li>Les régions elles ont été
vues</li>
<li>Top 5 des formations avec le
détail du nombre de vu</li>
</ul>
</div>
<div className="produits_service_label height_support">
<b> Support téléphonique </b>
</div>
<div className="produits_service_label height_leads">
<b>3 Mots clés
supplémentaires </b>
<ul>
<li>Ajout de 3 mots clés
supplémentaires associés à la
formation.</li>
<li>Ces mots seront utilisés dans
la barre de recherche.</li>
</ul>
</div>
<div className="produits_service_label">
<b>Personnalisation de
l'affichage
d'une formation</b>
<ul>
<li>Ajout de vos propres images pour
communiquer sur votre structure
et votre marque.</li>
<li>Affichage de votre logo à côté
de la
formation. </li>
<li>Affichage votre bannière en
grand
sur la page détaillée.</li>
</ul>
</div>
<div className="produits_service_label">
<b>Gestion administrative
des
stagiaires (pré-inscriptions,
émargement, présence, etc)</b>
<ul>
<li>Date ouverture et fermeture des
inscriptions en ligne</li>
<li>Gestion du nombre de
participants</li>
<li> Gestion des pré-inscriptions / Inscriptions des stagiaires</li>
<li> Les listes démargement / Fiche de présence</li>
</ul>
</div>
<div className="produits_service_label height_leads">
<b>Génération automatique de
leads</b>
<ul>
<li>Lintérêt des stagiaires génère
des leads qui vous sont envoyé
automatiquement.</li>
</ul>
</div>
<div className="produits_service_label">
<b>Envoi de 1000 emails
markéting / mois pour votre
formation</b>
<ul>
<li>MySy crée un visuel de
communication sous forme demail
markéting.</li>
<li>Avec votre validation, ce visuel
est envoyé 1000 contacts de
notre base de données (ou la
vôtre) </li>
<li>Un rapport vous ai envoyé avec
la liste des personnes ayant
manifesté un intérêt pour
votre formation.</li>
</ul>
</div>
</div>
<div className="div_row_basique">
<div className="div_basique_header"> Découverte </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.8rem", "fontSize": "small" }}>
Par Formation
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_Reporting">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_support">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick ">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="div_row_basique_price">
Gratuit 15 jours
</div>
<div className="div_row_basique_price">
&nbsp;
</div>
{String(currentpack2).toLowerCase() !== "decouverte" && <div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
confirmAbonnement("Decouverte");
}}
> Activez ce pack </Button>
</div>}
{String(currentpack2).toLowerCase() === String("Decouverte") && <div className="abonnement">
<Button variant="contained"
color="success"
className="btn_arret_abonnement"
onClick={(e) => {
confirmSTOPAbonnement("Gold");
}}
> Arretez </Button>
</div>}
</div>
<div className="div_row_standard">
<div className="div_standard_header"> Standard </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.8rem", "fontSize": "small" }}>
Par Formation
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_Reporting">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_support">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="div_row_standard_price">
50 HT /mois
</div>
<div className="div_row_standard_price">
&nbsp;
</div>
{String(currentpack2).toLowerCase() !== "standard" && <div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
confirmAbonnement("Standard");
}}> Activez ce pack </Button>
</div>}
{String(currentpack2).toLowerCase() === String("standard") && <div className="abonnement">
<Button variant="contained"
color="success"
className="btn_arret_abonnement"
onClick={(e) => {
confirmSTOPAbonnement("Gold");
}}
> Arretez </Button>
</div>}
</div>
<div className="div_row_gold">
<div className="div_gold_header"> Gold </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.8rem", "fontSize": "small" }}>
Par Formation
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_Reporting">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_support">
<img src={tick_ok} alt="OK" className="tick_ok_ko " />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="div_row_gold_price">
90 HT /mois
</div>
<div className="div_row_gold_price">
&nbsp;
</div>
{String(currentpack2).toLowerCase() !== "gold" && <div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
confirmAbonnement("Gold");
}}
> Activez ce pack </Button>
</div>}
{String(currentpack2).toLowerCase() === String("gold") && (!JSON.parse(result).end_date_abonnement) &&
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_arret_abonnement"
onClick={(e) => {
confirmSTOPAbonnement("Gold");
}}
> Arretez </Button>
</div>}
{String(currentpack2).toLowerCase() === String("gold") && (JSON.parse(result).end_date_abonnement) &&
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_arret_abonnement" style={{"cursor":"none"}}
> Arrêt le {(JSON.parse(result).end_date_abonnement)} </Button>
</div>}
</div>
{<div style={{ "width": "1%" }}> &nbsp;</div>}
</div>
</div>
</div>
</div>}
</div>
);
}
export default Abonnement;