20/04/23 - 16h

recette2
cherif 2023-04-20 15:42:30 +02:00
parent 7a4a1b8c69
commit 9e3f65a6c8
8 changed files with 562 additions and 27 deletions

View File

@ -1119,7 +1119,7 @@ function CheckOut(props) {
<div className="checkout">
{isLoading && <div className="loader-container">
<div> <img src={img_loading_spin} /> </div>
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
</div>}
{String(apiorderid) === String("0") && <div className="koUpdateData">

View File

@ -0,0 +1,152 @@
import React, { useRef, useState, useEffect } from "react";
import Button from '@mui/material/Button';
import { getCookie } from 'react-use-cookie';
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import axios from "axios";
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 { useHistory } from "react-router-dom";
import OrderConfirmation from "./OrderConfirmation";
import { IoAddCircleOutline } from "react-icons/io5";
import MyPaymentMethode from "./PaymentMethode";
import img_visa_mastercard from "./../mysy_img/visa_mastercard.png"
import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png";
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import img_paypal from "./../mysy_img/paypal.png"
import moment from "moment";
import {
CardElement,
useStripe,
useElements,
} from '@stripe/react-stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { PaymentElement } from '@stripe/react-stripe-js';
import Popup from 'reactjs-popup';
const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p');
//const stripePromise_PROD = loadStripe('pk_live_51LUUfAAbmaEugrFTyfNe4Dj0vbxc5qXQqNs0rztjAKy8oSlc5EEQyJGjA8Z5kXmP2gvUMcYLUBYCIyWWzLCw59RY00PtGInkVf');
function HebergementLms(props) {
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [menu, setmenu] = useState("default");
const [fields1desabled, setfields1desabled] = useState(true);
const [periode, setperiode] = useState("Mensuel");
const [testval, settestval] = useState();
const [gotocheckout, setgotocheckout] = useState("0");
const [currentpack, setcurrentpack] = useState(props.packs);
const [periodicity, setperiodicity] = useState(props.periodicity);
const [packprice, setpackprice] = useState(props.mypackprice);
const [getpackproducts, setgetpackproducts] = useState();
const scrollDiv = useRef(null);
const [okcommande, setokcommande] = useState();
const stripe = useStripe();
const elements = useElements();
// recuperation et gestion du token utilisateur
const history = useHistory();
const stored_part = getCookie('tokenmysypart');
if (!stored_part || stored_part.length <= 0) {
history.push("/PartnerLogin");
}
const [GetLms_Themes_api, setGetLms_Themes_api] = useState();
const [GetLms_Themes_message, setGetLms_Themes_message] = useState();
const [GetLms_Themes_result, setGetLms_Themes_result] = useState();
function GetLms_Themes(event) {
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Lms_Themes/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === "true") {
//console.log(" In GetLms_Themes res.data.status = " + res.data.status);
//console.log(" In GetLms_Themes res.data.message r_class = " + res.data.message);
setGetLms_Themes_api("true");
setGetLms_Themes_result(res.data.message);
}
else {
setGetLms_Themes_api("false");
setGetLms_Themes_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( GetLms_Themes = ', error);
setGetLms_Themes_api("false");
})
}
const [selected_lms_theme, setselected_lms_theme] = useState();
const [urlpreview_lms_theme, seturlpreview_lms_theme] = useState();
function handleChangeselected_lms_theme(event) {
var val = event.target.value
GetLms_Themes(val)
seturlpreview_lms_theme(val);
}
useEffect(() => {
GetLms_Themes();
}, [])
return (
<div className="hebergementlms">
{String(menu) === String("default") && <div>
<h2 style={{ "textAlign": "center", "marginBottom": "2rem" }} ref={scrollDiv}> Espace de parametrage de l'environnement d'hébergement</h2>
<br />
</div>}
<div className="session_caract">Choisir un modèle d'attestation :
<select id="certif_liste" name="certif_liste" value={selected_lms_theme} onChange={handleChangeselected_lms_theme} className="selectsession">
<option value="">Choisir un modèle </option>
{GetLms_Themes_result &&
GetLms_Themes_result.map((lms_theme) => (
<option value={JSON.parse(lms_theme).template_preview_url}>
{JSON.parse(lms_theme).nom_template}
</option>
))}
</select>
</div>
<div className="session_caract">Le modèle d'attestation :
<img className="preview_certif" src={urlpreview_lms_theme} />
</div>
</div>);
}
export default HebergementLms;

View File

@ -4,6 +4,7 @@ import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import profileimg from "../mysy_img/MYSY-profil-2.png";
import TrainingForm from "./AddClassManual"
import PartnerTranings from "./DisplayPartnerTrainingsPagination";
import HebergementLms from "./HebergementLms";
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';
import { getCookie } from 'react-use-cookie';
@ -26,9 +27,11 @@ import { IoCheckmarkCircleSharp } from "react-icons/io5";
import { FaHandPointRight } from "react-icons/fa";
import OrderConfirmation from "./OrderConfirmation";
import Pricing from "./Pricing";
import {FcHome, FcButtingIn, FcDepartment, FcBullish, FcAddDatabase, FcFolder,
FcList, FcGraduationCap, FcMultipleDevices, FcCurrencyExchange,
FcMoneyTransfer, FcFeedback, FcKey, FcVideoCall } from "react-icons/fc";
import {
FcHome, FcButtingIn, FcDepartment, FcBullish, FcAddDatabase, FcFolder,
FcList, FcGraduationCap, FcMultipleDevices, FcCurrencyExchange,
FcMoneyTransfer, FcFeedback, FcKey, FcVideoCall, FcSettings
} from "react-icons/fc";
//import { FcHome} from "react-icons/fc";
@ -254,6 +257,12 @@ const Partner = (props) => {
setformation_file_name();
}
function DisplaySetUpLMS(event) {
setmenu("setuplms");
setapiexcelimportmessage();
setformation_file_name();
}
function DisplayFacure(event) {
setmenu("facture");
@ -542,7 +551,7 @@ const Partner = (props) => {
setGetPartnerLMSData_api("true");
setGetPartnerLMSData_result(res.data.message);
var my_lms_url = "";
if (JSON.parse(res.data.message).lms_account &&
String(JSON.parse(res.data.message).lms_account) === "1") {
@ -601,35 +610,35 @@ const Partner = (props) => {
<div className="nom_prenom"> {parntername && <b> {parntername}&nbsp;-&nbsp;{String(partnerPackService).toUpperCase()} ({parnternbformation})</b>}
{!parntername && <b> Partenaire </b>} </div>
<hr className="my_hr" />
{String(menu) !== "infopartner" && <div className="sousmenu" onClick={PersonnalData}> <FcHome className="icone_menu"/> DONNEES PERSONNELLES</div>}
{String(menu) === "infopartner" && <div className="sousmenu_selected" onClick={PersonnalData} > <FcHome className="icone_menu"/> DONNEES PERSONNELLES</div>}
{String(menu) !== "infopartner" && <div className="sousmenu" onClick={PersonnalData}> <FcHome className="icone_menu" /> DONNEES PERSONNELLES</div>}
{String(menu) === "infopartner" && <div className="sousmenu_selected" onClick={PersonnalData} > <FcHome className="icone_menu" /> DONNEES PERSONNELLES</div>}
<hr className="my_hr" />
{String(menu) !== "creation" && <div className="sousmenu" onClick={CreateTraining}> <FcAddDatabase className="icone_menu"/> CREER FORMATION</div>}
{String(menu) === "creation" && <div className="sousmenu_selected" onClick={CreateTraining}> <FcAddDatabase className="icone_menu"/> CREER FORMATION</div>}
{String(menu) !== "creation" && <div className="sousmenu" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> CREER FORMATION</div>}
{String(menu) === "creation" && <div className="sousmenu_selected" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> CREER FORMATION</div>}
<hr className="my_hr" />
{String(menu) !== "affichage" && <div className="sousmenu" onClick={DiplaytrainingList} > <FcList className="icone_menu"/> MES FORMATIONS</div>}
{String(menu) === "affichage" && <div className="sousmenu_selected" onClick={DiplaytrainingList} ><FcList className="icone_menu"/> MES FORMATIONS</div>}
{String(menu) !== "affichage" && <div className="sousmenu" onClick={DiplaytrainingList} > <FcList className="icone_menu" /> MES FORMATIONS</div>}
{String(menu) === "affichage" && <div className="sousmenu_selected" onClick={DiplaytrainingList} ><FcList className="icone_menu" /> MES FORMATIONS</div>}
<hr className="my_hr" />
{String(menu) !== "abonnement" && <div className="sousmenu" onClick={Abonnement_func} > <FcKey className="icone_menu"/> ABONNEMENT </div>}
{String(menu) === "abonnement" && <div className="sousmenu_selected" onClick={Abonnement_func} > <FcKey className="icone_menu"/> ABONNEMENT </div>}
{String(menu) !== "abonnement" && <div className="sousmenu" onClick={Abonnement_func} > <FcKey className="icone_menu" /> ABONNEMENT </div>}
{String(menu) === "abonnement" && <div className="sousmenu_selected" onClick={Abonnement_func} > <FcKey className="icone_menu" /> ABONNEMENT </div>}
<hr className="my_hr" />
{String(menu) !== "pricing" && <div className="sousmenu" onClick={pricing_func} ><FcCurrencyExchange className="icone_menu"/> MES PRIX </div>}
{String(menu) === "pricing" && <div className="sousmenu_selected" onClick={pricing_func} > <FcCurrencyExchange className="icone_menu"/>MES PRIX </div>}
{String(menu) !== "pricing" && <div className="sousmenu" onClick={pricing_func} ><FcCurrencyExchange className="icone_menu" /> MES PRIX </div>}
{String(menu) === "pricing" && <div className="sousmenu_selected" onClick={pricing_func} > <FcCurrencyExchange className="icone_menu" />MES PRIX </div>}
<hr className="my_hr" />
{String(menu) !== "facture" && <div className="sousmenu" onClick={DisplayFacure} ><FcFeedback className="icone_menu"/> FACTURATION</div>}
{String(menu) === "facture" && <div className="sousmenu_selected" onClick={DisplayFacure} > <FcFeedback className="icone_menu"/>FACTURATION</div>}
{String(menu) !== "facture" && <div className="sousmenu" onClick={DisplayFacure} ><FcFeedback className="icone_menu" /> FACTURATION</div>}
{String(menu) === "facture" && <div className="sousmenu_selected" onClick={DisplayFacure} > <FcFeedback className="icone_menu" />FACTURATION</div>}
<hr className="my_hr" />
{String(menu) !== "statistique" && <div className="sousmenu" onClick={DisplayStat}> <FcBullish className="icone_menu"/> STATISTIQUES</div>}
{String(menu) === "statistique" && <div className="sousmenu_selected" onClick={DisplayStat}> <FcBullish className="icone_menu"/> STATISTIQUES</div>}
{String(menu) !== "statistique" && <div className="sousmenu" onClick={DisplayStat}> <FcBullish className="icone_menu" /> STATISTIQUES</div>}
{String(menu) === "statistique" && <div className="sousmenu_selected" onClick={DisplayStat}> <FcBullish className="icone_menu" /> STATISTIQUES</div>}
<hr className="my_hr" />
{String(has_partner_lms_url) === "1" && <div className="sousmenu_hebergement_lms" onClick={(e) => {
@ -640,9 +649,12 @@ const Partner = (props) => {
);
}}> <FcVideoCall className="icone_menu"/> MON HEBERGEMENT </div> }
}}> <FcVideoCall className="icone_menu" /> MON HEBERGEMENT </div>}
<hr className="my_hr" />
{String(menu) !== "statistique" && <div className="sousmenu" onClick={DisplaySetUpLMS}> <FcSettings className="icone_menu" /> SetUp LMS</div>}
{String(menu) === "statistique" && <div className="sousmenu_selected" onClick={DisplaySetUpLMS}> <FcSettings className="icone_menu" /> SetUp LMS</div>}
<hr className="my_hr" />
</div>
{String(firstConnexion) === "1" &&
@ -828,6 +840,15 @@ const Partner = (props) => {
</div>
}
{String(menu) === "setuplms" &&
<div className="div_droite">
<HebergementLms />
</div>
}
{String(menu) === "facture" && <div className="div_droite">
{/*String(partnerstatus) === String("1") &&
<div className="accountsatatus"> Finalisez la création de votre compte en ajoutant le moyen de payement de votre choix :)

View File

@ -872,7 +872,7 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
setPokemon(response.data); //set pokemon state
setLoading(false); //set loading state
});
}, 50000);
}, 500000);
}
@ -897,7 +897,9 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
<div>
{isLoading && <div className="loader-container">
<div> <img src={img_loading_spin} /> </div>
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
</div>}

View File

@ -8,13 +8,20 @@
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
//justify-content: center;
align-items: center;
left: -5%;
position: fixed;
background: rgba(0, 0, 0, 0.834);
z-index: 1;
top: 0px;
opacity: 80%;
background: white;
background-color: transparent;
}
.mysy_spinner{
border-radius: 5px;
border: 1px solid black;
opacity: 100%;
}
.spinner {

View File

@ -0,0 +1,342 @@
.hebergementlms {
@media only screen and (max-width: 600px) {
/*style smartphones et petites tablettes en portrait*/
.okUpdateData {
font-size: small;
color: green;
font-style: italic;
}
.koUpdateData {
font-size: small;
color: red;
font-style: italic;
}
.div_row {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 100%;
margin-bottom: 1rem;
}
.div_row_gauche {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 95%;
border-radius: 0px;
margin-bottom: 1rem;
}
.div_row_droite {
float: right;
//border:0px solid black;
border-width: 0.01rem;
width: 95%;
padding-left: 2%;
border-radius: 0px;
}
.btn_modif {
width: 10rem;
background-color: #212121 !important;
color: white;
}
.btn_enreg {
width: 10rem;
background-color: green !important;
color: white;
}
.div_row_center {
border-left: 0rem solid;
border-width: 0rem;
width: 80%;
padding-left: 5px;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 2rem;
}
.btn_enreg_cmd {
background: #81BC3A;
padding: 0.3rem;
border-radius: 5rem;
font-size: small;
text-align: left;
border: solid 1px;
height: 2.5rem;
color: white;
width: 90%;
}
}
@media only screen and (min-width: 601px) and (max-width: 991px) {
/*style petites-moyennes tablettes */
.okUpdateData {
font-size: small;
color: green;
font-style: italic;
}
.koUpdateData {
font-size: small;
color: red;
font-style: italic;
}
.div_row {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 100%;
margin-bottom: 1rem;
}
.div_row_gauche {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 45%;
border-radius: 0px;
}
.div_row_droite {
border-left: 1rem solid;
float: right;
//border:0px solid black;
border-width: 0.01rem;
width: 55%;
padding-left: 2%;
border-radius: 0px;
}
.btn_modif {
width: 10rem;
background-color: #212121 !important;
color: white;
}
.btn_enreg {
width: 10rem;
background-color: green !important;
color: white;
}
.div_row_center {
border-left: 0rem solid;
border-width: 0rem;
width: 60%;
padding-left: 5px;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 2rem;
}
.btn_enreg_cmd {
background: #81BC3A;
padding: 0.3rem;
border-radius: 5rem;
font-size: small;
text-align: left;
border: solid 1px;
height: 2.5rem;
color: white;
width: 80%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.okUpdateData {
font-size: small;
color: green;
font-style: italic;
}
.koUpdateData {
font-size: small;
color: red;
font-style: italic;
}
.div_row {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 100%;
margin-bottom: 1rem;
}
.div_row_gauche {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 45%;
border-radius: 0px;
}
.div_row_droite {
border-left: 1rem solid;
float: right;
//border:0px solid black;
border-width: 0.01rem;
width: 55%;
padding-left: 2%;
border-radius: 0px;
}
.btn_modif {
width: 10rem;
background-color: #212121 !important;
color: white;
}
.btn_enreg {
width: 10rem;
background-color: green !important;
color: white;
}
.div_row_center {
border-left: 0rem solid;
border-width: 0rem;
width: 50%;
padding-left: 5px;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 2rem;
}
.btn_enreg_cmd {
background: #81BC3A;
padding: 0.3rem;
border-radius: 5rem;
font-size: small;
text-align: left;
border: solid 1px;
height: 2.5rem;
color: white;
width: 80%;
}
}
@media only screen and (min-width: 1200px) {
/*style grande tablettes & Pc portable */
.okUpdateData {
font-size: small;
color: green;
font-style: italic;
}
.koUpdateData {
font-size: small;
color: red;
font-style: italic;
}
.div_row {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 100%;
margin-bottom: 1rem;
}
.div_row_gauche {
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 50%;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
}
.div_row_droite {
border-left: 0rem solid;
float: right;
//border:0px solid black;
border-width: 0rem;
width: 50%;
padding-left: 5px;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
}
.div_row_center {
border-left: 0rem solid;
border-width: 0rem;
width: 50%;
padding-left: 5px;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 2rem;
}
.btn_modif {
width: 10rem;
background-color: #212121 !important;
color: white;
}
.btn_enreg {
width: 10rem;
background-color: green !important;
color: white;
}
.preview_certif {
display: block;
width: 90%;
height: 200px;
border-radius: 1rem !important;
margin-top: 1rem !important;
}
.preview_certif:hover {
transform: scale(1.8);
margin-left: 10rem;
}
.session_caract {
width: 30%;
padding: 5px;
float: left;
text-align: left;
font-size: small;
}
}
// End media
}

View File

@ -11,12 +11,14 @@
justify-content: center;
align-items: center;
position: fixed;
background: rgba(0, 0, 0, 0.834);
z-index: 1;
top: 0px;
opacity: 80%;
background: white;
background-color: transparent;
}
.spinner {
width:20rem;
height: 10rem;
@ -26,6 +28,14 @@
animation: spin-anim 1.2s linear infinite;
background-color: red;
color: black;
z-index: 2;
opacity: 100%;
}
.mysy_spinner{
border-radius: 5px;
border: 1px solid black;
opacity: 100%;
}

View File

@ -63,3 +63,4 @@
@import "./components/displaydetailclass_new_v2";
@import "./components/sedesabonner";
@import "./components/pricing";
@import "./components/hebergementlms";