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'; import SendIcon from '@mui/icons-material/Send'; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' 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 [RecordData_api, setRecordData_api] = useState(); const [RecordData_result, setRecordData_result] = useState(); const [RecordData_message, setRecordData_message] = useState(); function RecordData() { var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append('theme_name', selected_lms_theme_text); var myurl = process.env.REACT_APP_API_URL + "myclass/api/Lms_Config_Theme_and_Logo/"; setLoading(true); 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); setRecordData_api("true"); setRecordData_result(res.data.message); setLoading(false); alert(" La mise à jour du theme a été correctement effectuée. "); } else { setRecordData_api("false"); setRecordData_message(res.data.message); setLoading(false); } }).catch((error) => { console.warn('Not good man :( GetLms_Themes = ', error); setRecordData_api("false"); setLoading(false); }) } const [selected_lms_theme, setselected_lms_theme] = useState(); const [selected_lms_theme_text, setselected_lms_theme_text] = 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); const sel = document.getElementById("lms_theme_liste"); let value = sel.options[sel.selectedIndex].value; let text = sel.options[sel.selectedIndex].text; setselected_lms_theme_text(text) } useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth", }); GetLms_Themes(); submenu_design(); }, []) const [isLoading, setLoading] = useState(); const [logo_file_name, setlogo_file_name] = useState(); const hiddenFileInput_logo = React.useRef(null); const [bg_file_name, setbg_file_name] = useState(); const hiddenFileInput_bg = React.useRef(null); const [handleSubmission_logo_api, sethandleSubmission_logo_api] = useState(); const [handleSubmission_logo_result, sethandleSubmission_logo_result] = useState(); const [handleSubmission_logo_message, sethandleSubmission_logo_message] = useState(); const [img_logo_file, setimg_logo_file] = useState(); const [img_bg_file, setimg_bg_file] = useState(); const [img_logo_file2, setimg_logo_file2] = useState(); const [img_bg_file2, setimg_bg_file2] = useState(); const handleSubmission_logo = event => { clear_message(); const fileUploaded = event.target.files[0]; let file_size = event.target.files[0].size; let file_type = event.target.files[0].type; //console.log("file_size = ", file_size, " file_type = ", file_type); //console.log(" fileUploaded = ", fileUploaded); if (file_size > 1000000) { alert("Le fichier ne doit pas dépasser un 1 Méga octets"); return; } //image/png if (String(file_type) !== "image/png") { alert("Le fichier n'est pas au format PNG"); return; } setLoading(true); var _URL = window.URL || window.webkitURL; var file, img; var img_height, img_width; if ((file = event.target.files[0])) { img = new Image(); var objectUrl = _URL.createObjectURL(file); img.onload = function () { img_height = this.height; img_width = this.width; _URL.revokeObjectURL(objectUrl); console.log(" img_width = ", img_width, " img_height = ", img_height) if (parseFloat(img_width) > 130 && parseFloat(img_width) < 260 && parseFloat(img_height) > 60 && parseFloat(img_height) < 150) { //console.log(" img_height est = ", img_height, " < à 1500 "); // Verification que le nom du fichier est alpha numerique /*var regExp = /^[A-Za-z0-9]+$/; if (!regExp.test(event.target.files[0].name)) { sethandleSubmission_logo_message(" Le nom de l'image comporte des caractères non alphanumériques"); sethandleSubmission_logo_api("false"); setLoading(false); return }*/ if (String(event.target.files[0].name).length > 50) { sethandleSubmission_logo_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère"); sethandleSubmission_logo_api("false"); setLoading(false); return } setlogo_file_name(event.target.files[0].name); setimg_logo_file(URL.createObjectURL(event.target.files[0])); setimg_logo_file2(event.target.files[0]); } else { sethandleSubmission_logo_message(" La taille de l'image est incorrecte. Larg = " + String(img_width) + " px Long = " + String(img_height) + " px"); sethandleSubmission_logo_api("false"); setLoading(false); return; } //console.log(" after img_width = ", img_width, " after img_height = ", img_height) }; img.src = objectUrl; } setLoading(false); }; const [Send_logo_Img_api, setSend_logo_Img_api] = useState(); const [Send_logo_Img_result, setSend_logo_Img_result] = useState(); const [Send_logo_Img_message, setSend_logo_Img_message] = useState(); function Send_logo_Img() { clear_message(); setLoading(true); const formData = new FormData(); formData.append('File', img_logo_file2); //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA'); const stored_cookie = getCookie('tokenmysypart'); formData.append("token", stored_cookie); fetch( process.env.REACT_APP_API_URL + "myclass/api/Lms_Add_Logo_File/", { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message']); if (String(result['status']) === String("true")) { setSend_logo_Img_api("true"); alert(" La mise à jour du logo a été correctement effectuée. "); }else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { setSend_logo_Img_api("false"); setSend_logo_Img_message(result['message']); } setLoading(false); }) .catch((error) => { console.error('Error:', result); setSend_logo_Img_api("false"); setSend_logo_Img_message(result['message']); setLoading(false); }); } const changeHandler2_logo = (event) => { clear_message(); hiddenFileInput_logo.current.click(); }; const [handleSubmission_bg_api, sethandleSubmission_bg_api] = useState(); const [handleSubmission_bg_result, sethandleSubmission_bg_result] = useState(); const [handleSubmission_bg_message, sethandleSubmission_bg_message] = useState(); const handleSubmission_bg = event => { clear_message(); const fileUploaded = event.target.files[0]; let file_size = event.target.files[0].size; let file_type = event.target.files[0].type; console.log("file_size = ", file_size, " file_type = ", file_type, " naturalWidth = ", fileUploaded.naturalWidth); if (file_size > 1000000) { alert("Le fichier ne doit pas dépasser un 1 Méga octets"); return; } //image/png if (String(file_type) !== "image/png") { alert("Le fichier n'est pas au format PNG"); return; } setLoading(true); var _URL = window.URL || window.webkitURL; var file, img; var img_height, img_width; if ((file = event.target.files[0])) { img = new Image(); var objectUrl = _URL.createObjectURL(file); img.onload = function () { img_height = this.height; img_width = this.width; //console.log(" img_width = ", img_width); _URL.revokeObjectURL(objectUrl); if (parseFloat(img_width) > 1500 && parseFloat(img_width) < 1930 && parseFloat(img_height) > 150 && parseFloat(img_height) < 195) { //console.log(" img_height est = ", img_height, " < à 1500 "); // Verification que le nom du fichier est alpha numerique /*var regExp = /^[A-Za-z0-9]+$/; if (!regExp.test(event.target.files[0].name)) { sethandleSubmission_bg_message(" Le nom de l'image comporte des caractères non alphanumériques"); sethandleSubmission_bg_api("false"); setLoading(false); return }*/ if (String(event.target.files[0].name).length > 50) { sethandleSubmission_bg_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère"); sethandleSubmission_bg_api("false"); setLoading(false); return } setbg_file_name(event.target.files[0].name); setimg_bg_file(URL.createObjectURL(event.target.files[0])); setimg_bg_file2(event.target.files[0]); } else { sethandleSubmission_bg_message(" La taille de l'image est incorrecte. Larg = " + String(img_width) + " px Long = " + String(img_height) + " px"); sethandleSubmission_bg_api("false"); setLoading(false); return; } }; img.src = objectUrl; } setLoading(false); }; const [SendBackground_Img_api, setSendBackground_Img_api] = useState(); const [SendBackground_Img_result, setSendBackground_Img_result] = useState(); const [SendBackground_Img_message, setSendBackground_Img_message] = useState(); function SendBackground_Img() { clear_message(); setLoading(true); const formData = new FormData(); formData.append('File', img_bg_file2); //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA'); const stored_cookie = getCookie('tokenmysypart'); formData.append("token", stored_cookie); fetch( process.env.REACT_APP_API_URL + "myclass/api/Lms_Add_BG_File/", { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { //console.log('Success:', result['message']); if (String(result['status']) === String("true")) { setSendBackground_Img_api("true"); alert(" L'image bannière a été correctement mise à jour") }else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { setSendBackground_Img_api("false"); setSendBackground_Img_message(result['message']); } setLoading(false); }) .catch((error) => { console.error('Error:', result); setSendBackground_Img_api("false"); setSendBackground_Img_message(result['message']); setLoading(false); }); }; const changeHandler2_bg = (event) => { clear_message(); hiddenFileInput_bg.current.click(); }; function clear_message() { sethandleSubmission_logo_message(); sethandleSubmission_logo_api(); setSendBackground_Img_api(); setSendBackground_Img_message(); } const [submenu, setsubmenu] = useState("design"); function submenu_design() { clear_message(); setsubmenu("design"); } function submenu_logo() { clear_message(); setsubmenu("logo"); } function submenu_img_bg() { clear_message(); setsubmenu("img_bg"); } function Annule_bg_img() { clear_message(); setimg_bg_file(); setimg_bg_file2(); sethandleSubmission_bg_message(); setSendBackground_Img_api(); setSendBackground_Img_message(); setbg_file_name(); } function Annule_logo_img() { clear_message(); setimg_logo_file(); setimg_logo_file2(); sethandleSubmission_logo_message(); setSend_logo_Img_api(); setSend_logo_Img_message(); setlogo_file_name(); } return (
{isLoading &&
} {String(menu) === String("default") &&

Parametrage de l'environnement LMS


}
{String(submenu) === String("design") &&
{String(RecordData_api) === "true" &&
la mise à jour a été correctement faite
} {String(RecordData_api) === "false" &&
{RecordData_message}
}
Choisir un exemple de thème :
Le modèle d'attestation :
 
{
}
 
} {String(submenu) === String("logo") &&
Import du logo
 

{logo_file_name && } {img_logo_file && } {String(Send_logo_Img_api) === "true" &&
La mise à jour a été correctement faite
} {String(Send_logo_Img_api) === "false" &&
{Send_logo_Img_message}
} {String(handleSubmission_logo_api) === "false" &&
{handleSubmission_logo_message}
}
 
{
}
 
} {String(submenu) === String("img_bg") &&
Import du background
 

{bg_file_name && } {img_bg_file && } {String(SendBackground_Img_api) === "true" &&
La mise à jour a été correctement faite
} {String(SendBackground_Img_api) === "false" &&
{SendBackground_Img_message}
} {String(handleSubmission_bg_api) === "false" &&
{handleSubmission_bg_message}
}
 
{
}
 
}
); } export default HebergementLms;