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 (