809 lines
34 KiB
JavaScript
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>
|
|
}
|
|
|
|
|
|
|
|
|
|
<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é </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">
|
|
</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" }}>
|
|
|
|
</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">
|
|
|
|
</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" }}>
|
|
|
|
</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">
|
|
|
|
</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" }}>
|
|
|
|
</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">
|
|
|
|
</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" }}>
|
|
|
|
</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">
|
|
|
|
</div>
|
|
<div className="div_row_sur_mesure_price">
|
|
|
|
</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%" }}> </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; |