import React, { useState, useEffect, useCallback, useRef } from "react";
import axios from "axios";
import { Helmet } from "react-helmet";
import SideBar from "./sidebar";
import ReactPlayer from 'react-player'
import { Slide } from 'react-slideshow-image';
import { Zoom } from 'react-slideshow-image';
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import 'react-slideshow-image/dist/styles.css'
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { useParams } from 'react-router-dom'
import Select, { StylesConfig } from 'react-select';
import IconButton from '@mui/material/IconButton';
import { Fade } from 'react-slideshow-image';
import { getCookie, setCookie } from 'react-use-cookie';
import Button from '@mui/material/Button';
import { FaHandPointRight } from "react-icons/fa";
import Header from "./Header";
import { useLocation } from "react-router-dom";
import fileDownload from 'js-file-download'
import { ReactSearchAutocomplete } from 'react-search-autocomplete'
import { WorkRounded } from "@mui/icons-material";
import * as V from 'victory';
import { VictoryBar, VictoryLine, VictoryScatter, VictoryChart } from 'victory';
import Canvas from 'react-canvas-js'
import { ResponsiveContainer, LineChart, Line, BarChart, Bar, CartesianGrid, XAxis, YAxis, Legend } from 'recharts';
import Chart from 'react-apexcharts'
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import moment from "moment";
import { DateRange } from "react-date-range";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
import { Editor } from '@tinymce/tinymce-react';
import { ImMobile2, ImWhatsapp, ImHome, ImOffice } from "react-icons/im";
import { BsMailbox } from "react-icons/bs";
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 'reactjs-popup/dist/index.css';
import Formation from "./Formation";
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import {
CardElement,
useStripe,
useElements,
} from '@stripe/react-stripe-js';
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import MUIDataTable from "mui-datatables";
import { createTheme, ThemeProvider } from '@mui/material/styles';
// pour le payement stripe : https://stripe.com/docs/payments/quickstart?client=react&lang=python
const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p');
const TestUrl = (props) => {
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState(null);
const options = {
// passing the client secret obtained from the server
clientSecret: '{{CLIENT_SECRET}}',
};
const [interpolation, setinterpolation] = useState("linear");
const [polar, setpolar] = useState(false);
const [suggestedwords, setsuggestedwords] = useState([]);
const [texte, settext] = useState("");
const [phoneNumber, setphoneNumber] = useState("")
const { classId } = useParams();
const [pokemon, setPokemon] = useState();
const location = useLocation();
useEffect(() => {
}, []);
const [suggestion2, setsuggestion2] = useState([]);
function changech(e) {
var val = e.target.value;
let matches = [];
if (String(val).length > 0) {
matches = suggestedwords.filter(usr => {
//alert(JSON.parse(usr).name );
const regex = new RegExp(`${val}`, "gi");
return JSON.parse(usr).name.match(regex);
}
)
}
//console.log("matches = " + matches);
setsuggestion2(matches);
settext(e.target.value);
}
function OnSuggestionHandler(text) {
var val = text;
settext(val);
}
function OnblurHandle(e) {
setTimeout(() => {
setsuggestion2([])
}, 100)
}
function GetInvoice() {
//alert(" recup facture ");
var form = new FormData();
form.append("invoice_id", "num_facture");
var url = process.env.REACT_APP_API_URL + "myclass/api/GetCustomerInvoice/token11111/facture122";
var nom_facture = "cheifff.pdf";
axios.get(url, { responseType: 'blob', },)
.then((res) => {
fileDownload(res.data, nom_facture)
})
}
const [data_global, setdata_global] = useState([]);
const stored_part = getCookie('tokenmysypart');
function getStatData() {
var form = new FormData();
const ch_array = [];
const ch_categories = [];
var ch_data2 = "";
var date_start = ""
var date_end = ""
if (state[0].startDate) {
//console.log("Start = " + state[0].startDate);
//console.log("Start = " + moment(state[0].startDate).format('YYYY-MM-DD'));
date_start = moment(state[0].startDate).format('YYYY-MM-DD');
}
if (state[0].endDate) {
//console.log("endDate = " + state[0].endDate);
//console.log("END = " + moment(state[0].endDate).format('YYYY-MM-DD'));
date_end = moment(state[0].endDate).format('YYYY-MM-DD');
}
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetStat_class_view/";
form.append("date_start", date_start);
form.append("date_end", date_end);
form.append('token', 'cherif');
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
if (String(res.data.status) != String("false")) {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
res.data.message.map(obj => {
if (JSON.parse(obj).Date_view) {
//console.log("Date_view " + JSON.parse(obj).Date_view + " nb_view = " + JSON.parse(obj).nb_view);
ch_array.push(parseInt(JSON.parse(obj).nb_view));
ch_categories.push(JSON.parse(obj).Date_view);
} else if (JSON.parse(obj).data) {
//ch_data2 = String(obj.data);
//console.log("data ok " + JSON.parse(obj).data)
ch_data2 = JSON.parse(obj).data;
}
});
//console.log(" ch_array = " + ch_array);
//console.log(" ch_data2 = " + ch_data2);
var new_data2 = ch_data2.split(',').map(Number);
new_data2.push(123);
//console.log(" new_data2 = " + new_data2);
setglobal_view_data(ch_array);
//console.log(global_view_data);
setglobal_view_categories(ch_categories);
setglobal_view_data_v2(new_data2);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
//setmyApimyApiMessage("")
})
}
/*
Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie par l'utilisateur
*/
const [detail_view_categories, setdetail_view_categories] = useState();
const detail_series = detail_view_categories;
function Get_Top5_Stat() {
var form = new FormData();
var date_start = ""
var date_end = ""
if (state[0].startDate) {
//console.log("Start = " + state[0].startDate);
//console.log("Start = " + moment(state[0].startDate).format('YYYY-MM-DD'));
date_start = moment(state[0].startDate).format('YYYY-MM-DD');
}
if (state[0].endDate) {
//console.log("endDate = " + state[0].endDate);
//console.log("END = " + moment(state[0].endDate).format('YYYY-MM-DD'));
date_end = moment(state[0].endDate).format('YYYY-MM-DD');
}
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetStat_class_view_topX/";
form.append("date_start", date_start);
form.append("date_end", date_end);
form.append('token', 'cherif');
form.append('topX', '5');
//alert("myurl = "+myurl);
var top5training = [];
axios.post(myurl, form).then(res => {
if (String(res.data.status) != String("false")) {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
res.data.message.map(obj => {
if (JSON.parse(obj).name1) {
//console.log(" ---name_serie = " + JSON.parse(obj).name1 + " data_series = " + JSON.parse(obj).data1);
top5training.push(JSON.parse(obj).name1);
var ch_data2 = JSON.parse(obj).data1;
let new_data2 = ch_data2.map(i => Number(i));
setdetail_view_data1(new_data2);
var nom = JSON.parse(obj).name1;
setdetail_view_data1_name(nom);
//console.log("new_data2 = ", ch_data2);
//console.log("result = ", new_data2);
}
if (JSON.parse(obj).name2) {
//console.log(" ---name_serie = " + JSON.parse(obj).name2 + " data_series = " + JSON.parse(obj).data2);
top5training.push(JSON.parse(obj).name2);
var ch_data2 = JSON.parse(obj).data2;
let new_data2 = ch_data2.map(i => Number(i));
setdetail_view_data2(new_data2);
var nom = JSON.parse(obj).name2;
setdetail_view_data2_name(nom);
}
if (JSON.parse(obj).name3) {
//console.log(" ---name_serie = " + JSON.parse(obj).name3 + " data_series = " + JSON.parse(obj).data3);
top5training.push(JSON.parse(obj).name3);
var ch_data2 = JSON.parse(obj).data3;
let new_data2 = ch_data2.map(i => Number(i));
setdetail_view_data3(new_data2);
var nom = JSON.parse(obj).name3;
setdetail_view_data3_name(nom);
}
if (JSON.parse(obj).name4) {
//console.log(" ---name_serie = " + JSON.parse(obj).name4 + " data_series = " + JSON.parse(obj).data4);
top5training.push(JSON.parse(obj).name4);
var ch_data2 = JSON.parse(obj).data4;
let new_data2 = ch_data2.map(i => Number(i));
setdetail_view_data4(new_data2);
var nom = JSON.parse(obj).name4;
setdetail_view_data4_name(nom);
}
if (JSON.parse(obj).categories) {
//console.log(" ---categories = " + JSON.parse(obj).categories);
var ch_data2 = JSON.parse(obj).categories;
var new_data2 = ch_data2.split(',');
setdetail_view_categorie(new_data2);
}
});
settopX_formation(top5training);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
//setmyApimyApiMessage("")
})
}
const [my_tabb, setmy_tabb] = useState([]);
const [topX_formation, settopX_formation] = useState([]);
const [detail_view_categorie, setdetail_view_categorie] = useState([]);
const [detail_view_data1, setdetail_view_data1] = useState([]);
const [detail_view_data1_name, setdetail_view_data1_name] = useState([]);
const [detail_view_data2, setdetail_view_data2] = useState([]);
const [detail_view_data2_name, setdetail_view_data2_name] = useState([]);
const [detail_view_data3, setdetail_view_data3] = useState([]);
const [detail_view_data3_name, setdetail_view_data3_name] = useState([]);
const [detail_view_data4, setdetail_view_data4] = useState([]);
const [detail_view_data4_name, setdetail_view_data4_name] = useState([]);
var series_detail = [
{
name: detail_view_data1_name,
data: detail_view_data1
},
{
name: detail_view_data2_name,
data: detail_view_data2
},
{
name: detail_view_data3_name,
data: detail_view_data3
},
{
name: detail_view_data4_name,
data: detail_view_data4
},
]
const options_detail = {
chart: {
id: 'apexchart-example'
},
xaxis: {
categories: detail_view_categorie //['2022-09-12', '2022-09-11', '2022-09-10', '2022-09-09', '2022-09-08', '2022-09-07', '2022-09-06']
},
colors: ['#CB4335', '#1A5276', '#28B463', '#6E2C00', '#1B2631']
}
// categories = aux dates
//
const [global_view_categories, setglobal_view_categories] = useState([]);
const options_global_view = {
chart: {
id: 'apexchart-example'
},
xaxis: {
categories: global_view_categories
},
colors: ['#17A8F5', '#A93226']
}
const [global_view_data, setglobal_view_data] = useState([]);
const [global_view_data_v2, setglobal_view_data_v2] = useState([]);
const series_Gobal = [
{
name: 'global_view',
data: global_view_data
},
]
// -- Detail series
const selectionRange = {
startDate: new Date(),
endDate: new Date(),
key: 'selection',
}
const today = new Date();
const tomorrow = new Date(today);
const [state, setState] = useState([
{
startDate: today.setDate(tomorrow.getDate() - 8),
endDate: today.setDate(tomorrow.getDate() - 1),
key: "selection"
}
]);
const editorRef = useRef(null);
const log = () => {
if (editorRef.current) {
//console.log(editorRef.current.getContent());
alert(editorRef.current.getContent());
}
setgrr(" vvvv ");
};
const [grr, setgrr] = useState(" icic ");
function DataUpdated() {
alert(" change ");
}
function toto() {
alert(" TOTO ");
}
const [price_ch, setprice_ch] = useState("price_1LpyndAbmaEugrFTKZAAkm72");
const [customer_ch, setcustomer_ch] = useState("cus_MZjO0MIKiy2t6l");
const [subscriptionData, setSubscriptionData] = useState(null);
const [payement_id, setpayement_id] = useState();
const [clientSecret_id, setclientSecret_id] = useState();
const [paymentIntent, setPaymentIntent] = useState();
function initpayement_front() {
alert("debut initpayement_front price_ch = " + price_ch);
createSubscription(price_ch);
//console.log("55");
}
const createSubscription = async (priceId) => {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/create-subscription/";
var form = new FormData();
form.append("customerid", "cus_MZjO0MIKiy2t6l");
form.append("priceid", price_ch);
fetch(myurl, {
method: 'POST',
body: form,
}).then((data) => data.json())
.then((data) => {
//console.log(' #### subscription_id:', data['subscription_id'], 'payment_intent_client_secret:', data['payment_intent_client_secret'], "data['Status'] = ", data['status'], );
if (String(data['status']) === String("true")) {
//console.log(" subscriptionId = " + subscriptionId + " -- et clientSecret = " + clientSecret);
//console.log("1");
setclientSecret_id(data['payment_intent_client_secret']);
//console.log("2");
setpayement_id(data['subscription_id']);
//console.log("3");
//setSubscriptionData(data['subscription_id'], data['payment_intent_client_secret'] );
//alert(" subscriptionId = " + data['subscription_id'] + " -- et clientSecret = " + data['payment_intent_client_secret']);
}
//console.log("44");
}).catch((error) => {
alert("4");
//console.log('Error:', error.message);
});
};
function finalize_abonnement() {
alert("Finalization de l'abonnement ");
// Initialize an instance of stripe.
const handleSubmit_ch = async (e) => {
// Get a reference to a mounted CardElement. Elements knows how
// to find your CardElement because there can only ever be one of
// each type of element.
const cardElement = elements.getElement(CardElement);
// Use card Element to tokenize payment details
alert(' clientSecret_id = ' + clientSecret_id)
let { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret_id, {
payment_method: {
card: cardElement,
billing_details: {
name: "cherif test MYSY",
}
}
});
if (error) {
// show error and collect new card details.
alert(error.message);
//console.log(error.message);
return;
}
else {
alert(" OKK paymentIntent = " + paymentIntent);
//console.log(paymentIntent);
}
setPaymentIntent(paymentIntent);
}
handleSubmit_ch();
}
const [cherif3DS, setcherif3DS] = useState("ok");
window.top.postMessage('3DS-authentication-complete');
function fermer() {
window.close();
}
function finaliser() {
window.open(
"/",
'_self'
);
}
const [isLoading, setLoading] = useState();
function loading() {
setLoading(true);
setTimeout(() => { // simulate a delay
axios.get("https://pokeapi.co/api/v2/pokemon/1")
.then((response) => {
// Get pokemon data
setPokemon(response.data); //set pokemon state
setLoading(false); //set loading state
});
}, 500000);
}
const columns = ["Name", "Company", "City", "State"];
const data11 = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];
function hellofoo(){
alert(" hellooooooooo");
}
const options11 = {
filterType: 'checkbox',
selectableRows: 'single',
selectableRowsOnClick: true,
customToolbar: () => {
return (
Try the successful test card: 4242424242424242.
Try the test card that requires SCA: 4000002500003155.
Use any future expiry date, CVC,5 digit postal code
Votre description.
" value={grr} onKeyUp={toto} onEditorChange={(newValue, editor) => { //console.log(" newValue = "+newValue); // alert(" newValue = "+newValue); //setText(editor.getContent({format: 'text'})); }} init={{ resize: false, height: 300, width: 800, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' + 'alignleft aligncenter alignright alignjustify | ' + 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px;line-height: 0.6rem; }' }} />Votre description.
" init={{ resize: false, height: 300, width: 800, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' + 'alignleft aligncenter alignright alignjustify | ' + 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px;line-height: 0.6rem; }' }} />