Ela_Front/src/components/ComponentProduitsServices.js

601 lines
25 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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é &nbsp; </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"> &nbsp;
</div>
<div style={{ "marginBottom": "1rem", "background": "#E9ECEF" }}>
Produits & Services
</div>
<div className="produits_service_label height_publication_header">
<b> Moteur de Recherche </b>
</div>
<div className="produits_service_label height_publication">
<b> Publication des
formations </b>
<ul>
<li>Mise en ligne de votre formation
(Description, Objectif,
Programme, etc).</li>
<li>Mise en forme des textes selon
votre souhait. </li>
<li>Définition du pays et la région
de
publication</li>
<li>Import/Export Excel</li>
</ul>
</div>
<div className="produits_service_label height_price_1">
<b> Gestion des prix </b>
<ul>
<li>Remise client / Tout public par période.
</li>
</ul>
</div>
<div className="produits_service_label height_affichage_ftion">
<b> Personnalisation de l'affichage d'une formation </b>
<ul>
<li>Ajout de vos propres images pour communiquer sur votre structure et votre marque.
</li>
<li>Affichage de votre logo à côté de la formation</li>
<li>Affichage de votre bannière en grand sur la page détaillée.</li>
</ul>
</div>
<div className="produits_service_label height_leads">
<b> Génération automatique de leads </b>
<ul>
<li>Lintérêt des stagiaires génère des leads qui vous sont envoyés automatiquement.
</li>
</ul>
</div>
<div className="produits_service_label height_appel_offre">
<b>Appels doffre </b>
<ul>
<li>Consultation des appels doffre de formation pour manifestation dintérêt.</li>
<li>Publication dun appel doffre de formation et gestion des réponses.</li>
</ul>
</div>
<div className="produits_service_label height_publication_header">
<b> Gestion Administrative & Pédagogique </b>
</div>
<div className="produits_service_label height_gestion_admin">
<b>Gestion administrative</b>
<ul>
<li>Publication catalogue formations (intranet / API)</li>
<li>Gestion des Inscriptions (mise en attente, motif annulation, etc) </li>
<li>Gestion des Sessions (planifiée, à la demande)</li>
<li>Gestion avis participants</li>
<li>Gestion des employés et du matériel pédagogique</li>
<li>Émargement électronique</li>
</ul>
</div>
<div className="produits_service_label height_gestion_crm">
<b>Gestion relation client (CRM) </b>
<ul>
<li>Gestion clients</li>
<li>Affectation et Suivi tâches</li>
<li>Catalogue prix clients</li>
<li>Devis & Commandes (envoi électronique) </li>
<li>Facturation</li>
</ul>
</div>
<div className="produits_service_label height_publication_header">
<b> Hébergement de formations (LMS) </b>
</div>
<div className="produits_service_label height_intranet">
<b>Intranet personnalisé</b>
<ul>
<li>Mise en place dun site web (intranet) personnalisé.</li>
</ul>
</div>
<div className="produits_service_label height_e_learning_persona">
<b>Plate-forme de E-learning personnalisée</b>
<ul>
<li>Nom de domaine personnalisé</li>
<li>Personnalisation de la charte graphique (couleurs & bannière) </li>
</ul>
</div>
<div className="produits_service_label height_e_learning">
<b>Système de E-learning</b>
<ul>
<li>Echange prof / apprenant (courriel interne)</li>
<li>Espace apprenant</li>
<li>Evaluation (note)</li>
<li>Gestion planning</li>
<li>Travaux dirigés & pratiques</li>
<li>Session live virtuelle</li>
</ul>
</div>
</div>
<div className="div_row_basique">
<div className="div_basique_header"> Découverte </div>
<hr style={{ "margin": "1px" }} />
<div style={{ "marginBottom": "0px", "fontSize": "small" }}>
Pour chaque Formation
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_price_1">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_affichage_ftion">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_appel_offre">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_gestion_admin">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_gestion_crm">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_intranet">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_e_learning_persona">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_e_learning">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="div_row_basique_price">
Gratuit 15 jours
</div>
<div className="div_row_basique_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
e.preventDefault();
window.location.href = "/Partner";
}}
> 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.8rem", "fontSize": "small" }}>
Pour chaque Formation
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_price_1">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_affichage_ftion">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_appel_offre">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_gestion_admin">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_gestion_crm">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_intranet">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_e_learning_persona">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_e_learning">
<img src={tick_ko} alt="KO" className="tick_ok_ko" />
</div>
<div className="div_row_standard_price">
50 HT €/mois
</div>
<div className="div_row_standard_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
e.preventDefault();
window.location.href = "/Partner";
}}> 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.8rem", "fontSize": "small" }}>
Pour chaque Formation
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_publication">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_price_1">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_affichage_ftion">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_leads">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_appel_offre">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_gestion_admin">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_gestion_crm">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_label height_publication_header">
&nbsp;
</div>
<div className="produits_service_tick height_intranet">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_e_learning_persona">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="produits_service_tick height_e_learning">
<img src={tick_ok} alt="OK" className="tick_ok_ko" />
</div>
<div className="div_row_gold_price">
90 HT /mois
</div>
<div className="div_row_gold_price">
&nbsp;
</div>
<div className="abonnement">
<Button variant="contained"
color="success"
className="btn_abonnement"
onClick={(e) => {
e.preventDefault();
window.location.href = "/Partner";
}}
> 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" }}>
&nbsp;
</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">
&nbsp;
</div>
<div className="div_row_sur_mesure_price">
&nbsp;
</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%" }}> &nbsp;</div>}
</div>
</div>
);
}
export default ProduitsServices;