import React, { useState, useEffect } from "react"; import { useForm } from "react-hook-form"; import { useHistory } from "react-router-dom"; import { Button, FormGroup, Label, Input } from "reactstrap"; import { FacebookLoginButton, GoogleLoginButton } from "react-social-login-buttons"; //import { getCookie, setCookie, removeCookie } from 'react-use-cookie'; import { Helmet } from "react-helmet"; import { useCookies } from "react-cookie"; import { confirmAlert } from 'react-confirm-alert'; // Import import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css import tick_ok from "../mysy_img/tick_OK.png"; import tick_ko from "../mysy_img/tick_KO.png"; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import axios from "axios"; import { useParams } from 'react-router-dom' import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; import Footer from "./Fotter"; import MenuItem from "@material-ui/core/MenuItem"; import Menu from "@material-ui/core/Menu"; import Header from "./Header"; function ProduitsServices() { const history = useHistory(); const [check, setCheck] = useState(false); const [periode, setperiode] = useState("Mensuel"); function handleChange(checked) { //this.setState({ checked }); setCheck(checked); if (String(periode) === String("Mensuel")) { setperiode("Annuel"); } else if (String(periode) === String("Annuel")) { setperiode("Mensuel"); } } 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 = "60%"; document.getElementsByName("bton_annuel")[0].style.color = "black"; 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 = "60%"; document.getElementsByName("bton_mensuel")[0].style.color = "black"; setperiode("Annuel"); } const [PartnerMenu, setPartnerMenu] = React.useState(null); const [AccountMenu, setAccountMenu] = React.useState(null); const PartnerMenu_Close = () => { setPartnerMenu(null); }; const AccountMenu_Close = () => { setAccountMenu(null); }; const handlePartnerMenu = (event) => { setPartnerMenu(event.currentTarget); }; const handleAccountMenu = (event) => { setAccountMenu(event.currentTarget); }; const handleClose_Account = () => { alert(" my account"); setAccountMenu(null); }; const handleAccountConnexion = () => { setAccountMenu(null); history.push("/Connexion") }; const handleAccountCreation = () => { setAccountMenu(null); history.push("/create_account") }; const handlePartnerConnexion = () => { setAccountMenu(null); history.push("/PartnerLogin") }; return (
Devise
Periodicité  
 
Produits & Services
Publication des formations
Support téléphonique
Customisation de l'affichage d'une formation
Mots clés par formation
Reporting standard
Reporting Dynamique et personnalisé
Préférence/ Diffusion géographique
Publication d'un article (plateforme + réseaux sociaux )
Community management externalisé
Accompagnement aux certifications ( NDA, QUALIOPI,…)
Design catalogue numérique
---
{/*
{String(periode) === String("Mensuel") &&
Prix par Mois
} {String(periode) === String("Annuel") &&
Prix par An
}
*/}
Découverte

 
5 Formations
OK
KO
KO
KO
KO
KO
KO
KO
KO
KO
----
Gratuit 15 jours
 
Standard

 
7 Formations
OK
OK
OK
OK
KO
KO
KO
KO
KO
KO
----
{String(periode) === String("Mensuel") && "50 €/mois"}
 
Gold

 
10 Formations
OK
OK
OK
OK
OK
OK
OK
KO
KO
KO
----
{String(periode) === String("Mensuel") && "550 €/mois"} {String(periode) === String("Annuel") && "4 950 €/an - (3 mois offerts)"}
 
Sur mesure

 
Illimité
OK
OK
OK
OK
OK
OK
OK
OK
OK
OK
----
 
 
{
 
}
); } export default ProduitsServices;