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 '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 Footer from "./Fotter"; import MenuItem from "@material-ui/core/MenuItem"; import Menu from "@material-ui/core/Menu"; import Header from "./Header"; import SendIcon from '@mui/icons-material/Send'; 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 = "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"); } 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") }; function sendEmail() { window.location = "mailto:contact@mysy-training.com"; } return (