recette2
cherif 2022-11-16 22:18:04 +01:00
parent 02b3a44178
commit 09913f35ae
311 changed files with 142156 additions and 9187 deletions

9
.env Normal file
View File

@ -0,0 +1,9 @@
PORT=3009
REACT_APP_API_URL_DEV=http://localhost:5001/
REACT_APP_API_URL_REC_old=https://api.mysy-training.com/ ==> not working
REACT_APP_API_URL_prod=https://apimysy.iexercice.com/
REACT_APP_API_URL_recette=https://devapimysy.iexercice.com/
REACT_APP_API_URL=http://localhost:5001/
REACT_APP_BASE_URL=http://localhost:3009/recherche-formation
REACT_APP_ENV=DEV

59690
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,19 +3,140 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@tinymce/tinymce-react": "^4.2.0",
"add": "^2.0.6",
"apexcharts": "^3.35.5",
"axios": "^0.23.0",
"bcryptjs": "^2.4.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.6.0",
"canvasjs-react-charts": "^1.0.5",
"compression": "^1.7.4",
"date-fns": "^2.29.2",
"dayjs": "^1.11.5",
"downloadjs": "^1.4.7",
"draft-js": "^0.11.7",
"file-saver": "^2.0.5",
"gatsby-plugin-cookie-gdpr-axeptio": "^1.0.2",
"google-map-react": "^2.1.10",
"html-react-parser": "^2.0.0",
"js-cookie": "^3.0.1",
"js-file-download": "^0.4.12",
"js-video-url-parser": "^0.5.1",
"moment": "^2.29.4",
"mui-daterange-picker": "^1.0.5",
"next": "^12.0.10",
"next-link": "^2.0.0",
"popups": "^1.1.3",
"powerbi-client": "^2.19.1",
"powerbi-client-react": "^1.3.3",
"prerender-node": "^3.5.0",
"react": "^17.0.2",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.1.2",
"react-burger-menu": "^3.0.6",
"react-canvas-js": "^1.0.1",
"react-comments-section": "^2.0.10",
"react-confirm-alert": "^2.8.0",
"react-cookie": "^4.1.1",
"react-csv": "^2.2.2",
"react-custom-share": "^0.4.8",
"react-date-range": "^1.4.0",
"react-datepicker": "^4.8.0",
"react-device-detect": "^2.1.2",
"react-discussion-board": "^1.0.5",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-dropdown-select": "^4.8.0",
"react-dual-range-slider": "^1.0.4",
"react-dual-rangeslider": "^1.2.16",
"react-elastic-carousel": "^0.11.5",
"react-facebook": "^8.1.4",
"react-google-login": "^5.2.2",
"react-google-maps": "^9.4.5",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.27.0",
"react-icons": "^4.3.1",
"react-input-range": "^1.3.0",
"react-intl": "^5.24.7",
"react-loading-dot": "^1.0.6",
"react-md-spinner": "^1.0.0",
"react-meta-tags": "^1.0.1",
"react-multi-carousel": "^2.8.2",
"react-native-paper": "^4.9.2",
"react-native-web": "^0.17.5",
"react-paginate": "^8.1.1",
"react-player": "^2.10.0",
"react-range": "^1.8.12",
"react-rating-stars-component": "^2.2.0",
"react-redux": "^7.2.5",
"react-responsive": "^9.0.0-beta.6",
"react-responsive-carousel": "^3.2.23",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
"react-scroll-to-top": "^3.0.0",
"react-search-autocomplete": "^7.2.2",
"react-select": "^5.2.2",
"react-share": "^4.4.0",
"react-simple-modal": "^1.1.5",
"react-simple-modal-cb": "^2.0.4",
"react-simple-star-rating": "^4.1.1",
"react-slideshow-image": "^3.7.0",
"react-social-icons": "^5.13.0",
"react-social-login-buttons": "^3.6.0",
"react-stripe-elements": "^6.1.2",
"react-swipeable-views": "^0.14.0",
"web-vitals": "^2.1.4",
"react-time-picker": "^4.5.0",
"react-toastify": "^9.0.0",
"react-use-cookie": "^1.3.0",
"react-video-js-player": "^1.1.1",
"reactjs-popup": "^2.0.5",
"reactstrap": "^9.0.1",
"recharts": "^2.1.14",
"redux": "^4.1.2",
"router": "^1.3.5",
"rsuite": "^5.18.0",
"semantic-ui-react": "^2.1.2",
"state-pool": "^0.6.0",
"styled-components": "^5.3.5",
"swr": "^1.2.1",
"use-global-state": "^0.1.2",
"victory": "^36.6.6",
"video-react": "^0.15.0",
"webpack-bundle-analyzer": "^4.5.0",
"wysiwyg": "^2.0.0",
"@mantine/core": "^4.2.10",
"@mantine/hooks": "^4.2.10",
"@mantine/rte": "^4.2.10",
"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.4.2",
"@mui/material": "^5.4.2",
"@mui/x-data-grid": "^5.5.1",
"@mui/x-date-pickers": "^5.0.0",
"@mui/x-date-pickers-pro": "^5.0.0",
"@dr.pogodin/react-global-state": "^0.6.5",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@stripe/react-stripe-js": "^1.12.0",
"@stripe/stripe-js": "^1.35.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"winBuild": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
},
"eslintConfig": {
"extends": [

BIN
public (2).zip Normal file

Binary file not shown.

BIN
public.zip Normal file

Binary file not shown.

4
public/BingSiteAuth.xml Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0"?>
<users>
<user>D84DEE714A09B418529A03541BA86916</user>
</users>

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 84 KiB

View File

@ -0,0 +1 @@
google-site-verification: google06c10352a49f1dc0.html

BIN
public/img/coaching.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/img/cours.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/img/cours_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1018 B

BIN
public/img/login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

3
public/img/search.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>

After

Width:  |  Height:  |  Size: 331 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 KiB

BIN
public/img/video.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -1,15 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<script src="https://widget-js.cometchat.io/v2/cometchatwidget.js"></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="Trouver des Formations et Tutoriels d'excellente qualité : Gratuit ou payant / A distance ou en presentiel, etc."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="robots" content="index,follow" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/MYSY-LOGO-BLUE_192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -24,10 +27,40 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Formation & Tutoriel Gratuit ou payant Excellente qualité</title>
<link rel="canonical" href="https://www.mysy-training.com/" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-37423053-2"
></script>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://cdn.tiny.cloud/1/1e3z9qnqh8jrw2xowh8c3zo8edc333zy5jdt7albegzcv752/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-37423053-2");
</script>
<!-- Smartsupp Live Chat script -->
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = '2193f283b62a483c4d12f96fb3e48d866f1bfe61';
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;
c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.

View File

@ -4,7 +4,7 @@
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"sizes": "64x64 32x32 24x24 16x16 144x144",
"type": "image/x-icon"
},
{

Binary file not shown.

BIN
public/sample/MYSY_CGU.pdf Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,3 @@
external_code;titre;domaine;description;formateur;objectif;programme;prerequis;institut_formation;distantiel;presentiel;prix;note;url;duree;plus_produit;mots_cle;metier;publie;zone_diffusion;date_lieu
CB_PA1201910;CB Deep Learning bb;domaine1;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. ;PYRAMYD;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. ;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.;Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis ;;1;0;2370;4;https://pyramyd-formation.com/formation/indesign-niveau-1-pyramyd;5;;"mot1;mot1;mot3";IT;1;FR-;"22/01/2023-Paris-75009;22/01/2023-Lyon-69109;"
CB_PA1201911;CB Appliquez ITIL dans lévolution du système dinformation de votre entreprise cc;;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. ;PYRAMYD;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. ;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.;Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis ;;1;0;2370;1;https://pyramyd-formation.com/formation/indesign-niveau-1-pyramyd;5;;"mot1;mot1;mot3";IT;1;FR-;"22/01/2023-Paris-75009;22/01/2023-Lyon-69109;"
1 external_code titre domaine description formateur objectif programme prerequis institut_formation distantiel presentiel prix note url duree plus_produit mots_cle metier publie zone_diffusion date_lieu
2 CB_PA1201910 CB Deep Learning bb domaine1 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.  PYRAMYD Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis  1 0 2370 4 https://pyramyd-formation.com/formation/indesign-niveau-1-pyramyd 5 mot1;mot1;mot3 IT 1 FR- 22/01/2023-Paris-75009;22/01/2023-Lyon-69109;
3 CB_PA1201911 CB Appliquez ITIL dans l’évolution du système d’information de votre entreprise cc At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.  PYRAMYD Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis  1 0 2370 1 https://pyramyd-formation.com/formation/indesign-niveau-1-pyramyd 5 mot1;mot1;mot3 IT 1 FR- 22/01/2023-Paris-75009;22/01/2023-Lyon-69109;

View File

@ -0,0 +1,5 @@
external_code;titre;domaine;description;formateur;objectif;programme;prerequis;institut_formation;distantiel;presentiel;prix;url;duree;plus_produit;mots_cle;metier;publie;zone_diffusion;date_lieu
LS_PA1201910;Comprendre les principes d'InDesign pour créer ou modifier des publications professionnelles;domaine1;InDesign - Niveau 1;PYRAMYD;Objectif 1;Programme 1;Pre-requis 1;;1;0;2370;https://pyramyd-formation.com/formation/indesign-niveau-1-pyramyd;5;;"mot1;mot1;mot3";metier1;1;FR-;"22/01/2023-Paris-75009;22/01/2023-Lyon-69109;"
LS_PA1201911;Réaliser des publications complexes et structurées;domaine2;InDesign - Niveau 2;PYRAMYD;Objectif 2;Programme 2;Pre-requis 2;;1;0;2000;https://pyramyd-formation.com/formation/indesign-niveau-2-pyramyd;4;;"mot1;mot1;mot4";;1;FR-Marseille;"22/01/2023-Paris-75009;22/01/2023-Lyon-69109;"
LS_PA1201912;Créer et réaliser des documents simples (flyers;domaine3;Lessentiel dInDesign;PYRAMYD;Objectif 3;Programme 3;Pre-requis 3;;1;0;0;https://pyramyd-formation.com/formation/l-essentiel-d-indesign;3;;"mot1;mot1;mot5";;1;;"22/03/2023-Auxerre-89024;22/01/2023-Dordogne-24335;"
LS_PA1201913;Réaliser des logos;domaine4;Illustrator : niveau 1;PYRAMYD;Objectif 4;Programme 4;Pre-requis 4;;1;0;5;https://pyramyd-formation.com/formation/illustrator-niveau-1;5;;"mot1;mot1;mot6";metier4;1;;"22/01/2023-Paris-75009;22/01/2023-Lyon-69109;01/11/2022-Éloise-01200;"
1 external_code titre domaine description formateur objectif programme prerequis institut_formation distantiel presentiel prix url duree plus_produit mots_cle metier publie zone_diffusion date_lieu
2 LS_PA1201910 Comprendre les principes d'InDesign pour créer ou modifier des publications professionnelles domaine1 InDesign - Niveau 1 PYRAMYD Objectif 1 Programme 1 Pre-requis 1 1 0 2370 https://pyramyd-formation.com/formation/indesign-niveau-1-pyramyd 5 mot1;mot1;mot3 metier1 1 FR- 22/01/2023-Paris-75009;22/01/2023-Lyon-69109;
3 LS_PA1201911 Réaliser des publications complexes et structurées domaine2 InDesign - Niveau 2 PYRAMYD Objectif 2 Programme 2 Pre-requis 2 1 0 2000 https://pyramyd-formation.com/formation/indesign-niveau-2-pyramyd 4 mot1;mot1;mot4 1 FR-Marseille 22/01/2023-Paris-75009;22/01/2023-Lyon-69109;
4 LS_PA1201912 Créer et réaliser des documents simples (flyers domaine3 L’essentiel d’InDesign PYRAMYD Objectif 3 Programme 3 Pre-requis 3 1 0 0 https://pyramyd-formation.com/formation/l-essentiel-d-indesign 3 mot1;mot1;mot5 1 22/03/2023-Auxerre-89024;22/01/2023-Dordogne-24335;
5 LS_PA1201913 Réaliser des logos domaine4 Illustrator : niveau 1 PYRAMYD Objectif 4 Programme 4 Pre-requis 4 1 0 5 https://pyramyd-formation.com/formation/illustrator-niveau-1 5 mot1;mot1;mot6 metier4 1 22/01/2023-Paris-75009;22/01/2023-Lyon-69109;01/11/2022-Éloise-01200;

322
public/sitemap.xml Normal file
View File

@ -0,0 +1,322 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xhtml="http://www.w3.org/1999/xhtml" xsi:schemaLocation="
http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with PRO Sitemap Service https://pro-sitemaps.com -->
<url>
<loc>https://www.mysy-training.com/</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/qualite-la-norme-itl-dans-entreprise-532</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/6281eae593f66d1a10ac2248</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/626fca8d62477b7b15a04b27</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/626fcada62477b7b15a04d97</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Recherche-Article-formation</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/avis-aux-perfectionnistes-des-styles-css-aa1</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/analysez-vos-donnees-textuelles-98b</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation-Coeur/analysez-vos-donnees-textuelles-98b</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/comment-reussir-ses-premiers-pas-en-tant-que-manager-866</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/create_account</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Connexion</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/ContactezNous</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/QuiSommesNous</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/supply-chain-lessons-from-the-pandemic-11d</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/planification-de-projets--methode-pert-et-gantt-19f</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/techniques--methodes-pour-bien-negocier--bd6</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/reussir-vos-photos-de-vacances-comment---343</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Produits-Services</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-Article/les-metiers-d-avenir-959</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/actualite-sociale-10f</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/pratique-de-la-paie--initiation-b10</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/comptabilite-generale--initiation-56e</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/contrat-de-travail-de-a-a-z-809</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/droit-du-travail-928</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/droit-social-pour-managers-45b</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/la-duree-du-travail-et-gestion-des-absences-471</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/la-gestion-des-cdd-59b</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/entretien-professionnel-802</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/missions-rh-6e2</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/reglementation-rh--l-essentiel-eaf</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/reussir-ses-entretiens-de-recrutement-c40</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/cloturer-votre-annee-sociale-en-toute-securite-8</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/controle-urssaf-4b2</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/dads--declaration-annuelle-de-donnees-sociales-1</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/la-mise-en-oeuvre-de-la-dsn-3a0</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/les-outils-de-la-remuneration-9f5</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/pilotage-de-la-masse-salariale-301</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/pratique-de-la-paie--perfectionnement-d6c</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/digital-learning-et-developpement-manager-ec5</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/devenir-formateur-occasionnel-559</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
<url>
<loc>https://www.mysy-training.com/Display-Detail-formation/formation-de-tuteur-fc7</loc>
<lastmod>2022-11-11T11:35:41+00:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0000</priority>
</url>
</urlset>

View File

@ -1,38 +1,202 @@
.App {
text-align: center;
.react-confirm-alert-body {
font-family: Arial, Helvetica, sans-serif;
padding: 30px;
text-align: center !important;
background: #0dcaf0 !important;
border-radius: 10px;
box-shadow: 0 20px 75px rgb(0 0 0 / 13%);
color: #666;
margin-left: auto !important;
margin-right: auto !important;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
@media only screen and (max-width: 600px) {
/*style smartphones et petites tablettes en portrait*/
.react-confirm-alert-body {
font-family: Arial, Helvetica, sans-serif;
padding: 30px;
text-align: center !important;
background: #0dcaf0 !important;
border-radius: 10px;
box-shadow: 0 20px 75px rgb(0 0 0 / 13%);
color: #666;
width:90% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0.2rem !important;
padding-right: 0.2rem !important;
}
.App {
align-items: center;
margin-left: 0%;
margin-right: 0%;
text-align: center;
height: calc(100vh - 10rem);
min-height : calc(100vh - 10rem);
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
body {
background-color: #faffff;
font-family: Arial;
text-align: center;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
@media only screen and (min-width: 601px) and (max-width: 991px) {
/*style petites-moyennes tablettes */
.App {
align-items: center;
margin-left: 0%;
margin-right: 0%;
text-align: center;
height: calc(100vh - 10rem);
min-height : calc(100vh - 10rem);
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
body {
background-color: white;
font-family: Arial;
text-align: center;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
/*style petites-moyennes tablettes */
.App {
align-items: center;
margin-left: 0%;
margin-right: 0%;
text-align: center;
height: calc(100vh - 10rem);
min-height : calc(100vh - 10rem);
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
body {
background-color: white;
font-family: Arial;
text-align: center;
}
}
@media only screen and (min-width: 1200px) {
/*style petites-moyennes tablettes */
.App {
align-items: center;
margin-left: 0%;
margin-right: 0%;
text-align: center;
height: calc(100vh - 10rem);
min-height : calc(100vh - 10rem);
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
body {
background-color: white;
font-family: Arial;
text-align: center;
}
}
.main_cont {
}
.main_haut {
float: left;
border-width: 0.01rem;
width: 100%;
margin-bottom: 1rem;
min-height: calc(100vh - 10vh);
}
.main_bas {
float: left;
border-width: 0.01rem;
width: 100%;
font-family: 'Quicksand', 'Signika', "sans-serif" !important;
font-size: small !important;
color: black;
height: 5rem;
position:fixed;
top: calc(100vh - 5rem);
z-index: 13;
}
.radio-container {
justify-content: space-around;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
margin-bottom: 20px;
background: red;
border-radius: 20px;
padding: 10px;
color: white;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.452);
}
.App-link {
color: #61dafb;
}
input{
transform: translateY(1px);
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
label {
margin-left: 10px;
cursor: pointer;
}
to {
transform: rotate(360deg);
}
}

View File

@ -1,24 +1,99 @@
import logo from './logo.svg';
import React, { useState, useEffect } from "react";
import {BrowserRouter, Switch, Route} from "react-router-dom"
import './App.css';
import NotFound from './pages/NotFound'
import Contact from './pages/Contact'
import Connexion from './pages/Connexion'
import Login from './pages/Login';
import Recherche from "./pages/recherche_new";
import TestUrl from "./pages/testurl";
import Account from "./pages/account";
import DisplayDetailClass from "./pages/displaydetailclass";
import DisplayDetailClassAction from "./pages/displaydetailclassaction";
import DisplayDetailArticle from "./pages/displaydetailarticle";
import Acceuil from "./pages/acceuil";
import Partner from "./pages/partner";
import CreateAccount from "./pages/createaccount";
import PartnerLogin from "./pages/partnerlogin";
import PartnerLogin0 from "./pages/partnerlogin0";
import PartnerLogin1 from "./pages/partnerlogin1";
import Footer from "./pages/footer";
import RechecheArticles from "./pages/recherchearticles";
import AddArticle from "./pages/addarticle";
import ResetUserPwd from "./pages/resetuserpwd";
import DeleteUserAccount from "./pages/deleteuseraccount";
import QuiSommesNous from "./pages/quisommesnous";
import ContactezNous from "./pages/contactez_nous";
import CoupDeCoeur from "./pages/coupdecoeur";
import AccountUserActivated from "./pages/accountuseractivated";
import ProduitsService from "./pages/produitservice";
import ScrollToTop from "react-scroll-to-top";
import Recherche_new from "./pages/recherche_new";
import Recherche_old from "./pages/recherche";
import UserSignFirst from "./pages/usersigninfirst";
import GestionAdministrative from "./components/GestionAdministrative";
function App() {
const [screenSizeh, getDimension] = useState({
dynamicWidth: window.innerHeight
});
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div>
<div className="App">
{/*API DEV = {process.env.REACT_APP_API_URL_DEV} <br/>
API REC = {process.env.REACT_APP_API_URL_REC}<br/>
API URL = {process.env.REACT_APP_API_URL}<br/>
*/}
<div className="main_haut">
<BrowserRouter>
<ScrollToTop />
<Switch>
<Route path="/" exact component={Recherche} />
<Route path="/acceuil" exact component={Acceuil} />
<Route path="/contact" exact component={Contact} />
<Route path="/mysy-user-account" exact component={Account} />
<Route path="/create_account" exact component={CreateAccount} />
<Route path="/user-connexion" exact component={Connexion} />
<Route path="/Connexion" exact component={Login} />
<Route path="/recherche-formation" exact component={Recherche} />
<Route path="/recherche-formation/:NewSearchText" exact component={Recherche} />
<Route path="/testurl/:course/:tab" exact component={TestUrl} />
<Route path="/Display-Detail-formation/:classId" exact component={DisplayDetailClass} />
<Route path="/Display-Detail-formation/:classId/:action" exact component={DisplayDetailClassAction} />
<Route path="/Display-Detail-Article/:articleId" exact component={DisplayDetailArticle} />
<Route path="/Display-Detail-formation-Coeur/:classId" exact component={CoupDeCoeur} />
<Route path="/Partner" exact component={Partner} />
<Route path="/PartnerLogin" exact component={PartnerLogin} />
<Route path="/PartnerLogin0" exact component={PartnerLogin0} />
<Route path="/PartnerLogin1" exact component={PartnerLogin1} />
<Route path="/Recherche-Article-formation" exact component={RechecheArticles} />
<Route path="/Ajout-Article-formation" exact component={AddArticle} />
<Route path="/ResetUserPwd/:token/:accounttype" exact component={ResetUserPwd} />
<Route path="/DeleteUserAccount/:token" exact component={DeleteUserAccount} />
<Route path="/QuiSommesNous" exact component={QuiSommesNous} />
<Route path="/ContactezNous" exact component={ContactezNous} />
<Route path="/mysy-training-login/:obj/:objid" exact component={Login} />
<Route path="/mysy-account-activated/" exact component={AccountUserActivated} />
<Route path="/Produits-Services/" exact component={ProduitsService} />
<Route path="/Recherche_new/" exact component={Recherche_new} />
<Route path="/GestionAdministrative/:internal_url" exact component={GestionAdministrative} />
<Route path="/Recherche_new/:type/:categorie" exact component={Recherche_new} />
<Route path="/Recherche_old/" exact component={Recherche_old} />
<Route path="/Connexion-utilisateur-0/" exact component={UserSignFirst} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
</div>
</div>
</div>
);
}

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed-fill" viewBox="0 0 16 16">
<path d="M12 1a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2a1 1 0 0 1 1-1h8zm-2 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>

After

Width:  |  Height:  |  Size: 271 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-open-fill" viewBox="0 0 16 16">
<path d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
</svg>

After

Width:  |  Height:  |  Size: 375 B

BIN
src/assets/login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

1286
src/components/Abonnement.js Normal file

File diff suppressed because it is too large Load Diff

387
src/components/Account.js Normal file
View File

@ -0,0 +1,387 @@
import React, { useState, useEffect } from "react";
import UpdateUserInfo from "../components/UpdateUserInfo";
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import profileimg from "../mysy_img/MYSY-profil-2.png";
import Button from '@mui/material/Button';
import { useHistory } from "react-router-dom";
import LogoutIcon from '@mui/icons-material/Logout';
import UserHistoryRecherche from "../components/UserHistoryRecherche";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import axios from "axios";
import { getCookie, removeCookie } from 'react-use-cookie';
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Header from "./Header";
import UpgradeToPro from "./UpgradeToPro"
import Profil_Objectif from "./ProfilObjectif";
function Account() {
const [menu, setmenu] = useState("affichage");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("");
const stored_user = getCookie('tokenmysych');
const history = useHistory();
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userimgprofil, setuserimgprofil] = useState();
const [userIp, setuserIp] = useState("");
const [username, setusername] = useState("");
const [migratedaccount, setmigratedaccount] = useState("0");
const apiUrl = process.env.REACT_APP_API_URL;
const formData = new FormData();
//alert("stored_user = "+stored_user);
useEffect(() => {
getImage();
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
//alert(" debut puch");
history.push("/mysy-training-login/0/0");
}
async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',);
//alert(result.data.IPv4);
setuserIp(result.data.IPv4);
setcountry_code(result.data.country_code);
setcountry_name(result.data.country_name);
setcity(result.data.city);
setpostal(result.data.postal);
setlatitude(result.data.latitude);
setlongitude(result.data.longitude);
setIPv4(result.data.IPv4);
setstate(result.data.state);
setuserIp(result.data.IPv4);
}
GetUserNameFromToken();
fetchData();
}, []);
const [myimage, setmyimage] = useState();
const [isimage, setisimage] = useState();
function getImage(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedImage/";
var form = new FormData();
form.append("token", stored_user);
form.append("type", "user");
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
console.log(" getImage : In test res.data.status = " + res.data.status);
console.log(" getImage: res.data.message.img = " + res.data.message);
if (res.data.message.img.length > 0) {
setisimage("True");
}
else {
setisimage("False");
}
setmyimage(res.data.message.img);
var ch_img = "data:image/png;base64," + res.data.message.img;
setuserimgprofil(ch_img);
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setisimage("False");
setuserimgprofil(profileimg);
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setisimage("False");
setuserimgprofil(profileimg);
})
}
function logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
removeCookie('tokenmysych', { path: '/' });
history.push("/mysy-training-login/0/0");
}
}
function logout() {
confirmAlert({
title: 'Deconnexion ?',
message: 'Confirmez la deconnexion',
buttons: [
{
label: 'Yes',
onClick: () => logout_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
const displayHistory = () => {
setmenu("recherche");
};
const displayProfil_Objectif = () => {
setmenu("profil_objectif");
};
const upgradetopro = () => {
setmenu("upgradecompte");
};
const displayPersoInfo = () => {
setmenu("affichage");
};
function GetUserNameFromToken(event) {
var form = new FormData();
form.append("token", stored_user);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_user_account/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
console.log(" In GetUserNameFromToken res.data.status = " + res.data.status);
console.log(" In GetUserNameFromToken res.data.message = " + res.data.message);
setusername(JSON.parse(res.data.message).email);
if (JSON.parse(res.data.message).migrated &&
String(JSON.parse(res.data.message).migrated) === String("1")) {
setmigratedaccount(String(JSON.parse(res.data.message).migrated));
}
//setmyApiResponse("true");
//setResult(res.data.message)
//setmyApimyApiMessage("OK")
}
else {
console.log(" In GetUserNameFromToken res.data.status = " + res.data.status);
console.log(" In GetUserNameFromToken res.data.message = " + res.data.message);
//setmyApiResponse("false");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('In GetUserNameFromToken Not good man :( mysearchtext = ');
//setmyApiResponse("false");
//setmyApimyApiMessage("")
})
}
function finaldeleteuseraccount(e) {
var form = new FormData();
form.append("token", stored_user);
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/send_mail_delete_user/";
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);
setmyApiResponse("true");
setResult(res.data.message)
alert(res.data.message);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("false");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("false");
//setmyApimyApiMessage("")
})
}
function deletemyaccount(e) {
confirmAlert({
title: 'Suppremier votre compte',
message: 'Cette action va supprimer toutes vos données, Confirmez-vous la suppression du compte ?',
buttons: [
{
label: 'Yes',
onClick: () => finaldeleteuseraccount()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
const [selectedFile, setSelectedFile] = useState();
const [isSelected, setIsSelected] = useState(false);
const [isnewimage, setisnewimage] = useState();
const changeHandler = (event) => {
let file_size = event.target.files[0].size;
//or if you like to have name and type
let file_name = event.target.files[0].name;
let file_type = event.target.files[0].type;
//alert("file_size = "+file_size+" file_type = "+file_type+" a = "+a);
if (file_size > 100000) {
alert("L'image doit faire moins de 100 Kilo Octets");
return;
}
setSelectedFile(event.target.files[0]);
setIsSelected(true);
setuserimgprofil(URL.createObjectURL(event.target.files[0]));
};
function sendImage(e) {
formData.append('File', selectedFile);
formData.append("token", stored_user);
formData.append("type", "user");
fetch(
process.env.REACT_APP_API_URL + "myclass/api/recordImage/",
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message']);
setIsSelected(false);
})
.catch((error) => {
console.error('Error:');
setIsSelected(true);
});
};
return (
<div className="account">
<Helmet>
<title>Compte utilisateur</title>
<meta name="description" content="Compte utilisateur formation" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
<div>
<h1 className="h1_transparent">Connexion MySy Training Technogy </h1>
</div>
<div>
<div className="div_gauche">
<div>
<img class="img-responsive img_user" src={userimgprofil} align="center" alt="MySy Training profile image" />
{!isSelected && <div className="nonlable">
<input type="file" id="files" accept="image/*" onChange={changeHandler} style={{ opacity: "0", zIndex: "-1", maxWidth: "5px", maxHeight: "0px" }} />
<label for="files" className="label">Changer image</label>
</div>}
{isSelected && <div className="nonlable">
<Button variant="outlined" onClick={sendImage} >Enregistrer</Button>
</div>}
</div>
<div className="nom_prenom"> {username && <b> {username} </b>}
{!username && <b> xxxx </b>} </div>
<hr className="my_hr" />
<div className="sousmenu" onClick={displayPersoInfo}> INFORMATIONS PERSONNELLES</div>
<hr className="my_hr" />
<div className="sousmenu" onClick={displayProfil_Objectif}> PROFILS & OBJECTIFS</div>
<hr className="my_hr" />
<div className="sousmenu" onClick={displayHistory}> HISTORIQUE RECHERCHE</div>
<hr className="my_hr" />
<div className="sousmenu"> HISTORIQUE CONNEXION</div>
<hr className="my_hr" />
<div className="sousmenu"> MES MESSAGES </div>
{String(migratedaccount) !== String("1") && <div>
<hr className="my_hr" />
<div className="sousmenu" style={{ "color": "#81BC3A" }} onClick={upgradetopro}> PASSER AU COMPTE PRO</div>
</div>}
<hr className="my_hr" />
<div className="sousmenu" onClick={deletemyaccount}> SUPPRIMER MON COMPTE</div>
<hr className="my_hr" />
</div>
<div className="div_droite">
{String(myApiResponse) === String("true") && <div className="okUpdateData">
{result}
</div>}
{String(myApiResponse) !== String("true") && <div className="koUpdateData">
{result}
</div>}
{String(menu) === String("affichage") && <UpdateUserInfo />}
{String(menu) === String("recherche") && <UserHistoryRecherche />}
{String(menu) === String("upgradecompte") && <UpgradeToPro />}
{String(menu) === String("profil_objectif") && <Profil_Objectif />}
</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default Account;

View File

@ -0,0 +1,20 @@
import React, {useState,useEffect,} from "react";
const AccountDesabled = (props) => {
//creating IP state
return (
<div>
<h2>Votre compte n'est pas actif, merci de l'activer depuis votre email</h2>
</div>
)
}
export default AccountDesabled;

View File

@ -0,0 +1,73 @@
import React, { useState, useEffect } from "react";
import UpdateUserInfo from "../components/UpdateUserInfo";
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import profileimg from "../mysy_img/MYSY-profil-2.png";
import Button from '@mui/material/Button';
import { useHistory } from "react-router-dom";
import LogoutIcon from '@mui/icons-material/Logout';
import UserHistoryRecherche from "../components/UserHistoryRecherche";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import axios from "axios";
import { getCookie, removeCookie } from 'react-use-cookie';
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Header from "./Header";
function Account() {
const [tempo, settempo] = useState(".");
setInterval(check, 2000);
window.setTimeout(function() {
window.location.href = process.env.REACT_APP_BASE_URL
}, 7000);
function check() {
var val = tempo+" .";
//alert(" val = "+val);
settempo(val);
}
return (
<div className="accountuseractivated">
<Helmet>
<title>Creation compte utilisateur</title>
<meta name="description" content="creation utisateur formation connexion" />
<meta name="robots" content="index,follow" />
<meta name="title" content="Creation compte utilisateur" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/create_account"} />
</Helmet>
<Header />
<div className="div_mobile">
<div>
<p>Votre comtpe a été activé.
Merci d'avoir choisi MySy.
</p>
Vous allez etre redirigé vers le moteur de recherche dans quelques secondes. {tempo}
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default Account;

View File

@ -0,0 +1,36 @@
import React from "react";
import homeImg from "../mysy_img/mysy_home.jpg";
import { Helmet } from "react-helmet";
const Acceuil = () => {
return (
<div className={"cards"}>
<Helmet>
<title>Acceul Mysy Training</title>
<meta name="description" content= "Mysy Training Formation Acceuil"/>
<meta name="robots" content="index,follow"/>
</Helmet>
<header className="card">
<img src={homeImg} className="App-logo" alt="logo" />
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
</a>
</header>
</div>
)
}
export default Acceuil;

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,138 @@
import React, { useState, useEffect } from "react";
import { FaSearch, } from 'react-icons/fa';
import axios from "axios";
import { latLng2Tile } from "google-map-react";
import { useHistory } from "react-router-dom";
const AideRecherche = (props) => {
const [recherche, setrecherche] = useState("");
const [Result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("false");
const history = useHistory();
function searchFunction(e) {
setrecherche("1");
setResult([]);
//Get Criterias
var crit_SearchText = document.getElementById("mottype").value;
//var crit_domaine = document.getElementById("domaine").value;
//alert(" vous avez choisi : crit_SearchText = "+crit_SearchText+" -- crit_domaine = "+crit_domaine);
var form = new FormData();
form.append("mot", crit_SearchText);
form.append("domaine", "");
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetMotFromElaIndex/";
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);
setmyApiResponse("True");
setResult(res.data.message)
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("False");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
})
}
function Checkmottype(e){
const val = e.target.value;
const regex = new RegExp('^[a-zA-Z0-9]+$');
if( regex.test(val) == false || String(val).length > 4 ){
var newval = val.slice(0, -1);
document.getElementsByName("mottype")[0].value = newval;
}
}
function handleClick(e, data) {
// access to e.target here
//console.log(data);
history.push("/recherche-formation/"+data);
// ici faire call recherche avec search texte
}
return (
<div className="AideRecherche">
<div className="div_row">
{/*
<div className="input-group input-group-sm mb-3 " style={{ width: "90%" }}>
<span className="criteres input-group-text " id="inputGroup-sizing-sm3 ">Domaine de recheche </span>
<select className="form-select form-select-sm " onChange={"TrainingCertifHandle"} aria-label=".form-select-sm example"
id={"domaine"} name={"domaine"} >
<option selected value="">Choisir une valeur</option>
<option value="programmation">Prog</option>
<option value="reseaux">Reseaux</option>
</select>
</div>
*/}
<div class="input-group mb-3">
<div className="input-group input-group-sm mb-3 ">
<span className="criteres input-group-text " id="inputGroup-sizing-sm3 ">Saisir 4 lettres </span>
<input type="text" name="mottype"
id="mottype"
maxlength="4" size="4" class="form-control"
aria-label="Default" aria-describedby="inputGroup-sizing-default"
onChange={Checkmottype} />
<FaSearch onClick={searchFunction} style={{
width: "10%",
border: "0px solid black", height: "1.5rem"
}} />
</div>
</div>
</div>
{Result && String(myApiResponse) === String("True") && <div className="div_row" style={{border:"None"}}>
<div className="div_row_gauche okUpdateData" style={{textAlign:"center"}}>
Essayez l'un de ces mots (cliquer dessus)
</div>
<div className="div_row_droite" >
{Result && String(myApiResponse) === String("True") &&
Result.map((formation) => (
<a href={"/recherche-formation/"+formation}>
<div style={{ display: "inline-block", width: "33%", textAlign:"center",paddingLeft: "0.5rem" }} value= {`${formation}`}
>
"{(formation)}"
</div>
</a>
))}
</div>
</div>}
</div>
)
}
export default AideRecherche;

217
src/components/Article.js Normal file
View File

@ -0,0 +1,217 @@
import React, { useState } from "react";
import { Button, } from "reactstrap";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import happyimg from "../mysy_img/happy.png";
import unhappyimg from "../mysy_img/nothappy.png";
import middleimg from "../mysy_img/middle.png";
import parse from 'html-react-parser'
import img_met_autre from "../mysy_img/met_autre.jpg";
import img_met_digital from "../mysy_img/met_digital.jpg";
import { Rating } from 'react-simple-star-rating'
const Article = (props) => {
const [rating, setRating] = useState(props.article.note * 20)
console.log(props.article.note * 10);
// Catch Rating value
function handleRating(rate) {
alert(" rate =" + rate);
setRating(40);
}
return (
<div className="article">
<div className="div_row">
<div className="div_row_gauche" onClick={(e) => {
e.preventDefault();
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
}}>
<div style={{ "width": "100%", "height": "8rem" }}>
<div className="gauche_img">
<img src={img_met_digital} alt="Formation gestion projets" className="img_categorie" id="projets" />
</div>
<div className="droite_txt">
<p className="met_text" id="projets" > {(String(props.article.title_formation)).substring(0, 50)} </p>
<p className="met_text_detail" >
<div className="art_criteres">
Avis :
</div>
<div className="art_criteres_value">
{parse( String(props.article.avis).replace(/(<([^>]+)>)/ig, '') )}
</div>
</p>
<p className="met_text_detail" >
<div className="art_criteres">
&nbsp; </div>
<div className="art_criteres_value_left">
&nbsp;
</div>
<div className="art_criteres_value_right">
{(String(props.article.date_avis)).substring(0, 10)}
</div>
</p>
</div>
</div>
</div>
{/* <div className="div_row_droite" onClick={(e) => {
e.preventDefault();
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
}}>
<div style={{ "width": "100%", "height": "8rem" }}>
<div style={{ "width": "30%", "float": "left" }}>
<img src={img_met_digital} alt="Formation gestion projets" className="img_categorie" id="projets" />
</div>
<div style={{ "width": "70%", "float": "right" }}>
<p className="met_text" id="projets" >{props.article.title_formation} </p>
<p className="met_text_detail" >
<div className="art_criteres">
Avis :
</div>
<div className="art_criteres_value">
{parse(String(props.article.avis))}
</div>
</p>
<p className="met_text_detail" >
<div className="art_criteres">
Note :</div>
<div className="art_criteres_value">
<Rating onClick={handleRating}
ratingValue={rating}
readonly={true}
size={20} />
</div>
</p>
</div>
</div>
</div> */}
</div>
{/* <div className="forma_rightbox" onClick={(e) => {
e.preventDefault();
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
}}>
<div className="p_forma">
<div>
<div style={{ 'float': "left", "width": "50%", marginBottom: '0.1rem', textAlign:'justify' }}>
<b>{props.article.title_formation} </b><br />
</div>
<div style={{ 'float': "left", "width": "20%", marginBottom: '0.1rem', textAlign:'center',
marginLeft:'auto', marginRight:'auto', fontWeight:'bolder', }}>
{(props.article).note}
{props.article.note > "4" &&
<img class="img_note_class" src={happyimg} align="right" alt="MySy Training profile image" />
}
{props.article.note <= "2" &&
<img class="img_note_class" src={unhappyimg} align="right" alt="MySy Training profile image" />
}
{props.article.note > "2" && props.article.note <= "4" &&
<img class="img_note_class" src={middleimg} align="right" alt="MySy Training profile image" />
}
</div>
<div style={{ 'float': "right", "width": "30%", marginBottom: '0.1rem', textAlign: "right", paddingRight: "0.3rem" }}>
{(String(props.article.date_avis)).substring(0, 10)} <br />
</div>
</div>
<div style={{ 'float': "left", "width": "98%", marginBottom: '0.1rem', textAlign:'justify' }}>
{parse(String(props.article.avis))} <br />
</div>
</div>
<div style={{ "width": "100%", "margin-top": "0.2rem" }}>
<div style={{ 'float': "right", "width": "30%", textAlign: "right", marginTop: "0.6rem", }}>
<Button variant="contained" color="success"
style={{
'borderRadius': "10rem", "width": "100%",
"width": "60% !important", background: "#104277"
}}
onClick={(e) => {
e.preventDefault();
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
}}
>Voir detail</Button>
</div>
<div style={{ 'float': "left", "width": "30%", marginTop: "0.6rem", }}>
<div className="media_sociaux">
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
quote={props.article.title_formation + " -- " + props.article.avis}
hashtag={"#MySyTraining"}
>
<SocialIcon network="facebook" className="SocialIcon" />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" className="SocialIcon" />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
title={" Un avis sur : " + props.article.title_formation}
summary={props.article.title_formation + " -- " + props.article.avis}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" className="SocialIcon" />
</LinkedinShareButton>
</div>
</div>
</div>
</div>*/}
</div>
)
}
export default Article;

View File

@ -0,0 +1,30 @@
import React, { useState, useEffect } from "react";
const ArticleComment = (props) => {
const [myfilter, setmyfilter] = useState(props.articelcomment.message);
return (
<div className="articlecomment">
<div className="div_row">
<div className="div_row_gauche">
{String(props.articelcomment.sender_mail).split('@')[0]}<br/>
{(String(props.articelcomment.date_update)).substring(0, 16)}
</div>
<div className="div_row_droite">
{props.articelcomment.message}
</div>
</div>
<br/>
<hr />
</div>
)
}
export default ArticleComment;

View File

@ -0,0 +1,116 @@
import React from "react";
import { Button, } from "reactstrap";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import happyimg from "../mysy_img/happy.png";
import unhappyimg from "../mysy_img/nothappy.png";
import middleimg from "../mysy_img/middle.png";
import parse from 'html-react-parser'
const Article = (props) => {
console.log({ props });
return (
<div className="formation Article">
<div className="forma_rightbox" onClick={(e) => {
e.preventDefault();
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
}}>
<div className="p_forma">
<div>
<div style={{ 'float': "left", "width": "50%", marginBottom: '0.1rem', textAlign:'justify' }}>
<b>{props.article.title_formation} </b><br />
</div>
<div style={{ 'float': "left", "width": "20%", marginBottom: '0.1rem', textAlign:'center',
marginLeft:'auto', marginRight:'auto', fontWeight:'bolder', }}>
{(props.article).note}
{props.article.note > "4" &&
<img class="img_note_class" src={happyimg} align="right" alt="MySy Training profile image" />
}
{props.article.note <= "2" &&
<img class="img_note_class" src={unhappyimg} align="right" alt="MySy Training profile image" />
}
{props.article.note > "2" && props.article.note <= "4" &&
<img class="img_note_class" src={middleimg} align="right" alt="MySy Training profile image" />
}
</div>
<div style={{ 'float': "right", "width": "30%", marginBottom: '0.1rem', textAlign: "right", paddingRight: "0.3rem" }}>
{(String(props.article.date_avis)).substring(0, 10)} <br />
</div>
</div>
<div style={{ 'float': "left", "width": "98%", marginBottom: '0.1rem', textAlign:'justify' }}>
{parse(String(props.article.avis))} <br />
</div>
</div>
<div style={{ "width": "100%", "margin-top": "0.2rem" }}>
<div style={{ 'float': "right", "width": "30%", textAlign: "right", marginTop: "0.6rem", }}>
<Button variant="contained" color="success"
style={{
'borderRadius': "10rem", "width": "100%",
"width": "60% !important", background: "#104277"
}}
onClick={(e) => {
e.preventDefault();
window.location.href = "/Display-Detail-Article/" + props.article.internal_url
}}
>Voir detail</Button>
</div>
<div style={{ 'float': "left", "width": "30%", marginTop: "0.6rem", }}>
<div className="media_sociaux">
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
quote={props.article.title_formation + " -- " + props.article.avis}
hashtag={"#MySyTraining"}
>
<SocialIcon network="facebook" className="SocialIcon" />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" className="SocialIcon" />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
title={" Un avis sur : " + props.article.title_formation}
summary={props.article.title_formation + " -- " + props.article.avis}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" className="SocialIcon" />
</LinkedinShareButton>
</div>
</div>
</div>
</div>
</div>
)
}
export default Article;

View File

@ -0,0 +1,134 @@
import React, { useRef, useState, useMemo, useEffect } from "react";
import { getCookie, removeCookie } from 'react-use-cookie';
import axios from "axios";
import happyimg from "../mysy_img/happy.png";
import parse from 'html-react-parser'
let PageSize = 5;
const NosArticlesAlaUne = (props) => {
const [userconnected, setuserconnected] = useState("");
const [SearchText, setSearchText] = useState("");
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("");
const [displayAllClasses, setdisplayAllClasses] = useState(true);
const [showelement, setshowelement] = useState("init");
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [currentPage2, setCurrentPage2] = useState(1);
const [fin, setfin] = useState(0);
const stored_user = getCookie('tokenmysych');
function searchFunction(e) {
var form = new FormData();
form.append("token", "");
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_article_avis_alaune/";
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);
setmyApiResponse("True");
setResult(res.data.message)
//setmyApimyApiMessage("OK")
////console.log("taille = "+res.data.message.length);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("False");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
//setmyApimyApiMessage("")
})
}
const currentTableData2 = useMemo(() => {
if (result) {
const firstPageIndex = (currentPage2 - 1) * PageSize;
const lastPageIndex = firstPageIndex + PageSize;
setfin(1);
return result.slice(firstPageIndex, lastPageIndex);
}
else {
return [];
setfin(0);
}
}, [currentPage2]);
useEffect(() => {
setdisplayAllClasses("true");
searchFunction();
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
} else {
setuserconnected("1");
}
}, [])
return (
<div className="articlesalaUne">
{String(myApiResponse) === String("False") && <div className="koUpdateData">
Impossible de contacter l'hote distant
</div>}
{result && myApiResponse == "True" && fin == 0 && result.slice(0, PageSize).map((article) => (
<div style={{ border: "2px" }} >
<ul onClick={(e) => {
e.preventDefault();
window.open(
"Display-Detail-Article/" + JSON.parse(article).internal_url,
'_blank'
);
}}>
<li><u>Titre:</u> {JSON.parse(article).title_formation} </li>
{String(JSON.parse(article).note) > "4" && <li> <u>Note:</u> {JSON.parse(article).note} / 5
<img class="img_note_class" src={happyimg} align="right" alt="MySy Training happy" />
</li>}
<li> <u>Date:</u> { (String(JSON.parse(article).date_avis)).substring(0, 10)}</li>
<li><u>Avis:</u> {parse( (String(JSON.parse(article).avis)).substring(0, 50))} ...</li>
</ul>
<hr />
</div>
))}
</div>
)
}
export default NosArticlesAlaUne;

View File

@ -0,0 +1,23 @@
import React from 'react';
import { bool, func } from 'prop-types';
import { StyledBurger } from './Burger.styled';
const Burger = ({ open, setOpen, ...props }) => {
const isExpanded = open ? true : false;
return (
<StyledBurger aria-label="Toggle menu" aria-expanded={isExpanded} open={open} onClick={() => setOpen(!open)} {...props}>
<span />
<span />
<span />
</StyledBurger>
)
}
Burger.propTypes = {
open: bool.isRequired,
setOpen: func.isRequired,
};
export default Burger;

View File

@ -0,0 +1,40 @@
import styled from 'styled-components';
export const StyledBurger = styled.button`
position: absolute;
top: 5%;
left: 2rem;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 2rem;
height: 2rem;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 10;
span {
width: 2rem;
height: 0.25rem;
background: ${({ theme, open }) => open ? theme.primaryDark : theme.primaryLight};
border-radius: 10px;
transition: all 0.3s linear;
position: relative;
transform-origin: 1px;
:first-child {
transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
}
:nth-child(2) {
opacity: ${({ open }) => open ? '0' : '1'};
transform: ${({ open }) => open ? 'translateX(20px)' : 'translateX(0)'};
}
:nth-child(3) {
transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
}
}
`;

View File

@ -0,0 +1 @@
export { default } from './Burger';

View File

@ -0,0 +1,406 @@
import React, { useState, useEffect } from 'react';
//import { slide as Menu } from "react-burger-menu";
import { NavLink } from "react-router-dom";
import { getCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
import Button from '@mui/material/Button';
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import { useCookies } from "react-cookie";
import { Helmet } from "react-helmet";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import connect_white from "../mysy_img/connect_white_v2.png";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import connect_green from "../mysy_img/connect_green.png";
const ButtonHilight = () => {
const history = useHistory();
const [show, setShow] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
const controlNavbar = () => {
if (typeof window !== 'undefined') {
if (window.scrollY > lastScrollY && window.scrollY > 100) {
setShow(false);
} else if (window.scrollY < lastScrollY && window.scrollY < 100) { // if scroll up show the navbar
setShow(true);
}
// remember current page location to use in the next move
setLastScrollY(window.scrollY);
}
};
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const stored_user = getCookie('tokenmysych');
const stored_part = getCookie('tokenmysypart');
function whosisconnected() {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
setsomeoneconnected("1");
local_user_connect = 1;
//alert(" user connected OK");
}
if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
setsomeoneconnected("1");
local_part_connect = 1;
// alert(" partner connected OK");
}
}
useEffect(() => {
whosisconnected();
if (typeof window !== 'undefined') {
window.addEventListener('scroll', controlNavbar);
// cleanup function
return () => {
window.removeEventListener('scroll', controlNavbar);
};
}
}, [lastScrollY]);
const [PartnerMenu, setPartnerMenu] = React.useState(null);
const [AccountMenu, setAccountMenu] = React.useState(null);
const [ProduitMenu, setproduitMenu] = React.useState(null);
const [AvisMenu, setavisMenu] = React.useState(null);
const PartnerMenu_Close = () => {
setPartnerMenu(null);
};
const AccountMenu_Close = () => {
setAccountMenu(null);
};
const ProduitMenu_Close = () => {
setproduitMenu(null);
};
const handlePartnerMenu = (event) => {
setPartnerMenu(event.currentTarget);
};
const handleAccountMenu = (event) => {
setAccountMenu(event.currentTarget);
};
const handleProduitMenu = (event) => {
setproduitMenu(event.currentTarget);
};
const handleClose_Account = () => {
alert(" my account");
setAccountMenu(null);
};
const handleAccountConnexion = () => {
setAccountMenu(null);
history.push("/Connexion")
};
const handleMyAccount = () => {
setAccountMenu(null);
history.push("/mysy-user-account")
};
const handleAccountCreation = () => {
setAccountMenu(null);
history.push("/create_account")
};
const handlePartnerConnexion = () => {
setAccountMenu(null);
history.push("/PartnerLogin")
};
const handleProduitService = () => {
setproduitMenu(null);
history.push("/Produits-Services/")
};
const handleAvis = () => {
setavisMenu(null);
history.push("/Recherche-Article-formation")
};
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Yes',
onClick: () => user_logout_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
function part_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
setpartCookie("tokenmysypart", "");
}
history.push("/recherche-formation");
}
function part_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (pro)',
buttons: [
{
label: 'Oui',
onClick: () => part_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
function handleAccountLogout() {
if (String(userconnected) === String("1")) {
user_logout();
}
else if (String(partnerconnected) === String("1")) {
part_logout();
}
}
const [CategorieMenu, setCategorieMenu] = React.useState(null);
const CategorieMenu_Close = () => {
setCategorieMenu(null);
};
const handleCategorieMenu = (event) => {
setCategorieMenu(event.currentTarget);
};
const handleClassCategorie = (e) => {
setCategorieMenu(null);
var mymetier = "";
mymetier = e.target.id
//alert(" cours de : " + mymetier);
history.push("/Recherche_new/0/" + mymetier);
};
function publiecatalogue() {
history.push("/Partner", { mysy_arg: 'partner' });
}
return (
<div className='ButtonHilight'>
<Helmet>
<title>Compte utilisateur</title>
<meta name="description" content="Compte utilisateur formation" />
<meta name="robots" content="index,follow" />
</Helmet>
<Menu
keepMounted
anchorEl={PartnerMenu}
onClose={PartnerMenu_Close}
open={Boolean(PartnerMenu)}
style={{ "top": "2rem" }}
>
<MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
>Mon Compte</MenuItem>
<MenuItem onClick={PartnerMenu_Close} className="mymenu_item"
>Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={AccountMenu}
onClose={AccountMenu_Close}
open={Boolean(AccountMenu)}
style={{ "top": "2rem" }}
>
<MenuItem onClick={handleMyAccount} className="mymenu_item"
>Mon Compte</MenuItem>
<MenuItem onClick={handleAccountConnexion} className="mymenu_item"
>Connexion</MenuItem>
<MenuItem onClick={handleAccountCreation} className="mymenu_item"
>S'inscrire</MenuItem>
<MenuItem onClick={AccountMenu_Close} className="mymenu_item"
>Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={ProduitMenu}
onClose={ProduitMenu_Close}
open={Boolean(ProduitMenu)}
style={{ "top": "2rem" }} >
<MenuItem onClick={handleProduitService} className="mymenu_item"
> <button className='bton_menu'> Nos produits & Services </button></MenuItem>
<MenuItem onClick={handleAvis} className="mymenu_item"
> <button className='bton_menu'> Blog </button> </MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={CategorieMenu}
onClose={CategorieMenu_Close}
open={Boolean(CategorieMenu)}
style={{ "top": "2rem" }} >
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="IT" >Informatique</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="vente" > Commerce</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="RH" > Ressources Humaines</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="marketing" >Marketting</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="graphisme" >Graphisme</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="management" >Management</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item">
<button className='bton_menu' id="dev_perso" >Dev. Personnel </button>
</MenuItem>
</Menu>
<div className={`mini_entete ${show && 'hidden'}`} >
<div className="div_001">
<div className="div_002">
<h1 className="h1_transparent">Connexion MySy Training Technogy </h1>
<div className="vvv" >
<a href={process.env.REACT_APP_BASE_URL}> <img class="img-responsive header_img_logo22" src={logowhite} alt="MySy Training Technology" /> </a>
</div>
<div className="header_menuPrincipal_left" onClick={handleCategorieMenu}>
Les formations
</div>
</div>
<div className="div_003">
<h1 className="h1_transparent">Recherche Formations Tutoriels</h1>
<div className="hilight_menuPrincipal_bton" onClick={handleAccountConnexion}>
<div style={{ "textAlign": "left" }}>
{String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
style={{ "width": "25%" }} /> Connexion
</button>}
{String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
style={{ "width": "25%" }} />
</button>}
</div>
</div>
{String(someoneconnected) === String("1") && <div className="hilight_menuPrincipal" onClick={handleMyAccount}>
Mon Compte
</div>}
{String(someoneconnected) !== String("1") && <div className="hilight_menuPrincipal" onClick={handleAccountCreation}>
S'inscrire
</div>}
<div className="hilight_menuPrincipal" onClick={handleProduitMenu}>
Nos Services
</div>
<div className="hilight_menuPrincipal" onClick={publiecatalogue}
style={{ "background": "red", "borderRadius": "5px", "paddingLeft": "3px", "paddingRight": "3px" }}>
publier mes formations
</div>
</div>
</div>
{/* <div className={`button1 ${show && 'hidden'}`} >
<div style={{ "width": "100%", "backgroundColor": "white" }}>
<Button variant="outlined"
className={`button1 ${show && 'hidden'}`}
onClick={(e) => {
e.preventDefault();
window.location.href = "/Recherche-Article-formation";
}}> Le blog </Button> <br />
</div>
</div>*/}
</div>
</div>
);
}
export default ButtonHilight;

1590
src/components/CheckOut.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,493 @@
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">
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" }}>
&nbsp;
</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">
&nbsp;
</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" }}>
&nbsp;
</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") && "350 €/mois"}
{String(periode) === String("Annuel") && "1 500 €/an - (2 mois offerts)"}
</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 = "/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" }}>
&nbsp;
</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">
&nbsp;
</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" }}>
&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;

View File

@ -0,0 +1,327 @@
import React, { useRef, useState, useEffect } from "react";
import { useForm } from 'react-hook-form';
import Navigation from "../components/Navigation";
import { Helmet } from "react-helmet";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import 'react-toastify/dist/ReactToastify.min.css';
import axios from "axios";
import { Button, } from "reactstrap";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import ousommesnousimg from "../mysy_img/mysy_training_technology_ici.png"
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Header from "./Header";
const ContactForm = () => {
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [mynote, setmynote] = useState(0);
const [usermessage, setusermessage] = useState("");
const [object, setobject] = useState("");
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("");
const {
register,
handleSubmit,
reset,
formState: { errors }
} = useForm();
const onSubmit = async (data) => {
const { name, email, subject, message } = data;
console.log('Name: ', name);
console.log('Email: ', email);
console.log('Subject: ', subject);
console.log('Message: ', message);
SendMail();
};
function SendMail(e) {
var sender_mail = "";
var sender_tel = "";
var token = "";
////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
var mysubject = document.getElementsByName("subject")[0].value;
var mymessage = document.getElementsByName("message")[0].value;
var mysender_name = document.getElementsByName("name")[0].value;
var mysender_email = document.getElementsByName("email")[0].value;
//alert("contacter "+mysender_email+" - "+mymessage+" - url = "
//+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
var re = /\S+@\S+\.\S+/;
if (re.test(mysender_email) == false) {
alert("l'email est incorrecte");
return;
}
var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
var form = new FormData();
form.append("type", "email");
form.append("recever_mail", "contact@mysy-training.com");
form.append("recever_tel", "+33769203945");
form.append("sender_mail", mysender_email);
form.append("sender_tel", sender_tel);
form.append("object", mysubject);
form.append("message", mymessage);
form.append("sender_name", mysender_name);
form.append("token", "");
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
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);
setmyApiResponse("false");
}
else if (String(res.data.status) === String("true")) {
//console.log(" In test res.data.status (true) = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
document.getElementsByName("subject")[0].value = "";
document.getElementsByName("message")[0].value = "";
document.getElementsByName("name")[0].value = "";
document.getElementsByName("email")[0].value = "";
setmyApiResponse("true");
}
else {
//console.log(" contact-nous statut = " + res.data.status);
//console.log(" contact-nous res.data.message = " + res.data.message);
setmyApiResponse("false");
}
}).catch((error) => {
console.warn('contact-nous Not good man :( mysearchtext = ');
setmyApiResponse("false");
})
}
return (
<div className='ContactForm'>
<Helmet>
<title>MySy Training, contactez-nous</title>
<meta name="description" content="Trouver des formations et tutoriels adapté à vos besoins" />
<meta name="robots" content="index,follow" />
<meta name="title" content="MySy Training, contactez-nous" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/ContactezNous"} />
</Helmet>
<Header />
<div className="div_mobile">
<div> &nbsp;<br/></div>
<div className='container'>
<div className='row'>
<div className='col-12 text-center'>
<div className='contactForm'>
<form id='contact-form' onSubmit={handleSubmit(onSubmit)} noValidate>
{/* Row 1 of form */}
<div className='row formRow'>
<div className='col-6'>
<input
type='text'
name='name'
{...register('name', {
required: { value: true, message: 'votre nom/prenom' },
maxLength: {
value: 30,
message: 'svp pas plus de 30 caractères'
}
})}
className='form-control formInput'
placeholder='Nom'
></input>
{errors.name && <span className='errorMessage'>{errors.name.message}</span>}
</div>
<div className='col-6'>
<input
type='email'
name='email'
id='email'
{...register('email', {
required: true,
pattern: /^[a-zA-Z0-9.!#$%&*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
})}
className='form-control formInput'
placeholder='Adresse email'
></input>
{errors.email && (
<span className='errorMessage'>Adresse email invalide</span>
)}
</div>
</div>
{/* Row 2 of form */}
<div className='row formRow'>
<div className='col'>
<input
type='text'
name='subject'
{...register('subject', {
required: { value: true, message: 'Saisir un sujet' },
maxLength: {
value: 75,
message: 'maximim 75 charactères'
}
})}
className='form-control formInput'
placeholder='Sujet'
></input>
{errors.subject && (
<span className='errorMessage'>{errors.subject.message}</span>
)}
</div>
</div>
{/* Row 3 of form */}
<div className='row formRow'>
<div className='col'>
<textarea
rows={3}
name='message'
{...register('message', {
required: true
})}
className='form-control formInput'
placeholder='Message'
></textarea>
{errors.message && <span className='errorMessage'>Saisir un message</span>}
</div>
</div>
<br />
<div style={{ "textAlign": "left" }}>
<label for="newsletter">En cochant vous acceptez que l'équipe MySy vous recontacte par email &nbsp;</label>
<input type={"checkbox"} checked
id="newsletter"
name="newsletter" />
</div>
<br />
<Button variant="contained" color="success" type='submit'
className="div_row22 btn_login button"
>Envoyez le message</Button>
</form>
{String(myApiResponse) === String("true") && <div className="okUpdateData">
Votre message a bien été envoyé. Merci.
</div>}
{String(myApiResponse) === String("false") && <div className="koUpdateData">
Impossible d'envoyer votre message. Merci de ressayer dans un instant.
</div>}
</div>
</div>
</div>
<br />
<div className="div_row" >
<div className="nom_prenom"> nous trouver ? </div>
<div className="div_carte">
<a target="_blank"
href="https://www.google.com/maps/place/MySy+Training+Technology/@48.8761591,2.3260624,15z/data=!4m5!3m4!1s0x0:0x8239ba23406c9699!8m2!3d48.8761591!4d2.3260624">
<img src={ousommesnousimg} alt="logo MySy Technology ou sommes nous" style={{ 'width': "100%", 'height': '50%' }} />
</a>
</div>
<div className="div_adresse" >
<br />
<div>MySy Training Technology<br />
</div>
<div style={{ fontSize: "small" }}>
Adresse : 1 Cr du Havre, 75008 Paris <br />
Adresse email :
<a href="mailto: contact@mysy-training.com?subject=Mail from mysy website" target="_blank"> contact@mysy-training.com</a> <br />
Téléphone fixe : +331 77 00 38 57<br />
Téléphone : +337 69 20 39 45<br />
</div>
<br />
<div> Sur nos reseaux sociaux
<div style={{ 'float': "center", "textAlign": "center" }}>
<div className="media_sociaux">
<FacebookShareButton
url={"https://www.facebook.com/MySy-Training-114572794561371/"}
>
<SocialIcon network="facebook" className="SocialIcon" />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://twitter.com/mysy_training"}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" className="SocialIcon" />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.linkedin.com/c"}
summary={"ee"}
source={"https://www.linkedin.com/in/mysy-training-96b53a237/"}
>
<SocialIcon network="linkedin" className="SocialIcon" />
</LinkedinShareButton>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
};
export default ContactForm;

View File

@ -0,0 +1,758 @@
import React, { useRef, useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { Helmet } from "react-helmet";
import 'react-slideshow-image/dist/styles.css'
import { Fade } from 'react-slideshow-image';
import slideimg1 from "../mysy_img/education.jpg";
import slideimg2 from "../mysy_img/simpson2.jpg";
import slideimg3 from "../mysy_img/mysy_home.jpg";
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { useCookies } from "react-cookie";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { confirmAlert } from 'react-confirm-alert';
const DisplayDetailClass = (props) => {
const { classId } = useParams();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState();
const [DetailTraining, setDetailTraining] = useState([]);
const [closepopup, setclosepopup] = useState(0);
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [mynote, setmynote] = useState(0);
const [userconnected, setuserconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
var server_address = "127.0.0.1";
useEffect(() => {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',);
setuserIp(result.data.IPv4);
setcountry_code(result.data.country_code);
setcountry_name(result.data.country_name);
setcity(result.data.city);
setpostal(result.data.postal);
setlatitude(result.data.latitude);
setlongitude(result.data.longitude);
setIPv4(result.data.IPv4);
setstate(result.data.state);
setuserIp(result.data.IPv4);
}
fetchData();
Display();
}, []);
function contactUs(e) {
var sender_mail = "";
var sender_tel = "";
var token = "";
if (String(userconnected) === "0") {
sender_mail = document.getElementsByName("usermail")[0].value;
sender_tel = document.getElementsByName("usernumtel")[0].value;
if (sender_mail.length == 0 && sender_tel.length == 0) {
alert(" Les information fournies sont incorrectes ");
return;
}
} else {
token = String(stored_user)
}
var useravis = document.getElementsByName("useravis")[0].value;
var usersupqual = document.getElementsByName("userqualsup")[0].value;
var usernote = document.getElementsByName("usernote")[0].value;
if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) {
alert("Merci de saisir le nombre minimum de caractère requis pour les champs ");
return;
}
var re = /\S+@\S+\.\S+/;
if (re.test(sender_mail) == false) {
alert("l'email est incorrecte");
return;
}
////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
//alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = "
//+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
var form = new FormData();
form.append("type", "email");
form.append("recever_mail", "");
form.append("recever_tel", "");
form.append("sender_mail", sender_mail);
form.append("sender_tel", sender_tel);
form.append("object", DetailTraining["external_code"]);
form.append("token", "");
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setclosepopup(1);
document.getElementsByName("usermail")[0].value = "";
document.getElementsByName("usernumtel")[0].value = "";
document.getElementsByName("usercomment")[0].value = "";
}
else {
//console.log(" contact-nous statut = " + res.data.status);
//console.log(" contact-nous res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('contact-nous Not good man :( mysearchtext = ');
})
}
function Display(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class_coup_de_coeur/";
var form = new FormData();
form.append("internal_url", classId);
form.append("token", "");
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
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);
if (res.data.message.length > 0) {
setmyApiResponse("True");
}
else {
setmyApiResponse("False");
}
setResult(res.data.message);
setDetailTraining(JSON.parse(res.data.message));
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setmyApiResponse("False");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
})
}
const history = useHistory();
const fadeImages = [
{
url: slideimg1,
},
{
url: slideimg2,
},
{
url: slideimg3,
},
];
function CheckNote(e) {
const val = e.target.value;
if (isNaN(val)) {
//alert(val + " is not a number <br/> mynote = "+mynote);
document.getElementById("usernote").value = mynote;
} else {
if (val > 5) {
alert(" Valeur Maxi doit etre 5");
document.getElementById("usernote").value = mynote;
} else {
setmynote(val);
}
}
}
/// ----
return (
<div className="displaydetailclass">
<Helmet>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
<meta name="title" content={DetailTraining["title"]} />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/" + `${DetailTraining["internal_url"]}`} />
<title> {`${DetailTraining["title"]}`}
</title>
</Helmet>
<div class="containerBox">
<a href={process.env.REACT_APP_BASE_URL}> <img class="img-responsive log_img" src={bannerimg2} /> </a>
</div>
<h1 className="h1_transparent">{`${DetailTraining["title"]}`}</h1>
{String(myApiResponse) === String("False") &&
<div className="koUpdateData">
Impossible de recuperer la formation. Merci de contacter le support.
</div>
}
{myApiResponse === "True" &&
<div className="display_screen_max_600">
<div>
</div>
<div >
<div className="detail_rightbox_left_title">
<b>Titre </b> <br />
{DetailTraining["title"]}
</div>
<div className="detail_rightbox_right_button_acces">
<Button variant="contained"
color="success"
className="accesformation"
onClick={(e) => {
e.preventDefault();
window.open(
DetailTraining["url"],
'_blank'
);
}}>Accedez a la formation</Button>
</div>
</div>
<div className="detail_row">
<div className="detail_rightbox_left1">
<b> Formateur</b><br />
{DetailTraining["trainer"]}
</div>
<div className="detail_rightbox_right1">
<b>Prix </b> <br />
{DetailTraining["price"]}
</div>
</div>
<div className="detail_row">
<div className="detail_rightbox_left1">
<b> Distanciel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
<div className="detail_rightbox_right1">
<b> Presentiel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="detail_row">
<div className="detail_rightbox_left1">
<b> Durée</b><br />
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
</div>
<div className="detail_rightbox_right1">
<b> Langue</b><br />
{DetailTraining["lang"]} &nbsp;
</div>
</div>
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && <div className="detail_rightbox_left11_red">
<b>En ligne </b> <br /> <br /><br />
</div>
}
{DetailTraining.location && <div className="detail_rightbox_right11">
<b>A distance </b> <br />
<a href="#" alt="redirection vers googlemap">
{DetailTraining.location.rue} &nbsp;
{DetailTraining.location.ville} &nbsp;
{DetailTraining.location.cp} &nbsp;
{DetailTraining.location.pays} &nbsp;
</a>
</div>
}
{DetailTraining["description"] && <div className="detail_rightbox_right2">
<b> Description</b><br />
<p>
{DetailTraining["description"]}
</p>
</div>}
{DetailTraining["objectif"] && <div className="detail_rightbox_right2">
<b> Objectif</b><br />
<p>
{DetailTraining["objectif"]} &nbsp;
</p>
</div>}
{DetailTraining["pointsfort"] && <div className="detail_rightbox_right2">
<b> Points forts</b><br />
<p>
{DetailTraining["pointsfort"]} &nbsp;
</p>
</div>}
<div>
<br />
<div>
<div className="detail_rightbox_left1_end"> Vous avez suivi cette formation, votre avis nous interesse </div>
<div className="detail_rightbox_right1_end">
<Popup className="popup-content_max_601" trigger={<button className="avisformation"> Votre avis nous interesse </button>}
position="left center" >
<div className="popupcontact popup-content_max_601">
{String(userconnected) === "0" && <div>
<div class="form-group">
<label className="koUpdateData" for="exampleFormControlInput1">Email address (*)</label>
<input type="email" class="form-control" id="usermail" name="usermail" placeholder="name@example.com" />
</div>
<br />
<div class="form-group">
<label className="koUpdateData" for="exampleFormControlInput1">Num Telephone (*)</label>
<input type="tel" class="form-control" id="usernumtel" name="usernumtel" placeholder="06 29 ..."
/>
</div>
<br />
</div>
}
<div class="form-group">
<label for="exampleFormControlTextarea1">Qualité du support</label>
<textarea class="form-control" id="userqualsup" name="userqualsup" rows="2"></textarea>
</div>
<br />
<div class="form-group">
<label for="exampleFormControlTextarea1">Votre avis</label>
<textarea class="form-control" id="useravis" name="useravis" rows="5" ></textarea>
</div>
<br />
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes, sur 5</label>
<textarea class="form-control" id="usernote" name="usernote" rows="1" cols="3" onChange={CheckNote}></textarea>
</div>
<br />
<button type="submit" class="btn btn-secondary btn-sm" onClick={contactUs}>Envoyer</button>
</div>
</Popup>
</div>
<div className="detail_rightbox_right2" style={{ textAlign: 'center', border: 0 }}>
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
quote={DetailTraining["title"] + " -- " + DetailTraining["description"]}
hashtag={"#MySyTraining"}
>
<SocialIcon network="facebook" style={{ height: 35, width: 35 }} />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" style={{ height: 35, width: 35 }} />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
title={" Une nouvelle formation : " + DetailTraining["title"]}
summary={DetailTraining["title"] + " -- " + DetailTraining["description"]}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" style={{ height: 35, width: 35 }} />
</LinkedinShareButton>
</div>
</div>
</div>
</div>
}
{myApiResponse == "True" &&
<div className="display_screen_min_601">
<div>
{/*closepopup == '0' && <Popup trigger={<button className="btn btn-primary"> Contactez nous </button>}>
<div className="popupcontact">
<div class="form-group">
<label className="koUpdateData" for="exampleFormControlInput1">Email address (*)</label>
<input type="email" class="form-control" id="usermail" name="usermail" placeholder="name@example.com" />
</div>
<br />
<div class="form-group">
<label className="koUpdateData" for="exampleFormControlInput1">Num Telephone (*)</label>
<input type="tel" class="form-control" id="usernumtel" name="usernumtel" placeholder="06 29 ..."
/>
</div>
.-0
<br />
<div class="form-group">
<label for="exampleFormControlTextarea1">Commentaire</label>
<textarea class="form-control" name="usercomment" rows="2"></textarea>
</div>
<button type="submit" class="btn btn-secondary btn-sm" onClick={contactUs}>Envoyer</button>
</div>
</Popup>
*/ }
</div>
<div className="detail_leftbox">
<div className="pub">
<div className="slide-container">
<Fade>
{fadeImages.map((fadeImage, index) => (
<div className="each-fade" key={index}>
<div className="image-container">
<img src={fadeImage.url} className="slide_img" />
</div>
<h2>{fadeImage.caption}</h2>
</div>
))}
</Fade>
</div>
</div>
</div>
<div className="detail_rightbox">
<div className="detail_rightbox_left">
<b>Titre :</b> <br />
<p> {DetailTraining["title"]} </p>
</div>
<div className="detail_rightbox_right">
<Button variant="contained"
color="success"
className="accesformation"
onClick={(e) => {
e.preventDefault();
window.open(
DetailTraining["url"],
'_blank'
);
}}> Accedez à la formation</Button>
</div>
<br />
<br />
<hr />
<b> Description</b><br />
<p>
{DetailTraining["description"]}
</p>
{DetailTraining["objectif"] && <div>
<hr />
<b> Objectif</b><br />
<p>
{DetailTraining["objectif"]} &nbsp;
</p>
</div>}
{DetailTraining["pointsfort"] && <div>
<hr />
<b> Points forts</b><br />
<p>
{DetailTraining["pointsfort"]} &nbsp;
</p>
</div>}
<hr />
<div className="block">
<b> Formateur</b><br />
{DetailTraining["trainer"]}
</div>
<div className="block">
<b> Prix</b><br />
{DetailTraining["price"]}
</div>
<div className="block">
<b> langue</b><br />
{DetailTraining["lang"]}
</div>
<div className="detail_row">
<hr />
</div>
<div className="block">
<b> Durée</b><br />
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
</div>
{DetailTraining["certif"] && <div className="block">
<b> Certifiante</b><br />
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && <div>
Non &nbsp; </div>
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
Oui &nbsp; </div>
}
</div>}
<div className="block">
<b> Distanciel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
<div className="block">
<b> Presentiel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
<div>
<br />
<br />
<div className="detail_rightbox_left">
<br />
{/* <p style={{ "color": "red", "font-style": "italic" }}> Vous avez suivi cette formation, partager votre avis </p>
*/}
</div>
<div className="detail_rightbox_right">
<Popup trigger={<button className="avisformation"> Votre avis nous interesse </button>}
position="left center" className="popup-content2">
<div className="popupcontact popup-content2">
{String(userconnected) === "0" && <div>
<div class="form-group">
<label className="koUpdateData" for="exampleFormControlInput1">Email address (*)</label>
<input type="email" class="form-control" id="usermail" name="usermail" placeholder="name@example.com" />
</div>
<br />
<div class="form-group">
<label className="koUpdateData" for="exampleFormControlInput1">Num Telephone (*)</label>
<input type="tel" class="form-control" id="usernumtel" name="usernumtel" placeholder="06 29 ..."
/>
</div>
<br />
</div>
}
<div class="form-group">
<label for="exampleFormControlTextarea1">Qualité du support</label>
<textarea class="form-control" id="userqualsup" name="userqualsup" rows="2"></textarea>
</div>
<br />
<div class="form-group">
<label for="exampleFormControlTextarea1">Votre avis</label>
<textarea class="form-control" id="useravis" name="useravis" rows="5" ></textarea>
</div>
<br />
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes, sur 5</label>
<textarea class="form-control" id="usernote" name="usernote" rows="1" cols="3" onChange={CheckNote}></textarea>
</div>
<br />
<button type="submit" class="btn btn-secondary btn-sm" onClick={contactUs}>Envoyer</button>
</div>
</Popup>
</div>
</div>
<div>
</div>
<div className="detail_rightbox_right">
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
quote={DetailTraining["title"] + " -- " + DetailTraining["description"]}
hashtag={"#MySyTraining"}
>
<SocialIcon network="facebook" style={{ height: 35, width: 35 }} />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" style={{ height: 35, width: 35 }} />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
title={" Une nouvelle formation : " + DetailTraining["title"]}
summary={DetailTraining["title"] + " -- " + DetailTraining["description"]}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" style={{ height: 35, width: 35 }} />
</LinkedinShareButton>
</div>
</div>
</div>
}
</div>
)
}
export default DisplayDetailClass;

View File

@ -0,0 +1,205 @@
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 { Helmet } from "react-helmet";
import FormControl from '@mui/material/FormControl';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import OutlinedInput from '@mui/material/OutlinedInput';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import IconButton from '@mui/material/IconButton';
import Header from "./Header";
import Footer from "./Fotter";
import { getCookie } from 'react-use-cookie';
import { useCookies } from "react-cookie";
function DeleteUserAccount() {
const { token } = useParams();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("");
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
function Check() {
}
const history = useHistory();
// Verification de la valididé du token
function DeleteUserAccount(e) {
var form = new FormData();
form.append("user_recid", token);
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/delete_user_account/";
//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);
setmyApiResponse("true");
setResult(res.data.message);
user_logout_confirmation();
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("false");
setResult(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
//setmyApimyApiMessage("")
})
}
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const stored_user = getCookie('tokenmysych');
const stored_part = getCookie('tokenmysypart');
function whosisconnected() {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
setsomeoneconnected("1");
local_user_connect = 1;
//alert(" user connected OK");
}
if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
setsomeoneconnected("1");
local_part_connect = 1;
// alert(" partner connected OK");
}
}
useEffect(() => {
async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',);
setuserIp(result.data.IPv4);
setcountry_code(result.data.country_code);
setcountry_name(result.data.country_name);
setcity(result.data.city);
setpostal(result.data.postal);
setlatitude(result.data.latitude);
setlongitude(result.data.longitude);
setIPv4(result.data.IPv4);
setstate(result.data.state);
setuserIp(result.data.IPv4);
}
fetchData();
DeleteUserAccount();
whosisconnected();
}, []);
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
}
function handleAccountLogout() {
if (String(userconnected) === String("1")) {
user_logout_confirmation();
}
}
return (
<div className="deleteuseraccount">
<Helmet>
<title>Suppression du compte MySy Training</title>
<meta name="description" content="Suppression compte Mysy Training" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
<div >
&nbsp;
</div>
<br />
<br />
<div >
<nav className="title"> Suppression du compte utilisateur MySy </nav>
{String(myApiResponse) === String("true") && <div className="okUpdateData">
<br />
{result}
</div>}
{String(myApiResponse) !== String("true") && <div className="koUpdateData">
KO, Impossible de supprimer votre compte. merci de contacter le support de MySy Training.
</div>}
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
};
export default DeleteUserAccount;

View File

@ -0,0 +1,49 @@
import React, { useRef, useState, useEffect } from "react";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import ReactBootstrap from 'react-bootstrap'
import { Modal } from 'react-bootstrap';
import axios from "axios";
const DisplayClass = (props) => {
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("false");
const [myApiMessage, setmyApimyApiMessage] = useState("");
const [trainingRef, settrainingRef] = useState("");
function MyDisplayClass(e) {
var trainingind = e.target.value;
//console.log(" #################" + trainingind);
//alert(" la formation a traiter est : " + trainingind);
}
return (
<div>
<h2> Affichage detaillé d'une formation </h2>
<li className="displayclass">
<ul>
<li> Titre : {props.formation.title} </li>
<li> Description : {props.formation.description} </li>
<li> domain : {props.formation.domain} </li>
<li> Langue : {props.formation.lang} </li>
<li> Certification : {props.formation.certif} </li>
<li> Type : {props.formation.type} </li>
<li> Support : {props.formation.support} </li>
<li> Prix : {props.formation.price} </li>
</ul>
</li>
</div>
)
}
export default DisplayClass;

View File

@ -0,0 +1,54 @@
import React, { useRef, useState,useEffect } from "react";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import ReactBootstrap from 'react-bootstrap'
import { Modal } from 'react-bootstrap';
import axios from "axios";
import { useHistory, useParams } from 'react-router-dom'
import parse from 'html-react-parser'
const DisplayClassV2 = (props) => {
const [result, setResult] = useState("");
const [myApiResponse,setmyApiResponse] = useState("false");
const [myApiMessage,setmyApimyApiMessage] = useState("");
const [trainingRef,settrainingRef] = useState("");
const { id } = useParams()
function MyDisplayClass(e){
var trainingind = e.target.value;
//console.log(" #################"+trainingind);
//alert(" la formation a traiter est : "+trainingind);
}
return (
<div>
<h2> on y arrive Affichage detaillé d'une formation </h2>
<li className="displayclass">
<ul>
<li> val = : {id} </li>
</ul>
</li>
</div>
)
}
export default DisplayClassV2;

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,827 @@
import React, { useRef, useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import { Helmet } from "react-helmet";
import 'react-slideshow-image/dist/styles.css'
import { Fade } from 'react-slideshow-image';
import slideimg1 from "../mysy_img/education.jpg";
import slideimg4 from "../mysy_img/mysy_img.png";
import Footer from "./Fotter";
import Header from "./Header";
/*
/!\ important: les images du slides doivent avoir une dimension de : 250 X 450
*/
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { useCookies } from "react-cookie";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { confirmAlert } from 'react-confirm-alert';
const DisplayDetailClass = (props) => {
const { classId } = useParams();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState();
const [DetailTraining, setDetailTraining] = useState([]);
const [closepopup, setclosepopup] = useState(0);
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [mynote, setmynote] = useState(0);
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
useEffect(() => {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',);
setuserIp(result.data.IPv4);
setcountry_code(result.data.country_code);
setcountry_name(result.data.country_name);
setcity(result.data.city);
setpostal(result.data.postal);
setlatitude(result.data.latitude);
setlongitude(result.data.longitude);
setIPv4(result.data.IPv4);
setstate(result.data.state);
setuserIp(result.data.IPv4);
submenu_info();
}
fetchData();
Display();
}, []);
function contactUs(e) {
var sender_mail = "";
var sender_tel = "";
var token = "";
if (String(userconnected) === "0") {
sender_mail = document.getElementsByName("usermail")[0].value;
sender_tel = document.getElementsByName("usernumtel")[0].value;
if (sender_mail.length == 0 && sender_tel.length == 0) {
alert(" Les information fournies sont incorrectes ");
return;
}
} else {
token = String(stored_user)
}
var useravis = document.getElementsByName("useravis")[0].value;
var usersupqual = document.getElementsByName("userqualsup")[0].value;
var usernote = document.getElementsByName("usernote")[0].value;
if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) {
alert("Merci de saisir le nombre minimum de caractère requis pour les champs ");
return;
}
var re = /\S+@\S+\.\S+/;
if (re.test(sender_mail) == false) {
alert("l'email est incorrecte");
return;
}
////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
//alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = "
//+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
var form = new FormData();
form.append("type", "email");
form.append("recever_mail", "");
form.append("recever_tel", "");
form.append("sender_mail", sender_mail);
form.append("sender_tel", sender_tel);
form.append("object", DetailTraining["external_code"]);
form.append("token", "");
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setclosepopup(1);
document.getElementsByName("usermail")[0].value = "";
document.getElementsByName("usernumtel")[0].value = "";
document.getElementsByName("usercomment")[0].value = "";
}
else {
//console.log(" contact-nous statut = " + res.data.status);
//console.log(" contact-nous res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('contact-nous Not good man :( mysearchtext = ');
})
}
function Display(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/";
var form = new FormData();
form.append("internal_url", classId);
form.append("token", "");
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
//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);
if (res.data.message.length > 0) {
setmyApiResponse("True");
if (String(JSON.parse(res.data.message).coeur) !== String("1") &&
String(JSON.parse(res.data.message).freeacces) !== String("1")) {
//alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur)
// Verification si on est en mode connecté ou non.
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
if (local_user_connect === 0 && local_part_connect === 0) {
confirmAlert({
title: 'Connexion ?',
message: 'Connectez-vous pour acceder au detail de cette formation',
buttons: [
{
label: 'Vous avez un compte',
onClick: () => { history.push("/mysy-training-login/training/" + classId) }
},
{
label: "Vous n'avez pas de compte",
onClick: () => { history.push("/create_account") }
},
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
} else {
//alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur)
}
}
else {
setmyApiResponse("False");
}
//console.log(" In displaydetailclass res.data.status = " + res.data.status);
console.log(" In displaydetailclass res.data.message = " + res.data.message);
setResult(res.data.message);
setDetailTraining(JSON.parse(res.data.message));
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setmyApiResponse("False");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
})
}
const history = useHistory();
const fadeImages = [
{
url: slideimg1,
},
{
url: slideimg4,
},
];
function CheckAvis(e) {
const val = document.getElementById("useravis").value
//alert(" evalu " + val);
if (val.length < 20) {
alert(" Le champ 'Avis' doit etre plus renseigné");
}
//alert(val);
}
function CheckNote(e) {
const val = e.target.value;
if (isNaN(val)) {
//alert(val + " is not a number <br/> mynote = "+mynote);
document.getElementById("usernote").value = mynote;
} else {
if (val > 5) {
alert(" Valeur Maxi doit etre 5");
document.getElementById("usernote").value = mynote;
} else {
setmynote(val);
}
}
}
const [submenu, setsubmenu] = useState("formateur");
function submenu_info() {
setsubmenu("formateur");
if (document.getElementsByName("menu_formateur")[0])
document.getElementsByName('menu_formateur')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_datelieu() {
setsubmenu("datelieu");
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].focus();
if (document.getElementsByName("menu_formateur")[0])
document.getElementsByName('menu_formateur')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_divers() {
setsubmenu("divers");
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
/// ----
return (
<div className="displaydetailclass">
<Helmet>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
<meta name="title" content={DetailTraining["title"]} />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/" + `${DetailTraining["internal_url"]}`} />
<title> {`${DetailTraining["title"]}`} </title>
</Helmet>
<Header />
<div className="div_mobile">
<h1 className="h1_transparent">{`${DetailTraining["title"]}`}</h1>
<div>
{String(myApiResponse) === String("False") &&
<div className="koUpdateData">
Impossible de recuperer la formation. Merci de contacter le support.
</div>
}
{myApiResponse === "True" &&
<div className="display_screen_max_600">
<div>
</div>
<div >
<div className="detail_rightbox_right2" style={{ "textAlign": "center", "fontSize": "small" }}>
<b> {DetailTraining["title"]} </b>
</div>
{DetailTraining["description"] && <div className="detail_rightbox_right2">
<b> Description</b><br />
<p>
{DetailTraining["description"]}
</p>
</div>}
{DetailTraining["objectif"] && <div className="detail_rightbox_right2">
<b> Objectif</b><br />
<p>
{DetailTraining["objectif"]} &nbsp;
</p>
</div>}
{!DetailTraining["objectif"] && <div className="detail_rightbox_right2">
<b> Objectif</b><br />
<p>
<i>En cours</i>
</p>
</div>}
{DetailTraining["pointsfort"] && <div className="detail_rightbox_right2">
<b> Points forts</b><br />
<p>
{DetailTraining["pointsfort"]} &nbsp;
</p>
</div>}
{!DetailTraining["pointsfort"] && <div className="detail_rightbox_right2">
<b> Points forts</b><br />
<p>
<i>En cours</i>
</p>
</div>}
</div>
<div className="detail_row">
{DetailTraining["certif"] && <div className="detail_rightbox_left1">
<b>Certifiante </b> <br />
{DetailTraining["certif"]}
</div>}
{!DetailTraining["certif"] && <div className="detail_rightbox_left1">
<b>Certifiante </b> <br />
<i>NC</i>
</div>}
<div className="detail_rightbox_right1">
<b>Prix </b> <br />
{DetailTraining["price"]}
</div>
</div>
<div className="detail_row">
<div className="detail_rightbox_left1">
<b> Distanciel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
<div className="detail_rightbox_right1">
<b> Presentiel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="detail_row">
<div className="detail_rightbox_right1">
<b> Durée</b><br />
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
</div>
</div>
<div style={{ "textAlign": "left" }}>
<Button variant="outlined" onClick={submenu_info} className="detail_class_submenu" id='menu_formateur' name='menu_formateur'>Formateur</Button>
<Button variant="outlined" onClick={submenu_datelieu} className="detail_class_submenu" id='menu_datelieu' name='menu_datelieu'>Date & Lieu</Button>
<Button variant="outlined" onClick={submenu_divers} className="detail_class_submenu" id='menu_divers' name='menu_divers'>Divers</Button>
{/*<hr className="hr_height" />*/}
<div>
{String(submenu) === String("formateur") && <div className="detail_class_submenu_data">
{DetailTraining.trainer && <div>
<br/>
{DetailTraining.trainer}
</div>}
{!DetailTraining.trainer && <div>
<br/>
<i>NC </i>
</div>}
</div>}
{String(submenu) === String("datelieu") && <div className="detail_class_submenu_data">
{DetailTraining.datelieu && DetailTraining.datelieu.map((datelieu) => (
<div>
A {datelieu.ville} , le {datelieu.date}
</div>
))}
</div>}
{String(submenu) === String("divers") && <div className="detail_class_submenu_data">
divers
</div>}
</div>
</div>
<div className="detail_row">
&nbsp;
</div>
<div className="detail_rightbox_right_button_acces">
<Button variant="contained"
color="success"
className="accesformation"
onClick={(e) => {
e.preventDefault();
window.open(
DetailTraining["url"],
'_blank'
);
}}>Accedez à la formation</Button>
</div>
<div>
<br />&nbsp;
<div>
<div className="detail_rightbox_right2" style={{ textAlign: 'center', border: 0 }}>
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
quote={DetailTraining["title"] + " -- " + DetailTraining["description"]}
hashtag={"#MySyTraining"}
>
<SocialIcon network="facebook" style={{ height: 35, width: 35 }} />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" style={{ height: 35, width: 35 }} />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
title={" Une nouvelle formation : " + DetailTraining["title"]}
summary={DetailTraining["title"] + " -- " + DetailTraining["description"]}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" style={{ height: 35, width: 35 }} />
</LinkedinShareButton>
</div>
</div>
</div>
</div>
}
{myApiResponse == "True" &&
<div className="display_screen_min_601">
<div>
</div>
<div className="detail_leftbox">
<div className="pub">
<div className="slide-container">
<Fade>
{fadeImages.map((fadeImage, index) => (
<div className="each-fade" key={index}>
<div className="image-container">
<img src={fadeImage.url} className="slide_img" />
</div>
<h2>{fadeImage.caption}</h2>
</div>
))}
</Fade>
</div>
</div>
</div>
<div className="detail_rightbox">
<div className="titre_formation">
{DetailTraining["title"]}
</div>
<div className="description">
<div className="titre1"> Description</div>
</div>
<p className="description">
{DetailTraining["description"]}
</p>
<div className="description">
<div className="titre1"> Objectif</div>
{DetailTraining["objectif"] && <p>
{DetailTraining["objectif"]} &nbsp;
</p>}
{!DetailTraining["objectif"] && <p style={{ "fontStyle": "italic" }}>
En cours &nbsp;
</p>}
</div>
<div className="description">
<div className="titre1"> Points forts</div>
{DetailTraining["pointsfort"] && <p>
{DetailTraining["pointsfort"]} &nbsp;
</p>}
{!DetailTraining["pointsfort"] && <p style={{ "fontStyle": "italic" }}>
En cours &nbsp;
</p>}
</div>
<div className="titre1"> Caracteristiques</div>
<div className="block">
<b > Prix</b><br />
{DetailTraining["price"]}
</div>
<div className="block">
<b> langue</b><br />
{DetailTraining["lang"]}
</div>
<div className="block">
<b> Durée</b><br />
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
</div>
{DetailTraining["certif"] && <div className="block">
<b> Certifiante</b><br />
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && <div>
Non &nbsp; </div>
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
Oui &nbsp; </div>
}
</div>}
<div className="block">
<b> Distanciel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
<div className="block">
<b> Presentiel</b><br />
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
&nbsp;
<div>
</div>
<div style={{ "width": "10%" }}> &nbsp; </div>
<div style={{ "textAlign": "left" }}>
<Button variant="outlined" onClick={submenu_info} className="detail_class_submenu" id='menu_formateur' name='menu_formateur'>Formateur</Button>
<Button variant="outlined" onClick={submenu_datelieu} className="detail_class_submenu" id='menu_datelieu' name='menu_datelieu'>Date & Lieu</Button>
<Button variant="outlined" onClick={submenu_divers} className="detail_class_submenu" id='menu_divers' name='menu_divers'>Divers</Button>
{/*<hr className="hr_height" />*/}
<div>
{String(submenu) === String("formateur") && <div className="detail_class_submenu_data">
{DetailTraining.trainer && <div>
<br/>
{DetailTraining.trainer}
</div>}
{!DetailTraining.trainer && <div>
<br/>
<i>NC </i>
</div>}
</div>}
{String(submenu) === String("datelieu") && <div className="detail_class_submenu_data">
{DetailTraining.datelieu && DetailTraining.datelieu.map((datelieu) => (
<div>
A {datelieu.ville} , le {datelieu.date}
</div>
))}
</div>}
{String(submenu) === String("divers") && <div className="detail_class_submenu_data">
divers
</div>}
</div>
</div>
</div>
<div style={{ "width": "50%", "float": "right", "marginTop": "0.5rem" }}>
<div style={{ "float": "left", "width": "40%", "textAlign": "left" }}>
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
quote={DetailTraining["title"] + " -- " + DetailTraining["description"]}
hashtag={"#MySyTraining"}
>
<SocialIcon network="facebook" style={{ height: 35, width: 35 }} />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" style={{ height: 35, width: 35 }} />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
title={" Une nouvelle formation : " + DetailTraining["title"]}
summary={DetailTraining["title"] + " -- " + DetailTraining["description"]}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" style={{ height: 35, width: 35 }} />
</LinkedinShareButton>
</div>
<div style={{ "float": "right", "width": "40%", "textAlign": "right" }}>
<Button variant="contained"
color="success"
className="accesformation"
onClick={(e) => {
e.preventDefault();
window.open(
DetailTraining["url"],
'_blank'
);
}}> Accedez à la formation</Button>
</div>
</div>
</div>
}
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
}
export default DisplayDetailClass;

View File

@ -0,0 +1,849 @@
import React, { useRef, useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import { Helmet } from "react-helmet";
import 'react-slideshow-image/dist/styles.css'
import { Fade } from 'react-slideshow-image';
import slideimg1 from "../mysy_img/education.jpg";
import slideimg4 from "../mysy_img/mysy_img.png";
import Footer from "./Fotter";
import Header from "./Header";
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import img_met_program from "../mysy_img/met_programmation.jpg";
import img_met_hotel from "../mysy_img/met_hotel.jpg";
import img_met_graphisme from "../mysy_img/metier_graphisme.jpg";
import img_met_autre from "../mysy_img/met_autre.jpg";
import img_met_digital from "../mysy_img/met_digital.jpg";
import img_met_management from "../mysy_img/met_management.jpg";
import img_met_projet from "../mysy_img/met_projet.jpg";
import img_met_market from "../mysy_img/met_market.jpg";
import img_met_autre2 from "../mysy_img/met_autre2.jpg";
import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg";
import img_met_rh from "../mysy_img/met_rh.jpg";
import img_met_bureautic from "../mysy_img/met_burautic.jpg";
import img_met_vente from "../mysy_img/met_vente.jpg";
/*
/!\ important: les images du slides doivent avoir une dimension de : 250 X 450
*/
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { useCookies } from "react-cookie";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { confirmAlert } from 'react-confirm-alert';
//import { Rating } from 'react-simple-star-rating';
import Rating from '@mui/material/Rating';
import parse from 'html-react-parser';
import Inscription from "./Inscription_Information";
const DisplayDetailClass = (props) => {
const { classId } = useParams();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState();
const [DetailTraining, setDetailTraining] = useState([]);
const [closepopup, setclosepopup] = useState(0);
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [mynote, setmynote] = useState(0);
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const [inscritpion, setinscritpion] = useState("");
const [ratingvalue, setratingvalue] = useState(0);
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
useEffect(() => {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',);
setuserIp(result.data.IPv4);
setcountry_code(result.data.country_code);
setcountry_name(result.data.country_name);
setcity(result.data.city);
setpostal(result.data.postal);
setlatitude(result.data.latitude);
setlongitude(result.data.longitude);
setIPv4(result.data.IPv4);
setstate(result.data.state);
setuserIp(result.data.IPv4);
submenu_datelieu();
}
fetchData();
Display();
GetAssociatedTraning();
}, []);
function contactUs(e) {
var sender_mail = "";
var sender_tel = "";
var token = "";
if (String(userconnected) === "0") {
sender_mail = document.getElementsByName("usermail")[0].value;
sender_tel = document.getElementsByName("usernumtel")[0].value;
if (sender_mail.length == 0 && sender_tel.length == 0) {
alert(" Les information fournies sont incorrectes ");
return;
}
} else {
token = String(stored_user)
}
var useravis = document.getElementsByName("useravis")[0].value;
var usersupqual = document.getElementsByName("userqualsup")[0].value;
var usernote = document.getElementsByName("usernote")[0].value;
if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) {
alert("Merci de saisir le nombre minimum de caractère requis pour les champs ");
return;
}
var re = /\S+@\S+\.\S+/;
if (re.test(sender_mail) == false) {
alert("l'email est incorrecte");
return;
}
////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
//alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = "
//+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
var form = new FormData();
form.append("type", "email");
form.append("recever_mail", "");
form.append("recever_tel", "");
form.append("sender_mail", sender_mail);
form.append("sender_tel", sender_tel);
form.append("object", DetailTraining["external_code"]);
form.append("token", "");
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setclosepopup(1);
document.getElementsByName("usermail")[0].value = "";
document.getElementsByName("usernumtel")[0].value = "";
document.getElementsByName("usercomment")[0].value = "";
}
else {
//console.log(" contact-nous statut = " + res.data.status);
//console.log(" contact-nous res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('contact-nous Not good man :( mysearchtext = ');
})
}
function Display(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/";
var form = new FormData();
form.append("internal_url", classId);
form.append("token", "");
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
if (String(res.data.status) !== String("false")) {
console.log(" In Display res.data.status = " + res.data.status);
console.log(" In Display res.data.message = " + res.data.message);
if (res.data.message.length > 0) {
setmyApiResponse("True");
if (String(JSON.parse(res.data.message).coeur) !== String("1") &&
String(JSON.parse(res.data.message).freeacces) !== String("1")) {
//alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur)
// Verification si on est en e connecté ou non.
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
if (local_user_connect === 0 && local_part_connect === 0) {
confirmAlert({
title: 'Connexion ?',
message: 'Connectez-vous pour acceder au detail de cette formation',
buttons: [
{
label: 'Vous avez un compte',
onClick: () => { history.push("/mysy-training-login/training/" + classId) }
},
{
label: "Vous n'avez pas de compte",
onClick: () => { history.push("/create_account") }
},
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
} else {
//alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur)
}
}
else {
setmyApiResponse("False");
}
//console.log(" In displaydetailclass res.data.status = " + res.data.status);
//console.log(" In displaydetailclass res.data.message = " + res.data.message);
setResult(res.data.message);
setDetailTraining(JSON.parse(res.data.message));
if (JSON.parse(res.data.message).note) {
setratingvalue(JSON.parse(res.data.message).note);
}
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setmyApiResponse("False");
}
}).catch((error) => {
console.warn('Not good man :( Display = ');
console.log(error);
setmyApiResponse("False");
})
}
const [associatedtraining_api, setassociatedtraining_api] = useState("");
const [associatedtraining_message, setassociatedtraining_message] = useState("");
function GetAssociatedTraning(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_associated_class_of_partnair/";
var form = new FormData();
form.append("internal_url", classId);
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
if (String(res.data.status) !== String("false")) {
console.log(" In GetAssociatedTraning res.data.status = " + res.data.status);
console.log(" In GetAssociatedTraning res.data.message = " + res.data.message);
setassociatedtraining_api("True");
setassociatedtraining_message(res.data.message);
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setassociatedtraining_api("False");
}
}).catch((error) => {
console.warn('Not good man :( GetAssociatedTraning = ');
setassociatedtraining_api("False");
})
}
const history = useHistory();
const fadeImages = [
{
url: slideimg1,
},
{
url: slideimg4,
},
];
function CheckAvis(e) {
const val = document.getElementById("useravis").value
//alert(" evalu " + val);
if (val.length < 20) {
alert(" Le champ 'Avis' doit etre plus renseigné");
}
//alert(val);
}
function CheckNote(e) {
const val = e.target.value;
if (isNaN(val)) {
//alert(val + " is not a number <br/> mynote = "+mynote);
document.getElementById("usernote").value = mynote;
} else {
if (val > 5) {
alert(" Valeur Maxi doit etre 5");
document.getElementById("usernote").value = mynote;
} else {
setmynote(val);
}
}
}
const [submenu, setsubmenu] = useState("datelieu");
function submenu_info() {
setsubmenu("formateur");
//if (document.getElementsByName("menu_formateur")[0])
// document.getElementsByName('menu_formateur')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_datelieu() {
setsubmenu("datelieu");
//if (document.getElementsByName("menu_datelieu")[0])
// document.getElementsByName('menu_datelieu')[0].focus();
if (document.getElementsByName("menu_formateur")[0])
document.getElementsByName('menu_formateur')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_divers() {
setsubmenu("divers");
//if (document.getElementsByName("submenu_divers")[0])
//document.getElementsByName('submenu_divers')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function Inscription_bton(event) {
if (DetailTraining["internal_url"] && String(DetailTraining["class_inscription_url"]).length > 10) {
window.open(
String(DetailTraining["class_inscription_url"]),
'_blank'
);
} else {
setinscritpion("1");
}
}
/// ----
return (
<div className="displaydetailclass">
<Helmet>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
<meta name="title" content={DetailTraining["title"]} />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/" + `${DetailTraining["internal_url"]}`} />
<title> {`${DetailTraining["title"]}`} </title>
</Helmet>
<Header />
<div className="div_mobile">
<h1 className="h1_transparent">{`${DetailTraining["title"]}`}</h1>
<div className="left_box">
<div className="hilightsoustitre" > Du même organisme </div>
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.map((formation) => (
<div className="autres_formations" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_blank'
);
}}>
<div className="forma_img_logo_class">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img" />}
</div>
<div >
<div className="vignet_title">
{parse(String(JSON.parse(formation).title))}
</div>
<div className="vignet_desc">
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
</div>
</div>
</div>
))}
</div>
<div className="right_box">
<div className="img_banner">
<div className="text_surna"> &nbsp; </div>
<div className="row_inscription">
<Button variant="contained" color="success"
className="bton_inscription"
onClick={Inscription_bton}
>
Je m'inscris
</Button>
</div>
</div>
{/*
/!\ important :
Certains partenaire ont leur propre système d'inscription.
Donc si le champs "myclass.class_inscription_url" existe et est valide, alors
on renvoi l'utilisateur vers ce lien.
Si non, on utilise le formumaire de mysy,.
*/}
{String(inscritpion) === "1" && <div className="description detail_element">
<Inscription internal_url={DetailTraining["internal_url"]} />
</div>
}
<div className="titre_formation">
{parse(String(DetailTraining["title"]))}
</div>
<div className="description detail_element">
<b className="sous_titre">Descriptions :</b> {DetailTraining["description"] &&
<p style={{ "fontSize": "smaller", "marginTop": "1rem" }}>
{parse(String(DetailTraining["description"]))}
</p>}
</div>
<br />
{DetailTraining["objectif"] && <div className="description detail_element">
<b className="sous_titre">Objectif :</b>
<p>
{parse(String(DetailTraining["objectif"]))} &nbsp; laa
{String(DetailTraining["objectif"]).length}
</p>
</div>}
<br />
{DetailTraining["prerequis"] && <div className="description detail_element">
<b className="sous_titre">Pré-requis :</b> {DetailTraining["prerequis"] &&
<p>
{parse(String(DetailTraining["prerequis"]))} &nbsp;
</p>}
{!DetailTraining["prerequis"] && <p style={{ "fontStyle": "italic" }}>
--- &nbsp;
</p>}
<br />
</div>}
{DetailTraining["programme"] && <div className="description detail_element">
<b className="sous_titre">Programme :</b>
{DetailTraining["programme"] && <p style={{ "fontSize": "smaller", "marginTop": "1rem" }}>
{parse(String(DetailTraining["programme"]))} &nbsp;
</p>}
{!DetailTraining["programme"] && <p style={{ "fontStyle": "italic" }}>
--- &nbsp;
</p>}
<br />
</div>}
{DetailTraining["plus_produit"] && <div className="description detail_element">
<b className="sous_titre">Points forts :</b>
{DetailTraining["plus_produit"] &&
<p style={{ "fontSize": "smaller", "marginTop": "1rem" }}>
{parse(String(DetailTraining["plus_produit"]))} &nbsp;
</p>}
<br />
</div>}
<div className="caracteristique">
Caracteristiques <br />
<hr style={{ "width": "20%", "textAlign": "center", "marginLeft": "auto", "marginRight": "auto" }} />
</div>
<div className="div_row">
<div className="div_row_critere">
<div className="div_row_critere_gauche"> Prix :
</div>
<div className="div_row_critere_droite">
{DetailTraining["price"]}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Durée :
</div>
<div className="div_row_critere_droite">
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Certification :
</div>
<div className="div_row_critere_droite">
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && <div>
Non &nbsp; </div>
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
Oui &nbsp; </div>
}
</div>
</div>
<div className="calage"> </div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Distanciel :
</div>
<div className="div_row_critere_droite">
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Presentiel :
</div>
<div className="div_row_critere_droite">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Support :
</div>
<div className="div_row_critere_droite">
{DetailTraining["support"] && <div>
{DetailTraining["support"]} &nbsp; </div>
}
{!DetailTraining["certif"] && <div>
Inconnu &nbsp; </div>
}
</div>
</div>
<div className="calage"> </div>
</div>
<div className="div_row">
<div className="div_row_critere_note">
<div className="div_row_critere_gauche" style={{ "paddingTop": "3px", "textAlign": "center", "width": "50%" }}> Note
</div>
<div className="div_row_critere_droite" style={{ "textAlign": "left", "width": "50%" }}>
<Rating name="half-rating-reade"
precision={0.5}
value={ratingvalue}
/>
</div>
</div>
</div>
<div className="div_row" style={{ "float": "left" }}> &nbsp; </div>
<div style={{ "textAlign": "left", "float": "left", "width": "95%" }}>
<Button variant="outlined" onClick={submenu_datelieu} className="detail_class_submenu" id='menu_datelieu' name='menu_datelieu'>Sessions</Button>
<Button variant="outlined" onClick={submenu_info} className="detail_class_submenu" id='menu_formateur' name='menu_formateur'>Formateur</Button>
<Button variant="outlined" onClick={submenu_divers} className="detail_class_submenu" id='menu_divers' name='menu_divers'>Divers</Button>
{/*<hr className="hr_height" />*/}
<div>
{String(submenu) === String("formateur") && <div className="detail_class_submenu_data">
{DetailTraining.trainer && <div>
<br />
{DetailTraining.trainer}
</div>}
{!DetailTraining.trainer && <div>
<br />
</div>}
</div>}
{String(submenu) === String("datelieu") && <div className="detail_class_submenu_data">
{DetailTraining.datelieu && DetailTraining.datelieu.map((datelieu) => (
<div>
{String(datelieu.code_postal) === "0" && <nav>
Du {datelieu.date_du} au {datelieu.date_au} ; En ligne
</nav>}
{String(datelieu.code_postal) !== "0" && <nav>
Du {datelieu.date_du} au {datelieu.date_au} ; au {datelieu.adresse} , {datelieu.ville} &nbsp; {datelieu.code_postal}
</nav>}
</div>
))}
</div>}
{String(submenu) === String("divers") && <div className="detail_class_submenu_data">
</div>}
</div>
</div>
</div>
<div className="left_box_for_mobile">
<div className="hilightsoustitre" > Du même organisme </div>
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.map((formation) => (
<div className="autres_formations" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_blank'
);
}}>
<div className="forma_img_logo_class">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img" />}
</div>
<div >
<div className="vignet_title">
{parse(String(JSON.parse(formation).title))}
</div>
<div className="vignet_desc">
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
</div>
</div>
</div>
))}
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
}
export default DisplayDetailClass;

View File

@ -0,0 +1,818 @@
import React, { useRef, useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import { Helmet } from "react-helmet";
import 'react-slideshow-image/dist/styles.css'
import { Fade } from 'react-slideshow-image';
import slideimg1 from "../mysy_img/education.jpg";
import slideimg4 from "../mysy_img/mysy_img.png";
import Footer from "./Fotter";
import Header from "./Header";
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import img_met_program from "../mysy_img/met_programmation.jpg";
import img_met_hotel from "../mysy_img/met_hotel.jpg";
import img_met_graphisme from "../mysy_img/metier_graphisme.jpg";
import img_met_autre from "../mysy_img/met_autre.jpg";
import img_met_digital from "../mysy_img/met_digital.jpg";
import img_met_management from "../mysy_img/met_management.jpg";
import img_met_projet from "../mysy_img/met_projet.jpg";
import img_met_market from "../mysy_img/met_market.jpg";
import img_met_autre2 from "../mysy_img/met_autre2.jpg";
import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg";
import img_met_rh from "../mysy_img/met_rh.jpg";
import img_met_bureautic from "../mysy_img/met_burautic.jpg";
import img_met_vente from "../mysy_img/met_vente.jpg";
/*
/!\ important: les images du slides doivent avoir une dimension de : 250 X 450
*/
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { useCookies } from "react-cookie";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { confirmAlert } from 'react-confirm-alert';
import { Rating } from 'react-simple-star-rating';
import parse from 'html-react-parser';
import Inscription_Information from "./Inscription_Information";
import { Editor } from '@tinymce/tinymce-react';
const DisplayDetailClassAction = (props) => {
const { classId, action } = useParams();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState();
const [DetailTraining, setDetailTraining] = useState([]);
const [closepopup, setclosepopup] = useState(0);
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [mynote, setmynote] = useState(0);
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const [inscritpion, setinscritpion] = useState("1");
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
useEffect(() => {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
async function fetchData() {
const result = await axios('https://geolocation-db.com/json/',);
setuserIp(result.data.IPv4);
setcountry_code(result.data.country_code);
setcountry_name(result.data.country_name);
setcity(result.data.city);
setpostal(result.data.postal);
setlatitude(result.data.latitude);
setlongitude(result.data.longitude);
setIPv4(result.data.IPv4);
setstate(result.data.state);
setuserIp(result.data.IPv4);
submenu_datelieu();
}
fetchData();
Display();
GetAssociatedTraning();
window.scrollTo(0, 0);
document.getElementsByName('mytitle')[0].focus();
}, []);
function contactUs(e) {
var sender_mail = "";
var sender_tel = "";
var token = "";
if (String(userconnected) === "0") {
sender_mail = document.getElementsByName("usermail")[0].value;
sender_tel = document.getElementsByName("usernumtel")[0].value;
if (sender_mail.length == 0 && sender_tel.length == 0) {
alert(" Les information fournies sont incorrectes ");
return;
}
} else {
token = String(stored_user)
}
var useravis = document.getElementsByName("useravis")[0].value;
var usersupqual = document.getElementsByName("userqualsup")[0].value;
var usernote = document.getElementsByName("usernote")[0].value;
if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) {
alert("Merci de saisir le nombre minimum de caractère requis pour les champs ");
return;
}
var re = /\S+@\S+\.\S+/;
if (re.test(sender_mail) == false) {
alert("l'email est incorrecte");
return;
}
////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")
//alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = "
//+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
var form = new FormData();
form.append("type", "email");
form.append("recever_mail", "");
form.append("recever_tel", "");
form.append("sender_mail", sender_mail);
form.append("sender_tel", sender_tel);
form.append("object", DetailTraining["external_code"]);
form.append("token", "");
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setclosepopup(1);
document.getElementsByName("usermail")[0].value = "";
document.getElementsByName("usernumtel")[0].value = "";
document.getElementsByName("usercomment")[0].value = "";
}
else {
//console.log(" contact-nous statut = " + res.data.status);
//console.log(" contact-nous res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('contact-nous Not good man :( mysearchtext = ');
})
}
function Display(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/";
var form = new FormData();
form.append("internal_url", classId);
form.append("token", "");
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
if (String(res.data.status) !== String("false")) {
console.log(" In Display res.data.status = " + res.data.status);
console.log(" In Display res.data.message = " + res.data.message);
if (res.data.message.length > 0) {
setmyApiResponse("True");
if (String(JSON.parse(res.data.message).coeur) !== String("1") &&
String(JSON.parse(res.data.message).freeacces) !== String("1")) {
//alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur)
// Verification si on est en e connecté ou non.
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
local_user_connect = 1;
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
local_part_connect = 1;
}
if (local_user_connect === 0 && local_part_connect === 0) {
confirmAlert({
title: 'Connexion ?',
message: 'Connectez-vous pour acceder au detail de cette formation',
buttons: [
{
label: 'Vous avez un compte',
onClick: () => { history.push("/mysy-training-login/training/" + classId) }
},
{
label: "Vous n'avez pas de compte",
onClick: () => { history.push("/create_account") }
},
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
} else {
//alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur)
}
}
else {
setmyApiResponse("False");
}
//console.log(" In displaydetailclass res.data.status = " + res.data.status);
console.log(" In displaydetailclass res.data.message = " + res.data.message);
setResult(res.data.message);
setDetailTraining(JSON.parse(res.data.message));
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setmyApiResponse("False");
}
}).catch((error) => {
console.warn('Not good man :( Display = ', error);
console.log(error);
setmyApiResponse("False");
})
}
const [associatedtraining_api, setassociatedtraining_api] = useState("");
const [associatedtraining_message, setassociatedtraining_message] = useState("");
function GetAssociatedTraning(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_associated_class_of_partnair/";
var form = new FormData();
form.append("internal_url", classId);
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
if (String(res.data.status) !== String("false")) {
console.log(" In GetAssociatedTraning res.data.status = " + res.data.status);
console.log(" In GetAssociatedTraning res.data.message = " + res.data.message);
setassociatedtraining_api("True");
setassociatedtraining_message(res.data.message);
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setassociatedtraining_api("False");
}
}).catch((error) => {
console.warn('Not good man :( GetAssociatedTraning = ');
setassociatedtraining_api("False");
})
}
const history = useHistory();
const fadeImages = [
{
url: slideimg1,
},
{
url: slideimg4,
},
];
function CheckAvis(e) {
const val = document.getElementById("useravis").value
//alert(" evalu " + val);
if (val.length < 20) {
alert(" Le champ 'Avis' doit etre plus renseigné");
}
//alert(val);
}
function CheckNote(e) {
const val = e.target.value;
if (isNaN(val)) {
//alert(val + " is not a number <br/> mynote = "+mynote);
document.getElementById("usernote").value = mynote;
} else {
if (val > 5) {
alert(" Valeur Maxi doit etre 5");
document.getElementById("usernote").value = mynote;
} else {
setmynote(val);
}
}
}
const [submenu, setsubmenu] = useState("datelieu");
function submenu_info() {
setsubmenu("formateur");
//if (document.getElementsByName("menu_formateur")[0])
//document.getElementsByName('menu_formateur')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_datelieu() {
setsubmenu("datelieu");
//if (document.getElementsByName("menu_datelieu")[0])
// document.getElementsByName('menu_datelieu')[0].focus();
if (document.getElementsByName("menu_formateur")[0])
document.getElementsByName('menu_formateur')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
function submenu_divers() {
setsubmenu("divers");
// if (document.getElementsByName("submenu_divers")[0])
// document.getElementsByName('submenu_divers')[0].focus();
if (document.getElementsByName("menu_datelieu")[0])
document.getElementsByName('menu_datelieu')[0].blur();
if (document.getElementsByName("submenu_divers")[0])
document.getElementsByName('submenu_divers')[0].blur();
}
/// ----
return (
<div className="displaydetailclass">
<Helmet>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
<meta name="title" content={DetailTraining["title"]} />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/" + `${DetailTraining["internal_url"]}`} />
<title> {`${DetailTraining["title"]}`} </title>
</Helmet>
<Header />
<div className="div_mobile">
<h1 className="h1_transparent">{`${DetailTraining["title"]}`}</h1>
<div className="left_box">
<div className="hilightsoustitre" > Du même organisme </div>
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.map((formation) => (
<div className="autres_formations" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_blank'
);
}}>
<div className="forma_img_logo_class">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img" />}
</div>
<div >
<div className="vignet_title">
{parse(String(JSON.parse(formation).title))}
</div>
<div className="vignet_desc">
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
</div>
</div>
</div>
))}
</div>
<div className="right_box">
<div className="img_banner">
<div className="text_surna"> &nbsp; </div>
<div className="row_inscription">
</div>
</div>
{(String(action).toLocaleLowerCase() === "inscription" || String(action).toLocaleLowerCase() === "information")
&& <div className="description detail_element" name='section_info'>
<Inscription_Information internal_url={classId} action={action} />
</div>
}
<div className="titre_formation" id="mytitle" name="mytitle">
{parse(String(DetailTraining["title"]))}
</div>
<div className="description detail_element">
<b style={{ "textAlign": "center" }}>Descriptions :</b> {DetailTraining["description"] && <p>
{parse(String(DetailTraining["description"]))}
</p>}
</div>
<br />
<div className="description detail_element">
<b>Objectif :</b>
{DetailTraining["objectif"] && <p>
{parse(String(DetailTraining["objectif"]))} &nbsp;
</p>}
{!DetailTraining["objectif"] && <p style={{ "fontStyle": "italic" }}>
En cours &nbsp;
</p>}
</div>
<br />
{DetailTraining["prerequis"] && <div className="description detail_element">
<b>Pré-requis :</b> {DetailTraining["prerequis"] &&
<p>
{parse(String(DetailTraining["prerequis"]))} &nbsp;
</p>}
{!DetailTraining["prerequis"] && <p style={{ "fontStyle": "italic" }}>
--- &nbsp;
</p>}
<br />
</div>}
{DetailTraining["pointsfort"] && <div className="description detail_element">
<b>Points forts :</b>
{DetailTraining["pointsfort"] &&
<p>
{parse(String(DetailTraining["pointsfort"]))} &nbsp;
</p>}
{!DetailTraining["pointsfort"] && <p style={{ "fontStyle": "italic" }}>
En cours &nbsp;
</p>}
<br />
</div>}
{DetailTraining["programme"] && <div className="description detail_element">
<b>Programme :</b>
{DetailTraining["programme"] && <p>
{parse(String(DetailTraining["programme"]))} &nbsp;
</p>}
{!DetailTraining["programme"] && <p style={{ "fontStyle": "italic" }}>
--- &nbsp;
</p>}
<br />
</div>}
<div className="caracteristique">
Caracteristiques <br />
<hr style={{ "width": "20%", "textAlign": "center", "marginLeft": "auto", "marginRight": "auto" }} />
</div>
<div className="div_row">
<div className="div_row_critere">
<div className="div_row_critere_gauche"> Prix :
</div>
<div className="div_row_critere_droite">
{DetailTraining["price"]}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Durée :
</div>
<div className="div_row_critere_droite">
{DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Certification :
</div>
<div className="div_row_critere_droite">
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && <div>
Non &nbsp; </div>
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>
Oui &nbsp; </div>
}
</div>
</div>
<div className="calage"> </div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> distanciel :
</div>
<div className="div_row_critere_droite">
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Presentiel :
</div>
<div className="div_row_critere_droite">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
</div>
</div>
<div className="div_row_critere"> <div className="div_row_critere_gauche"> Support :
</div>
<div className="div_row_critere_droite">
{DetailTraining["support"] && <div>
{DetailTraining["support"]} &nbsp; </div>
}
{!DetailTraining["certif"] && <div>
Inconnu &nbsp; </div>
}
</div>
</div>
<div className="calage"> </div>
</div>
<div className="div_row">
<div className="div_row_critere_note">
<div className="div_row_critere_gauche" style={{ "paddingTop": "3px", "textAlign": "center", "width": "50%" }}> Note
</div>
<div className="div_row_critere_droite" style={{ "textAlign": "left", "width": "50%" }}>
<Rating
ratingValue={DetailTraining.note * 20}
readonly={true}
size={15} />
</div>
</div>
</div>
<div className="div_row" style={{ "float": "left" }}> &nbsp; </div>
<div style={{ "textAlign": "left", "float": "left", "width": "95%" }}>
<Button variant="outlined" onClick={submenu_datelieu} className="detail_class_submenu" id='menu_datelieu' name='menu_datelieu'>Sessions</Button>
<Button variant="outlined" onClick={submenu_info} className="detail_class_submenu" id='menu_formateur' name='menu_formateur'>Formateur</Button>
<Button variant="outlined" onClick={submenu_divers} className="detail_class_submenu" id='menu_divers' name='menu_divers'>Divers</Button>
{/*<hr className="hr_height" />*/}
<div>
{String(submenu) === String("formateur") && <div className="detail_class_submenu_data">
{DetailTraining.trainer && <div>
<br />
{DetailTraining.trainer}
</div>}
{!DetailTraining.trainer && <div>
<br />
</div>}
</div>}
{String(submenu) === String("datelieu") && <div className="detail_class_submenu_data">
{DetailTraining.datelieu && DetailTraining.datelieu.map((datelieu) => (
<div>
{String(datelieu.code_postal) === "0" && <nav>
Du {datelieu.date_du} au {datelieu.date_au} ; En ligne
</nav>}
{String(datelieu.code_postal) !== "0" && <nav>
Du {datelieu.date_du} au {datelieu.date_au} ; au {datelieu.adresse} , {datelieu.ville} &nbsp; {datelieu.code_postal}
</nav>}
</div>
))}
</div>}
{String(submenu) === String("divers") && <div className="detail_class_submenu_data">
divers
</div>}
</div>
</div>
</div>
<div className="left_box_for_mobile">
<div className="hilightsoustitre" > Du même organisme </div>
{associatedtraining_message && String(associatedtraining_api) === "True" &&
associatedtraining_message.map((formation) => (
<div className="autres_formations" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + JSON.parse(formation).internal_url,
'_blank'
);
}}>
<div className="forma_img_logo_class">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img" />}
</div>
<div >
<div className="vignet_title">
{parse(String(JSON.parse(formation).title))}
</div>
<div className="vignet_desc">
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
</div>
</div>
</div>
))}
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
}
export default DisplayDetailClassAction;

View File

@ -0,0 +1,566 @@
import React, { useState, useEffect } from 'react';
import { MdCancel } from "react-icons/md";
import { AiOutlineEdit } from "react-icons/ai";
import TrainingForm from "./AddClassManual"
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Select from 'react-select'
import { getCookie } from 'react-use-cookie';
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import Footer from "./Fotter";
import tick_ko from "../mysy_img/tick_KO.png";
import { AiFillCloseCircle } from "react-icons/ai";
import parse from 'html-react-parser'
const DistplayPartnerTraningsPage = (props) => {
const [myApiResponse, setmyApiResponse] = useState("false");
const filters = [
{ value: 'external_code', label: 'Code Formation' },
{ value: 'title', label: 'Titre' },
{ value: 'certif', label: 'Certification' }
]
const [selectedfilt1, setselectedfilt1] = useState("");
const [selectedfilt2, setselectedfilt2] = useState("");
const [selectedfilt3, setselectedfilt3] = useState("");
const [reftrainingtoupdate, setreftrainingtoupdate] = useState();
const [externalcodetraining_toupdate, setexternalcodetraining_toupdate] = useState();
const [updatetraining, setupdatetraining] = useState(false);
function handleClick(event, cellValues) {
Edittraining(event, cellValues);
//console.log(cellValues);
}
const [selectionModel, setSelectionModel] = React.useState([]);
const [rowss, setRows] = useState([]);
const [tableData, setTableData] = useState([])
const [refreshgrid, setrefreshgrid] = useState("")
function GetAllClass_WOfilter(event) {
var form = new FormData();
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_class/";
//alert(" laaa");
fetch(myurl,
{
method: 'POST',
body: form,
})
.then((data) => data.json())
.then((data) => {
console.log('GetAllClass_WOfilter : Success:', data['message'], "data['status'] = ", data['status']);
setTableData(data['message']);
setRows(data['message']);
//alert(" GetAllClass_WOfilter OKK "+refreshgrid);
setrefreshgrid("1");
}).catch((error) => {
console.error('GetAllClass_WOfilter Error:', error);
setmyApiResponse("false");
});
}
function GetAllClass_new(event) {
var form = new FormData();
// Recuperation des parametres
var filtre1 = selectedfilt1;
var filtre2 = selectedfilt2;
var filtre3 = selectedfilt3;
var filtre1_value = "";
var filtre2_value = "";
var filtre3_value = "";
// Recuperation des valeurs de filtres
if (selectedfilt1) {
filtre1_value = document.getElementsByName("filtre1")[0].value;
form.append(filtre1, filtre1_value);
}
if (selectedfilt2) {
filtre2_value = document.getElementsByName("filtre2")[0].value;
form.append(filtre2, filtre2_value);
}
if (selectedfilt3) {
filtre3_value = document.getElementsByName("filtre3")[0].value;
form.append(filtre3, filtre3_value);
}
//console.log(" filtres1 = " + filtre1 + " = " + filtre1_value);
//console.log(" filtres2 = " + filtre2 + " = " + filtre2_value);
//console.log(" filtres3 = " + filtre3 + " = " + filtre3_value);
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_class/";
//alert(" laaa");
fetch(myurl,
{
method: 'POST',
body: form,
})
.then((data) => data.json())
.then((data) => {
//console.log('Success:', data['message'], "data['status'] = ", data['status']);
setTableData(data['message']);
setRows(data['message']);
if (String(data['status']) === String("false")) {
//console.log("erreur rrrr:" + data['status'])
setmyApiResponse("False");
}
else {
setmyApiResponse("True");
}
}).catch((error) => {
console.error('Error:', error);
setmyApiResponse("false");
});
}
const columns = [
{ field: 'id', headerName: 'id', hide: true },
{ field: 'zone_diffusion', headerName: 'zone_diffusion', hide: true },
{ field: 'internal_url', headerName: 'internal_url', hide: true },
{ field: 'external_code', headerName: 'Code Formation', width: 200, hideable: false, flex: 1 },
{ field: 'title', headerName: 'Titre', width: 100, hideable: false, flex: 1 },
{ field: 'url', headerName: 'lien', width: 150, flex: 1 },
{ field: 'description', headerName: 'Description', width: 150, flex: 1 },
{ field: 'price', headerName: 'Prix', width: 100, align: "center", flex: 1 },
{ field: 'published', headerName: 'Publié', width: 100, align: "center", flex: 1 },
{
field: "Print", headerName: 'Editer',
renderCell: (cellValues) => {
return (
<Button
onClick={(event) => {
handleClick(event, cellValues);
}}
>
<AiOutlineEdit />
</Button>
);
}
}
]
function Edittraining(event, cellValues) {
setreftrainingtoupdate(cellValues.row.internal_url);
setexternalcodetraining_toupdate(cellValues.row.external_code);
setupdatetraining(true);
}
function selectedFilter1(event) {
setselectedfilt1(event.value);
}
function selectedFilter2(event) {
setselectedfilt2(event.value);
}
function selectedFilter3(event) {
setselectedfilt3(event.value);
}
function CancelFiltre2(event) {
setselectedfilt2("");
}
function CancelFiltre3(event) {
setselectedfilt3("");
}
function closeTrainingForm() {
setupdatetraining(false);
}
const [selectedtraining, setselectedtraining] = useState([])
function GetSelectedRowsTraining() {
///alert(" les lignes slected sont : " + selectionModel + " nb item = " + selectionModel.length);
//const selectedRowsData = selectionModel.map((id) => rowss.find((row) => row.id === id));
//console.log(rowss[0]);
var tab_tmp = []
for (var i = 0; i < selectionModel.length; i++) {
var myid = parseInt(String(selectionModel[i]));
var line = JSON.parse(rowss[myid]);
tab_tmp.push(line.internal_url);
//console.log(rowss[myid]['external_code']);
}
setselectedtraining(tab_tmp);
return tab_tmp;
}
function Unpublish_class(tab_class) {
var url = process.env.REACT_APP_API_URL + "myclass/api/unpublish_class/";
for (var i = 0; i < tab_class.length; i++) {
//console.log(" position = "+i+" val = "+tab_class[i]);
//alert(" debut desactivation de la formation " + tab_class[i]);
var formData = new FormData();
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
formData.append("internal_url", tab_class[i]);
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message'], "result['status'] = ", result['status']);
if (String(result['status']) === String("true")) {
//alert(" OK pour la formation :" + tab_class[i]);
}
})
.catch((error) => {
console.error('Error:', error);
//alert(" KOO pour la formation :" + tab_class[i]);
});
}
}
function Publish_class(tab_class) {
var url = process.env.REACT_APP_API_URL + "myclass/api/pusblish_class/";
for (var i = 0; i < tab_class.length; i++) {
//alert(" debut desactivation de la formation " + tab_class[i]);
//console.log(" NB = "+i+" id = "+tab_class[i]);
var formData = new FormData();
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
formData.append("internal_url", tab_class[i]);
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message'], "result['status'] = ", result['status']);
if (String(result['status']) === String("true")) {
//alert(" OK pour la formation :" + tab_class[i]);
}
})
.catch((error) => {
console.error('Error:', error);
//alert(" KOO pour la formation :" + tab_class[i]);
});
}
}
function Delete_class(tab_class) {
var url = process.env.REACT_APP_API_URL + "myclass/api/disable_class/";
for (var i = 0; i < tab_class.length; i++) {
//alert(" debut desactivation de la formation " + tab_class[i]);
var formData = new FormData();
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
formData.append("internal_url", tab_class[i]);
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
if (String(result['status']) === String("true")) {
//alert(" OK pour la formation :" + tab_class[i]);
}
})
.catch((error) => {
console.error('Error:', error);
//alert(" KOO pour la formation :" + tab_class[i]);
});
}
}
function ActionMass(e) {
// On vide le datagrid pour faire un refresj
setRows([]);
//return;
var actionenmasse = ""
if (document.getElementById("actionmass")) {
actionenmasse = document.getElementById("actionmass").value;
}
var liste_formation = GetSelectedRowsTraining();
if (String(actionenmasse) === String("depublier")) {
Unpublish_class(liste_formation);
GetAllClass_WOfilter();
}
else if (String(actionenmasse) === String("publier")) {
Publish_class(liste_formation);
GetAllClass_WOfilter();
}
else if (String(actionenmasse) === String("supprimer")) {
Delete_class(liste_formation);
GetAllClass_WOfilter();
}
}
useEffect(() => {
//GetAllClass();
GetAllClass_new();
window.scrollTo(0, 0);
}, []);
function Clearselectedfilt1() {
setselectedfilt1("");
}
return (
<div className='displaypartnertrainingpagination'>
{/*String(myApiResponse) === String("False") && <div className="parter_div_droite">
<div className="koUpdateData"> Impossible de contacter l'hote distant </div>
</div>
*/}
{updatetraining && <div>
<div className='detail_training'>
<TrainingForm mytrainingclass={{
'ref': reftrainingtoupdate, 'class_external_code': externalcodetraining_toupdate
}} ispending={props.ispending} currentpack={props.currentpack} />
</div>
<hr />
<div onClick={closeTrainingForm} className="parter_div_filtrer_center">
<AiFillCloseCircle alt="Fermer detail formation" />FERMER
</div>
</div>
}
<div>
<div>
<div className="titre1"> Utilisez les filtres !</div>
<div className="parter_div_filtrer_row">
<div className="parter_div_filtrer_row_gauche">
<Select options={filters} onChange={selectedFilter1} />
</div>
<div className="parter_div_filtrer_row_droite">
{!!selectedfilt1 &&
<div> <TextField
name="filtre1"
defaultValue=""
variant="filled"
size="small"
className='myTextField'
placeholder="Entrez une valeur"
/> &nbsp; <img src={tick_ko} alt="OK" className="tick_ok_ko" onClick={Clearselectedfilt1} />
</div>
}
</div>
</div>
{!!selectedfilt1 &&
<div className="parter_div_filtrer_row">
<div className="parter_div_filtrer_row_gauche">
<Select options={filters} onChange={selectedFilter2} />
</div>
<div className="parter_div_filtrer_row_droite">
{!!selectedfilt2 &&
<div>
<TextField
name="filtre2"
defaultValue=""
variant="filled"
size="small"
className='myTextField'
placeholder="Entrez une valeur"
/> &nbsp; <img src={tick_ko} alt="OK" className="tick_ok_ko" onClick={CancelFiltre2} />
</div>
}
</div>
</div>
}
{!!selectedfilt2 &&
<div className="parter_div_filtrer_row">
<div className="parter_div_filtrer_row_gauche">
<Select options={filters} onChange={selectedFilter3} />
</div>
<div className="parter_div_filtrer_row_droite">
{!!selectedfilt3 &&
<div>
<TextField
name="filtre3"
defaultValue=""
variant="filled"
size="small"
className='myTextField'
placeholder="Entrez une valeur"
/>&nbsp; <img src={tick_ko} alt="OK" className="tick_ok_ko" onClick={CancelFiltre3} />
</div>
}
</div>
</div>
}
<div className="parter_div_filtrer_row">
<Button variant="contained" onClick={GetAllClass_new}>Rechercher </Button>
</div>
<br />
</div>
{myApiResponse === "False" && <div className='koUpdateData'>
Impossible de traiter la demande
</div>}
{myApiResponse === "True" &&
<div style={{ height: 700, width: '100%' }}>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
//console.log("ch selected--" + newSelectionModel);
}}
selectionModel={selectionModel}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rowss.map((item, index) => (
{
id: index,
internal_url: JSON.parse(item).internal_url,
zone_diffusion: JSON.parse(item).zone_diffusion_str,
external_code: JSON.parse(item).external_code,
title: parse((JSON.parse(item).title).replace(/(<([^>]+)>)/ig, '')),
url: JSON.parse(item).url,
price: JSON.parse(item).price,
description: parse((JSON.parse(item).description).replace(/(<([^>]+)>)/ig, '')),
published: JSON.parse(item).published,
}
))}
columns={columns}
pageSize={10}
className="datagridclass"
rowsPerPageOptions={[10]}
disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
/>
<br />
{selectionModel && selectionModel.length >= 1 && <div style={{ "width": "50%", "float": "left" }}>
<nav className='traitement_mass'>Traitement en masse</nav>
&nbsp;<select
id={"actionmass"} name={"actionmass"}
onChange={ActionMass}
className="action_mass">
<option selected value="n/a">Action</option>
<option value="publier">Publier</option>
<option value="depublier">Depublier</option>
<option value="supprimer">Supprimer</option>
</select>
</div>
}
</div>}
</div>
</div>
)
}
export default DistplayPartnerTraningsPage;

View File

@ -0,0 +1,159 @@
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useParams } from 'react-router-dom'
import axios from "axios";
import { useHistory } from "react-router-dom";
import { useCookies } from "react-cookie";
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { AiOutlineEdit } from "react-icons/ai";
import { getCookie } from 'react-use-cookie';
import parse from 'html-react-parser';
import UpdateUserGoals from './UpdateUserGoals';
function DisplayUserGoals(props) {
const columns = [
{ field: 'id', headerName: 'id', hide: true },
{ field: 'name', headerName: 'Nom', },
{ field: 'description', headerName: 'Description', width: 200, },
{ field: 'domaine', headerName: 'Domaine', width: 200, hideable: false, flex: 1 },
{ field: 'niveau', headerName: 'Niveau', hideable: false, flex: 1 },
{ field: 'date_souhaite', headerName: ' Date de realisation souhaité', flex: 1 },
{
field: "Print", headerName: 'Editer',
renderCell: (cellValues) => {
return (
<Button
onClick={(event) => {
handleClick(event, cellValues);
}}
>
<AiOutlineEdit />
</Button>
);
}
}
]
function handleClick(event, cellValues) {
Editobjectif(event, cellValues);
//console.log(cellValues);
}
const [refobjtoupdate, setrefobjtoupdate] = useState();
const [updateobjectif, setupdateobjectif] = useState(false);
function Editobjectif(event, cellValues) {
setrefobjtoupdate(cellValues.row.name);
setupdateobjectif(true);
//alert(" traitement de "+cellValues.row.name);
}
const [selectionModel, setSelectionModel] = React.useState([]);
const [rowss, setRows] = useState([]);
const [listgoals_api, setlistgoals_api] = useState();
const [listgoals_api_result, setlistgoals_api_result] = useState([]);
const [listgoals_api_message, setlistgoals_api_message] = useState();
function Getlistgoals() {
var form = new FormData();
const stored_cookie = getCookie('tokenmysych');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_user_objectif/";
fetch(myurl,
{
method: 'POST',
body: form,
})
.then((data) => data.json())
.then((data) => {
console.log('Getlistgoals : Success:', data['message'], "data['status'] = ", data['status']);
if (String(data['status']) === 'true') {
setlistgoals_api("true");
setlistgoals_api_result(data['message']);
}
else {
setlistgoals_api_message(data['message']);
}
}).catch((error) => {
console.error('Getlistgoals Error:', error);
setlistgoals_api("false");
});
}
useEffect(() => {
Getlistgoals();
window.scrollTo(0, 0);
}, []);
function closeUpdateUserGoals() {
setupdateobjectif(false);
}
return (
<div className="displayusergoals">
{updateobjectif && <div>
<UpdateUserGoals name_obj={refobjtoupdate}/>
<br />
<button onClick={closeUpdateUserGoals}> Fermer </button>
<br />
</div>}
{String(listgoals_api) === "true" &&
<div style={{ height: 700, width: '100%' }}>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
//console.log("ch selected--" + newSelectionModel);
}}
selectionModel={selectionModel}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={listgoals_api_result.map((item, index) => (
{
id: index,
name: JSON.parse(item).name,
description: JSON.parse(item).description,
domaine: JSON.parse(item).domaine,
niveau: JSON.parse(item).niveau,
date_souhaite: JSON.parse(item).date_souhaite,
}
))}
columns={columns}
pageSize={10}
className="datagridclass"
rowsPerPageOptions={[10]}
disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
/>
<br />
</div>}
</div>
);
}
export default DisplayUserGoals;

View File

@ -0,0 +1,50 @@
import React, { useState, useEffect } from "react";
import ReactPlayer from 'react-player'
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert';
import descriptionimg from "../mysy_img/description_v3.png"
import flechehautimg from "../mysy_img/drole_fleche_haut.png"
const DroleVousCherchezFormation = (props) => {
return (
<div className="DroleVousCherchezFormation">
<div className="div_row">
<div className="div_row_gauche">
<img class="img-responsive img_cherche_taille" src={descriptionimg} alt="Description MySy Technology" />
</div>
<div className="div_row_droite">
Vous cherchez un <font color="red">tuto ?</font> une <font color="red"> formation ?</font><br/> Saisissez les mots clés dans la barre de recherche et cliquez sur la loupe -
<font color="green"> Pensez aux filtres, ca ira plus vite w/ </font>
</div>
<div className="div_row_droite_droite">
<img class="img-responsive img_fleche_taille" src={flechehautimg} alt="Description MySy Technology" />
</div>
</div>
</div>
)
}
export default DroleVousCherchezFormation;

643
src/components/Facture.js Normal file
View File

@ -0,0 +1,643 @@
import React, { useState, useEffect } from "react";
import UpdateUserInfo from "../components/UpdateUserInfo";
import Button from '@mui/material/Button';
import { AiOutlineEdit } from "react-icons/ai";
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 { Button2, Form, FormGroup, Label } from "reactstrap";
import { faBullseye } from "@fortawesome/fontawesome-free-solid";
import tick_ok from "../mysy_img/tick_OK.png";
import tick_ko from "../mysy_img/tick_KO.png";
import { useHistory } from "react-router-dom";
import CheckOut from "./CheckOut";
import PaymentMethod from "./PaymentMethode";
import { IoAddCircleOutline } from "react-icons/io5";
import fileDownload from 'js-file-download'
function Facture(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 [selectedpacks, setselectedpacks] = useState("");
const [currentpack, setcurrentpack] = useState(props.currentpack);
const columns = [
{ field: 'id', headerName: 'id', hide: true },
{ field: 'date_facture', headerName: 'Date Facture', width: 150, flex: 1 },
{ field: 'num_facture', headerName: 'Num Facture', width: 200, hideable: false, flex: 1 },
{ field: 'client_nom', headerName: 'Client', width: 200, hideable: false, flex: 1, hide: true },
{ field: 'montant_ht', headerName: 'Montant HT €', width: 200, hideable: false, flex: 1 },
{ field: 'montant_ttc', headerName: 'Montant TTC €', width: 100, hideable: false, flex: 1 },
{ field: 'reduction', headerName: 'Discount', width: 150, flex: 1, hide: true },
{ field: 'mode_payement', headerName: 'Mode paiement', width: 150, flex: 1 },
{ field: 'date_payement', headerName: 'Date échéance', width: 150, flex: 1 },
{
field: "lien_pdf", headerName: 'Télécharger',
renderCell: (cellValues) => {
return (
<Button
onClick={(event) => {
handleClick(event, cellValues);
}}
>
<AiOutlineEdit />
</Button>
);
}
}
]
function handleClick(event, cellValues) {
var nom_facture = cellValues.row.num_facture + ".pdf";
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
const stored_cookie = getCookie('tokenmysypart');
var num_facture = cellValues.row.num_facture;
var url = process.env.REACT_APP_API_URL + "myclass/api/GetCustomerInvoice/" + stored_cookie + "/" + num_facture;
axios.get(url, { responseType: 'blob', },)
.then((res) => {
fileDownload(res.data, nom_facture)
})
}
const [selectionModel, setSelectionModel] = React.useState([]);
const [rowss, setRows] = useState([]);
const [tableData, setTableData] = useState([])
const [GetInvoices_api, setGetInvoices_api] = useState()
const [GetInvoices_api_message, setGetInvoices_api_message] = useState()
function GetInvoices(event) {
var form = new FormData();
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_invoice_by_customer/";
fetch(myurl,
{
method: 'POST',
body: form,
})
.then((data) => data.json())
.then((data) => {
//console.log('Success:', data['message'], "data['status'] = ", data['status']);
if (String(data['status']) === String("false")) {
//console.log("erreur rrrr:" + data['status'])
setGetInvoices_api("false");
}
else {
setTableData(data['message']);
setRows(data['message']);
setGetInvoices_api("true");
}
}).catch((error) => {
console.error('Error:', error);
setGetInvoices_api("false");
});
}
const [paymentmode, setpaymentmode] = useState([]);
const [paymentmodeapi, setpaymentmodeapi] = useState([]);
function GetPayementMode(event) {
var form = new FormData();
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_payement_mode/";
fetch(myurl,
{
method: 'POST',
body: form,
})
.then((data) => data.json())
.then((data) => {
console.log('Success:', data['message'], "data['status'] = ", data['status']);
setpaymentmode(data['message']);
if (String(data['status']) === String("false")) {
//console.log("erreur rrrr:" + data['status'])
setpaymentmodeapi("False");
}
else {
setpaymentmodeapi("True");
if (data['message'] && data['message'][0] &&
Object.keys(data['message'][0]).length > 0) {
setpaymentmode(data['message']);
//setnew_mode_payement("0");
} else {
setpaymentmode([]);
}
}
}).catch((error) => {
console.error('Error:', error);
setpaymentmodeapi("False");
});
}
function menu_defaut() {
setmenu("default");
}
function menu_paymentmethode() {
setmenu("paymentmethode");
}
function menu_info() {
setmenu("info");
getCurrentUserData();
GetPayementMode();
}
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 = "80%";
document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_mensuel2")[0].style.opacity = "100%";
document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_annuel2")[0].style.opacity = "80%";
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 = "80%";
document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_annuel2")[0].style.opacity = "100%";
document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_mensuel2")[0].style.opacity = "80%";
setperiode("Annuel");
}
function menu_plan() {
setmenu("plan");
}
// recuperation et gestion du token utilisateur
const history = useHistory();
const stored_part = getCookie('tokenmysypart');
if (!stored_part || stored_part.length <= 0) {
history.push("/PartnerLogin");
}
function RecordData() {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_account/";
var nom = document.getElementsByName("nom")[0].value;
var vat_num = document.getElementsByName("vat_num")[0].value;
var telephone = document.getElementsByName("telephone")[0].value;
var email = document.getElementsByName("email")[0].value;
var adr_street = document.getElementsByName("adr_street")[0].value;
var adr_zip = document.getElementsByName("adr_zip")[0].value;
var adr_city = document.getElementsByName("adr_city")[0].value;
var adr_country = document.getElementsByName("adr_country")[0].value;
formData.append('token', stored_part);
formData.append('invoice_vat_num', vat_num);
formData.append('invoice_nom', nom);
formData.append('invoice_adr_street', adr_street);
formData.append('invoice_adr_city', adr_city);
formData.append('invoice_adr_zip', adr_zip);
formData.append('invoice_adr_country', adr_country);
formData.append('invoice_email', email);
formData.append('invoice_telephone', telephone);
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setmyApiResponse(result['status']);
setResult(result['message']);
if (String(result['status']) == String("true")) {
settestval(true);
desablefield1();
}
})
.catch((error) => {
console.error('Error:', error);
setmyApiResponse("false");
});
};
function enablefieds1() {
setfields1desabled(false);
document.getElementsByName("nom")[0].disabled = false;
document.getElementsByName("nom")[0].style.backgroundColor = "";
document.getElementsByName("telephone")[0].disabled = false;
document.getElementsByName("telephone")[0].style.backgroundColor = "";
document.getElementsByName("email")[0].disabled = false;
document.getElementsByName("email")[0].style.backgroundColor = "";
document.getElementsByName("adr_street")[0].disabled = false;
document.getElementsByName("adr_street")[0].style.backgroundColor = "";
document.getElementsByName("adr_zip")[0].disabled = false;
document.getElementsByName("adr_zip")[0].style.backgroundColor = "";
document.getElementsByName("adr_city")[0].disabled = false;
document.getElementsByName("adr_city")[0].style.backgroundColor = "";
document.getElementsByName("adr_country")[0].disabled = false;
document.getElementsByName("adr_country")[0].style.backgroundColor = "";
document.getElementsByName("vat_num")[0].disabled = false;
document.getElementsByName("vat_num")[0].style.backgroundColor = "";
}
function desablefield1() {
setfields1desabled(true);
document.getElementsByName("nom")[0].disabled = true;
//document.getElementsByName("nom")[0].style.backgroundColor = "#ECEFF1";
document.getElementsByName("telephone")[0].disabled = true;
//document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1";
document.getElementsByName("email")[0].disabled = true;
// document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1";
document.getElementsByName("adr_street")[0].disabled = true;
//document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1";
document.getElementsByName("adr_zip")[0].disabled = true;
//document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1";
document.getElementsByName("adr_city")[0].disabled = true;
//document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1";
document.getElementsByName("adr_country")[0].disabled = true;
//document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1";
document.getElementsByName("vat_num")[0].disabled = true;
//document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1";
}
function getCurrentUserData() {
settestval('d'); // ==> Do not delete
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/";
formData.append('token', stored_part);
axios.post(url, formData).then(res => {
if (res.data.status != "False") {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("True");
setResult(res.data.message);
var mylocaltraining = JSON.parse(res.data.message);
if (mylocaltraining) {
if (mylocaltraining.invoice_vat_num) {
document.getElementsByName("vat_num")[0].value = mylocaltraining.invoice_vat_num;
document.getElementsByName("vat_num")[0].disabled = true;
document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1";
}
if (mylocaltraining.invoice_nom) {
document.getElementsByName("nom")[0].value = mylocaltraining.invoice_nom;
document.getElementsByName("nom")[0].disabled = true;
document.getElementsByName("nom")[0].style.backgroundColor = "#ECEFF1";
}
if (mylocaltraining.invoice_adr_street) {
document.getElementsByName("adr_street")[0].value = mylocaltraining.invoice_adr_street;
document.getElementsByName("adr_street")[0].disabled = true;
document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1";
}
if (mylocaltraining.invoice_adr_city) {
document.getElementsByName("adr_city")[0].value = mylocaltraining.invoice_adr_city;
document.getElementsByName("adr_city")[0].disabled = true;
document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1";
}
if (mylocaltraining.invoice_adr_zip) {
document.getElementsByName("adr_zip")[0].value = mylocaltraining.invoice_adr_zip;
document.getElementsByName("adr_zip")[0].disabled = true;
document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1";
}
if (mylocaltraining.invoice_adr_country) {
document.getElementsByName("adr_country")[0].value = mylocaltraining.invoice_adr_country;
document.getElementsByName("adr_country")[0].disabled = true;
document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1";
}
if (mylocaltraining.invoice_email) {
document.getElementsByName("email")[0].value = mylocaltraining.invoice_email;
document.getElementsByName("email")[0].disabled = true;
document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1";
}
if (mylocaltraining.invoice_telephone) {
document.getElementsByName("telephone")[0].value = mylocaltraining.invoice_telephone;
document.getElementsByName("telephone")[0].disabled = true;
document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1";
}
desablefield1();
}
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("False");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
//setmyApimyApiMessage("")
})
}
function menu_facture() {
setmenu("facture");
getCurrentUserData();
GetPayementMode();
GetInvoices();
}
useEffect(() => {
menu_facture();
getCurrentUserData();
GetPayementMode();
setpackprice();
}, []);
function confirmAbonnement(packs) {
window.scrollTo(0, 0);
if (String(packs).toLowerCase() === String("decouverte")) {
if (String(periode) === String("Mensuel")) {
if (String(packs).toLowerCase() === String("standard")) {
setpackprice("350");
}
else if (String(packs).toLowerCase() === String("gold")) {
setpackprice("550");
}
else if (String(packs).toLowerCase() === String("decouverte")) {
setpackprice("0");
}
}
if (String(periode) === String("Annuel")) {
if (String(packs).toLowerCase() === String("standard")) {
setpackprice("1500");
}
else if (String(packs).toLowerCase() === String("gold")) {
setpackprice("4950");
}
else if (String(packs).toLowerCase() === String("decouverte")) {
setpackprice("0");
}
}
setgotocheckout("1");
setselectedpacks(packs);
window.scrollTo(0, 0);
return;
}
if (!paymentmode || String(paymentmode).length <= 0) {
alert(" Vous devez ajouter un mode de Paiement pour activer de ce pack")
return;
} else {
if (String(periode) === String("Mensuel")) {
if (String(packs).toLowerCase() === String("standard")) {
setpackprice("350");
}
else if (String(packs).toLowerCase() === String("gold")) {
setpackprice("550");
}
else if (String(packs).toLowerCase() === String("decouverte")) {
setpackprice("0");
}
}
if (String(periode) === String("Annuel")) {
if (String(packs).toLowerCase() === String("standard")) {
setpackprice("1500");
}
else if (String(packs).toLowerCase() === String("gold")) {
setpackprice("4950");
}
else if (String(packs).toLowerCase() === String("decouverte")) {
setpackprice("0");
}
}
setgotocheckout("1");
setselectedpacks(packs);
window.scrollTo(0, 0);
}
}
function returntoorder() {
setgotocheckout("0");
}
const [packprice, setpackprice] = useState();
return (
<div className="facture">
{String(gotocheckout) === String("1") && <div>
<Button onClick={returntoorder} className="btn_retour_ps"> Retour aux produits & Services </Button>
<CheckOut packs={selectedpacks} periodicity={periode} mypackprice={packprice} /> </div>
}
{String(gotocheckout) === String("0") && <div>
<Button variant="outlined" onClick={menu_facture} className="facture_menu">Factures</Button>
{/* <Button variant="outlined" onClick={menu_paymentmethode} className="facture_menu">Methode paiement</Button>
<Button variant="outlined" onClick={menu_defaut} className="facture_menu">Tableau de bord</Button>
*/}
<hr />
<div>
{String(menu) === String("default") && <div>
default
</div>}
{String(menu) === String("paymentmethode") && <div>
<PaymentMethod mypaymentmode={paymentmode} />
</div>}
{String(menu) === String("facture") && <div>
<div className="titre1">
Vos factures
</div>
{String(GetInvoices_api) === "false" && <div className='koUpdateData'>
Impossible de traiter la demande
</div>}
{String(GetInvoices_api) === "true" &&
<div style={{ height: 700, width: '100%' }}>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel);
//console.log("ch selected--" + newSelectionModel);
}}
selectionModel={selectionModel}
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rowss.map((item, index) => (
{
id: index,
num_facture: JSON.parse(item).invoice_id,
client_nom: JSON.parse(item).invoice_nom,
montant_ht: JSON.parse(item).total_ht,
montant_ttc: JSON.parse(item).total_ttc,
reduction: JSON.parse(item).reduction,
date_facture: JSON.parse(item).invoice_date,
mode_payement: JSON.parse(item).mode_payement,
date_payement: JSON.parse(item).due_date,
lien_pdf: JSON.parse(item).lien_pdf,
}
))}
columns={columns}
pageSize={10}
className="datagridclass"
rowsPerPageOptions={[10]}
disableSelectionOnClick
components={{
Toolbar: GridToolbar,
}}
/>
<br />
{/* <Button variant="contained" onClick={GetAllClass_new}>Contained</Button>*/}
</div>}
</div>}
{String(menu) === String("plan") && <div>
plan
</div>}
</div>
</div>}
</div>
);
}
export default Facture;

View File

@ -0,0 +1,60 @@
import styled from 'styled-components';
export const Box = styled.div`
padding: 1rem 1rem;
background: #F2F3F4;
bottom: 0;
width: 100%;
@media (max-width: 601px) {
padding: 2rem 30px;
}
`;
export const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
/* background: red; */
`
export const Column = styled.div`
display: flex;
flex-direction: column;
text-align: left;
margin-left: 60px;
`;
export const Row = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(185px, 1fr));
grid-gap: 20px;
@media (max-width: 1000px) {
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
}
`;
export const FooterLink = styled.a`
color: #17202A;
margin-bottom: 0.2rem;
font-size: medium;
text-decoration: none;
&:hover {
color: green;
transition: 200ms ease-in;
}
`;
export const Heading = styled.p`
font-size: large;
color: #17202A;
margin-bottom: 0.5rem;
font-weight: bold;
`;

677
src/components/Formation.js Normal file
View File

@ -0,0 +1,677 @@
import React, { useState, useEffect } from "react";
import ReactPlayer from 'react-player'
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert';
import topimg from "../mysy_img/top.png";
import coeurimg from "../mysy_img/coeur.png";
import img_met_program from "../mysy_img/met_programmation.jpg";
import img_met_hotel from "../mysy_img/met_hotel.jpg";
import img_met_graphisme from "../mysy_img/metier_graphisme.jpg";
import img_met_autre from "../mysy_img/met_autre.jpg";
import img_met_digital from "../mysy_img/met_digital.jpg";
import img_met_management from "../mysy_img/met_management.jpg";
import img_met_projet from "../mysy_img/met_projet.jpg";
import img_met_market from "../mysy_img/met_market.jpg";
import img_met_autre2 from "../mysy_img/met_autre2.jpg";
import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg";
import img_met_rh from "../mysy_img/met_rh.jpg";
import img_met_bureautic from "../mysy_img/met_burautic.jpg";
import img_met_vente from "../mysy_img/met_vente.jpg";
import axios from "axios";
//import { Rating } from 'react-simple-star-rating'
import Rating from '@mui/material/Rating';
import parse from 'html-react-parser'
const Formation = (props) => {
const [userconnected, setuserconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const history = useHistory();
const [myfilter, setmyfilter] = useState(props.formation.price);
const [profileimg, setprofileimg] = useState(props.formation.price);
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
function test(val) {
if (userconnected === "0" && partnerconnected === "0") {
confirmAlert({
title: 'Activer votre session ?',
message: 'Merci de vous connecter pour acceder au detail de cette formation',
buttons: [
{
label: 'Yes',
onClick: () => { history.push("/mysy-training-login/training/" + props.formation.internal_url) }
},
{
label: 'No',
onClick: () => { return }
}
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
} else {
window.open(
"/Display-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}
}
const [myclassimage, setmyclassimage] = useState();
const [isclassimage, setisclassimage] = useState("False");
const [userimgclassprofil, setuserimgclassprofil] = useState();
function getClassImage(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedClassImage_from_front/";
var class_external_code = props.formation.external_code;
if (class_external_code.length < 3) {
console.log("Le code externe prend au moins 3 caractères");
return;
}
//console.log(" class_external_code = " + class_external_code);
var form = new FormData();
form.append("class_external_code", class_external_code);
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
//console.log(" getClassImage : In test res.data.status = " + res.data.status);
//console.log(" getClassImage: res.data.message.img = " + res.data.message);
if (res.data.message.img.length > 0) {
setisclassimage("True");
console.log(" getClassImage : In test res.data.status = " + res.data.status);
console.log(" getClassImage: res.data.message.img = " + res.data.message);
var ch_img = "data:image/png;base64," + res.data.message.img;
setuserimgclassprofil(ch_img);
//console.log("ch_img = "+ch_img);
}
else {
setisclassimage("False");
}
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setisclassimage("False");
setuserimgclassprofil();
//alert("4");
}
}).catch((error) => {
console.warn('getClassImage : Not good man :( getClassImage = ');
setisclassimage("False");
setuserimgclassprofil(profileimg);
})
}
useEffect(() => {
setmyfilter(props.myfil);
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
} else {
setuserconnected("1");
}
if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') {
setpartnerconnected("0");
} else {
setpartnerconnected("1");
}
getClassImage();
GetCurrentClass_trainingsession();
}, []);
const [GetCurrentClass_api, setGetCurrentClass_api] = useState();
const [GetCurrentClass_message, setGetCurrentClass_message] = useState();
const [GetCurrentClass_result, setGetCurrentClass_result] = useState();
function GetCurrentClass_trainingsession(event) {
var form = new FormData();
form.append("class_internal_url", props.formation.internal_url);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/";
axios.post(myurl, form).then(res => {
if (res.data.status != "false") {
console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status);
console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message);
setGetCurrentClass_api("true");
setGetCurrentClass_result(res.data.message);
}
else {
setGetCurrentClass_api("false");
setGetCurrentClass_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( GetCurrentClass_trainingsession = ', error);
setGetCurrentClass_api("false");
//setmyApimyApiMessage("")
})
}
return (
<div className="formation">
<div style={{ "width": "100%" }}>
<div className="forma_img_gauche">
{props.formation.img_url && String(props.formation.img_url).length > 0 && String(isclassimage) === "False" &&
<img src={`${props.formation.img_url}`} className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
String(isclassimage) === "False" &&
!props.formation.metier && <img src={img_met_autre} alt="autre" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("it") &&
String(isclassimage) === "False" && <img src={img_met_program} alt="informatique" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("graphisme") &&
String(isclassimage) === "False" && <img src={img_met_graphisme} alt="graphisme" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("management") &&
String(isclassimage) === "False" && <img src={img_met_management} alt="management" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("digital") &&
String(isclassimage) === "False" && <img src={img_met_digital} alt="digital" className="training_img" />}
{(!props.formation.img_url || String(props.formation.img_url).length <= 0) &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("office") &&
String(isclassimage) === "False" && <img src={img_met_bureautic} alt="office" className="training_img" />}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("rh") &&
String(isclassimage) === "False" && <img src={img_met_rh} alt="ressources humaines" className="training_img" />}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("vente") &&
String(isclassimage) === "False" && <img src={img_met_vente} alt="vente" className="training_img" />}
{!props.formation.img_url || String(props.formation.img_url).length <= 0 &&
props.formation.metier && String(props.formation.metier).toLocaleLowerCase() === String("dev_perso") &&
String(isclassimage) === "False" && <img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
{String(isclassimage) === "True" && <img src={userimgclassprofil} alt="developpement personnel" className="training_img" />}
</div>
<div className="forma_rightbox"
onClick={(e) => {
e.preventDefault();
window.open(
"/Display-Detail-formation/" + props.formation.internal_url ,
'_blank'
);
}}>
<div className="p_forma">
<p className="p_class training_title">
<b>
{parse(String(props.formation.title).replace(/(<([^>]+)>)/ig, ''))}
</b>
</p>
<b> Description : </b>
{parse(String(props.formation.description).replace(/(<([^>]+)>)/ig, ''))}
<br />
<div className="div_row_critere" style={{ "marginTop": "0.5rem", "marginBottom": "0.3rem" }}>
{!props.formation.extented_search &&
<div className="div_row_gauche">
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">Prix :
</div>
{String(props.formation.price).length == 9 &&
<div className="criteres ftion_tab_droite"> <i> En attente</i> &nbsp;
</div>
}
{String(props.formation.price).length != 9 && String(props.formation.price) === String("0") &&
<div className="criteres ftion_tab_droite">Gratuit &nbsp;
</div>
}
{String(props.formation.price).length != 9 && String(props.formation.price) !== String("0") &&
<div className="criteres ftion_tab_droite">{props.formation.price} &nbsp;
</div>
}
</div>
{props.formation.duration_unit &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">Durée :
</div>
{String(props.formation.duration_unit) === "heure" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} hr &nbsp;
</div>}
{String(props.formation.duration_unit) === "heures" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} hr &nbsp;
</div>}
{String(props.formation.duration_unit) === "jour" &&
<div className="criteres ftion_tab_droite">
{props.formation.duration} jr &nbsp;
</div>}
</div>
}
{!props.formation.duration_unit &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">Durée :
</div>
{props.formation.duration && <div className="criteres ftion_tab_droite">
{props.formation.duration} jrs &nbsp;
</div>}
{!props.formation.duration && <div className="criteres ftion_tab_droite">
<i> En traitement &nbsp; </i>
</div>}
</div>
}
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Certification :
</div>
<div className="criteres ftion_tab_droite">
{props.formation.certif && String(props.formation.certif) === String("1") &&
<div>
Oui &nbsp;
</div>}
{props.formation.certif && String(props.formation.certif) !== String("1") &&
<div>
Non &nbsp;
</div>}
{!props.formation.certif &&
<div>
NC &nbsp;
</div>}
</div>
</div>
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Eligible au CPF :
</div>
<div className="criteres ftion_tab_droite">
{props.formation.cpf && String(props.formation.cpf) === String("1") &&
<div>
Oui &nbsp;
</div>}
{props.formation.cpf && String(props.formation.cpf) !== String("1") &&
<div>
Non &nbsp;
</div>}
{!props.formation.cpf &&
<div>
NC &nbsp;
</div>}
</div>
</div>
{/* <div style={{ "width": "90%" }}>
<div className="criteres ftion_tab_gauche">
Type
</div>
<div className="criteres ftion_tab_droite">
{props.formation.type} &nbsp;
</div>
</div>
<div style={{ "width": "90%" }}>
<div className="criteres ftion_tab_gauche">
Support
</div>
<div className="criteres ftion_tab_droite">
{props.formation.support} &nbsp;
</div>
</div>
*/}
{/*props.formation.zone_diffusion && props.formation.zone_diffusion.country && <div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Test : pays
</div>
<div className="criteres ftion_tab_droite">
{props.formation.zone_diffusion.country} &nbsp;
</div>
</div>*/}
{/*props.formation.zone_diffusion && props.formation.zone_diffusion.city && <div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Test : Ville
</div>
<div className="criteres ftion_tab_droite">
{props.formation.zone_diffusion.city} &nbsp;
</div>
</div>*/}
{/*
{props.formation.presentiel && props.formation.presentiel.presentiel &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Presentiel
</div>
<div className="criteres ftion_tab_droite">
{props.formation.presentiel.presentiel} &nbsp;
</div>
</div>}
{props.formation.presentiel && props.formation.presentiel.distantiel &&
<div style={{ "width": "100%" }}>
<div className="criteres ftion_tab_gauche">
Distantiel
</div>
<div className="criteres ftion_tab_droite">
{props.formation.presentiel.distantiel} &nbsp;
</div>
</div>}
*/}
</div>}
<div className="div_row_droite" style={{ textAlign: "center" }}>
{String(props.formation.coeur) === String("1") && <div>
<img class="imgcoeur" src={coeurimg} alt="coup de coeur" />
</div>}
{/*String(props.formation.support) === String("video")
&& props.formation.url && String(props.formation.url).indexOf("https://www.youtube.com/watch") !== -1
&&
String(props.formation.coeur) !== String("1") &&
<div>
<ReactPlayer url={props.formation.url}
height='90%'
width='90%'
controls='true'
playing={false}
loop={false}
/>
</div>*/}
<div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
Sur site :
</div>
{props.formation.presentiel && props.formation.presentiel.presentiel &&
String(props.formation.presentiel.presentiel) === String("1") && <div className="criteres ftion_tab_droite">
Oui
</div>}
{props.formation.presentiel && props.formation.presentiel.presentiel &&
String(props.formation.presentiel.presentiel) !== String("1") && <div className="criteres ftion_tab_droite">
Non
</div>}
{!props.formation.presentiel || !props.formation.presentiel.presentiel &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div>
<div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
A distance :
</div>
{props.formation.presentiel && props.formation.presentiel.distantiel &&
String(props.formation.presentiel.distantiel) === String("1") && <div className="criteres ftion_tab_droite">
Oui
</div>}
{props.formation.presentiel && props.formation.presentiel.distantiel &&
String(props.formation.presentiel.distantiel) !== String("1") && <div className="criteres ftion_tab_droite">
Non
</div>}
{!props.formation.presentiel || !props.formation.presentiel.distantiel &&
<div className="criteres ftion_tab_droite">
NC
</div>}
</div>
{props.formation.note && String(props.formation.note).length > 0 && <div style={{ "width": "100%", "float": "right" }}>
<div className="criteres ftion_tab_gauche">
Note : {props.formation.note}
</div>
<div className="criteres ftion_tab_droite">
<Rating name="half-rating-read" defaultValue={props.formation.note} precision={0.5} readOnly />
</div>
</div>}
</div>
</div>
<div className="div_row" style={{ "marginTop": "0.2rem", "marginBottom": "0.2rem" }}> &nbsp;
</div>
<div className="div_row" style={{ "marginTop": "0.2rem", "marginBottom": "0.2rem" }}>
<div className="media_sociaux" style={{ 'float': "left", "width": "20%", marginTop: "0.2rem", }}>
<FacebookShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url}
quote={props.formation.title + " -- " + props.formation.description}
hashtag={"ySyTraining"}
>
<SocialIcon network="facebook" style={{ height: 20, width: 20 }} />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url}
hashtag={"#MySy-Formation"}
>
<SocialIcon network="twitter" style={{ height: 20, width: 20 }} />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.mysy-training.com/Display-Detail-formation/" + props.formation.internal_url}
title={" Une nouvelle formation : " + props.formation.title}
summary={props.formation.title + " -- " + props.formation.description}
source={"https://www.mysy-training.com/"}
>
<SocialIcon network="linkedin" style={{ height: 20, width: 20 }} />
</LinkedinShareButton>
</div>
{props.formation.extented_search === "1" && <div style={{ 'float': "right", "width": "40%", textAlign: "right", marginTop: "0.2rem", }}>
<Button variant="contained" color="success"
style={{
'borderRadius': "10rem", "width": "100%",
fontSize: "0.7rem", padding: "0.2rem",
"width": "70% !important", background: "#104277"
}}
onClick={(e) => {
e.preventDefault();
window.open(
"/Display-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}}
>Voir details</Button>
</div>}
{!props.formation.extented_search && props.formation.coeur != "1" &&
<div style={{ 'float': "right", "width": "80%", textAlign: "right", marginTop: "0rem", }}>
<Button variant="contained" color="success"
style={{
'borderRadius': "15px", "width": "100%",
fontSize: "0.7rem", padding: "0.2rem",
"width": "30%", background: "#FFFFFF", "color": "#104277",
"marginRight": "10px", "height": "2rem"
}}
onClick={(e) => {
e.preventDefault();
window.open(
"/Display-Detail-formation/" + props.formation.internal_url + "/Information",
'_blank'
);
}}
>Se renseigner</Button>
<Button variant="contained" color="success"
style={{
'borderRadius': "15px", "width": "100%",
fontSize: "0.7rem", padding: "0.2rem",
"width": "30%", background: "#104277", "color": "white",
"marginRight": "10px", "height": "2rem"
}}
onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation/" + props.formation.internal_url,
'_blank'
);
}}
>Voir details</Button>
{GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<Button variant="contained" color="success"
style={{
'borderRadius': "15px", "width": "100%",
fontSize: "0.7rem", padding: "0.2rem",
"width": "30%", background: "#619E31", "color": "white",
"height": "2rem"
}}
onClick={(e) => {
e.preventDefault();
window.open(
"/Display-Detail-formation/" + props.formation.internal_url + "/Inscription",
'_blank'
);
}}
>S'incrire</Button>
}
</div>}
</div>
</div>
</div>
</div>
</div>
)
}
export default Formation;

View File

@ -0,0 +1,40 @@
import React from "react";
const Formation_Partner = (props) => {
console.log({props});
return (
<div>
<div className="forma_rightbox">
<h1 className="h1_forma">
<a href= {"/Display-Detail-formation/" + props.formation.external_code}>
Ref : {props.formation.external_code}
</a>
</h1>
<div className="p_forma">
<b> Titre :</b> {props.formation.title} <br/>
<b> Desc : </b> {props.formation.description} <br/>
<br/>
<ul className="criteres">
<li> Langue : {props.formation.lang}</li>
<li> Certification : {props.formation.certif} </li>
<li> Type : {props.formation.title} </li>
<li> Support : {props.formation.title}</li>
<li> Prix : {props.formation.price} </li>
</ul>
</div>
</div>
</div>
)
}
export default Formation_Partner;

127
src/components/Fotter.js Normal file
View File

@ -0,0 +1,127 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import {
Box,
Container,
Row,
Column,
FooterLink,
Heading,
} from "./FooterStyles";
const Footer = () => {
// Integration du gestionnaire de cookie : axeptio
window.axeptioSettings = {
clientId: "6273ecd99c50de9cfb190555",
cookiesVersion: "mysy training technology-fr",
};
(function (d, s) {
var t = d.getElementsByTagName(s)[0], e = d.createElement(s);
e.async = true; e.src = "//static.axept.io/sdk-slim.js";
t.parentNode.insertBefore(e, t);
})(document, "script");
return (
<div className='footer'>
<div className='Box_div'>
<div className='Container_div'>
<div className='Row_Div'>
<div className='Column_div'>
<div className='Heading_p'>MySy Training</div>
<a href="/QuiSommesNous/#desc" className='FooterLink_a'>À propos de nous</a>
<a href="/QuiSommesNous/#vision" className='FooterLink_a'>Notre vision</a>
<a href="/ContactezNous" className='FooterLink_a'>Nous contacter</a>
</div>
<div className='Column_div'>
<div className='Heading_p'>Produits & Services</div>
<a href="/Produits-Services" className='FooterLink_a'>Nos packs</a>
<a href="/Produits-Services" className='FooterLink_a'>Publier votre catalogue </a>
</div>
<div className='Column_div'>
<div className='Heading_p'>Social Media</div>
<div style={{ 'float': "center", "textAlign": "center" }}>
<div className="media_sociaux">
<FacebookShareButton
url={"https://www.facebook.com/MySy-Training-114572794561371/"}
>
<SocialIcon network="facebook" className="SocialIcon" />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://twitter.com/mysy_training"}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" className="SocialIcon" />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.linkedin.com/"}
summary={"ee"}
source={"https://www.linkedin.com/in/mysy-training-96b53a237/"}
>
<SocialIcon network="linkedin" className="SocialIcon" />
</LinkedinShareButton>
</div>
</div>
{/*
<a href="https://www.facebook.com/profile.php?id=100080411044908" className='FooterLink_a'>
<i className="fab fa-facebook-f">
<span style={{ marginLeft: "10px" }}>
Facebook
</span>
</i>
</a>
<a href="https://www.linkedin.com/in/mysy-training-96b53a237/" className='FooterLink_a'>
<i className="fab fa-instagram">
<span style={{ marginLeft: "10px" }}>
LinkedIn
</span>
</i>
</a>
<a href="https://twitter.com/mysy_training" className='FooterLink_a'>
<i className="fab fa-twitter">
<span style={{ marginLeft: "10px" }}>
Twitter
</span>
</i>
</a>*/}
</div>
</div>
</div>
<br />
<hr />
<i className='copyright'>
Copyright © 2022 MySy. Tous droits réservés. &nbsp;
<a href='/sample/MYSY_POLITIQUE_CONFIDENTIALITE.pdf' download target = "_blank">| Confidentialité | Cookies | données personnelles &nbsp; </a>
<a href='/sample/MYSY_CGU.pdf' download target = "_blank">| Conditions dutilisation &nbsp; </a>
<a href='/sample/MYSY_MENTIONS_LEGALES.pdf' download target = "_blank">| Mentions légales </a>
<a href='/sample/Conditions_Generales-Vente_CGV.pdf' download target = "_blank">| CGV </a>
</i>
</div>
</div>
);
};
export default Footer;

File diff suppressed because it is too large Load Diff

378
src/components/Header.js Normal file
View File

@ -0,0 +1,378 @@
import React, { useState, useEffect } from 'react';
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import { confirmAlert } from 'react-confirm-alert'; // Import
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import { useHistory } from "react-router-dom";
import { getCookie, removeCookie } from 'react-use-cookie';
import { useCookies } from "react-cookie";
import connect_white from "../mysy_img/connect_white_v2.png";
import connect_green from "../mysy_img/connect_green.png";
const Header = () => {
const history = useHistory();
const stored_user = getCookie('tokenmysych');
const stored_part = getCookie('tokenmysypart');
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
const [PartnerMenu, setPartnerMenu] = React.useState(null);
const [AccountMenu, setAccountMenu] = React.useState(null);
const [ProduitMenu, setproduitMenu] = React.useState(null);
const [AvisMenu, setavisMenu] = React.useState(null);
const [CategorieMenu, setCategorieMenu] = React.useState(null);
const PartnerMenu_Close = () => {
setPartnerMenu(null);
};
const AccountMenu_Close = () => {
setAccountMenu(null);
};
const ProduitMenu_Close = () => {
setproduitMenu(null);
};
const CategorieMenu_Close = () => {
setCategorieMenu(null);
};
const handleCategorieMenu = (event) => {
setCategorieMenu(event.currentTarget);
};
const handlePartnerMenu = (event) => {
setPartnerMenu(event.currentTarget);
};
const handleAccountMenu = (event) => {
setAccountMenu(event.currentTarget);
};
const handleProduitMenu = (event) => {
setproduitMenu(event.currentTarget);
};
const handleClose_Account = () => {
alert(" my account");
setAccountMenu(null);
};
const handleAccountConnexion = () => {
setAccountMenu(null);
history.push("/Connexion")
};
const handleMyAccount = () => {
setAccountMenu(null);
history.push("/mysy-user-account")
};
const handleClassCategorie = (e) => {
setCategorieMenu(null);
var mymetier = "";
mymetier = e.target.id
//alert(" cours de : " + mymetier);
history.push("/Recherche_new/0/" + mymetier);
};
const handleAccountCreation = () => {
setAccountMenu(null);
history.push("/create_account")
};
const handlePartnerConnexion = () => {
setAccountMenu(null);
history.push("/PartnerLogin")
};
const handleProduitService = () => {
setproduitMenu(null);
history.push("/Produits-Services/")
};
const handleAvis = () => {
setavisMenu(null);
history.push("/Recherche-Article-formation")
};
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Yes',
onClick: () => user_logout_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
function part_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
setpartCookie("tokenmysypart", "");
}
history.push("/recherche-formation");
}
function part_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (pro)',
buttons: [
{
label: 'Oui',
onClick: () => part_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
useEffect(() => {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
setsomeoneconnected("1");
local_user_connect = 1;
//alert(" user connected OK");
}
if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
setsomeoneconnected("1");
local_part_connect = 1;
//alert(" partner connected OK");
}
}, []);
function handleAccountLogout() {
if (String(userconnected) === String("1")) {
user_logout();
}
else if (String(partnerconnected) === String("1")) {
part_logout();
}
}
const handleMyPartnerAccount = () => {
setAccountMenu(null);
history.push("/Partner")
};
function handleAccountConnexion_v2() {
if (String(userconnected) === String("1")) {
handleMyAccount();
}
else if (String(partnerconnected) === String("1")) {
handleMyPartnerAccount();
}
}
function publiecatalogue(){
history.push("/Partner", {mysy_arg:'partner'});
}
return (
<div className="header">
<Menu
keepMounted
anchorEl={PartnerMenu}
onClose={PartnerMenu_Close}
open={Boolean(PartnerMenu)}
style={{ "top": "2rem" }}
>
<MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Mon Compte</MenuItem>
<MenuItem onClick={part_logout} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={AccountMenu}
onClose={AccountMenu_Close}
open={Boolean(AccountMenu)}
style={{ "top": "2rem" }}
> <MenuItem onClick={handleMyAccount} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Mon Compte</MenuItem>
<MenuItem onClick={handleAccountConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Connexion</MenuItem>
<MenuItem onClick={handleAccountCreation} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Creation</MenuItem>
<MenuItem onClick={user_logout} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={ProduitMenu}
onClose={ProduitMenu_Close}
open={Boolean(ProduitMenu)}
style={{ "top": "2rem" }} >
<MenuItem onClick={handleProduitService} className="mymenu_item">
<button className='bton_menu'> Nos produits & Services </button>
</MenuItem>
<MenuItem onClick={handleAvis} className="mymenu_item">
<button className='bton_menu'>Le blog </button>
</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={CategorieMenu}
onClose={CategorieMenu_Close}
open={Boolean(CategorieMenu)}
style={{ "top": "2rem" }} >
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="IT" >Informatique</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="vente" > Commerce</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="RH" > Ressources Humaines</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="marketing" >Marketting</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="graphisme" >Graphisme</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item" >
<button className='bton_menu' id="management" >Management</button>
</MenuItem>
<MenuItem onClick={handleClassCategorie} className="mymenu_item">
<button className='bton_menu' id="dev_perso" >Dev. Personnel </button>
</MenuItem>
</Menu>
<div className="header_div_row2">
<div className="header_div_row_bas">
<div className="header_div_001">
<div className="header_div_002">
<h1 className="header_h1_transparent">Connexion MySy Training Technogy </h1>
<div className="vvv" >
<a href={process.env.REACT_APP_BASE_URL}> <img class="img-responsive header_img_logo22" src={logowhite} alt="MySy Training Technology" /> </a>
</div>
<div className="header_menuPrincipal_left" onClick={handleCategorieMenu}>
Les formations
</div>
</div>
<div className="header_div_003">
<h1 className="header_h1_transparent">Connexion MySy Training Technogy </h1>
<div className="header_menuPrincipal_bton" onClick={handleAccountConnexion}>
<div style={{ "textAlign": "left" }}>
{String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
style={{ "width": "25%" }} /> Connexion
</button>}
{String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
style={{ "width": "25%" }} />
</button>}
</div>
</div>
{String(someoneconnected) === String("1") && <div className="header_menuPrincipal" onClick={handleAccountConnexion_v2}>
Mon Compte
</div>}
{String(someoneconnected) !== String("1") && <div className="header_menuPrincipal" onClick={handleAccountCreation}>
S'inscrire
</div>}
<div className="header_menuPrincipal" onClick={handleProduitMenu}>
Nos Services
</div>
<div className="header_menuPrincipal" onClick={publiecatalogue}
style={{ "background": "red", "borderRadius": "5px", "paddingLeft": "3px", "paddingRight": "3px" }}>
publier mes formations
</div>
</div>
</div>
<div className="header_text_head">
<hr className="header_div_004" />
<font style={{ "color": "#81BC3A", "fontWeight": "bold" }}>Recherche </font> de Formations & Tutoriels
</div>
</div>
</div>
</div>
)
}
export default Header;

View File

@ -0,0 +1,840 @@
import React, { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import { getCookie, setCookie } from 'react-use-cookie';
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 HomeWorkIcon from '@mui/icons-material/HomeWork';
import EmailIcon from '@mui/icons-material/Email'
import HomeIcon from '@mui/icons-material/Home'
import { Button, Form, FormGroup, Label } from "reactstrap";
import PasswordIcon from '@mui/icons-material/Password'
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import IconButton from '@mui/material/IconButton';
import OutlinedInput from '@mui/material/OutlinedInput';
import { useHistory } from "react-router-dom";
import TwitterIcon from '@mui/icons-material/Twitter';
import FacebookIcon from '@mui/icons-material/Facebook';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import axios from "axios";
import MenuItem from '@mui/material/MenuItem';
import { Redirect } from 'react-router-dom'
import { Editor } from '@tinymce/tinymce-react';
function Inscription_Information(props) {
const [action, setaction] = useState(props.action);
const [class_internal_url, setclass_internal_url] = useState(props.internal_url);
const modefinancement = [
{
value: 'CPF',
label: 'cpf',
},
{
value: 'Fonds Propre',
label: 'perso',
},
{
value: 'Votre entreprise',
label: 'entreprise',
},
{
value: 'CPF & Fonds Propre',
label: 'mixte_cpf_perso',
},
];
const opco = [
{
value: 'opco Paris',
label: 'paris',
},
{
value: 'opco Nanterre',
label: 'Nanterre',
},
{
value: 'inconnu',
label: 'inconnu',
},
];
const [myopco, setmyopco] = useState("");
function handleChangeOpco(event) {
setmyopco(event.target.value);
};
const [mysession, setmysession] = useState("");
const [monfinancement, setmonfinancement] = useState("");
function handleChangeSession(event) {
setmysession(event.target.value);
};
function handleChangeFinancement(event) {
setmonfinancement(event.target.value);
};
const [RecordData_api, setRecordData_api] = useState("");
const [RecordData_status, setRecordData_status] = useState("");
const [RecordData_message, setRecordData_message] = useState("");
function RecordData() {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/AddStagiairetoClass/";
var nom = document.getElementsByName("nom")[0].value;
if (String(nom).trim().length <= 0) {
document.getElementsByName("nom")[0].style.borderColor = "red";
alert(" Le nom d'utilisateur est obligatoire ");
return;
}
var prenom = document.getElementsByName("prenom")[0].value;
if (String(prenom).trim().length <= 0) {
document.getElementsByName("telephone")[0].style.borderColor = "red";
alert(" Le prenom d'utilisateur est obligatoire ");
return;
}
var telephone = document.getElementsByName("telephone")[0].value;
if (String(telephone).trim().length < 10) {
document.getElementsByName("telephone")[0].style.borderColor = "red";
alert(" Le numero de telephone doit comporter 10 chiffres ");
return;
}
var email = document.getElementsByName("email")[0].value;
var re2 = /\S+@\S+\.\S+/;
if (re2.test(email) === false) {
alert("L'email est incorrect ");
document.getElementsByName("email")[0].style.borderColor = "red";
return;
}
var modefinancement = document.getElementById('modefinancement').value;
if (String(modefinancement).trim().length <= 0) {
alert("Vous devez choisir une mode de financement ");
return;
}
var opco = document.getElementById('opco').value;
if (String(opco).trim().length <= 0) {
alert("Vous devez choisir un centre Opco ");
return;
}
var session = mysession;
if (String(nom).trim().length <= 0) {
alert(" Le nom d'utilisateur est obligatoire ");
return;
}
var employeur = ""
if (document.getElementById('employeur') && document.getElementById('employeur').value) {
employeur = document.getElementById('employeur').value;
}
// var class_internal_url = document.getElementsByName("adr_country")[0].value;
formData.append('nom', nom);
formData.append('employeur', employeur);
formData.append('prenom', prenom);
formData.append('telephone', telephone);
formData.append('email', email);
formData.append('modefinancement', modefinancement);
formData.append('opco', opco);
formData.append('session_id', session);
formData.append('class_internal_url', props.internal_url);
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setRecordData_api(result['status']);
setRecordData_status(result['status']);
setRecordData_message(result['message']);
})
.catch((error) => {
console.error('Error:', error);
setRecordData_api("false");
setRecordData_status("false");
setRecordData_message();
});
};
const [GetListOpco_api, setGetListOpco_api] = useState();
const [GetListOpco_message, setGetListOpco_message] = useState();
const [GetListOpco_result, setGetListOpco_result] = useState();
function GetListOpco(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/GetListOpco/";
fetch(myurl,
{
method: 'POST',
body: form,
})
.then((data) => data.json())
.then((data) => {
console.log(' GetListOpco Success:', data['message'], "data['status'] = ", data['status']);
if (String(data['status']) === String("false")) {
//console.log("erreur rrrr:" + data['status'])
setGetListOpco_api("false");
setGetListOpco_message(data['message'])
}
else {
setGetListOpco_api("true");
setGetListOpco_result(data['message']);
}
}).catch((error) => {
console.error('Error:', error);
setGetListOpco_api("false");
});
}
const [closeform, setcloseform] = useState("");
function close_inscription_form() {
window.location.reload();
}
const [GetCurrentClass_api, setGetCurrentClass_api] = useState();
const [GetCurrentClass_message, setGetCurrentClass_message] = useState();
const [GetCurrentClass_result, setGetCurrentClass_result] = useState();
function GetCurrentClass_trainingsession(event) {
var form = new FormData();
//form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
const stored_cookie = getCookie('tokenmysych');
form.append("class_internal_url", props.internal_url);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/";
axios.post(myurl, form).then(res => {
if (res.data.status != "false") {
console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status);
console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message);
setGetCurrentClass_api("true");
setGetCurrentClass_result(res.data.message);
}
else {
setGetCurrentClass_api("false");
setGetCurrentClass_message(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( GetCurrentClass_trainingsession = ', error);
setGetCurrentClass_api("false");
//setmyApimyApiMessage("")
})
}
useEffect(() => {
GetCurrentClass_trainingsession();
GetListOpco();
}, []);
function clearfileds() {
if (document.getElementsByName("nom")[0]) {
document.getElementsByName("nom")[0].value = "";
}
if (document.getElementsByName("prenom")[0]) {
document.getElementsByName("prenom")[0].value = "";
}
if (document.getElementsByName("email")[0]) {
document.getElementsByName("email")[0].value = "";
}
if (document.getElementsByName("telephone")[0]) {
document.getElementsByName("telephone")[0].value = "";
}
if (document.getElementsByName("employeur")[0]) {
document.getElementsByName("employeur")[0].value = "";
}
}
function clearfileds_info() {
if (document.getElementsByName("nom_info")[0]) {
document.getElementsByName("nom_info")[0].value = "";
}
if (document.getElementsByName("prenom_info")[0]) {
document.getElementsByName("prenom_info")[0].value = "";
}
if (document.getElementsByName("email_info")[0]) {
document.getElementsByName("email_info")[0].value = "";
}
if (document.getElementsByName("telephone_info")[0]) {
document.getElementsByName("telephone_info")[0].value = "";
}
if (document.getElementsByName("employeur_info")[0]) {
document.getElementsByName("employeur_info")[0].value = "";
}
}
const [AnnulerFction_status, setAnnulerFction_status] = useState("");
function AnnulerFction() {
clearfileds();
setRecordData_status("false");
setmysession("");
}
const [AnnulerFction_info_status, setAnnulerFction_info_status] = useState("");
function AnnulerFction_info() {
clearfileds_info();
setSendInformationRequest_status("false");
}
const editorRef_description = useRef(null);
const [field_description, setfield_description] = useState("");
const [editor_tochange, seteditor_tochange] = useState("");
function editor_keyup() {
seteditor_tochange("1");
}
const [datamodification, setdatamodification] = useState("0");
function DataUpdated() {
setdatamodification("1");
}
const [SendInformationRequest_api, setSendInformationRequest_api] = useState("");
const [SendInformationRequest_status, setSendInformationRequest_status] = useState("");
const [SendInformationRequest_message, setSendInformationRequest_message] = useState("");
function SendInformationRequest() {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/RenseignementClass/";
var nom = document.getElementsByName("nom_info")[0].value;
if (String(nom).trim().length <= 0) {
document.getElementsByName("nom_info")[0].style.borderColor = "red";
alert(" Le nom d'utilisateur est obligatoire ");
return;
}
var prenom = document.getElementsByName("prenom_info")[0].value;
if (String(prenom).trim().length <= 0) {
document.getElementsByName("telephone_info")[0].style.borderColor = "red";
alert(" Le prenom d'utilisateur est obligatoire ");
return;
}
var telephone = document.getElementsByName("telephone_info")[0].value;
if (String(telephone).trim().length < 10) {
document.getElementsByName("telephone_info")[0].style.borderColor = "red";
alert(" Le numero de telephone doit comporter 10 chiffres ");
return;
}
var email = document.getElementsByName("email_info")[0].value;
var re2 = /\S+@\S+\.\S+/;
if (re2.test(email) === false) {
alert("L'email est incorrect ");
document.getElementsByName("email_info")[0].style.borderColor = "red";
return;
}
var employeur = ""
if (document.getElementById('employeur_info') && document.getElementById('employeur_info').value) {
employeur = document.getElementById('employeur_info').value;
}
var message = "";
if (editorRef_description.current) {
message = editorRef_description.current.getContent();
}
formData.append('nom', nom);
formData.append('employeur', employeur);
formData.append('prenom', prenom);
formData.append('telephone', telephone);
formData.append('email', email);
formData.append('message', message);
formData.append('class_internal_url', props.internal_url);
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setSendInformationRequest_api(result['status']);
setSendInformationRequest_status(result['status']);
setSendInformationRequest_message(result['message']);
})
.catch((error) => {
console.error('Error:', error);
setSendInformationRequest_api("false");
setSendInformationRequest_status("false");
setSendInformationRequest_message();
});
};
function AnnulerInformationRequest() {
}
return (
<div className='inscription'>
{String(RecordData_status) === "true" &&
String(action).toLocaleLowerCase() === "inscription" &&
<div className="okUpdateData">
Votre inscription bien été prise en compte.
Vous allez recevoir une email de confirmation dans votre boite email.
Merci.
</div>}
{String(SendInformationRequest_status) === "true" &&
String(action).toLocaleLowerCase() === "information" &&
<div className="okUpdateData">
Votre demande d'information été prise en compte.
Merci.
</div>}
{(String(RecordData_status) === "false" ||
String(RecordData_status).length === 0) &&
String(action).toLocaleLowerCase() === "inscription" &&
String(AnnulerFction_status) !== "1" && <div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
{String(RecordData_status) === "false" && <div className="koUpdateData">
{RecordData_message}
</div>}
<div className="select-container">
<div className="titre1_aide_finance"> Je m'inscris</div>
<div style={{ "float": "left", "width": "40%", "textAlign": "left" }}>
Choisir une session : &nbsp;
</div>
<div style={{ "float": "right", "width": "60%", "textAlign": "right" }}>
<select value={mysession} onChange={handleChangeSession} className="selectsession">
<option value="">Choisir</option>
{GetCurrentClass_result && GetCurrentClass_result.map((formation) => (
<option value={JSON.parse(formation).formation_session_id}>
{JSON.parse(formation).code_postal === "0" &&
String(JSON.parse(formation).date_debut).substring(0, 10) + " au " + String(JSON.parse(formation).date_fin).substring(0, 10) + " EN LIGNE"
}
{JSON.parse(formation).code_postal !== "0" &&
String(JSON.parse(formation).date_debut).substring(0, 10) + " au " + String(JSON.parse(formation).date_fin).substring(0, 10) + " au " +
JSON.parse(formation).adresse + " " + JSON.parse(formation).code_postal + " " + JSON.parse(formation).ville
}
</option>
))}
</select>
{/* {GetCurrentClass_result && <select value={mysession} onChange={handleChangeSession} className="selectsession">
<option value="">Choisir</option>
{
JSON.parse(GetCurrentClass_result).map((session) => <option value={session.session_id}>
{session.date_debut} - {session.date_fin} à </option>)
}
</select>} */}
</div>
</div>
</Box>
{mysession && <Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Nom"
name="nom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
label="Prénom(s)"
name="prenom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="email"
label="Adresse mail"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<EmailIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="telephone"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="employeur"
id="employeur"
label="Employeur"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeWorkIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<div style={{ "width": "10%" }}> &nbsp;</div>
<div className="titre1_aide_finance"> Nous vous aidons à financer la formation</div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<div className="select-container" style={{ "marginBottom": "1rem" }}>
<div className="field_gauche">
Choisir le mode financement : &nbsp;
</div>
<div className="field_droite">
<select id="modefinancement" value={monfinancement} onChange={handleChangeFinancement} className="selectsession">
<option value="">Choisir </option>
{modefinancement.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</select>
</div>
</div>
</Box>
<div style={{ "width": "100%" }}> &nbsp;</div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<div className="select-container">
<div style={{ "float": "left", "width": "40%", "textAlign": "left" }}>
Choisir votre centre de rattachement
</div>
<div style={{ "float": "right", "width": "60%", "textAlign": "right" }}>
<select id="opco" value={myopco} onChange={handleChangeOpco} className="selectsession">
<option value="">Choisir </option>
{GetListOpco_result.map((option) => (
<option value={(JSON.parse(option).idcc_code)}>{(JSON.parse(option).idcc_code)} </option>
))}
</select>
</div>
<div className="okUpdateData"><i> *Laisser "Choisir" si vous ne le connaissez pas. </i>
</div>
</div>
</Box>
<div className="div_row22">
{<div className="div_row">
<div className="div_row_gauche">
<Button variant="contained" color="success" style={{
'borderRadius': "5px",
"fontSize": "small", "padding": "0.3rem",
"width": "60%",
}}
onClick={RecordData}>Enregister</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": "right" }}>
<Button variant="contained" color="success" style={{
'borderRadius': "7px",
"fontSize": "small", "padding": "0.3rem",
"width": "60%",
}}
onClick={AnnulerFction}>Annuler</Button>
</div>
</div>
}
</div>
</Box>}
</div>}
{/* Gestion des demandes d'information */}
{
String(action).toLocaleLowerCase() === "information" &&
String(AnnulerFction_status) !== "1" && <div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
{String(RecordData_status) === "false" && <div className="koUpdateData">
{RecordData_message}
</div>}
<div className="select-container">
<div className="titre1_aide_finance"> Je m'informe</div>
</div>
</Box>
{<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Nom"
name="nom_info"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
label="Prénom(s)"
name="prenom_info"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="email_info"
label="Adresse mail"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<EmailIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="telephone_info"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="employeur_info"
id="employeur_info"
label="Employeur"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeWorkIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<div style={{ "width": "10%" }}> &nbsp;</div>
<div className="titre1_aide_finance"> Dites nous en plus sur votre besoin :)</div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<Editor
onInit={(evt, editor) => editorRef_description.current = editor}
initialValue={field_description}
onKeyUp={editor_keyup}
onEditorChange={(newValue, editor) => {
if (String(editor_tochange) === "1") {
//alert(" change");
DataUpdated()
seteditor_tochange("");
}
}}
init={{
resize: false,
height: 200,
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; }'
}}
/>
</Box>
<div style={{ "width": "100%" }}> &nbsp;</div>
<div className="div_row22">
{<div className="div_row">
<div className="div_row_gauche">
<Button variant="contained" color="success" style={{
'borderRadius': "5px",
"fontSize": "small", "padding": "0.3rem",
"width": "60%",
}}
onClick={SendInformationRequest}>Enregister</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": "right" }}>
<Button variant="contained" color="success" style={{
'borderRadius': "7px",
"fontSize": "small", "padding": "0.3rem",
"width": "60%",
}}
onClick={AnnulerFction_info}>Annuler</Button>
</div>
</div>
}
</div>
</Box>}
</div>}
</div>
);
}
export default Inscription_Information;

View File

@ -0,0 +1,503 @@
import React, { useRef, useState, useMemo, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
import Articles from "../components/Article";
import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
import { BsFillXCircleFill } from "react-icons/bs";
import { IoAddSharp } from "react-icons/io5";
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import Pagination from "./TestPagination";
import data from "./data/mock-data.json";
import { useHistory } from "react-router-dom";
import { getCookie, removeCookie } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
import Button from '@mui/material/Button';
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Header from "./Header";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import connect_white from "../mysy_img/connect_white_v2.png";
import connect_green from "../mysy_img/connect_green.png";
let PageSize = 5;
const ListeArticles = (props) => {
const [userconnected, setuserconnected] = useState("");
const [SearchText, setSearchText] = useState("");
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("false");
const [displayAllClasses, setdisplayAllClasses] = useState(true);
const [showelement, setshowelement] = useState("init");
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [currentPage2, setCurrentPage2] = useState(1);
const [fin, setfin] = useState(0);
const [ismobilephone, setismobilephone] = useState();
const [TrainingDistanciel, setTrainingDistanciel] = useState();
const stored_user = getCookie('tokenmysych');
const history = useHistory();
const url = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
const {
register,
formState: { errors },
handleSubmit,
watch,
} = useForm();
const pwd = useRef({});
pwd.current = watch("pwd", "");
const onSubmit = async (data) => {
const formData = new FormData();
//await sleep(20);
formData.append('search_text', data.name);
formData.append('name', data.name);
formData.append('surname', data.surname);
formData.append('email', data.email);
formData.append('pwd', data.pwd);
const res = await fetch(
url,
{
method: "POST",
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: formData,
}
);
const results = await res.json();
console.log(results);
};
const [Trainingdistance, setTrainingdistance] = useState(0);
const handleInput = (e) => {
setTrainingdistance(e.target.value);
}
const [Trainingduration, setTrainingduration] = useState(0);
const handleInputDuration = (e) => {
setTrainingduration(e.target.value);
}
function showdisplayfilter(event) {
if (showelement == "true") {
setshowelement("false");
}
else if (showelement == "false") {
setshowelement("true");
}
}
function clearsearchtext(event) {
setSearchText("");
document.getElementById("SearchText").value = "";
}
function SearchTextHandle(event) {
setSearchText(event.target.value);
}
function displayAllClassesHandle(event) {
setdisplayAllClasses(event.target.checked);
if (event.target.checked == true)
document.getElementById("SearchText").disabled = true;
else
document.getElementById("SearchText").disabled = false;
}
function searchFunction(e) {
var token = "";
if (typeof (stored_user) != "undefined") {
token = stored_user
}
var form = new FormData();
form.append("search_text", SearchText);
form.append("token", token);
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
var myurl = ""
/* if (document.getElementById("allelement").checked !== true &&
document.getElementById("SearchText").disabled !== true) {
//alert(" recherche classique laaa ");
myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_articles_avis/";
}
else if (document.getElementById("allelement").checked === true &&
document.getElementById("SearchText").disabled === true) {
myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/";
}*/
myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/";
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);
setmyApiResponse("True");
setResult(res.data.message)
//setmyApimyApiMessage("OK")
////console.log("taille = "+res.data.message.length);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("False");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
//setmyApimyApiMessage("")
})
}
const currentTableData2 = useMemo(() => {
if (result) {
const firstPageIndex = (currentPage2 - 1) * PageSize;
const lastPageIndex = firstPageIndex + PageSize;
setfin(1);
return result.slice(firstPageIndex, lastPageIndex);
}
else {
return [];
setfin(0);
}
}, [currentPage2]);
useEffect(() => {
setdisplayAllClasses("true");
async function chloadfunction() {
document.getElementById("allelement").checked = true;
// document.getElementById("SearchText").disabled = true;
}
chloadfunction();
searchFunction();
whosisconnected();
}, []);
const [PartnerMenu, setPartnerMenu] = React.useState(null);
const [AccountMenu, setAccountMenu] = React.useState(null);
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const stored_part = getCookie('tokenmysypart');
function whosisconnected() {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
setsomeoneconnected("1");
local_user_connect = 1;
//alert(" user connected OK");
}
if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
setsomeoneconnected("1");
local_part_connect = 1;
// alert(" partner connected OK");
}
}
function handleAccountLogout() {
if (String(userconnected) === String("1")) {
user_logout();
}
else if (String(partnerconnected) === String("1")) {
part_logout();
}
}
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Yes',
onClick: () => user_logout_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
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 handleMyAccount = () => {
setAccountMenu(null);
history.push("/mysy-user-account")
};
const handleAccountCreation = () => {
setAccountMenu(null);
history.push("/create_account")
};
const handlePartnerConnexion = () => {
setAccountMenu(null);
history.push("/PartnerLogin")
};
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Yes',
onClick: () => user_logout_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
const handleMyPartnerAccount = () => {
setAccountMenu(null);
history.push("/Partner")
};
const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
function handleAccountConnexion_v2() {
if (String(userconnected) === String("1")) {
handleMyAccount();
}
else if (String(partnerconnected) === String("1")) {
handleMyPartnerAccount();
}
}
function part_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
setpartCookie("tokenmysypart", "");
}
history.push("/recherche-formation");
}
function part_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (pro)',
buttons: [
{
label: 'Oui',
onClick: () => part_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
const [ProduitMenu, setproduitMenu] = React.useState(null);
const [AvisMenu, setavisMenu] = React.useState(null);
return (
<div className="recherche_style ListeArticles">
<div>
<div>
{showelement === "true" && <div onClick={showdisplayfilter} className="recherchefilter">
<div className="recherchedivgauche">Masquer les filtres</div>
<div className="recherchedivdroite"> <FaRegArrowAltCircleUp /> </div>
</div>
}
{showelement === "false" && <div onClick={showdisplayfilter} className="recherchefilter">
<div className="recherchedivgauche">Afficher les filtres</div>
<div className="recherchedivdroite"> <FaRegArrowAltCircleDown /> </div>
</div>
}
<div className="rech_middlebox">
<div style={{ "display": "none" }}>
<label className="default_font">
<i>Afficher tous nos articles :</i> &nbsp;&nbsp;
<input type="checkbox"
onChange={displayAllClassesHandle}
id="allelement"
name="allelement" />
</label>
</div>
{myApiResponse == "False" && <div className="koUpdateData">
Impossible de contacter l'hote distant
</div>}
{result && myApiResponse === "True" && <div className="okUpdateData pagination_align">
<Pagination
className="pagination-bar"
currentPage={currentPage2}
totalCount={result.length}
pageSize={PageSize}
onPageChange={page => setCurrentPage2(page)}
/>
</div>}
{result && myApiResponse == "True" && fin == 0 && result.slice(0, PageSize).map((article) => (
<div className="rech_list_formation2">
<Articles article={JSON.parse(article)} key={JSON.parse(article).title_formation} />
</div>
))}
{result && myApiResponse === "True" && fin === 1 && currentTableData2 && currentTableData2.map((formation) => (
<div className="rech_list_formation2">
<Articles article={JSON.parse(formation)} key={JSON.parse(formation).title_formation} />
</div>
))}
{result && <div className="pagination_align">
<Pagination
className="pagination-bar"
currentPage={currentPage2}
totalCount={result.length}
pageSize={PageSize}
onPageChange={page => setCurrentPage2(page)}
/>
</div>
}
</div>
</div>
</div>
</div>
)
}
export default ListeArticles;

View File

@ -0,0 +1,17 @@
import React from "react";
const LoginIcone = () => {
return(
<div className={"loginicon"}>
<h1 className={"class_ch"}> <a href="https://www.goog.com">
<img className={"ch_login_img"} alt={"login"}
src={"./img/login.png"} width="50" height="50"/>
</a>
</h1>
</div>
)
}
export default LoginIcone;

18
src/components/Map.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react'
import GoogleMapReact from 'google-map-react'
const Map = ({ location, zoomLevel }) => (
<div className="map">
<h2 className="map-h2">Come Visit Us At Our Campus</h2>
<div className="google-map">
<GoogleMapReact
bootstrapURLKeys={{ key: '' }}
defaultCenter={location}
defaultZoom={zoomLevel}
>
</GoogleMapReact>
</div>
</div>
)

View File

@ -0,0 +1,32 @@
import React from 'react';
import { bool } from 'prop-types';
import { StyledMenu } from './Menu.styled';
const Menu = ({ open, ...props }) => {
const isHidden = open ? true : false;
const tabIndex = isHidden ? 0 : -1;
return (
<StyledMenu open={open} aria-hidden={!isHidden} {...props}>
<a href="/" tabIndex={tabIndex}>
<span aria-hidden="true">💁🏻</span>
About us
</a>
<a href="/" tabIndex={tabIndex}>
<span aria-hidden="true">💸</span>
Pricing
</a>
<a href="/" tabIndex={tabIndex}>
<span aria-hidden="true">📩</span>
Contact
</a>
</StyledMenu>
)
}
Menu.propTypes = {
open: bool.isRequired,
}
export default Menu;

View File

@ -0,0 +1,40 @@
import styled from 'styled-components';
export const StyledMenu = styled.nav`
display: flex;
flex-direction: column;
justify-content: center;
background: ${({ theme }) => theme.primaryLight};
transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'};
height: 100vh;
text-align: left;
padding: 2rem;
position: absolute;
top: 0;
left: 0;
transition: transform 0.3s ease-in-out;
@media (max-width: ${({ theme }) => theme.mobile}) {
width: 100%;
}
a {
font-size: 2rem;
text-transform: uppercase;
padding: 2rem 0;
font-weight: bold;
letter-spacing: 0.5rem;
color: ${({ theme }) => theme.primaryDark};
text-decoration: none;
transition: color 0.3s linear;
@media (max-width: ${({ theme }) => theme.mobile}) {
font-size: 1.5rem;
text-align: center;
}
&:hover {
color: ${({ theme }) => theme.primaryHover};
}
}
`;

View File

@ -0,0 +1 @@
export { default } from './Menu';

View File

@ -0,0 +1,33 @@
import React from 'react';
import { getCookie, } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import SideBar from "./sidebar";
import { useCookies } from "react-cookie";
import ButtonHilight from "./ButtonHilight";
const Navigation = () => {
const history = useHistory();
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
return (
<div className={"navigation"}>
<div className="test_page">
<div className="bm-burger-button_label">
</div>
<SideBar />
<ButtonHilight />
</div>
</div>
)
}
export default Navigation;

View File

@ -0,0 +1,65 @@
import React, { 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 Partner from "./Partner";
import { useHistory } from "react-router-dom";
import Facture from "./Facture";
import { FaHandPointRight } from "react-icons/fa";
function OrderConfirmation(props) {
const [menu, setmenu] = useState("");
const history = useHistory();
useEffect(() => {
window.scrollTo(0, 0);
}, []);
function GoToInvoice() {
setmenu("facture");
}
return (
<div className="orderconfirmation">
{String(menu) === "facture" && <div>
<Facture currentpack={String(props.packs)} />
</div>
}
{String(menu) !== "facture" && <div>
<h2 style={{ "textAlign": "center", "color": "green", "marginTop": "3rem" }}> Commande numéro : {props.num_cmd} </h2>
<div className="div_row_central">
Votre commande a été validée avec succès.<br />
Votre pack <b> {String(props.packs).toLocaleUpperCase()} </b>se mettra à jour dès que vous aurez actualisé votre page.<br />
Merci d'avoir choisi MySy Training.
<br />
<br />
Votre facture est disponible dans votre espace personnel <Button onClick={GoToInvoice}> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; &nbsp; ici</Button>
<br />
<br />
Vous pouvez dès a present commencer à utiliser nos services.<br />
Si vous avez d'aider n'hesitez pas à conter notre équipe support par le chatbot (en bas de votre écran) ou mail.
<br />
</div>
<div className="div_row_central">
<Button variant="contained" color="success" className="div_row22 btn_enreg_cmd" onClick={(e) => {
e.preventDefault();
window.location.href = "/Partner";
}}>Retour vers mon compte</Button>
</div>
</div>}
</div>
);
}
export default OrderConfirmation;

View File

@ -0,0 +1,567 @@
import React, { useState, useEffect, useCallback, useRef } from "react";
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client'
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 Chart from 'react-apexcharts'
import Button from '@mui/material/Button';
import axios from "axios";
import { getCookie, setCookie } from 'react-use-cookie';
function PartenairStat() {
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 [data_global, setdata_global] = useState([]);
const stored_part = getCookie('tokenmysypart');
/*
Recuperation de toutes les formation du partenaire
*/
const [allclassAPI, getallclassAPI] = useState();
const [allclassAPI_Result, getallclassAPI_Result] = useState();
function getAllPartnerClass() {
var form = new FormData();
form.append('token', 'cherif');
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_class_external_code/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) != String("false")) {
console.log(" In getAllPartnerClass res.data.status = " + res.data.status);
console.log(" In getAllPartnerClass res.data.message = " + res.data.message);
getallclassAPI("true");
if (String(res.data.status) === "true") {
getallclassAPI_Result(res.data.message);
}
}
else {
console.log(" In getAllPartnerClass res.data.status = " + res.data.status);
console.log(" In getAllPartnerClass res.data.message = " + res.data.message);
getallclassAPI("false");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
getallclassAPI("false");
})
}
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("")
})
}
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 [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']
}
const [istrainingselected, setistrainingselected] = useState();
function DisplayTranningStat() {
var mytraining = ""
if (document.getElementById("selectedtraining") && document.getElementById("selectedtraining").value != "")
mytraining = document.getElementById("selectedtraining").value;
setistrainingselected("1");
//alert(" recuperation des stat de " + mytraining);
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_by_internal_url/";
form.append("date_start", date_start);
form.append("date_end", date_end);
form.append('token', 'cherif');
form.append('internal_url', mytraining);
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
if (String(res.data.status) != String("false")) {
console.log(" In DisplayTranningStat res.data.status = " + res.data.status);
console.log(" In DisplayTranningStat 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);
var ch_data2 = JSON.parse(obj).data1;
let new_data2 = ch_data2.map(i => Number(i));
setdetail_view_data1_selected_training(new_data2);
var nom = JSON.parse(obj).name1;
setdetail_view_data1_name_selected_training(nom);
console.log("new_data2 = ", ch_data2);
console.log("result = ", new_data2);
}
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_selected_training(new_data2);
}
});
}
else {
console.log(" In DisplayTranningStat res.data.status = " + res.data.status);
console.log(" In DisplayTranningStat res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( DisplayTranningStat = ');
//setmyApimyApiMessage("")
})
}
const [detail_view_data1_selected_training, setdetail_view_data1_selected_training] = useState([]);
const [detail_view_data1_name_selected_training, setdetail_view_data1_name_selected_training] = useState([]);
var series_detail_selected_training = [
{
name: detail_view_data1_name_selected_training,
data: detail_view_data1_selected_training
},
]
const [detail_view_categorie_selected_training, setdetail_view_categorie_selected_training] = useState([]);
const options_detail_selected_training = {
chart: {
id: 'apexchart-example'
},
xaxis: {
categories: detail_view_categorie_selected_training //['2022-09-12', '2022-09-11', '2022-09-10', '2022-09-09', '2022-09-08', '2022-09-07', '2022-09-06']
},
colors: ['#CB4335']
}
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
},
]
useEffect(() => {
getAllPartnerClass();
getStatData();
Get_Top5_Stat();
}, []);
return (
<div className="partenairstat">
<div className="div_row">
<div className="div_row_gauche">
<h5>Choisir une periode</h5>
<DateRange
onChange={item => setState([item.selection])}
moveRangeOnFirstSelection={false}
ranges={state}
/>
<br />
<Button onClick={Get_Top5_Stat} className="btn_enreg"> Mettre à jour </Button> <br />
{/*<Button onClick={getStatData} className="btn_enreg"> Recup Stat info</Button> <br /> */}
</div>
<div className="div_row_droite">
</div>
</div>
<div className="div_row">
<div className="titre1"> La tendance de votre entreprise </div>
{global_view_data && global_view_data.length > 3 && <div className="row">
<div className="section col-md-6">
<h3 className="section-title">Line Chart a (global)</h3>
<div className="section-content">
<Chart options={options_global_view} series={series_Gobal} type="line" />
</div>
</div>
<div className="section col-md-6">
<h3 className="section-title">Bar Chart b (global) </h3>
<div className="section-content">
<Chart options={options_global_view} series={series_Gobal} type="bar" />
</div>
</div>
</div>
}
</div>
<div className="div_row">
<div className="titre1"> Le top 5 de vos formation sur la periode</div>
{topX_formation && <div className="row">
<div className="section col-md-6">
<h5> Liste des formations concernées : </h5>
{topX_formation &&
topX_formation.map((val) => (
<li style={{ "textAlign": "left", "marginLeft": "5rem" }}>
{val}
</li>
))}
</div>
<div className="section col-md-6">
<h3 className="section-title">Line Chart a - la </h3>
<div className="section-content">
<Chart options={options_detail} series={series_detail} type="line" />
</div>
</div>
</div>}
</div>
{String(allclassAPI) === "true" && <div className="div_row">
<div className="titre1"> Les detail d'une formation </div>
<h5> Selectionnez une formation </h5>
<div className="div_row_gauche">
<select id={"selectedtraining"} name={"selectedtraining"}
onChange={DisplayTranningStat}>
<option selected value="">Choisir une formation</option>
{allclassAPI_Result &&
allclassAPI_Result.map((val) => (
<option value={JSON.parse(val).internal_url}>{JSON.parse(val).external_code} = &gt; {(JSON.parse(val).internal_url).substring(0, 25)}</option>
))}
</select>
</div>
<div className="div_row_droite">
{istrainingselected && String(istrainingselected) === "1" && <div className="section col-md-6"> Formation selectionnée :
<h3 className="section-title">{document.getElementById("selectedtraining").value} </h3>
<div className="section-content">
<Chart options={options_detail_selected_training} series={series_detail_selected_training} type="line" />
</div>
</div>}
</div>
</div>
}
</div>
);
}
export default PartenairStat;

646
src/components/Partner.js Normal file
View File

@ -0,0 +1,646 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
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 Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';
import { getCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import PartnerInfo from "./UpdatePartnerInfo";
import PartenairStat from "./PartenairStat";
import { Helmet } from "react-helmet";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import Header from "./Header";
import Facture from "./Facture";
import Abonnement from "./Abonnement";
import { useLocation } from "react-router-dom";
import { useParams } from 'react-router-dom'
import CheckOut from "./CheckOut";
import { IoCheckmarkCircleSharp } from "react-icons/io5";
import { FaHandPointRight } from "react-icons/fa";
const Partner = (props) => {
const { commingmenu, commingpack } = useParams();
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const stored_part = getCookie('tokenmysypart');
const [parntername, setparntername] = useState("");
const [selectedfilt1, setselectedfilt1] = useState("");
const [selectedfilt2, setselectedfilt2] = useState("");
const [selectedfilt3, setselectedfilt3] = useState("");
const [excelimportmessage, setexcelimportmessage] = useState("");
const [apiexcelimportmessage, setapiexcelimportmessage] = useState("");
const [gotocheckout, setgotocheckout] = useState("");
// Constante permet de savoir a fonction du menu on a faire
const [menu, setmenu] = useState("affichage");
const [selectedFile, setSelectedFile] = useState();
const [isSelected, setIsSelected] = useState(false);
const [partnerPackService, setpartnerPackService] = useState("");
const [isimgSelected, setisimgSelected] = useState(false);
const [isimgSelectedfile, setisimgSelectedfile] = useState(false);
const [userimgprofil, setuserimgprofil] = useState();
const [partnerstatus, setpartnerstatus] = useState();
const [refesh, setrefesh] = useState("init");
const [firstConnexion, setfirstConnexion] = useState("");
const changeHandler = (event) => {
setSelectedFile(event.target.files[0]);
setIsSelected(true);
setapiexcelimportmessage("");
};
const history = useHistory();
const stored_cookie = getCookie('tokenmysypart');
const location = useLocation();
// Si le partenaire n'est pas connecté, il est renvoyé vers la page de connexion
if (!stored_cookie || stored_cookie.length <= 0) {
if (location && location.state && location.state.mysy_arg) {
//alert(" mysy arg (dans partner) = " + location.state.mysy_arg);
history.push("/Connexion", { mysy_arg: location.state.mysy_arg });
}
else {
history.push("/Connexion");
}
}
const formData = new FormData();
const handleSubmission = () => {
formData.append('File', selectedFile);
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
//console.log("token = " + stored_cookie);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/add_class_mass/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message']);
setexcelimportmessage(result['message']);
setmyApiResponse("true");
setapiexcelimportmessage(result['status']);
//alert("result['status'] " + result['status']);
})
.catch((error) => {
console.error('Error:', result);
setmyApiResponse("false");
setapiexcelimportmessage("-1");
});
};
const [myimage, setmyimage] = useState();
const [isimage, setisimage] = useState();
function getImage(e) {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedImage/";
var form = new FormData();
form.append("token", stored_cookie);
form.append("type", "partner");
axios.post(myurl, form).then(res => {
if (res.data.status != "False") {
console.log(" getImage : In test res.data.status = " + res.data.status);
console.log(" getImage: res.data.message.img = " + res.data.message);
if (res.data.message.img.length > 0) {
setisimage("True");
}
else {
setisimage("False");
}
setmyimage(res.data.message.img);
var ch_img = "data:image/png;base64," + res.data.message.img;
setuserimgprofil(ch_img);
}
else {
//console.log(" In Erreur res.data.status = " + res.data.status);
//console.log(" In Erreur res.data.message = " + res.data.message);
setisimage("False");
setuserimgprofil();
//alert("4");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setisimage("False");
setuserimgprofil(profileimg);
})
}
useEffect(() => {
setapiexcelimportmessage("");
getImage();
GetPartnerNameFromToken();
DiplaytrainingList();
if (location && location.state && location.state.local_sub_menu) {
setmenu(location.state.local_sub_menu);
setpartnerPackService(location.state.currentpack);
//alert(" le pack = "+location.state.currentpack);
}
}, [])
function CreateTraining(event) {
setmenu("creation");
}
function PersonnalData(event) {
setmenu("infopartner");
}
function DisplayStat(event) {
setmenu("statistique");
}
function DisplayFacure(event) {
setmenu("facture");
}
function Abonnement_func(event) {
setmenu("abonnement");
}
function DiplaytrainingList(event) {
setmenu("affichage");
var server_address = "127.0.0.1";
//var server_address = "89.156.84.196";
var form = new FormData();
// Recuperation des parametres
var filtre1 = selectedfilt1;
var filtre2 = selectedfilt2;
var filtre3 = selectedfilt3;
var filtre1_value = "";
var filtre2_value = "";
var filtre3_value = "";
// Recuperation des valeurs de filtres
if (selectedfilt1) {
filtre1_value = document.getElementsByName("filtre1")[0].value;
form.append(filtre1, filtre1_value);
}
if (selectedfilt2) {
filtre2_value = document.getElementsByName("filtre2")[0].value;
form.append(filtre2, filtre2_value);
}
if (selectedfilt3) {
filtre3_value = document.getElementsByName("filtre3")[0].value;
form.append(filtre3, filtre3_value);
}
//console.log(" filtres1 = " + filtre1 + " = " + filtre1_value);
//console.log(" filtres2 = " + filtre2 + " = " + filtre2_value);
//console.log(" filtres3 = " + filtre3 + " = " + filtre3_value);
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_class/";
axios.post(myurl, form).then(res => {
if (res.data.status !== "False") {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("true");
setResult(res.data.message)
//setmyApimyApiMessage("OK")
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("false");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("false");
//setmyApimyApiMessage("")
})
}
function logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
removeCookie_part('tokenmysypart', { path: '/' });
history.push("/recherche-formation");
}
}
function logout() {
confirmAlert({
title: 'Deconnexion ?',
message: 'Confirmez la deconnexion',
buttons: [
{
label: 'Oui',
onClick: () => logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
const imgchangeHandler = (event) => {
let file_size = event.target.files[0].size;
//or if you like to have name and type
let file_name = event.target.files[0].name;
let file_type = event.target.files[0].type;
//alert("file_size = "+file_size+" file_type = "+file_type+" a = "+a);
if (file_size > 100000) {
alert("L'image doit faire moins de 100 Kilo Octets");
return;
}
setisimgSelectedfile(event.target.files[0]);
setisimgSelected(true);
setuserimgprofil(URL.createObjectURL(event.target.files[0]));
};
function GetPartnerNameFromToken(event) {
var form = new FormData();
form.append("token", stored_cookie);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/";
axios.post(myurl, form).then(res => {
if (String(res.data.status) === String("true")) {
//console.log(" In GetPartnerNameFromToken res.data.status = " + res.data.status);
//console.log(" In GetPartnerNameFromToken res.data.message = " + res.data.message);
setparntername(JSON.parse(res.data.message).nom);
if (JSON.parse(res.data.message).pack_service) {
setpartnerPackService(JSON.parse(res.data.message).pack_service);
}
else {
setpartnerPackService("Aucun Service");
}
if (JSON.parse(res.data.message).ispending) {
setpartnerstatus(JSON.parse(res.data.message).ispending);
}
if (JSON.parse(res.data.message).firstconnexion &&
String(JSON.parse(res.data.message).firstconnexion) === "0") {
setfirstConnexion("0");
} else {
setfirstConnexion("1");
}
}
else {
console.log(" In GetPartnerNameFromToken res.data.status = " + res.data.status);
//console.log(" In GetPartnerNameFromToken res.data.message = " + res.data.message);
}
}).catch((error) => {
console.warn('In GetPartnerNameFromToken Not good man :( mysearchtext = ');
})
}
function sendImage(e) {
var formData = new FormData();
formData.append('File', isimgSelectedfile);
formData.append("token", stored_part);
formData.append("type", "partner");
fetch(
process.env.REACT_APP_API_URL + "myclass/api/recordImage/",
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message']);
setisimgSelected(false);
})
.catch((error) => {
console.error('Error:');
setisimgSelected(true);
});
};
// Create a reference to the hidden file input element
const hiddenFileInput = React.useRef(null);
// Programatically click the hidden file input element
// when the Button component is clicked
const handleClick = event => {
hiddenFileInput.current.click();
};
// Call a function (passed as a prop from the parent component)
// to handle the user-selected file
const handleChange = event => {
const fileUploaded = event.target.files[0];
props.handleFile(fileUploaded);
};
function alertactivecompte() {
alert(" Vous devez ajouter un mode de Paiement pour acceder à cette fonctionnalité");
}
function ValideFirstConnexion(){
setfirstConnexion("");
setmenu("abonnement");
}
return (
<div className="partner">
<Helmet>
<title>Partenaires editeurs formations</title>
<meta name="description" content="backoffice partenaire editeurs formation" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
<div className="sub_dib_mobile">
<div className="div_gauche">
<img class="img-responsive img_user" src={userimgprofil} />
{!isimgSelected && <div className="nonlable">
<input type="file" id="files" accept="image/*" onChange={imgchangeHandler} style={{ opacity: "0", zIndex: "-1", maxWidth: "5px", maxHeight: "0px" }} />
<label for="files" className="label">Changer image</label>
</div>}
{isimgSelected && <div className="nonlable">
<Button variant="outlined" onClick={sendImage} className="enreg">Enregistrer</Button>
</div>}
<div className="nom_prenom"> {parntername && <b> {parntername}&nbsp;-&nbsp;{String(partnerPackService).toUpperCase()} </b>}
{!parntername && <b> Partenaire </b>} </div>
<hr className="my_hr" />
<div className="sousmenu" onClick={PersonnalData} > INFORMATIONS PERSONNELLES</div>
<hr className="my_hr" />
<div className="sousmenu" onClick={CreateTraining}> CREER FORMATION</div>
<hr className="my_hr" />
<div className="sousmenu" onClick={DiplaytrainingList} > MES FORMATIONS</div>
<hr className="my_hr" />
<div className="sousmenu" onClick={Abonnement_func} > ABONNEMENT </div>
<hr className="my_hr" />
<div className="sousmenu" onClick={DisplayFacure} > FACTURATION</div>
<hr className="my_hr" />
<div className="sousmenu" onClick={DisplayStat}> STATISTIQUES</div>
<hr className="my_hr" />
</div>
{String(firstConnexion) === "1" &&
<div className="div_droite firstConnexion">
<div className="firstConnexion_text">
<b>Cher partenaire, c'est votre première connexion, </b> <br /> &nbsp;<br/>
Nous sommes ravis de vous accueillir dans notre aventure MySy.
Pour commencer à publier vos formations, veuillez choisir une formule d'abonnement en cliquant <Button onClick={ValideFirstConnexion} className="firstConnexion_bton"> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; &nbsp; ici</Button><br />
&nbsp; <br/> Merci.
</div>
</div>}
{String(myApiResponse) === String("false") && <div className="div_droite">
<div className="koUpdateData"> Impossible de contacter l'hote distant </div>
</div>
}
{String(myApiResponse) === String("true") && menu === "affichage" &&
<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 :)
</div>*/}
<PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} />
</div>
}
</div>
{String(menu) === "checkout" && <div className="div_droite">
<Button onClick={"returntoorder"} className="btn_retour_ps"> Retour aux produits & Services </Button>
<CheckOut packs={location.state.new_pack} periodicity={location.state.period} mypackprice={location.state.price} />
</div>
}
{String(myApiResponse) === String("true") && menu === "creation" &&
<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 :)
</div>*/}
<div className="parter_div_droite_haut">
{String(apiexcelimportmessage) === String("true") &&
<div className="parter_div_filtrer_row okUpdateData">
{excelimportmessage}<br />&nbsp;<br />
</div>
}
{String(apiexcelimportmessage) === String("false") &&
<div className="parter_div_filtrer_row koUpdateData">
Impossible de traiter le fichier <br />
<u> <b> {excelimportmessage} </b></u>
<br />&nbsp;<br />
</div>
}
{String(apiexcelimportmessage) === String("-1") &&
<div className="parter_div_filtrer_row koUpdateData">
Impossible de traiter le fichier <br />&nbsp;<br />
</div>
}
<div className="parter_div_filtrer_row">
<div>
{String(partnerstatus) === String("0") && <div className="parter_div_filtrer_row_gauche">
Import excel d'une formation <a href='/sample/template_import.csv' download>Télécharger un fichier modèle</a>
<br />
<input type="file" name="file" onChange={changeHandler} /> <br />
<br />&nbsp;
<div className="import_excel_text">
<nav className="titre1"> Comment utiliser le fichier ? </nav>
<ul>
<li> Il s'agit d'un fichier csv. Les colonnes sont separées par des ";"</li>
<li> A l'interieur d'une même colonne, les informations sont separées par des ";" </li>
<li> La zone de diffusion est sous la forme "Code iso du pays-nom ville". </li>
<li> Champ 'Metier' : les valeurs acceptées sont : IT, RH, vente, dev_perso, Graphisme, Management, Digital, Office, Autre</li>
<li> Champ 'external_code' : le code d'identification de la formation chez le partenaire</li>
<li> Exemple : </li>
<i>
<b> Zone de diffusion : </b>FR-Marseille; FR-Nantes; BE-Bruxelles <br/>
<b> date et lieu de formation :</b> 22/01/2023-Paris-75009-2, place de la republique; 22/01/2023-Lyon-69109, 1 rue du gle leclerc;<br/>
<b> metier :</b> RH
</i>
</ul>
<a href='/sample/MySy_Import_formation_csv.pdf' download>Télécharger le guide complet</a><br />
</div>
<div style={{ "width": "50%" }}> &nbsp; </div>
<div className="zone_import_fichier">
<Button onClick={handleSubmission}
variant="contained" endIcon={<SendIcon />}
className="bt_import_mass"> Importer le fichier </Button>
</div>
</div>}
{String(partnerstatus) !== String("0") && <div className="parter_div_filtrer_row_gauche">
Import excel d'une formation <a href='/sample/template_import.csv' download>Télécharger un fichier modèle</a>
<br />
<input type="file" name="file" onChange={""} />
<br />
<div align="right">
<Button onClick={alertactivecompte} variant="contained" endIcon={<SendIcon />}> Importer </Button>
</div>
</div>}
</div>
<br />
</div>
</div>
<div className="parter_div_droite_bas">
<div className="titre1_bis"> Création manuelle d'une formation </div>
<TrainingForm mytrainingclass={{ 'ref': '', 'dist': 'Oui', 'plus_produit': '0' }} ispending={partnerstatus}
currentpack={String(partnerPackService).toUpperCase()} />
</div>
</div>
}
{String(myApiResponse) == String("true") && menu == "infopartner" &&
<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 :)
</div>*/}
<PartnerInfo />
</div>
}
{String(menu) === "statistique" &&
<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 :)
</div>*/}
<PartenairStat />
</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 :)
</div>*/}
<Facture currentpack={partnerPackService} />
</div>
}
{String(menu) === "abonnement" && <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 :)
</div>*/}
<Abonnement currentpack={partnerPackService} />
</div>
}
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
}
export default Partner;

View File

@ -0,0 +1,286 @@
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { Helmet } from "react-helmet";
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";
import { getCookie, removeCookie } from 'react-use-cookie';
function PartnerSignIn() {
const [isconnected, setisconnected] = useState("");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [usercookie, setusercookie, removeusercookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/";
const {
formState: { errors },
} = useForm();
const [result, setResult] = useState("");
const history = useHistory();
function logout_partner_confirmation() {
setCookie("tokenmysypart", "");
}
function Logout_Partenaire() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion partenaire',
buttons: [
{
label: 'Yes',
onClick: () => logout_partner_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
function logout_user_confirmation() {
removeCookie_part('tokenmysych', { path: '/' });
}
function Logout_User() {
confirmAlert({
title: 'Deconnexion utilisateur ?',
message: 'Confirmez la deconnexion utilisateur',
buttons: [
{
label: 'Yes',
onClick: () => logout_user_confirmation()
},
/* {
label: 'No',
}*/
]
});
}
const onSubmit = async (data) => {
const formData = new FormData();
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
// si c'est une connexion partner qui est active
if( String(userconnected) === String("1")){
alert("Un compte utilisateur deja connecté");
Logout_User();
}
if( String(partnerconnected) === String("1")){
alert(" Un compté est deja connecté");
Logout_Partenaire();
}
var mymail = document.getElementsByName("email_partner")[0].value;
var mypwd = document.getElementsByName("pwd_partner")[0].value;
var mysecret = document.getElementsByName("secret_partner")[0].value;
formData.append("email", mymail);
formData.append("pwd", mypwd);
formData.append("secret", mysecret);
fetch(
url_login,
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
var val = result['status'];
if (String(val) === String("true")) {
setCookie("tokenmysypart", mysecret);
history.push("/Partner");
}
else {
setisconnected("false");
}
})
.catch((error) => {
console.error('Error:', error);
setisconnected("false");
});
}
const onError = () => {
//console.log("error");
};
const [userconnected, setuserconnected] = useState("0");
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const stored_user = getCookie('tokenmysych');
const stored_part = getCookie('tokenmysypart');
useEffect(() => {
const listener = event => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
onSubmit();
}
};
document.addEventListener("keydown", listener);
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
setsomeoneconnected("1");
local_user_connect = 1;
//alert(" user connected OK");
}
if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
setsomeoneconnected("1");
local_part_connect = 1;
//alert(" partner connected OK");
}
}, []);
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="partnersignin">
<Helmet>
<title>Recherche articles formation</title>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
<h1 className="text_welcome">Se connecter à MySy Training PRO</h1>
<div className="display_screen_600_901">
<div className="div_centre">
<nav className="connect"> PARTENAIRE CONNEXION </nav>
<hr />
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email" name="email_partner" />
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password" name="pwd_partner" />
</FormGroup>
<FormGroup >
<Label className="erreurconnexion" >Clé Secrete</Label>
<Input type="password" placeholder="Secret Secret" name="secret_partner" />
</FormGroup>
<div className="div_row22">
<Button variant="contained" color="success" className="div_row22 btn_login button" onClick={onSubmit}>Connectez-Vous</Button>
</div>
</div>
{isconnected === "false" && <div className="erreurconnexion">
<br />
Erreur Connexion</div>
}
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default PartnerSignIn;

View File

@ -0,0 +1,274 @@
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { Helmet } from "react-helmet";
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 PartnerSignIn() {
const [isconnected, setisconnected] = useState("");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/";
const {
formState: { errors },
} = useForm();
const [result, setResult] = useState("");
const history = useHistory();
function logout_partner_confirmation() {
removeCookie_part('tokenmysypart', { path: '/' });
}
function Logout_Partenaire() {
confirmAlert({
title: 'Deconnexion Partenaire ?',
message: 'Confirmez la deconnexion partenaire',
buttons: [
{
label: 'Yes',
onClick: () => logout_partner_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
function logout_user_confirmation() {
removeCookie_part('tokenmysych', { path: '/' });
}
function Logout_User() {
confirmAlert({
title: 'Deconnexion utilisateur ?',
message: 'Confirmez la deconnexion utilisateur',
buttons: [
{
label: 'Yes',
onClick: () => logout_user_confirmation()
},
/* {
label: 'No',
}*/
]
});
}
const onSubmit = async (data) => {
const formData = new FormData();
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
if (typeof (stored_partner) != "undefined" && String(stored_partner) !== String('')) {
//alert(" c'est une connexion PARTTT qui est active");
Logout_Partenaire();
}
// si c'est une connexion user qui est active
if (typeof (stored_user) != "undefined" && String(stored_user) !== String('')) {
//alert(" c'est une connexion USERR qui est active");
Logout_User();
}
var mymail = document.getElementsByName("email_partner")[0].value;
var mypwd = document.getElementsByName("pwd_partner")[0].value;
var mysecret = document.getElementsByName("secret_partner")[0].value;
formData.append("email", mymail);
formData.append("pwd", mypwd);
formData.append("secret", mysecret);
fetch(
url_login,
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
var val = result['status'];
if (String(val) === String("true")) {
sessionStorage.setItem("token", result['message']);
setCookie("tokenmysypart", mysecret);
history.push("/Partner");
}
else {
setisconnected("false");
}
})
.catch((error) => {
console.error('Error:', error);
setisconnected("false");
});
}
const onError = () => {
//console.log("error");
};
useEffect(() => {
const listener = event => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
onSubmit();
}
};
document.addEventListener("keydown", listener);
}, []);
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="partnersignin partnersigninfirst">
<Helmet>
<title>Recherche articles formation</title>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
<h1 className="text_welcome"> Première connexion à Mysy Training Pro </h1>
<div className="display_screen_600_901">
<div className="div_row">
<div className="div_gauche">
<nav><b> Pour bien démarrer (1/2)</b></nav>
<nav> <i>Vous êtes à la première étape sur 2 </i> </nav>
<hr />
<ul>
<li style={{"paddingBottom":"1rem"}}> <b> &#62;&#62; Etape 1 : Un courriel d'activation vous a été envoyé par email. Activez votre compte à partir de ce courriel. &#60;&#60; </b></li>
<li style={{"paddingBottom":"1rem"}}> Etape 2 : Récuperez votre clé secréte envoyée dans un second email. Elle est unique et est nécessaire pour administrer votre compte
( Et pensez à regarder vos mails indésirables/vos spams !). <br />&nbsp;</li>
</ul>
</div>
<div className="div_droite">
<nav className="connect"> Connexion Partenaire </nav>
<hr />
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email" name="email_partner" />
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password" name="pwd_partner" />
</FormGroup>
<FormGroup >
<Label className="erreurconnexion" >Clé Secrete</Label>
<Input type="password" placeholder="Secret Secret" name="secret_partner" />
</FormGroup>
<div className="div_row22">
<Button variant="contained" color="success" className="div_row22 btn_login button" onClick={onSubmit}>Connectez-Vous</Button>
</div>
</div>
{isconnected === "false" && <div className="erreurconnexion">
<br />
Erreur Connexion</div>
}
</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default PartnerSignIn;

View File

@ -0,0 +1,274 @@
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { Helmet } from "react-helmet";
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 PartnerSignIn() {
const [isconnected, setisconnected] = useState("");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/";
const {
formState: { errors },
} = useForm();
const [result, setResult] = useState("");
const history = useHistory();
function logout_partner_confirmation() {
removeCookie_part('tokenmysypart', { path: '/' });
}
function Logout_Partenaire() {
confirmAlert({
title: 'Deconnexion Partenaire ?',
message: 'Confirmez la deconnexion partenaire',
buttons: [
{
label: 'Yes',
onClick: () => logout_partner_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
function logout_user_confirmation() {
removeCookie_part('tokenmysych', { path: '/' });
}
function Logout_User() {
confirmAlert({
title: 'Deconnexion utilisateur ?',
message: 'Confirmez la deconnexion utilisateur',
buttons: [
{
label: 'Yes',
onClick: () => logout_user_confirmation()
},
/* {
label: 'No',
}*/
]
});
}
const onSubmit = async (data) => {
const formData = new FormData();
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
if (typeof (stored_partner) != "undefined" && String(stored_partner) !== String('')) {
//alert(" c'est une connexion PARTTT qui est active");
Logout_Partenaire();
}
// si c'est une connexion user qui est active
if (typeof (stored_user) != "undefined" && String(stored_user) !== String('')) {
//alert(" c'est une connexion USERR qui est active");
Logout_User();
}
var mymail = document.getElementsByName("email_partner")[0].value;
var mypwd = document.getElementsByName("pwd_partner")[0].value;
var mysecret = document.getElementsByName("secret_partner")[0].value;
formData.append("email", mymail);
formData.append("pwd", mypwd);
formData.append("secret", mysecret);
fetch(
url_login,
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
var val = result['status'];
if (String(val) === String("true")) {
sessionStorage.setItem("token", result['message']);
setCookie("tokenmysypart", mysecret);
history.push("/Partner");
}
else {
setisconnected("false");
}
})
.catch((error) => {
console.error('Error:', error);
setisconnected("false");
});
}
const onError = () => {
//console.log("error");
};
useEffect(() => {
const listener = event => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
onSubmit();
}
};
document.addEventListener("keydown", listener);
}, []);
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="partnersignin partnersigninfirst">
<Helmet>
<title>Recherche articles formation</title>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
<h1 className="text_welcome"> Première connexion à Mysy Training Pro </h1>
<div className="display_screen_600_901">
<div className="div_row">
<div className="div_gauche">
<nav><b> Pour bien démarrer (2/2) </b></nav>
<nav><i>Vous êtes à la deuxième étape sur 2 </i></nav>
<hr />
<ul>
<li style={{"paddingBottom":"1rem"}}> Etape 1 : Un courriel d'activation vous a été envoyé par email. Activez votre compte à partir de ce courriel.</li>
<li style={{"paddingBottom":"1rem"}}> <b> &#62;&#62; Etape 2 : Récuperez votre clé secréte envoyée dans un second email. Elle est unique et est nécessaire pour administrer votre compte
( Et pensez à regarder vos mails indésirables/vos spams !). &#60;&#60; </b> <br />&nbsp;</li>
</ul>
</div>
<div className="div_droite">
<nav className="connect"> Connexion Partenaire </nav>
<hr />
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email" name="email_partner" />
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password" name="pwd_partner" />
</FormGroup>
<FormGroup >
<Label className="erreurconnexion" >Clé Secrete</Label>
<Input type="password" placeholder="Secret Secret" name="secret_partner" />
</FormGroup>
<div className="div_row22">
<Button variant="contained" color="success" className="div_row22 btn_login button" onClick={onSubmit}>Connectez-Vous</Button>
</div>
</div>
{isconnected === "false" && <div className="erreurconnexion">
<br />
Erreur Connexion</div>
}
</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default PartnerSignIn;

View File

@ -0,0 +1,503 @@
import React, { useState, useEffect } from "react";
import Button from '@mui/material/Button';
import img_visa_mastercard from "./../mysy_img/visa_mastercard.png"
import img_paypal from "./../mysy_img/paypal.png"
import axios from "axios";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { useHistory } from "react-router-dom";
import { getCookie } from 'react-use-cookie';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import OutlinedInput from '@mui/material/OutlinedInput';
import moment from 'moment'
function PaymentMethode(props) {
const [menu, setmenu] = useState("cb");
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [paymentadded, setpaymentadded] = useState("");
const [nom_carte, setnom_carte] = useState("");
const [num_carte, setnum_carte] = useState("");
const [date_exp, setdate_exp] = useState("");
const [cvv, setcvv] = useState("");
function menu_sepa() {
setmenu("sepa");
}
function menu_cb() {
setmenu("cb");
}
function handleChange1(prop) {
return (event) => {
setValuesPass1({ ...valuesPass1, [prop]: event.target.value });
};
}
function handleChange2(prop) {
return (event) => {
setValuesPass2({ ...valuesPass2, [prop]: event.target.value });
};
}
const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
const [currentpawdvisible2, setcurrentpawdvisible2] = useState(false);
const handleClickShowPassword_current_pwd = () => {
var filtre2_value = document.getElementsByName("pwd")[0].value;
if (currentpawdvisible == false) {
document.getElementsByName("pwd")[0].type = "text";
setcurrentpawdvisible(true);
}
else if (currentpawdvisible == true) {
document.getElementsByName("pwd")[0].type = "password";
setcurrentpawdvisible(false);
}
};
const handleClickShowPassword_current_pwd2 = () => {
var filtre2_value = document.getElementsByName("secret")[0].value;
if (currentpawdvisible2 == false) {
document.getElementsByName("secret")[0].type = "text";
setcurrentpawdvisible2(true);
}
else if (currentpawdvisible2 == true) {
document.getElementsByName("secret")[0].type = "password";
setcurrentpawdvisible2(false);
}
};
const [values, setValues] = React.useState({
password: '',
showPassword: false,
});
const [valuesPass1, setValuesPass1] = React.useState({
password1: '',
showPassword1: false,
});
const [valuesPass2, setValuesPass2] = React.useState({
password2: '',
showPassword2: false,
});
// recuperation et gestion du token utilisateur
const history = useHistory();
const stored_part = getCookie('tokenmysypart');
if (!stored_part || stored_part.length <= 0) {
history.push("/PartnerLogin");
}
function RecordData() {
if (!document.getElementsByName("cgp")[0].checked) {
alert(" Vous devez avoir lu les conditions de paiement. Merci.");
return;
}
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/add_payement_mode/";
var pwd = document.getElementsByName("pwd")[0].value;
var secret = document.getElementsByName("secret")[0].value;
formData.append('token', stored_part);
formData.append('type', String(menu));
formData.append('pwd', pwd);
formData.append('secret', secret);
if (String(menu) === String("cb")) {
var nom_carte = document.getElementsByName("nom_carte")[0].value;
var num_carte = document.getElementsByName("num_carte")[0].value;
var date_exp_carte = document.getElementsByName("date_exp")[0].value;
var cvv_carte = document.getElementsByName("cvv")[0].value;
formData.append('nom_carte', nom_carte);
formData.append('num_carte', num_carte);
formData.append('date_exp_carte', date_exp_carte);
formData.append('cvv_carte', cvv_carte);
}
else if (String(menu) === String("sepa")) {
var nom_compte = document.getElementsByName("nom_compte")[0].value;
var iban = document.getElementsByName("num_iban")[0].value;
var bic = document.getElementsByName("bic")[0].value;
formData.append('nom_compte', nom_compte);
formData.append('iban', iban);
formData.append('bic', bic);
}
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setmyApiResponse(result['status']);
setResult(result['message']);
if (String(result['status']) === String("true")) {
setpaymentadded("1");
window.scrollTo(0, 0);
}
else {
setpaymentadded("0");
}
})
.catch((error) => {
console.error('Error:', error);
setmyApiResponse("false");
setpaymentadded("0");
});
};
const [mynote, setmynote] = useState("");
function CheckCardNumber(e) {
const val = e.target.value;
if (!isNaN(val) && String(val).length <= 16) {
setmynote(val);
}
else {
document.getElementById("num_carte").value = mynote;
}
}
const [dateexp, setdateexp] = useState("");
function Onleave_expdate_exp(e) {
var val = document.getElementById("date_exp").value
if (!moment(val, 'MM/YY', true).isValid()) {
setdateexp("");
alert("La date " + val + " n'est pas valide")
}
return;
}
function Checkdate_expdate_exp(e) {
const val = e.target.value;
if (String(val).length < 6) {
setdateexp(val);
}
if (String(val).length == 6) {
const regex = /^\d{2}\/\d{2}$/;
const found = dateexp.match(regex);
if (!found) {
alert(" pas bon ");
}
}
if (String(val).length > 6) {
document.getElementById("date_exp").value = dateexp;
}
}
useEffect(() => {
console.log(" props.mypaymentmode = " + props.mypaymentmode);
var num_carte = "XXXX"+JSON.parse(props.mypaymentmode).last4;
setnum_carte(num_carte);
var exp_data = JSON.parse(props.mypaymentmode).exp_month+"/"+JSON.parse(props.mypaymentmode).exp_year;
setdate_exp(exp_data);
window.scrollTo(0, 0);
}, []);
return (
<div className="paymentmethode">
<div className="row_gauche_bis">
mypaymentmode = {props.mypaymentmode}
<div className="div_row_central">
{String(paymentadded) === String("1") && <div className="okUpdateData">
Le mode de Paiement a été correctement ajouté
</div>
}
{String(paymentadded) === String("0") && <div className="koUpdateData">
{result}
</div>
}
<div className="titre1" onClick={menu_cb}> Prélèvement par carte bancaire </div>
{String(menu) === String("cb") && <div>
<div className="div_row">
<div className="div_row_gauche" style={{ "minHeight": "4rem" }}> Carte Bancaire </div>
<div className="div_row_droite" style={{ "textAlign": "right", "maxHeight": "rem" }}>
<img src={img_visa_mastercard} className="img_payment" /> &nbsp;
<img src={img_paypal} className="img_payment" />
</div>
</div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Nom inscrit sur la carte"
name="nom_carte"
value={(JSON.parse(props.mypaymentmode).nom_carte)}
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
//onChange={CheckCardNumber}
label="Numéro de carte"
name="num_carte"
id="num_carte"
value={"XXXX"+(JSON.parse(props.mypaymentmode).last4)}
autoComplete="off"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
label="Expiration (MM/AA)"
name="date_exp"
id="date_exp"
autoComplete="new-qsq"
value={(JSON.parse(props.mypaymentmode).exp_month)+"/"+(JSON.parse(props.mypaymentmode).exp_year)}
className="texte_area"
sx={{ m: 1, width: '45%' }}
onChange={Checkdate_expdate_exp}
onBlur={Onleave_expdate_exp}
variant="standard"
inputProps={{
autoComplete: 'new-password',
}}
/>
<TextField
required
label="CVV"
name="cvv"
className="texte_area"
sx={{ m: 1, width: '45%' }}
inputProps={{
autoComplete: 'new-password',
}}
variant="standard"
/>
</Box>
</div>
}
</div>
<div> &nbsp;</div>
<hr />
<div className="div_row_central">
<div className="titre1" onClick={menu_sepa}> Prélèvement par virement SEPA</div>
{String(menu) === String("sepa") && <div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Nom du titulaire du compte"
name="nom_compte"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
label="IBAN"
name="num_iban"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
label="BIC"
name="bic"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
</Box>
</div>}
</div>
<div> &nbsp;</div>
<hr />
<div className="div_row_central">
Pour confirmer le changement, veuillez entrer votre mot de passe et votre clé sécrete <br />
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<FormControl sx={{ m: 1, width: '45%' }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password">Mot de passe</InputLabel>
<OutlinedInput
id="current_pwd"
name="pwd"
type={values.showPassword1 ? 'text' : 'password'}
value={values.password1}
autoComplete='off'
onChange={handleChange1('password1')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_current_pwd}
edge="end"
>
{currentpawdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Mot de passe"
inputProps={{
autoComplete: 'new-password',
}}
/>
</FormControl>
<FormControl sx={{ m: 1, width: '45%' }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password">Clé secrete</InputLabel>
<OutlinedInput
id="secret"
name="secret"
type={values.showPassword2 ? 'text' : 'password'}
value={values.password2}
onChange={handleChange2('password2')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_current_pwd2}
edge="end"
>
{currentpawdvisible2 ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Clé secrete"
/>
</FormControl>
</Box>
</div>
<div className="div_row_centre">
<div style={{
"width": "100%", "float": "left", "textAlign": "center", "fontSize": "medium",
"marginTop": "1rem", "marginBottom": "1rem"
}}>
<input type={"checkbox"} unchecked
id="cgp"
name="cgp"
style={{ "textAlign": "left", "width": "auto", "height": "1rem" }} />
<label for="cgp" style={{
"textAlign": "left", maxWidth: "90%", "fontSize": "small ",
"fontWeight": "bold", "color": "red"
}}>J'ai lu et j'accepte les conditions ci-dessus.</label>
</div>
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregister</Button>
</div>
</div>
<div className="row_droite_bis">
<div className="div_row_central_droite">
<div className="titre1" style={{ "background": "#619E31" }}> Conditions de paiement</div>
<b> Veuillez vérifier la liste ci-dessous pour vous assurer que votre prélèvement automatique s'effectue avec succès. </b>
<ul>
<li> Vous devez activer le prélèvement automatique auprès de votre banque. </li>
<li> Vous devez avoir des fonds suffisants sur votre compte au moment de chaque prélèvement. </li>
<li> Vous ne devez pas contester le prélèvement de la part de Zervant ou Stripe (notre service de paiement partenaire) auprès de votre banque. </li>
<li> Si votre prélèvement est contesté, pour toute raison, nous vous enverrons immédiatement une nouvelle facture,
incluant les frais de contestation qui nous sont facturés par la banque (en général 8 par contestation). Nous vous demanderons également de confirmer votre moyen de paiement dans les 7 jours. </li>
<li> Dans l'absence de confirmation de moyen de paiement après la première contestation, ou qu'un autre moyen est contesté, nous enlèverons l'option de prélèvement automatique pour votre compte, et vous demanderons d'utiliser une carte de paiement. </li>
</ul>
</div>
</div>
</div >
);
}
export default PaymentMethode;

View File

@ -0,0 +1,413 @@
import React, { useState, useEffect } from "react";
import Button from '@mui/material/Button';
import img_visa_mastercard from "./../mysy_img/visa_mastercard.png"
import img_paypal from "./../mysy_img/paypal.png"
import axios from "axios";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { useHistory } from "react-router-dom";
import { getCookie } from 'react-use-cookie';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import OutlinedInput from '@mui/material/OutlinedInput';
function PaymentMethodeNoConnect(props) {
const [menu, setmenu] = useState("cb");
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [paymentadded, setpaymentadded] = useState("");
function menu_sepa() {
setmenu("sepa");
}
function menu_cb() {
setmenu("cb");
}
function handleChange1(prop) {
return (event) => {
setValuesPass1({ ...valuesPass1, [prop]: event.target.value });
};
}
function handleChange2(prop) {
return (event) => {
setValuesPass2({ ...valuesPass2, [prop]: event.target.value });
};
}
const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
const [currentpawdvisible2, setcurrentpawdvisible2] = useState(false);
const handleClickShowPassword_current_pwd = () => {
var filtre2_value = document.getElementsByName("pwd")[0].value;
if (currentpawdvisible == false) {
document.getElementsByName("pwd")[0].type = "text";
setcurrentpawdvisible(true);
}
else if (currentpawdvisible == true) {
document.getElementsByName("pwd")[0].type = "password";
setcurrentpawdvisible(false);
}
};
const handleClickShowPassword_current_pwd2 = () => {
var filtre2_value = document.getElementsByName("secret")[0].value;
if (currentpawdvisible2 == false) {
document.getElementsByName("secret")[0].type = "text";
setcurrentpawdvisible2(true);
}
else if (currentpawdvisible2 == true) {
document.getElementsByName("secret")[0].type = "password";
setcurrentpawdvisible2(false);
}
};
const [values, setValues] = React.useState({
password: '',
showPassword: false,
});
const [valuesPass1, setValuesPass1] = React.useState({
password1: '',
showPassword1: false,
});
const [valuesPass2, setValuesPass2] = React.useState({
password2: '',
showPassword2: false,
});
// recuperation et gestion du token utilisateur
const history = useHistory();
const stored_part = getCookie('tokenmysypart');
function RecordData() {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/add_payement_mode/";
var pwd = document.getElementsByName("pwd")[0].value;
var secret = document.getElementsByName("secret")[0].value;
formData.append('token', stored_part);
formData.append('type', String(menu));
formData.append('pwd', pwd);
formData.append('secret', secret);
if (String(menu) === String("cb")) {
var nom_carte = document.getElementsByName("nom_carte")[0].value;
var num_carte = document.getElementsByName("num_carte")[0].value;
var date_exp_carte = document.getElementsByName("date_exp")[0].value;
var cvv_carte = document.getElementsByName("cvv")[0].value;
formData.append('nom_carte', nom_carte);
formData.append('num_carte', num_carte);
formData.append('date_exp_carte', date_exp_carte);
formData.append('cvv_carte', cvv_carte);
}
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setmyApiResponse(result['status']);
setResult(result['message']);
if (String(result['status']) === String("true")) {
setpaymentadded("1");
}
else {
setpaymentadded("0");
}
})
.catch((error) => {
console.error('Error:', error);
setmyApiResponse("false");
setpaymentadded("0");
});
};
const [mynote, setmynote] = useState("");
function CheckCardNumber(e) {
const val = e.target.value;
if (!isNaN(val) && String(val).length <= 16) {
setmynote(val);
}
else {
document.getElementById("num_carte").value = mynote;
}
}
const [dateexp, setdateexp] = useState("");
function Onleave_expdate_exp(e) {
const regex = /^\d{2}\/\d{2}$/;
var val = document.getElementById("date_exp").value
const found = val.match(regex);
if (!found) {
setdateexp("");
document.getElementById("date_exp").value = "";
}
}
function Checkdate_expdate_exp(e) {
const val = e.target.value;
if (String(val).length < 6) {
setdateexp(val);
}
if (String(val).length == 6) {
const regex = /^\d{2}\/\d{2}$/;
const found = dateexp.match(regex);
if (!found) {
alert(" pas bon ");
}
}
if (String(val).length > 6) {
document.getElementById("date_exp").value = dateexp;
}
}
useEffect(() => {
enablefieds1();
window.scrollTo(0, 0);
}, []);
function enablefieds1() {
document.getElementsByName("nom_carte")[0].disabled = false;
document.getElementsByName("nom_carte")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("num_carte")[0].disabled = false;
document.getElementsByName("num_carte")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("date_exp")[0].disabled = false;
document.getElementsByName("date_exp")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("cvv")[0].disabled = false;
document.getElementsByName("cvv")[0].style.backgroundColor = "#FFFFFF";
}
return (
<div className="paymentmethode_carte">
<div className="div_row_central">
{String(paymentadded) === String("1") && <div className="okUpdateData">
Le mode de Paiement a été correctement ajouté
{
history.push({
pathname: "/Partner/",
state: {
currentpack: props.currentpack, local_sub_menu: 'abonnement'
}
})}
{window.location.reload()}
</div>
}
{String(paymentadded) === String("0") && <div className="koUpdateData">
{result}
</div>
}
<div>
<div className="div_row_central">
<img src={img_visa_mastercard} className="img_payment" /> &nbsp;
<img src={img_paypal} className="img_payment" />
</div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Nom inscrit sur la carte"
name="nom_carte"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
onChange={CheckCardNumber}
label="Numéro de carte"
name="num_carte"
id="num_carte"
autoComplete="off"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
label="Expiration (MM/AA)"
name="date_exp"
id="date_exp"
autoComplete="new-qsq"
value={dateexp}
className="texte_area"
sx={{ m: 1, width: '45%' }}
onChange={Checkdate_expdate_exp}
onBlur={Onleave_expdate_exp}
variant="standard"
/>
<TextField
required
autoComplete='off'
label="CVV"
name="cvv"
className="texte_area"
sx={{ m: 1, width: '45%' }}
variant="standard"
/>
</Box>
</div>
</div>
<br />&nbsp; <br />
<div className="div_row_central">
Pour confirmer le changement, veuillez entrer votre mot de passe et votre clé sécrete <br />
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<FormControl sx={{ m: 1, width: '100%' }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password">Mot de passe</InputLabel>
<OutlinedInput
id="current_pwd"
name="pwd"
type={values.showPassword1 ? 'text' : 'password'}
value={values.password1}
autoComplete='off'
onChange={handleChange1('password1')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_current_pwd}
edge="end"
>
{currentpawdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Mot de passe"
inputProps={{
autoComplete: 'new-password',
}}
/>
</FormControl>
<br />
<FormControl sx={{ m: 1, width: '100%' }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password">Clé secrete</InputLabel>
<OutlinedInput
id="secret"
name="secret"
type={values.showPassword2 ? 'text' : 'password'}
value={values.password2}
onChange={handleChange2('password2')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_current_pwd2}
edge="end"
>
{currentpawdvisible2 ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Clé secrete"
/>
</FormControl>
</Box>
</div>
<div className="div_row_central">
<div style={{
"width": "100%", "float": "left", "textAlign": "center", "fontSize": "small",
"marginTop": "1rem", "marginBottom": "1rem"
}}>
<input type={"checkbox"} unchecked
id="cgp"
name="cgp"
style={{ "textAlign": "left", "width": "auto", "height": "1rem" }} />
<label for="cgp" style={{
"textAlign": "left", maxWidth: "90%", "fontSize": "small ",
"color": "red"
}}>J'ai lu et j'accepte les conditions générales de paiement </label> <a href='/sample/Mysy_Conditions_Generales_Paiement.pdf' download> (télécharger).</a>
</div>
</div>
<div className="div_row_centre">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregister</Button>
</div>
</div>
);
}
export default PaymentMethodeNoConnect;

View File

@ -0,0 +1,364 @@
import React, { useState, useEffect } from "react";
import Button from '@mui/material/Button';
import img_visa_mastercard from "./../mysy_img/visa_mastercard.png"
import img_paypal from "./../mysy_img/paypal.png"
import axios from "axios";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { useHistory } from "react-router-dom";
import { getCookie } from 'react-use-cookie';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import OutlinedInput from '@mui/material/OutlinedInput';
function PaymentMethodeNoConnect(props) {
const [menu, setmenu] = useState("cb");
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [paymentadded, setpaymentadded] = useState("");
function menu_sepa() {
setmenu("sepa");
}
function menu_cb() {
setmenu("cb");
}
function handleChange1(prop) {
return (event) => {
setValuesPass1({ ...valuesPass1, [prop]: event.target.value });
};
}
function handleChange2(prop) {
return (event) => {
setValuesPass2({ ...valuesPass2, [prop]: event.target.value });
};
}
const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
const [currentpawdvisible2, setcurrentpawdvisible2] = useState(false);
const handleClickShowPassword_current_pwd = () => {
var filtre2_value = document.getElementsByName("pwd")[0].value;
if (currentpawdvisible == false) {
document.getElementsByName("pwd")[0].type = "text";
setcurrentpawdvisible(true);
}
else if (currentpawdvisible == true) {
document.getElementsByName("pwd")[0].type = "password";
setcurrentpawdvisible(false);
}
};
const handleClickShowPassword_current_pwd2 = () => {
var filtre2_value = document.getElementsByName("secret")[0].value;
if (currentpawdvisible2 == false) {
document.getElementsByName("secret")[0].type = "text";
setcurrentpawdvisible2(true);
}
else if (currentpawdvisible2 == true) {
document.getElementsByName("secret")[0].type = "password";
setcurrentpawdvisible2(false);
}
};
const [values, setValues] = React.useState({
password: '',
showPassword: false,
});
const [valuesPass1, setValuesPass1] = React.useState({
password1: '',
showPassword1: false,
});
const [valuesPass2, setValuesPass2] = React.useState({
password2: '',
showPassword2: false,
});
// recuperation et gestion du token utilisateur
const history = useHistory();
const stored_part = getCookie('tokenmysypart');
function RecordData() {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/add_payement_mode/";
var pwd = document.getElementsByName("pwd")[0].value;
var secret = document.getElementsByName("secret")[0].value;
formData.append('token', stored_part);
formData.append('type', String(menu));
formData.append('pwd', pwd);
formData.append('secret', secret);
if (String(menu) === String("cb")) {
var nom_carte = document.getElementsByName("nom_carte")[0].value;
var num_carte = document.getElementsByName("num_carte")[0].value;
var date_exp_carte = document.getElementsByName("date_exp")[0].value;
var cvv_carte = document.getElementsByName("cvv")[0].value;
formData.append('nom_carte', nom_carte);
formData.append('num_carte', num_carte);
formData.append('date_exp_carte', date_exp_carte);
formData.append('cvv_carte', cvv_carte);
}
else if (String(menu) === String("sepa")) {
var nom_compte = document.getElementsByName("nom_compte")[0].value;
var iban = document.getElementsByName("num_iban")[0].value;
var bic = document.getElementsByName("bic")[0].value;
formData.append('nom_compte', nom_compte);
formData.append('iban', iban);
formData.append('bic', bic);
}
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setmyApiResponse(result['status']);
setResult(result['message']);
if (String(result['status']) === String("true")) {
setpaymentadded("1");
}
else {
setpaymentadded("0");
}
})
.catch((error) => {
console.error('Error:', error);
setmyApiResponse("false");
setpaymentadded("0");
});
};
const [mynote, setmynote] = useState("");
function CheckCardNumber(e) {
const val = e.target.value;
if (!isNaN(val) && String(val).length <= 16) {
setmynote(val);
}
else {
document.getElementById("num_carte").value = mynote;
}
}
const [dateexp, setdateexp] = useState("");
function Onleave_expdate_exp(e){
const regex = /^\d{2}\/\d{2}$/;
var val = document.getElementById("date_exp").value
const found = val.match(regex);
if (!found) {
setdateexp("");
document.getElementById("date_exp").value = "";
}
}
function Checkdate_expdate_exp(e) {
const val = e.target.value;
if (String(val).length < 6) {
setdateexp(val);
}
if (String(val).length == 6) {
const regex = /^\d{2}\/\d{2}$/;
const found = dateexp.match(regex);
if (!found) {
alert(" pas bon ");
}
}
if (String(val).length > 6) {
document.getElementById("date_exp").value = dateexp;
}
}
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div className="paymentmethode">
<div className="div_row_central">
{String(paymentadded) === String("1") && <div className="okUpdateData">
Le mode de Paiement a été correctement ajouté
</div>
}
{String(paymentadded) === String("0") && <div className="koUpdateData">
{result}
</div>
}
<div className="titre1" onClick={menu_cb}> Prélèvement par carte bancaire </div>
{String(menu) === String("cb") && <div>
<div className="div_row_gauche"> Carte Bancaire </div>
<div className="div_row_droite" style={{ "textAlign": "right" }}>
<img src={img_visa_mastercard} className="img_payment" /> &nbsp;
<img src={img_paypal} className="img_payment" />
</div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Nom inscrit sur la carte"
name="nom_carte"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
onChange={CheckCardNumber}
label="Numéro de carte"
name="num_carte"
id="num_carte"
autoComplete="off"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
label="Expiration (MM/AA)"
name="date_exp"
id="date_exp"
autoComplete="new-qsq"
value={dateexp}
className="texte_area"
sx={{ m: 1, width: '45%' }}
onChange={Checkdate_expdate_exp}
onBlur={Onleave_expdate_exp}
variant="standard"
/>
<TextField
required
autoComplete='off'
label="CVV"
name="cvv"
className="texte_area"
sx={{ m: 1, width: '45%' }}
variant="standard"
/>
</Box>
</div>
}
</div>
<hr />
<div className="div_row_central">
<div className="titre1" onClick={menu_sepa}> Prélèvement par virement SEPA</div>
{String(menu) === String("sepa") && <div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
label="Nom du titulaire du compte"
name="nom_compte"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
label="IBAN"
name="num_iban"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
<TextField
required
label="BIC"
name="bic"
className="texte_area"
sx={{ m: 1, width: '95%' }}
variant="standard"
/>
</Box>
</div>}
</div>
<hr />
<div className="div_row_centre">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregister</Button>
</div>
</div>
);
}
export default PaymentMethodeNoConnect;

View File

@ -0,0 +1,667 @@
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 = "80%";
document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_mensuel2")[0].style.opacity = "100%";
document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_annuel2")[0].style.opacity = "80%";
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 = "80%";
document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("bton_annuel2")[0].style.opacity = "100%";
document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#F8F9F9";
document.getElementsByName("bton_mensuel2")[0].style.opacity = "80%";
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">
<Helmet>
<title>Produits & Services</title>
<meta name="description" content="Produits et Services" />
<meta name="robots" content="index,follow" />
<meta name="title" content="Produits et Services" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/mysy-training-login/0/0"} />
</Helmet>
{/*
<Menu
keepMounted
anchorEl={PartnerMenu}
onClose={PartnerMenu_Close}
open={Boolean(PartnerMenu)}
style={{ "top": "2rem" }}
>
<MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Mon Compte</MenuItem>
<MenuItem onClick={PartnerMenu_Close} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={AccountMenu}
onClose={AccountMenu_Close}
open={Boolean(AccountMenu)}
style={{ "top": "2rem" }}
>
<MenuItem onClick={handleAccountConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Connexion</MenuItem>
<MenuItem onClick={handleAccountCreation} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Creation</MenuItem>
<MenuItem onClick={AccountMenu_Close} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Deconnexion</MenuItem>
</Menu>
<div className="div_row2">
<div className="div_row_bas">
<div className="div_001">
<div className="div_002">
<a href={process.env.REACT_APP_BASE_URL}> <img class="img-responsive img_logo" src={logowhite} alt="MySy Training Technology" /> </a>
<h1 className="h1_transparent">Produits et Services </h1>
</div>
<div className="div_003">
<div className="menuPrincipal" onClick={handlePartnerMenu}>
<b> Partenaire </b>
</div>
<div className="menuPrincipal" onClick={handleAccountMenu}>
Mon Compte
</div>
<div className="menuPrincipal" onClick={(e) => {
e.preventDefault();
window.location.href = "/recherche-formation";
}}>
Accueil
</div>
<div className="menuPrincipal" onClick={(e) => {
e.preventDefault();
window.location.href = "/Recherche-Article-formation";
}}>
Articles
</div>
</div>
</div>
<div className="text_head">
<hr className="div_004" />
<font style={{ "color": "#81BC3A", "fontWeight": "bold" }}>Nos </font> Produits & Services
</div>
</div>
</div>*/}
<Header />
<div className="div_mobile">
<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 style={{ "textAlign": "center", "marginBottom": "1rem", "fontSize": "small" }}>
<label>
{periode} &nbsp; <Switch onChange={handleChange} checked={check} />
</label>
</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">
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" }}>
&nbsp;
</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">
&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.5rem" }}>
&nbsp;
</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") && "350 €/mois"}
{String(periode) === String("Annuel") && "1 500 €/an - (2 mois offerts)"}
</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.5rem" }}>
&nbsp;
</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">
&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 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={"devise2"} name={"devise2"} >
<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_mensuel2" name="bton_mensuel2">Mensuelle
</button>
<button
onClick={Clik_bton_annuel}
className="bton_radius_droite"
id="bton_annuel2" name="bton_annuel2">Annuelle
</button>
</div>
</div>
{/* <div className="div_row">
<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 className="div_row_basique_price">
Gratuit
</div>
<div className="div_row_standard_price">
{String(periode) === String("Mensuel") && "350 €/mois"}
{String(periode) === String("Annuel") && "1 500 €/an - (2 mois offerts)"}
</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_sur_mesure_price">
CONTACTEZ-NOUS
</div>
</div> ---*/}
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default ProduitsServices;

View File

@ -0,0 +1,34 @@
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { Helmet } from "react-helmet";
import DisplayUserGoals from "./DisplayUserGoals";
function ProfilObjectif() {
const history = useHistory();
return (
<div className="profilobjectif">
<h3> En cours de construction </h3>
<div className="div_row">
<nav className="titre1"> Liste des profils </nav>
</div>
<hr />
<div className="div_row">
<nav className="titre1"> Liste des objectifs </nav> <br />
<DisplayUserGoals />
</div>
</div>
);
}
export default ProfilObjectif;

View File

@ -0,0 +1,333 @@
import Navigation from "../components/Navigation";
import { Helmet } from "react-helmet";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import notrevisionimg from "../mysy_img/notre_vision.png";
import entrepriseimg from "../mysy_img/batiment-3d.png"
import particulierimg from "../mysy_img/particulier.png"
import descriptionimg from "../mysy_img/description.png"
import ousommesnousimg from "../mysy_img/mysy_training_technology_ici.png"
import sloganimg from "../mysy_img/slogan.png"
import GoogleMapReact from 'google-map-react';
import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Header from "./Header";
import Button from '@mui/material/Button';
import img_1 from "../mysy_img/1.jpg";
import img_2 from "../mysy_img/2.jpg";
import img_3 from "../mysy_img/3.jpg";
const quisommesnous = () => {
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={18}
defaultCenter={{ lat: 48.866669, lng: 2.33333 }}
>
{props.isMarkerShown && <Marker position={{ lat: 48.866669, lng: 2.33333 }} />}
</GoogleMap>
))
return (
<div className="quisommesnous">
<Helmet>
<title>MySy Training, qui sommes nous ?</title>
<meta name="description" content="Nous sommes une base de données uniquement dediée aux formations et tutoriels" />
<meta name="robots" content="index,follow" />
<meta name="title" content="Trouver des Formations.Acces libre.Qualité top" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/QuiSommesNous"} />
</Helmet>
<Header />
<div className="div_mobile">
<div className="div_row_presenation" >
<div className="div_row_img1">
<img src={img_1} alt="MySy Training Technology" className="img_1" />
</div>
<div className="div_row_img2">
<img src={img_2} alt="MySy Training Technology" className="img_1" />
</div>
<div className="div_row_img3">
<img src={img_3} alt="MySy Training Technology" className="img_1" />
</div>
</div>
<div className="div_row_center">
<h1 className="div_row_center_text">Forgez la réussite de votre entreprise.</h1>
<div className="div_row_center_enphasis" >Stratégie. Organisation. Croissance.</div>
</div>
<div className="div_row_center_contact">
<Button variant="outlined" onClick={"menu_info"} className="bton_contact_nous"> Contactez-Nous</Button>
</div>
<div className="div_row_presenation" >
<div className="div_row_line1">
<div className="text_head_new">
À PROPOS
</div>
<hr />
<div className="text_desc">
MySy Training Technology est un moteur de recherche exclusivement dédié à la formation. Il met le profil de lutilisateur au cœur du système pour trouver la formation la plus adaptée à sa situation.
Des algorithmes spécifiquement conçus pour le monde de la formation nous permettent dadresser un large éventail de profils.
Quelque soit votre situation, ...</div>
<br /> <br />
<div className="text_desc"> &nbsp;
</div>
</div>
<div className="div_row_line2">
<div className="text_head_new">
NOTRE VISION
</div>
<hr />
<div className="text_desc">
Permettre à chaque personne de trouver la formation quil lui faut<br/>
Prendre en compte vos contraintes, votre réalité pour vous accompagner dans votre montée en compétence réelle et réaliste <br/>
Aiguiller les futurs apprenants vers le chemin le plus direct
</div>
<br /> <br />
<div className="text_desc"> &nbsp;
</div>
</div>
<div className="div_row_line3">
<div className="text_head_new">
SERVICES
</div>
<hr />
<div className="text_desc">
<ul>
<li className="myli">
Identifier la formation quil vous faut
</li>
<li className="myli">
Viser au plus juste la réponse au besoin
</li>
<li className="myli">
Aligner la formation des collaborateurs avec la stratégie de lentreprise
</li>
<li className="myli">
Maitriser et piloter votre budget
</li>
</ul>
</div>
<br /> <br />
<div className="text_desc">&nbsp;
</div>
</div>
</div>
{/*
<div className="div_row">
<div className="nom_prenom"> Description </div>
<div className="div_row_gauche">
<img class="img-responsive img_gauche_taille" src={descriptionimg} alt="Description MySy training Technology" />
</div>
<div className="div_row_droite" id="desc" >
MySy Training Technology est un moteur de recherche exclusivement dédié à la formation. Il met le profil de lutilisateur au cœur du système pour trouver la formation la plus adaptée à sa situation.
Des algorithmes spécifiquement conçus pour le monde de la formation nous permettent dadresser un large éventail de profils.
Quelque soit votre situation, que vous soyez malvoyant, mal entendant, tout simplement à la recherche de la formation qui prend en compte vos besoins, le moteur de recherche MySy-T est pour vous.
</div>
</div>
<div className="div_row">
<div className="nom_prenom"> Notre Vision </div>
<div className="div_row_gauche">
<img class="img-responsive img_gauche_taille" src={notrevisionimg} alt="Vision MySy Technology" />
</div>
<div className="div_row_droite" id="vision">
<li>
Permettre à chaque personne de trouver la formation quil lui faut
</li>
<li>
Prendre en compte vos contraintes, votre réalité pour vous accompagner dans votre montée en compétence réelle et réaliste
</li>
<li>
Aiguiller les futurs apprenants vers le chemin le plus direct
</li>
</div>
</div>
<div className="div_row">
<div className="nom_prenom">Notre devise </div>
<div className="div_row_gauche">
<img class="img-responsive img_gauche_taille" src={sloganimg} alt="Slogan MySy Technology" />
</div>
<div className="div_row_droite">
Quel que soit votre situation, que vous soyez malvoyant, mal entendant, le moteur de recherche MySy-T vous trouve la formation quil vous faut.
</div>
</div>
<div className="div_row">
<div className="nom_prenom">Nos solution pour les entreprises </div>
<div className="div_row_gauche">
<img class="img-responsive" src={entrepriseimg} style={{ maxWidth: '50%' }} />
</div>
<div className="div_row_droite" >
<li>
Aligner la formation des collaborateurs avec la stratégie de lentreprise
</li>
<li>
Maitriser et piloter votre budget
</li>
<li>
Retrouver de la souplesse et de lautonomie dans le choix et la durée des formations
</li>
</div>
</div>
<div className="div_row">
<div className="nom_prenom">Nos solution pour les particuliers </div>
<div className="div_row_gauche">
<img class="img-responsive img_gauche_taille" src={particulierimg} />
</div>
<div className="div_row_droite" >
<li>
Identifier la formation quil vous faut
</li>
<li>
Donner de lautonomie à lapprenant
</li>
<li>
Viser au plus juste la réponse au besoin
</li>
</div>
</div>
*/}
<div className="div_row_where">
<div className="text_head_new">
OU NOUS TROUVER ?
</div>
<div className="div_carte">
<a target="_blank"
href="https://www.google.com/maps/place/MySy+Training+Technology/@48.8761591,2.3260624,15z/data=!4m5!3m4!1s0x0:0x8239ba23406c9699!8m2!3d48.8761591!4d2.3260624">
<img src={ousommesnousimg} alt="logo MySy Technology ou sommes nous" style={{ 'width': "100%", 'height': '50%' }} />
</a>
</div>
<div className="div_adresse" >
<br />
<div>MySy Training Technology<br />
</div>
<div style={{ fontSize: "x-small" }}>
Adresse : 1 Cr du Havre, 75008 Paris <br />
Adresse email :
<a href="mailto: contact@mysy-training.com?subject=Mail from mysy website" target="_blank"> contact@mysy-training.com</a> <br />
Téléphone fixe : +331 77 00 38 57<br />
Téléphone : +337 69 20 39 45<br />
</div>
<br />
<div> Sur nos reseaux sociaux
<div style={{ 'float': "center", "textAlign": "center" }}>
<div className="media_sociaux">
<FacebookShareButton
url={"https://www.facebook.com/MySy-Training-114572794561371/"}
>
<SocialIcon network="facebook" className="SocialIcon" />
</FacebookShareButton>
&nbsp;
<TwitterShareButton
url={"https://twitter.com/mysy_training"}
hashtag={"#MySyTraining"}
>
<SocialIcon network="twitter" className="SocialIcon" />
</TwitterShareButton>
&nbsp;
<LinkedinShareButton
url={"https://www.linkedin.com/"}
summary={"ee"}
source={"https://www.linkedin.com/in/mysy-training-96b53a237/"}
>
<SocialIcon network="linkedin" className="SocialIcon" />
</LinkedinShareButton>
</div>
</div>
</div>
</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
}
export default quisommesnous;

2767
src/components/Recherche.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,641 @@
import React, { useRef, useState, useMemo, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
import Articles from "../components/Article";
import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
import { BsFillXCircleFill } from "react-icons/bs";
import { IoAddSharp } from "react-icons/io5";
import bannerimg from "../mysy_img/MYSY_banner_compte.png";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import Pagination from "./TestPagination";
import data from "./data/mock-data.json";
import { useHistory } from "react-router-dom";
import { getCookie, removeCookie } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
import Button from '@mui/material/Button';
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import Header from "./Header";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import connect_white from "../mysy_img/connect_white_v2.png";
import connect_green from "../mysy_img/connect_green.png";
let PageSize = 5;
const RechercheArticles = (props) => {
const [userconnected, setuserconnected] = useState("");
const [SearchText, setSearchText] = useState("");
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("false");
const [displayAllClasses, setdisplayAllClasses] = useState(true);
const [showelement, setshowelement] = useState("init");
const [country_code, setcountry_code] = useState("");
const [country_name, setcountry_name] = useState("");
const [city, setcity] = useState("");
const [postal, setpostal] = useState("");
const [latitude, setlatitude] = useState("");
const [longitude, setlongitude] = useState("");
const [IPv4, setIPv4] = useState("");
const [state, setstate] = useState("");
const [userIp, setuserIp] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [currentPage2, setCurrentPage2] = useState(1);
const [fin, setfin] = useState(0);
const [ismobilephone, setismobilephone] = useState();
const [TrainingDistanciel, setTrainingDistanciel] = useState();
const stored_user = getCookie('tokenmysych');
const history = useHistory();
const url = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
const {
register,
formState: { errors },
handleSubmit,
watch,
} = useForm();
const pwd = useRef({});
pwd.current = watch("pwd", "");
const onSubmit = async (data) => {
const formData = new FormData();
//await sleep(20);
formData.append('search_text', data.name);
formData.append('name', data.name);
formData.append('surname', data.surname);
formData.append('email', data.email);
formData.append('pwd', data.pwd);
const res = await fetch(
url,
{
method: "POST",
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: formData,
}
);
const results = await res.json();
console.log(results);
};
const [Trainingdistance, setTrainingdistance] = useState(0);
const handleInput = (e) => {
setTrainingdistance(e.target.value);
}
const [Trainingduration, setTrainingduration] = useState(0);
const handleInputDuration = (e) => {
setTrainingduration(e.target.value);
}
function showdisplayfilter(event) {
if (showelement == "true") {
setshowelement("false");
}
else if (showelement == "false") {
setshowelement("true");
}
}
function clearsearchtext(event) {
setSearchText("");
document.getElementById("SearchText").value = "";
}
function SearchTextHandle(event) {
setSearchText(event.target.value);
}
function displayAllClassesHandle(event) {
setdisplayAllClasses(event.target.checked);
if (event.target.checked == true)
document.getElementById("SearchText").disabled = true;
else
document.getElementById("SearchText").disabled = false;
}
function searchFunction(e) {
var token = "";
if (typeof (stored_user) != "undefined") {
token = stored_user
}
var form = new FormData();
form.append("search_text", SearchText);
form.append("token", token);
// Ajout des info IP user
form.append("user_ip", IPv4);
form.append("user_country_code", country_code);
form.append("user_country_name", country_name);
form.append("user_city", city);
form.append("user_postal", postal);
form.append("user_latitude", latitude);
form.append("user_longitude", longitude);
form.append("user_state", state);
var myurl = ""
/* if (document.getElementById("allelement").checked !== true &&
document.getElementById("SearchText").disabled !== true) {
//alert(" recherche classique laaa ");
myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_articles_avis/";
}
else if (document.getElementById("allelement").checked === true &&
document.getElementById("SearchText").disabled === true) {
myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/";
}*/
myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/";
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);
setmyApiResponse("True");
setResult(res.data.message)
//setmyApimyApiMessage("OK")
////console.log("taille = "+res.data.message.length);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("False");
//setmyApimyApiMessage("")
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
//setmyApimyApiMessage("")
})
}
const currentTableData2 = useMemo(() => {
if (result) {
const firstPageIndex = (currentPage2 - 1) * PageSize;
const lastPageIndex = firstPageIndex + PageSize;
setfin(1);
return result.slice(firstPageIndex, lastPageIndex);
}
else {
return [];
setfin(0);
}
}, [currentPage2]);
useEffect(() => {
setdisplayAllClasses("true");
async function chloadfunction() {
document.getElementById("allelement").checked = true;
// document.getElementById("SearchText").disabled = true;
}
chloadfunction();
searchFunction();
whosisconnected();
}, []);
const [PartnerMenu, setPartnerMenu] = React.useState(null);
const [AccountMenu, setAccountMenu] = React.useState(null);
const [someoneconnected, setsomeoneconnected] = useState("0");
const [partnerconnected, setpartnerconnected] = useState("0");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const stored_part = getCookie('tokenmysypart');
function whosisconnected() {
var local_user_connect = 0;
var local_part_connect = 0;
if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
setuserconnected("0");
local_user_connect = 0;
} else {
setuserconnected("1");
setsomeoneconnected("1");
local_user_connect = 1;
//alert(" user connected OK");
}
if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
setpartnerconnected("0");
local_part_connect = 0;
} else {
setpartnerconnected("1");
setsomeoneconnected("1");
local_part_connect = 1;
// alert(" partner connected OK");
}
}
function handleAccountLogout() {
if (String(userconnected) === String("1")) {
user_logout();
}
else if (String(partnerconnected) === String("1")) {
part_logout();
}
}
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Yes',
onClick: () => user_logout_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
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 handleMyAccount = () => {
setAccountMenu(null);
history.push("/mysy-user-account")
};
const handleAccountCreation = () => {
setAccountMenu(null);
history.push("/create_account")
};
const handlePartnerConnexion = () => {
setAccountMenu(null);
history.push("/PartnerLogin")
};
function user_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_user) != "undefined") {
setCookie("tokenmysych", "");
}
history.push("/recherche-formation");
}
function user_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (user)',
buttons: [
{
label: 'Yes',
onClick: () => user_logout_confirmation()
},
{
label: 'No',
onClick: () => { return }
}
]
});
}
const handleMyPartnerAccount = () => {
setAccountMenu(null);
history.push("/Partner")
};
const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
function handleAccountConnexion_v2() {
if (String(userconnected) === String("1")) {
handleMyAccount();
}
else if (String(partnerconnected) === String("1")) {
handleMyPartnerAccount();
}
}
function part_logout_confirmation() {
/* si c'est une connexion partner qui est active */
if (typeof (stored_part) != "undefined") {
setpartCookie("tokenmysypart", "");
}
history.push("/recherche-formation");
}
function part_logout() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion (pro)',
buttons: [
{
label: 'Oui',
onClick: () => part_logout_confirmation()
},
{
label: 'Non',
onClick: () => { return }
}
]
});
}
const [ProduitMenu, setproduitMenu] = React.useState(null);
const [AvisMenu, setavisMenu] = React.useState(null);
const handleProduitMenu = (event) => {
setproduitMenu(event.currentTarget);
};
const handleProduitService = () => {
setproduitMenu(null);
history.push("/Produits-Services/")
};
const ProduitMenu_Close = () => {
setproduitMenu(null);
};
function publiecatalogue(){
history.push("/Partner", {mysy_arg:'partner'});
}
return (
<div className="recherche_style RechercheArticles">
<Helmet>
<title>Recherche articles formation</title>
<meta name="description" content="Liste des articles sur les formations" />
<meta name="robots" content="index,follow" />
</Helmet>
<Menu
keepMounted
anchorEl={PartnerMenu}
onClose={PartnerMenu_Close}
open={Boolean(PartnerMenu)}
style={{ "top": "2rem" }}
>
<MenuItem onClick={handlePartnerConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Mon Compte</MenuItem>
<MenuItem onClick={PartnerMenu_Close} className="mymenu_item"
style={{ "fontSize": "0.7rem" }} >Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={AccountMenu}
onClose={AccountMenu_Close}
open={Boolean(AccountMenu)}
style={{ "top": "2rem" }}
> <MenuItem onClick={handleMyAccount} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Mon Compte</MenuItem>
<MenuItem onClick={handleAccountConnexion} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Connexion</MenuItem>
<MenuItem onClick={handleAccountCreation} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Creation</MenuItem>
<MenuItem onClick={AccountMenu_Close} className="mymenu_item"
style={{ "fontSize": "0.7rem" }}>Deconnexion</MenuItem>
</Menu>
<Menu
keepMounted
anchorEl={ProduitMenu}
onClose={ProduitMenu_Close}
open={Boolean(ProduitMenu)}
style={{ "top": "2rem" }} >
<MenuItem onClick={handleProduitService} className="mymenu_item">
<button className='bton_menu'>Nos produits & Services </button></MenuItem>
</Menu>
<div className="div_row2">
<div className="div_row_bas">
<div className="div_001">
<div className="div_002">
<a href={process.env.REACT_APP_BASE_URL}> <img class="img-responsive img_logo" src={logowhite} alt="MySy Training Technology" /> </a>
</div>
<div className="div_003">
<h1 className="h1_transparent">Recherche Formations Tutoriels</h1>
<div className="menuPrincipal_bton" onClick={handleAccountConnexion}>
<div style={{ "textAlign": "left" }}>
{String(someoneconnected) !== String("1") && <button className="buton_ch22" onClick={handleAccountConnexion}> <img src={connect_white}
style={{ "width": "25%" }} /> Connexion
</button>}
{String(someoneconnected) === String("1") && <button className="buton_ch22" onClick={handleAccountLogout}> Deconnexion<img src={connect_green}
style={{ "width": "25%" }} />
</button>}
</div>
</div>
{String(someoneconnected) === String("1") && <div className="menuPrincipal" onClick={handleAccountConnexion_v2}>
Mon Compte
</div>}
{String(someoneconnected) !== String("1") && <div className="menuPrincipal" onClick={handleAccountCreation}>
S'inscrire
</div>}
<div className="menuPrincipal" onClick={handleProduitMenu}>
Nos Services
</div>
<div className="menuPrincipal" onClick={publiecatalogue}
style={{"background":"red", "borderRadius":"5px", "paddingLeft":"3px", "paddingRight":"3px"}}>
publier mes formations
</div>
</div>
</div>
<div className="text_head">
<hr className="div_004" />
<font style={{ "color": "#81BC3A", "fontWeight": "bold" }}>Recherche </font> de Formations & Tutoriels
</div>
<form onSubmit={handleSubmit(onSubmit)} className="div_005">
<div class="form">
{/* <i class="fa fa-search"></i>
<input
type="text"
class="form-control form-input"
placeholder="Search Texte (Title, Description)"
onChange={SearchTextHandle}
id={"SearchText"}
name={"SearchText"}
/>
{SearchText.length > 2 && <span_clear> <BsFillXCircleFill onClick={clearsearchtext} /> </span_clear>} <span class="left-pan" > &nbsp;<FaSearch onClick={searchFunction} /></span>
*/}
</div>
</form>
</div>
</div>
<div className="div_mobile">
<div>
{showelement === "true" && <div onClick={showdisplayfilter} className="recherchefilter">
<div className="recherchedivgauche">Masquer les filtres</div>
<div className="recherchedivdroite"> <FaRegArrowAltCircleUp /> </div>
</div>
}
{showelement === "false" && <div onClick={showdisplayfilter} className="recherchefilter">
<div className="recherchedivgauche">Afficher les filtres</div>
<div className="recherchedivdroite"> <FaRegArrowAltCircleDown /> </div>
</div>
}
<div className="rech_middlebox">
<div style={{ "display": "none" }}>
<label className="default_font">
<i>Afficher tous nos articles :</i> &nbsp;&nbsp;
<input type="checkbox"
onChange={displayAllClassesHandle}
id="allelement"
name="allelement" />
</label>
</div>
{myApiResponse == "False" && <div className="koUpdateData">
Impossible de contacter l'hote distant
</div>}
{result && myApiResponse === "True" && <div className="okUpdateData">
<Pagination
className="pagination-bar"
currentPage={currentPage2}
totalCount={result.length}
pageSize={PageSize}
onPageChange={page => setCurrentPage2(page)}
/>
</div>}
{result && myApiResponse == "True" && fin == 0 && result.slice(0, PageSize).map((article) => (
<div className="rech_list_formation2">
<Articles article={JSON.parse(article)} key={JSON.parse(article).title_formation} />
</div>
))}
{result && myApiResponse === "True" && fin === 1 && currentTableData2 && currentTableData2.map((formation) => (
<div className="rech_list_formation2">
<Articles article={JSON.parse(formation)} key={JSON.parse(formation).title_formation} />
</div>
))}
{result && <div>
<Pagination
className="pagination-bar"
currentPage={currentPage2}
totalCount={result.length}
pageSize={PageSize}
onPageChange={page => setCurrentPage2(page)}
/>
</div>
}
</div>
</div>
<br />
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
)
}
export default RechercheArticles;

File diff suppressed because it is too large Load Diff

133
src/components/Register.js Normal file
View File

@ -0,0 +1,133 @@
import React, { useRef, useState } from "react";
import { useForm } from "react-hook-form";
function Register() {
const url = process.env.REACT_APP_API_URL+"myclass/api/add_user_account/";
const {
register,
formState: { errors },
handleSubmit,
watch,
} = useForm();
const pwd = useRef({});
pwd.current = watch("pwd", "");
const [result, setResult] = useState("");
const onSubmit = async (data) => {
const formData = new FormData();
formData.append('name', data.name);
formData.append('surname', data.surname);
formData.append('email', data.email);
formData.append('pwd', data.pwd);
const res = await fetch(
url,
{
method: "POST",
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: formData,
}
);
const results = await res.json();
console.log(results);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<h1>Créer votre compte</h1>
<h3>Inscription rapide</h3>
<div>
<input
{...register("name", {
pattern: /^[A-Za-z]+$/i,
required: true,
maxLength: 20,
})}
placeholder="First name"
/>
{errors.name?.type === "required" && "First name is required*"}
</div>
<div>
<input
{...register("surname", {
pattern: /^[A-Za-z]+$/i,
required: true,
maxLength: 20,
})}
placeholder="Last name"
/>
{errors.surname?.type === "required" &&
"Last name is required*"}
</div>
<div>
<input
{...register("email", {
required: true,
pattern:
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
})}
placeholder="Email"
/>
{errors.email?.type === "required" && "Email is required*"}
{errors.email?.type === "pattern" && "Enter a valid email"}
</div>
{/* <div>
<input
{...register("Identifiant", {
pattern: /^[A-Za-z]+$/i,
required: true,
maxLength: 20,
})}
placeholder="Identifiant"
/>
{errors.Identifiant?.type === "required" &&
"Identifiant is required*"}
</div> */}
<div>
<input
type="password"
{...register("pwd", {
required: "You must specify a password",
minLength: {
value: 8,
message: "Password must have at least 8 characters",
},
})}
placeholder="password"
/>
{errors.pwd && <p>{errors.pwd.message}</p>}
</div>
<div>
<input
type="password"
{...register("pwd_repeat", {
validate: (value) =>
value === pwd.current ||
"The passwords do not match",
})}
placeholder="repeat password"
/>
{errors.pwd_repeat && <p>{errors.pwd_repeat.message}</p>}
</div>
<p>{result}</p>
<div>
<input type="submit" />
</div>
</form>
);
}
export default Register;

View File

@ -0,0 +1,329 @@
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 { Helmet } from "react-helmet";
import FormControl from '@mui/material/FormControl';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import OutlinedInput from '@mui/material/OutlinedInput';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import IconButton from '@mui/material/IconButton';
import Header from "./Header";
import Footer from "./Fotter";
function ResetUserPwd() {
const { token, accounttype } = useParams();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("");
const [fields1desabled, setfields1desabled] = useState(true);
const [values, setValues] = React.useState({
amount: '',
password: '',
weight: '',
weightRange: '',
showPassword: false,
});
const [updatepwd, setupdatepwd] = useState();
const [newpawdvisible, setnewpawdvisible] = useState(false);
const [confpwdvisible, setconfpwdvisible] = useState(false);
const [pwdfieldsdesabled, setpwdfieldsdesabled] = useState(true);
const [valuesPass2, setValuesPass2] = React.useState({
password2: '',
showPassword2: false,
});
const [valuesPass3, setValuesPass3] = React.useState({
password3: '',
showPassword3: false,
});
const history = useHistory();
// Verification de la valididé du token
function IsTokenValide(e) {
var form = new FormData();
form.append("token", token);
form.append("accounttype", accounttype);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/IsUserTokenValide/";
//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);
setmyApiResponse("true");
setResult(res.data.message);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("false");
setResult(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
//setmyApimyApiMessage("")
})
}
useEffect(() => {
IsTokenValide();
})
const handleClickShowPassword_new_pwd = () => {
if (newpawdvisible == false) {
document.getElementsByName("new_pwd")[0].type = "text";
setnewpawdvisible(true);
}
else if (newpawdvisible == true) {
document.getElementsByName("new_pwd")[0].type = "password";
setnewpawdvisible(false);
}
};
function handleChange2(prop) {
return (event) => {
setValuesPass2({ ...valuesPass2, [prop]: event.target.value });
};
}
function handleChange3(prop) {
return (event) => {
setValuesPass3({ ...valuesPass3, [prop]: event.target.value });
};
}
const handleClickShowPassword_new_pwd_conf = () => {
if (confpwdvisible == false) {
document.getElementsByName("new_pwd_conf")[0].type = "text";
setconfpwdvisible(true);
}
else if (confpwdvisible == true) {
document.getElementsByName("new_pwd_conf")[0].type = "password";
setconfpwdvisible(false);
}
};
function UpdateUserPwd() {
setupdatepwd(false);
const url = process.env.REACT_APP_API_URL + "myclass/api/Reset_user_pwd_by_token/";
const formData = new FormData();
var new_pwd = document.getElementsByName("new_pwd")[0].value;
var conf_new_pwd = document.getElementsByName("new_pwd_conf")[0].value;
document.getElementsByName("identique")[0].style.backgroundColor = "white";
if (new_pwd !== conf_new_pwd) {
document.getElementsByName("identique")[0].style.backgroundColor = "red";
return
}
document.getElementsByName("caractere")[0].style.backgroundColor = "white";
if (String(new_pwd).length < 8) {
document.getElementsByName("caractere")[0].style.backgroundColor = "red";
return
}
var regex = /\d/g;
document.getElementsByName("nombre")[0].style.backgroundColor = "white";
if (!regex.test(new_pwd)) {
document.getElementsByName("nombre")[0].style.backgroundColor = "red";
return
}
const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
document.getElementsByName("special")[0].style.backgroundColor = "white";
if (!specialChars.test(new_pwd)) {
document.getElementsByName("special")[0].style.backgroundColor = "red";
return
}
formData.append('token', token);
formData.append('new_pwd', new_pwd);
formData.append('conf_new_pwd', conf_new_pwd);
formData.append("accounttype", accounttype);
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setResult(result['message']);
if (String(result['status']) == String("true")) {
setmyApiResponse("true");
setupdatepwd(true);
setfields1desabled(true);
alert(" le mot de passe à bien été mis à jour");
history.push("/mysy-user-account");
}
else {
setmyApiResponse("false");
}
})
.catch((error) => {
console.error('Error:', error);
setmyApiResponse("false");
setupdatepwd(false);
});
}
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return (
<div className="resetuserpwd">
<Helmet>
<title>Connexion utilisateur formation</title>
<meta name="description" content="utisateur formation connexion" />
<meta name="robots" content="index,follow" />
</Helmet>
<Header />
<div className="div_mobile">
{/* hello reset user pwd, tock = {token} <br/>
{}
check api = {result} */}
<div >
<div>
&nbsp;
</div>
<nav className="title"> Reinitialisation du mot de passe {accounttype} </nav>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 } }}>
<br />
<FormControl sx={{ m: 1, }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password2">Mot de passe</InputLabel>
<OutlinedInput
id="new_pwd"
name="new_pwd"
type={values.showPassword ? 'text' : 'password'}
value={values.password2}
onChange={handleChange2('password2')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd}
edge="end"
>
{newpawdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Password 2"
/>
</FormControl>
<FormControl sx={{ m: 1, }} variant="standard" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password">Confirme mot de passe</InputLabel>
<OutlinedInput
id="new_pwd_conf"
name="new_pwd_conf"
type={values.showPassword ? 'text' : 'password'}
value={values.password3}
onChange={handleChange3('password3')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd_conf}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{confpwdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label="Password"
/>
</FormControl>
<div className="div_row2">
<Button variant="contained" color="success" className="div_row2 btn_modif" onClick={UpdateUserPwd}>Modifier</Button>
</div>
</Box>
<div className="text_pwd_crit">
Créez un mot de passe contenant au moins :
<ul>
<li name="caractere">
8 caractères
</li>
<li name="nombre">
1 nombre
</li>
<li name="special">
1 caractère spécial p. ex., $, !, @, %, &
</li>
<li name="identique">
Identiques
</li>
</ul>
</div>
{String(myApiResponse) === String("false") && <div className="koUpdateData">
{result} <br />
Impossible de mettre à jour le mot de passe.<br />
</div>}
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
</div>
)
};
export default ResetUserPwd;

View File

@ -0,0 +1,16 @@
import React from "react";
const ResultSearch = (props) => {
//console.log(" MY PROPS = "+props)
return(
<div className={"resultsearch"}>
<h1> Ici le resultat de ma recherche </h1>
</div>
)
}
export default ResultSearch;

View File

@ -0,0 +1,42 @@
import React, { useState } from "react";
const SearchBar = () => {
const [apiUrl, SetapiUrl] = useState("https://restcountries.com/v3.1/lang/");
function toto(e) {
e.preventDefault();
var local_api = apiUrl;
var search_value = document.getElementById("search").value;
if( search_value.length === 0 )
alert("WRONG search_value "+search_value+" taille = "+search_value.length);
else {
local_api = apiUrl+search_value;
alert(" la nouvelle api = "+local_api);
}
}
return (
<div className={"searchbar"}>
<div className="container justify-content-center">
<div className="row">
<div className="col-md-8">
<div className="input-group mb-3">
<input type="text" className="form-control input-text" id="search" name="search"
placeholder="La recherche sur : titre, obj pédagogique, formateur "
aria-label="Recipient's username" aria-describedby="basic-addon2"/>
</div>
</div>
</div>
</div>
</div>
);
}
export default SearchBar;

32
src/components/SeekBar.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react'
function SeekBar({ played, duration,setPlayed }) {
const secToHHMMSS = (secs) => {
const pad = (num) => {
return ("0" + num).slice(-2);
}
var minutes = Math.floor(secs / 60);
secs = secs % 60;
var hours = Math.floor(minutes / 60)
minutes = minutes % 60;
if(hours === 0) {return `${pad(minutes)}:${pad(secs)}`;}
else if(hours !== 0){return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;}
}
var newPlayed = secToHHMMSS(Math.round(played));
var newDuration = secToHHMMSS(duration);
return (
<div style={{ marginBottom: '10vh' }}>
<input style={{ width: '90%', margin: '0 5% 0 5%', height: '2px',borderRadius:'10%' }} className="slider"
type='range' min={0} value={Math.round(played)} max={duration}
onChange={e => setPlayed(e.target.value)}/>
<span style={{ float: 'left', marginLeft: '5%', marginTop:'3%' }}>{newPlayed}</span>
<span style={{ float: 'right', marginRight: '5%', marginTop:'3%' }}>{newDuration}</span>
</div>
)
}
export default SeekBar

581
src/components/SignIn.js Normal file
View File

@ -0,0 +1,581 @@
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 bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.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 Button2 from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import Header from "./Header";
import { useLocation } from "react-router-dom";
function SignIn() {
const [isconnected, setisconnected] = useState("");
const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
const [retval, setretval] = useState("0");
const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
const [initpasswd, setinitpasswd] = useState();
const [result, setResult] = useState("");
const [myApiResponse, setmyApiResponse] = useState("false");
const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
const random1 = Math.floor(Math.random() * 10);
const random2 = Math.floor(Math.random() * 10);
const [closepopup, setclosepopup] = useState(0);
const { obj, objid } = useParams();
const [menucompte, setmenucompte] = useState("");
const {
register,
formState: { errors },
handleSubmit,
} = useForm();
const history = useHistory();
function logout_partner_confirmation() {
removeCookie_part('tokenmysypart', { path: '/' });
}
function retnull() {
setretval("-1");
}
function Logout_Partenaire() {
confirmAlert({
title: '',
message: 'Confirmez la deconnexion compte PRO',
buttons: [
{
label: 'Yes',
onClick: () => logout_partner_confirmation()
},
]
});
}
function logout_user_confirmation() {
removeCookie_part('tokenmysych', { path: '/' });
}
function Logout_User() {
confirmAlert({
title: 'Deconnexion utilisateur ?',
message: 'Confirmez la deconnexion utilisateur',
buttons: [
{
label: 'Yes',
onClick: () => logout_user_confirmation()
},
/* {
label: 'No',
onClick: () => retnull()
}*/
]
});
}
const onSubmit = async (data) => {
var partner_connexion = "";
var url_login = "";
if (document.getElementsByName("cle_secrete") && document.getElementsByName("cle_secrete")[0]) {
url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/";
setmenucompte("partner");
partner_connexion = "partner";
}
else {
url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
setmenucompte("user");
partner_connexion = "user";
}
// Gestion des Cookies
const stored_partner = cookie_part.tokenmysypart;
const stored_user = cookie.tokenmysych;
const formData = new FormData();
var mymail = document.getElementsByName("email")[0].value;
var mypwd = document.getElementsByName("pwd")[0].value;
formData.append("email", mymail);
formData.append("pwd", mypwd);
var re = /\S+@\S+\.\S+/;
if (re.test(mymail) === false) {
alert("l'adresse email est incorrecte");
return;
}
if (mypwd.length <= 0) {
alert("Vous n'avez pas saisi de mot de passe");
return;
}
// si c'est une connexion partner qui est active
if (typeof (stored_partner) != "undefined" && String(stored_partner) !== String('')) {
//alert(" c'est une connexion PARTTT qui est active");
Logout_Partenaire();
}
// si c'est une connexion user qui est active
if (typeof (stored_user) != "undefined" && String(stored_user) !== String('')) {
//alert(" c'est une connexion USERR qui est active");
Logout_User();
}
if (document.getElementsByName("cle_secrete") && document.getElementsByName("cle_secrete")[0]) {
document.getElementsByName("cle_secrete")[0].style.backgroundColor = "white";
if (!document.getElementsByName("cle_secrete")[0] || document.getElementsByName("cle_secrete")[0].value.length <= 1) {
document.getElementsByName("cle_secrete")[0].style.backgroundColor = "red";
return
}
var cle_secrete = document.getElementsByName("cle_secrete")[0].value;
//var cle_secrete = realpwdvalue;
//alert("cle_secrete = "+cle_secrete);
formData.append("secret", cle_secrete);
}
fetch(
url_login,
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
var val = result['status'];
if (String(val) === String("true")) {
if (String(partner_connexion) === String("partner")) {
setCookie("tokenmysypart", cle_secrete);
history.push("/Partner");
}
if (String(partner_connexion) === String("user")) {
setCookie("tokenmysych", result['message']);
// Verification vers quelle page les renvoyer
if (obj === "training" && String(objid).length > 0) {
// redirection vers l'affichage d'une formation
history.push("/Display-Detail-formation/" + objid);
}
else {
// Redirection par defaut vers la compte utilisateur
history.push("/mysy-user-account");
}
}
}
else {
setisconnected("false");
setmyApimyApiMessage(result['message']);
}
})
.catch((error) => {
console.error('Error:', error);
setisconnected("false");
setmyApimyApiMessage("Le service est momentannéement indisponible, merci de ressayer plus tard. ");
});
}
const location = useLocation();
useEffect(() => {
const listener = event => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
onSubmit();
}
};
document.addEventListener("keydown", listener);
if (String(menucompte) === String("user")) {
menu_user_account();
}
else {
menu_parter_account();
}
if (location && location.state && location.state.mysy_arg && String(location.state.mysy_arg) === "partner") {
menu_parter_account();
}
}, []);
function menu_parter_account() {
//alert(" menu_parter_account = "+String(menucompte));
setmenucompte("partner");
document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff";
}
function menu_user_account() {
setmenucompte("user");
document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff";
}
function resetpasswd_ok(e) {
var total = " ?? ";
if (document.getElementsByName("sommerandom")[0].value) {
total = document.getElementsByName("sommerandom")[0].value;
}
var calcaul_total = parseInt(random1) + parseInt(random2);
if (parseInt(total) != parseInt(calcaul_total)) {
document.getElementsByName("pasrobot")[0].style.backgroundColor = "red";
alert(random1 + " + " + random2 + " NE FONT PAS " + total + ". Recommencez svp :) !!!");
return;
}
// Controle du mail
var mymail = document.getElementsByName("resetemailvalue")[0].value;
//alert(" le mail de reset = "+mymail);
var re = /\S+@\S+\.\S+/;
if (re.test(mymail) === false) {
alert("l'adresse email est incorrecte");
return;
}
// controle de la cle secrete
// on verifie juste que la clé fait plus de 5 caractère
var cle_secrete = ""
if (String(menucompte) === String("partner")) {
cle_secrete = document.getElementsByName("resetemailvalueclesecrete")[0].value;
if (cle_secrete.length === 5) {
alert("la clé secrete est incorrecte");
return;
}
}
var form = new FormData();
form.append("email", mymail);
form.append("secrete", cle_secrete);
var myurl = process.env.REACT_APP_API_URL + "myclass/api/InitUserPasswd/";
//alert("myurl = "+myurl);
axios.post(myurl, form).then(res => {
setclosepopup(1);
setinitpasswd("true");
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);
setmyApiResponse("true");
setResult(res.data.message);
}
else {
//console.log(" In test res.data.status = " + res.data.status);
//console.log(" In test res.data.message = " + res.data.message);
setmyApiResponse("false");
setResult(res.data.message);
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("false");
setinitpasswd("false");
//setmyApimyApiMessage("")
})
}
function resetpasswd(e) {
confirmAlert({
title: 'Reinitialisation Mot de Passe?',
message: 'Confirmez la reinitialisation',
buttons: [
{
label: 'Yes',
onClick: () => resetpasswd_ok()
},
{
label: 'No',
onClick: () => { return }
},
],
closeOnEscape: false,
closeOnClickOutside: false,
keyCodeForClose: [8, 32],
willUnmount: () => { },
afterClose: () => { },
onClickOutside: () => { },
onKeypress: () => { },
onKeypressEscape: () => { },
});
}
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")
};
function closepopupinitpwd() {
setclosepopup("1");
}
// Cette fonction permet de cacher le mot de passer et eviter les
// autocompletion
const [realpwdvalue, setrealpwdvalue] = useState("");
const [realpwdhidenvalue, setrealpwdhidenvalue] = useState("");
function realpwd(e) {
const val = e.target.value;
const last = val.charAt(val.length - 1);
var new_val = realpwdvalue;
var new_val_hiden = realpwdhidenvalue;
//alert(" new_val avant saisie= "+new_val);
new_val = new_val + last;
new_val_hiden = new_val_hiden + "*";
//alert(" - new_val apres sisie = "+new_val+" new_val_hiden = "+new_val_hiden);
setrealpwdhidenvalue(new_val_hiden);
setrealpwdvalue(new_val);
//setrealpwdvalue(val);
document.getElementById("cle_secrete").value = new_val_hiden;
}
/* function displayvlaue(){
alert(" la valeur secrete = "+realpwdvalue);
}*/
return (
<div className="signin">
<Helmet>
<title>Connexion MySy Training Technogy</title>
<meta name="description" content="utisateur formation connexion" />
<meta name="robots" content="index,follow" />
<meta name="title" content="Connexion MySy Training Technogy" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/mysy-training-login/0/0"} />
</Helmet>
<Header />
<div className="div_mobile">
<div>
<h1 className="text_welcome">Se connecter à MySy Training</h1>
</div>
<div className="display_screen_600_901">
<div className="div_centre_master">
<div className="div_centre_002">
<Button variant="outlined" onClick={menu_user_account} className="signin_menu"
id="user_account" name="user_account"
style={{ "float": "left", "textAlign": "center" }}>Utilisateur</Button>
<Button variant="outlined" onClick={menu_parter_account} className="signin_menu"
id="partner_account" name="partner_account"
style={{ "float": "right", "textAlign": "center" }}>Organisme de formation</Button>
</div>
<div className="div_centre">
<div className="div_row_bis">
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email" name="email" />
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password" name="pwd" />
</FormGroup>
{String(menucompte) === String("partner") && <FormGroup autocomplete="off">
<Label >Clé secrete*</Label>
<Input type="password" placeholder="" name="cle_secrete" id="cle_secrete"
autocomplete="new-password" />
</FormGroup>}
{String(initpasswd) === String("true") && closepopup === 1 && <div className="okUpdateData">
La demande reinitialisation a bien ete prise en compte.
Verifiez votre boite email.
</div>}
<div className="forgot_pass" >
{String(initpasswd) !== String("true") && String(closepopup) !== String("1")
&& <Popup trigger={<button className="avisformation"> Mot de passe oublié</button>}
position="center" className="signin popup-reset-pwd">
<div className="signin-content popup-reset-pwd-content">
<label for="exampleFormControlTextarea1">Saisir votre email!</label>
<br />
<input type="text" id="resetemailvalue" name="resetemailvalue" rows="1" cols="20"
className="zone_mail" />
<br />
{String(menucompte) === String("partner") && <div>
<label for="exampleFormControlTextarea1">Saisir votre clé secrete</label>
<br />
<input type="text" id="resetemailvalueclesecrete" name="resetemailvalueclesecrete" rows="1" cols="20"
className="zone_mail" autoComplete='new-password' />
<br />
</div>}
<div className="text_pwd_crit" style={{ "textAlign": "left" }}>
Je ne suis pas un robot <br />
<div >
<div name="pasrobot" > {random1} + {random2} = <input
type='text'
name='sommerandom'
id='sommerandom'
{...register('sommerandom', {
required: { value: true, message: 'sommes de valeurs' },
maxLength: {
value: 30,
}
})}
className="pasrobot_css"
placeholder='Le total est ?'
/>
{errors.sommerandom && (
<span className='koUpdateData'>la sommes est incorrect</span>
)}
</div>
</div>
</div>
<button type="submit" class="btn btn-secondary btn-sm" onClick={resetpasswd_ok}>Envoyer</button> &nbsp; &nbsp; &nbsp;
<button type="submit" class="btn btn-secondary btn-sm" onClick={closepopupinitpwd}> Annuler</button>
</div>
</Popup>
}
</div>
</div>
<div className="div_row22">
<Button variant="contained" color="success" className="div_row22 btn_login button" onClick={onSubmit}>Connectez-Vous</Button>
</div>
</div>
</div>
{isconnected === "false" && <div className="erreurconnexion">
<br />
{myApimyApiMessage}</div>
}
{/*<div className="div_centre_social">
<FacebookLoginButton className="mt-3 mb-3" />
<GoogleLoginButton buttonText="Login" className="mt-3 mb-3" />
</div>*/}
<div className="div_row_create_account" onClick={(e) => {
e.preventDefault();
window.location.href = "/create_account";
}}> Vous n'avez pas de compte, Créez-le !!!</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div>
);
}
export default SignIn;

666
src/components/SignUp.js Normal file
View File

@ -0,0 +1,666 @@
import React, { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import useCookie from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { getCookie, setCookie, removeCookie } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
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 Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import IconButton from '@mui/material/IconButton';
import OutlinedInput from '@mui/material/OutlinedInput';
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import Header from "./Header";
import PhoneIcon from '@mui/icons-material/Phone';
import EmailIcon from '@mui/icons-material/Email';
import HomeIcon from '@mui/icons-material/Home';
import TwitterIcon from '@mui/icons-material/Twitter';
import FacebookIcon from '@mui/icons-material/Facebook';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import axios from "axios";
function SignUp() {
const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
const [isconnected, setisconnected] = useState("");
const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
const textInput = useRef(null);
const [values, setValues] = React.useState({
amount: '',
password: '',
weight: '',
weightRange: '',
showPassword: false,
});
const [updatepwd, setupdatepwd] = useState();
const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
const [newpawdvisible, setnewpawdvisible] = useState(false);
const [confpwdvisible, setconfpwdvisible] = useState(false);
const [pwdfieldsdesabled, setpwdfieldsdesabled] = useState(true);
const [valuesPass1, setValuesPass1] = React.useState({
password1: '',
showPassword1: false,
});
const [valuesPass2, setValuesPass2] = React.useState({
password2: '',
showPassword2: false,
});
const [valuesPass3, setValuesPass3] = React.useState({
password3: '',
showPassword3: false,
});
const random1 = Math.floor(Math.random() * 10);
const random2 = Math.floor(Math.random() * 10);
const {
register,
formState: { errors },
handleSubmit,
} = useForm();
const [menucompte, setmenucompte] = useState("user");
function handleChange1(prop) {
return (event) => {
setValuesPass1({ ...valuesPass1, [prop]: event.target.value });
};
}
function handleChange2(prop) {
return (event) => {
setValuesPass2({ ...valuesPass2, [prop]: event.target.value });
};
}
function handleChange3(prop) {
return (event) => {
setValuesPass3({ ...valuesPass3, [prop]: event.target.value });
};
}
const [result, setResult] = useState("");
const history = useHistory();
const onSubmit = async (data) => {
window.scrollTo(0, 0);
var mymail = document.getElementsByName("email")[0].value;
//var mypwd = document.getElementsByName("pwd")[0].value;
const formData = new FormData();
var re = /\S+@\S+\.\S+/;
if (re.test(mymail) === false) {
alert("Votre adresse email est incorrecte");
document.getElementsByName("email")[0].style.backgroundColor = "red";
return;
}
var new_pwd = document.getElementsByName("new_pwd")[0].value;
var conf_new_pwd = document.getElementsByName("new_pwd_conf")[0].value;
if (new_pwd.length < 8) {
alert("Le mot de passe doit faire au moins 8 caractères ");
return;
}
document.getElementsByName("identique")[0].style.backgroundColor = "white";
if (new_pwd !== conf_new_pwd) {
document.getElementsByName("identique")[0].style.backgroundColor = "red";
return
}
document.getElementsByName("caractere")[0].style.backgroundColor = "white";
if (String(new_pwd).length < 8) {
document.getElementsByName("caractere")[0].style.backgroundColor = "red";
return
}
var regex = /\d/g;
document.getElementsByName("nombre")[0].style.backgroundColor = "white";
if (!regex.test(new_pwd)) {
document.getElementsByName("nombre")[0].style.backgroundColor = "red";
return
}
const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
document.getElementsByName("special")[0].style.backgroundColor = "white";
if (!specialChars.test(new_pwd)) {
document.getElementsByName("special")[0].style.backgroundColor = "red";
return
}
document.getElementsByName("pasrobot")[0].style.backgroundColor = "white";
var total = " ?? ";
if (document.getElementsByName("sommerandom")[0].value) {
total = document.getElementsByName("sommerandom")[0].value;
}
var calcaul_total = parseInt(random1) + parseInt(random2);
if (parseInt(total) != parseInt(calcaul_total)) {
document.getElementsByName("pasrobot")[0].style.backgroundColor = "red";
alert(random1 + " + " + random2 + " NE FONT PAS " + total + ". Recommencez svp :) !!!");
return;
}
var mymail = document.getElementsByName("email")[0].value;
var contact_nom = "";
var contact_prenom = "";
var contact_mail = "";
var contact_tel = "";
var raison_sociale = "";
var telephone = "";
var url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
if (String(menucompte) === String("partner")) {
// Verification des champs obligatoires
document.getElementsByName("contact_nom")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_nom")[0] || document.getElementsByName("contact_nom")[0].value.length <= 1) {
document.getElementsByName("contact_nom")[0].style.backgroundColor = "red";
alert("Le nom du contact principal est incorrect ");
return
}
document.getElementsByName("contact_prenom")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_prenom")[0] || document.getElementsByName("contact_prenom")[0].value.length <= 1) {
document.getElementsByName("contact_prenom")[0].style.backgroundColor = "red";
alert("Le prenom du contact principal est incorrect ");
return
}
document.getElementsByName("contact_email")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_email")[0] || document.getElementsByName("contact_email")[0].value.length <= 1) {
document.getElementsByName("contact_email")[0].style.backgroundColor = "red";
alert("L'email du contact principal est incorrect ");
return
}
var re2 = /\S+@\S+\.\S+/;
if (re2.test(document.getElementsByName("contact_email")[0].value) === false) {
alert("L'email du contact principal est incorrect ");
document.getElementsByName("contact_email")[0].style.backgroundColor = "red";
return;
}
document.getElementsByName("contact_telephone")[0].style.backgroundColor = "white";
if (!document.getElementsByName("contact_telephone")[0] || document.getElementsByName("contact_telephone")[0].value.length <= 8) {
document.getElementsByName("contact_telephone")[0].style.backgroundColor = "red";
alert("Le téléphone du contact principal est incorrect ");
return
}
document.getElementsByName("raison_sociale")[0].style.backgroundColor = "white";
if (!document.getElementsByName("raison_sociale")[0] || document.getElementsByName("raison_sociale")[0].value.length <= 2) {
document.getElementsByName("raison_sociale")[0].style.backgroundColor = "red";
alert("La raison sociale du contact principal est incorrecte");
return
}
contact_nom = document.getElementsByName("contact_nom")[0].value;
contact_prenom = document.getElementsByName("contact_prenom")[0].value;
contact_mail = document.getElementsByName("contact_email")[0].value;
contact_tel = document.getElementsByName("contact_telephone")[0].value;
raison_sociale = document.getElementsByName("raison_sociale")[0].value;
telephone = document.getElementsByName("telephone")[0].value;
formData.append("nom", raison_sociale);
formData.append("telephone", telephone);
formData.append("contact_nom", contact_nom);
formData.append("contact_prenom", contact_prenom);
formData.append("contact_tel", contact_tel);
formData.append("contact_mail", contact_mail);
url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_partner_account/";
}
if (!document.getElementsByName("cgu")[0].checked) {
alert(" Vous devez accepter les conditions générales d'utilisation du site. Merci.");
document.getElementsByName("cgu")[0].style.backgroundColor = "red";
return;
}
formData.append("email", mymail);
formData.append("pwd", new_pwd);
fetch(
url_sign_up,
{
method: 'POST',
body: formData,
}
).then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
if (String(result['status']) == String("true")) {
alert(String(result['message']));
setisconnected("true");
setmyApimyApiMessage(result['message']);
window.scrollTo(0, 0);
if (String(menucompte) === String("user")) {
history.push("/Connexion-utilisateur-0");
}
else if (String(menucompte) === String("partner")) {
history.push("/PartnerLogin0");
}
}
else {
//alert(" GRR "+String(result['message']+ " result['status'] = "+ result['status']));
setisconnected("false");
setmyApimyApiMessage(result['message']);
}
})
.catch((error) => {
console.error('Error:', error);
setisconnected("false");
setmyApimyApiMessage("Le service est momentannéement indisponible, merci de ressayer plus tard. ");
});
};
useEffect(() => {
const listener = event => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
onSubmit();
}
};
document.addEventListener("keydown", listener);
//menu_user_account();
window.scrollTo(0, 0);
if (String(menucompte) === String("user")) {
menu_user_account()
}
else {
menu_parter_account();
}
}, []);
const handleClickShowPassword_new_pwd_conf = () => {
if (confpwdvisible == false) {
document.getElementsByName("new_pwd_conf")[0].type = "text";
setconfpwdvisible(true);
}
else if (confpwdvisible == true) {
document.getElementsByName("new_pwd_conf")[0].type = "password";
setconfpwdvisible(false);
}
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
const handleClickShowPassword_new_pwd = () => {
if (newpawdvisible == false) {
document.getElementsByName("new_pwd")[0].type = "text";
setnewpawdvisible(true);
}
else if (newpawdvisible == true) {
document.getElementsByName("new_pwd")[0].type = "password";
setnewpawdvisible(false);
}
};
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")
};
function menu_parter_account() {
setmenucompte("partner");
document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff";
}
function menu_user_account() {
setmenucompte("user");
document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A";
document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff";
}
return (
<div className="signup">
<Helmet>
<title>Creation compte utilisateur</title>
<meta name="description" content="creation utisateur formation connexion" />
<meta name="robots" content="index,follow" />
<meta name="title" content="Creation compte utilisateur" />
<link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/create_account"} />
</Helmet>
<Header />
<div className="div_mobile">
{isconnected === "false" && <div className="erreurconnexion">
<br />
{myApimyApiMessage}</div>
}
{isconnected === "true" && String(myApimyApiMessage).length > 5 &&
<div className="okUpdateData">
<br />
Le compte a été correctement créé. Vous allez recevoir un email de validation sous peu.<br />
Pensez à regarder vos spam aussi.</div>
}
<div className="display_screen_600_901">
<div>
<h1 className="text_welcome">Bien commencer avec MySy Training</h1>
</div>
<div className="div_menu_centre">
<div className="div_row">
<Button variant="outlined" onClick={menu_user_account} className="signin_menu"
id="user_account" name="user_account"
style={{ "float": "left", "textAlign": "center" }}>Utilisateur</Button>
<Button variant="outlined" onClick={menu_parter_account} className="signin_menu"
id="partner_account" name="partner_account"
style={{ "float": "right", "textAlign": "center" }}>Organisme de formation</Button>
</div>
<div className="div_row_bis">
{String(menucompte) === String("partner") && <FormGroup>
<Label className="text_label">Raison Sociale*</Label>
<Input type="text" placeholder="" name="raison_sociale" />
</FormGroup>}
{String(menucompte) === String("partner") && <FormGroup>
<Label className="text_label">Telephone*</Label>
<Input type="text" placeholder="" name="telephone" />
</FormGroup>}
<FormGroup>
<Label className="text_label">Email*</Label>
<Input type="email" placeholder="" name="email" />
</FormGroup>
<Label className="text_label"> Mot de passe</Label><br />
<FormControl sx={{ m: 1, }} variant="outlined" size="small" className="texte_area_passwd">
<InputLabel htmlFor="outlined-adornment-password2"></InputLabel>
<OutlinedInput
id="new_pwd"
name="new_pwd"
type={values.showPassword ? 'text' : 'password'}
value={values.password2}
label={"P"}
onChange={handleChange2('password2')}
className="ch"
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd}
edge="end"
>
{newpawdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
<br />
<Label className="text_label"> Confirmer mot de passe </Label><br />
<FormControl sx={{ m: 1, }} variant="standard" size="small" className="texte_area_passwd">
<OutlinedInput
id="new_pwd_conf"
name="new_pwd_conf"
type={values.showPassword ? 'text' : 'password'}
value={values.password3}
onChange={handleChange3('password3')}
className="ch"
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword_new_pwd_conf}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{confpwdvisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
label=" "
/>
</FormControl>
<br />
<div className="text_pwd_crit">
Créez un mot de passe contenant au moins :
<ul>
<li name="caractere">
8 caractères
</li>
<li name="nombre">
1 nombre
</li>
<li name="special">
1 caractère spécial p. ex., $, !, @, %, &
</li>
<li name="identique">
Identiques
</li>
</ul>
</div>
<div className="div_row22">
{String(menucompte) === String("partner") && <div style={{ "textAlign": "left" }}>
<div className="titre1"> Contact Principal </div>
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
name="contact_nom"
label="Nom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="contact_prenom"
label="Prénom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="contact_email"
label="Adresse mail"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
required
name="contact_telephone"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
</InputAdornment>
),
}}
variant="standard"
/>
<br />
</Box>
</div>}
<div style={{ "textAlign": "left", "width": "100%", "marginTop": "0.5rem" }}>
<input type={"checkbox"} unchecked
id="cgu"
name="cgu"
style={{ "textAlign": "left", "width": "auto", "height": "1rem" }} />
<label for="cgu" style={{ "textAlign": "left", maxWidth: "90%", "fontSize": "small" }}>Accepter <a href='/sample/MYSY_CGU.pdf' download>les conditions générales d'usage </a></label>
</div>
<div className="div_row22 text_pwd_crit" style={{ "textAlign": "center", "fontWeight": "bold" }}>
<nav className="pasrobot_block"> Je ne suis pas un robot <br />
<div >
<div name="pasrobot" > {random1} + {random2} = <input
type='text'
name='sommerandom'
id='sommerandom'
{...register('sommerandom', {
required: { value: true, message: 'sommes de valeurs' },
maxLength: {
value: 30,
}
})}
className="pasrobot"
placeholder='Le total est ?'
/>
{errors.sommerandom && (
<span className='koUpdateData'>la sommes est incorrect</span>
)}
</div>
</div>
</nav>
</div>
<Button variant="contained" color="success"
className="div_row22 btn_login button"
ref={textInput}
onClick={onSubmit}>S'inscrire</Button>
</div>
</div>
</div>
</div>
<div className="pieddepage">
<Footer />
</div>
</div>
</div >
);
}
export default SignUp;

View File

@ -0,0 +1,94 @@
import React, { useEffect, useState } from "react";
import {
PaymentElement,
useStripe,
useElements
} from "@stripe/react-stripe-js";
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (!stripe) {
return;
}
const clientSecret = new URLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);
if (!clientSecret) {
return;
}
stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
switch (paymentIntent.status) {
case "succeeded":
setMessage("Payment succeeded!");
break;
case "processing":
setMessage("Your payment is processing.");
break;
case "requires_payment_method":
setMessage("Your payment was not successful, please try again.");
break;
default:
setMessage("Something went wrong.");
break;
}
});
}, [stripe]);
const handleSubmit = async (e) => {
e.preventDefault();
if (!stripe || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setIsLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "http://localhost:3000",
},
});
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if (error.type === "card_error" || error.type === "validation_error") {
setMessage(error.message);
} else {
setMessage("An unexpected error occurred.");
}
setIsLoading(false);
};
return (
<div className="stripe_payment">
qsdqsdqsdq
{/*<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement id="payment-element" />
<button disabled={isLoading || !stripe || !elements} id="submit">
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
</span>
</button>
{/* Show any error or success messages * /}
{message && <div id="payment-message">{message}</div>}
</form>*/}
</div>
);
}

Some files were not shown because too many files have changed in this diff Show More