Ela_Front/src/components/UpgradeToPro.js

809 lines
34 KiB
JavaScript

import React, { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
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 { Button, } from "reactstrap";
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 ProduitsServices from "./ComponentProduitsServices";
import tick_ok from "../mysy_img/tick_OK.png";
import tick_ko from "../mysy_img/tick_KO.png";
import { confirmAlert } from 'react-confirm-alert';
import { getCookie, setCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
function UpgradeToPro() {
const history = useHistory();
const [fields1desabled, setfields1desabled] = useState(true);
const [periode, setperiode] = useState("Mensuel");
const [isconnected, setisconnected] = useState("");
const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [gotocheckout, setgotocheckout] = useState("");
useEffect(() => {
}, [gotocheckout])
// recuperation et gestion du token utilisateur
const stored_user = getCookie('tokenmysych');
if (!stored_user || stored_user.length <= 0) {
history.push("/mysy-user-account");
}
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 = "40%";
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 = "40%";
setperiode("Annuel");
}
function checkRequiredInfo() {
var mymail = document.getElementsByName("email")[0].value;
var re = /\S+@\S+\.\S+/;
if (re.test(mymail) === false) {
alert("l'adresse email est incorrecte");
return false;
}
var nom = document.getElementsByName("nom")[0].value;
if (nom.length < 3) {
alert("le nom est incorrect");
return false;
}
var telephone = document.getElementsByName("telephone")[0].value;
if (telephone.length < 6) {
alert("le telephone est incorrect");
return false;
}
var adr_street = document.getElementsByName("adr_street")[0].value;
if (adr_street.length < 6) {
alert("la rue est incorrecte");
return false;
}
var adr_zip = document.getElementsByName("adr_zip")[0].value;
if (adr_zip.length < 3) {
alert("le code postal est incorrect");
return false;
}
var adr_city = document.getElementsByName("adr_city")[0].value;
if (adr_city.length < 3) {
alert("la ville est incorrecte");
return false;
}
var adr_country = document.getElementsByName("adr_country")[0].value;
if (adr_country.length < 3) {
alert("le pays est incorrect");
return false;
}
}
// Cette fonction appelle l'API d'upgrade
function UpgradeToPro(pack) {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/UpgradetoPro/";
var nom = document.getElementsByName("nom")[0].value;
var telephone = document.getElementsByName("telephone")[0].value;
var email = document.getElementsByName("email")[0].value;
var link_linkedin = document.getElementsByName("link_linkedin")[0].value;
var link_facebook = document.getElementsByName("link_facebook")[0].value;
var link_twitter = document.getElementsByName("link_twitter")[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_user);
formData.append("pack_service", pack);
formData.append("nom", nom);
formData.append("telephone", telephone);
formData.append("email", email);
formData.append('link_linkedin', link_linkedin);
formData.append("link_facebook", link_facebook);
formData.append("link_twitter", link_twitter);
formData.append('adr_street', adr_street);
formData.append("adr_zip", adr_zip);
formData.append("adr_city", adr_city);
formData.append("adr_country", adr_country);
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']) === String("true")) {
alert(String(result['message']));
setmyApiResponse("1");
}else if (String(result['status']) === String("Err_Connexion")) {
alert('Erreur: ' + result['message']);
history.push("/Connexion");
}
else {
//alert(" GRR "+String(result['message']+ " result['status'] = "+ result['status']));
setisconnected("false");
setmyApimyApiMessage(result['message']);
setmyApiResponse("0")
}
})
.catch((error) => {
console.error('Error:', error);
setmyApiResponse("0");
setisconnected("false");
setmyApimyApiMessage("Le service est momentanémentindisponible, merci de ressayer plus tard. ");
});
}
function confirmAbonnement(packs) {
if (checkRequiredInfo() === false) {
return;
}
confirmAlert({
title: "Confirmer l'abonnement au pack " + packs,
message: '',
buttons: [
{
label: 'Oui',
onClick: () => { UpgradeToPro(packs); window.scrollTo({
top: 0,
behavior: "smooth",
}); }
},
{
label: 'Non',
onClick: () => { return }
}
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
return (
<div className='upgradetopro'>
<div>
<div className="titre1"> Upgrade du compte </div>
<hr className="my_hr" />
{String(myApiResponse) === String("1") && <div className="okUpdateData">
Votre compte a été correctement migré. <br />
Vous allez recevoir les nouvelles informations de connection par email sous peu. <br /> <b>/!\ Pensez à regarder dans vos spams.</b>
</div>
}
{String(myApiResponse) === String("0") && <div className="koUpdateData">
La migration de votre compte a echoué<br />
{myApimyApiMessage}
</div>
}
&nbsp;
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Raison sociale"
name="nom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
required
name="telephone"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="email"
label="Adresse mail"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<EmailIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="link_linkedin"
label="LinkedIn"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LinkedInIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="link_facebook"
label="Facebook"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<FacebookIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="link_twitter"
label="Twitter"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<TwitterIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
required
name="adr_street"
label="Adresse"
className="texte_area_adress"
sx={{ m: 1, width: '90%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
required
name="adr_zip"
label="Code Postal"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="adr_city"
label="Ville"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
required
name="adr_country"
label="Pays"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<br />
<hr className="my_hr" />
<div className="titre1"> Choisir une plan </div>
<br />
<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" }}>
Prix
</div>
<div className="produits_service_label">
Publication des formations
</div>
<div className="produits_service_label">
Support téléphonique
</div>
<div className="produits_service_label">
Customisation de l'affichage d'une formation
</div>
<div className="produits_service_label">
Mots clés par formation
</div>
<div className="produits_service_label">
Reporting standard
</div>
<div className="produits_service_label">
Reporting Dynamique et personnalisé
</div>
<div className="produits_service_label">
Préférence/ Diffusion géographique
</div>
<div className="produits_service_label">
Publication d'un article
(plateforme + réseaux sociaux )
</div>
<div className="produits_service_label">
Community management externalisé
</div>
<div className="produits_service_label">
Accompagnement aux certifications ( NDA, QUALIOPI,)
</div>
<div className="produits_service_label">
Design catalogue numérique
</div>
<div className="produits_service_label">
---
</div>
</div>
<div className="div_row_basique">
<div className="div_basique_header"> Découverte </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.5rem" }}>
&nbsp;
</div>
<div className="produits_service_tick">
5 Formations
</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">
<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">
<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">
<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">
----
</div>
<div className="div_row_basique_price">
Gratuit 15 jours
</div>
<div className="div_row_basique_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
confirmAbonnement("Decouverte");
}}
> Activer le compte PRO </Button>
</div>
</div>
<div className="div_row_standard">
<div className="div_standard_header"> Standard </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.5rem" }}>
&nbsp;
</div>
<div className="produits_service_tick">
7 Formations
</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">
<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">
<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">
<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">
----
</div>
<div className="div_row_standard_price">
{String(periode) === String("Mensuel") && "350 €/mois"}
{String(periode) === String("Annuel") && "1 500 €/an - (2 mois offerts)"}
</div>
<div className="div_row_standard_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
confirmAbonnement("Standard");
}}> Activer le compte PRO </Button>
</div>
</div>
<div className="div_row_gold">
<div className="div_gold_header"> Gold </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.5rem" }}>
&nbsp;
</div>
<div className="produits_service_tick">
10 Formations
</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">
<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">
<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">
<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">
----
</div>
<div className="div_row_gold_price">
{String(periode) === String("Mensuel") && "550 €/mois"}
{String(periode) === String("Annuel") && "4 950 €/an - (3 mois offerts)"}
</div>
<div className="div_row_gold_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
confirmAbonnement("Gold");
}}
> Activer le compte PRO </Button>
</div>
</div>
<div className="div_row_sur_mesure">
<div className="div_sur_mesure_header"> Sur mesure </div>
<hr style={{ "margin": "0.2rem" }} />
<div style={{ "marginBottom": "0.5rem" }}>
&nbsp;
</div>
<div className="produits_service_tick">
Illimité
</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">
<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">
<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">
<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">
----
</div>
<div className="div_row_sur_mesure_price">
&nbsp;
</div>
<div className="div_row_sur_mesure_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement_sur_mesure"
style={{ "whiteSpace": "nowrap", "paddingLeft": "1px" }}
onClick={(e) => {
e.preventDefault();
window.location.href = "/ContactezNous";
}}
> CONTACTEZ-NOUS </Button>
</div>
</div>
{<div style={{ "width": "1%" }}> &nbsp;</div>}
</div>
</div>
<hr className="my_hr" />
<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"}>Enregistrer</Button>
</div>
<div className="div_row_droite">
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={"desablefield1"}>Annuler</Button>
</div>
</div>
}
</div>
</Box>
</div>
</div>);
}
export default UpgradeToPro;