493 lines
20 KiB
JavaScript
493 lines
20 KiB
JavaScript
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 (
|
|
<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" }}>
|
|
Produits & Services
|
|
</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 className="div_row_description" >
|
|
{String(periode) === String("Mensuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
|
|
Prix par Mois
|
|
|
|
</div>}
|
|
|
|
{String(periode) === String("Annuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
|
|
Prix par An
|
|
|
|
</div>}
|
|
|
|
</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) => {
|
|
e.preventDefault();
|
|
window.location.href = "/ContactezNous";
|
|
}}
|
|
> Je m'abonne </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") && "50 €/mois"}
|
|
|
|
|
|
</div>
|
|
|
|
<div className="div_row_standard_price">
|
|
|
|
</div>
|
|
|
|
<div className="abonnement">
|
|
<Button variant="contained"
|
|
color="success"
|
|
className="btn_abonnement"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
window.location.href = "/ContactezNous";
|
|
}}> Je m'abonne </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) => {
|
|
e.preventDefault();
|
|
window.location.href = "/ContactezNous";
|
|
}}
|
|
> Je m'abonne </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>
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
export default ProduitsServices; |