diff --git a/src/components/Abonnement.js b/src/components/Abonnement.js index 2c61d85..2fc4e0d 100644 --- a/src/components/Abonnement.js +++ b/src/components/Abonnement.js @@ -488,7 +488,7 @@ function Abonnement(props) { getCurrentUserData(); GetPayementMode(); setpackprice(); - + }, []); diff --git a/src/components/CheckOut.js b/src/components/CheckOut.js index 30475c4..7b99b8c 100644 --- a/src/components/CheckOut.js +++ b/src/components/CheckOut.js @@ -18,6 +18,7 @@ import { IoAddCircleOutline } from "react-icons/io5"; import MyPaymentMethode from "./PaymentMethode"; import img_visa_mastercard from "./../mysy_img/visa_mastercard.png" import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png"; +import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import img_paypal from "./../mysy_img/paypal.png" import moment from "moment"; import { @@ -30,6 +31,7 @@ import { loadStripe } from '@stripe/stripe-js'; import { PaymentElement } from '@stripe/react-stripe-js'; import Popup from 'reactjs-popup'; + const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p'); //const stripePromise_PROD = loadStripe('pk_live_51LUUfAAbmaEugrFTyfNe4Dj0vbxc5qXQqNs0rztjAKy8oSlc5EEQyJGjA8Z5kXmP2gvUMcYLUBYCIyWWzLCw59RY00PtGInkVf'); @@ -453,6 +455,9 @@ function CheckOut(props) { } + const [isLoading, setLoading] = useState(); + + const [payment_in_process, setpayment_in_process] = useState(); const [orderid, setorderid] = useState(); @@ -477,7 +482,7 @@ function CheckOut(props) { // ---------- debut setpayment_in_process("1"); - + setLoading(true); /* IMPORTANT : @@ -647,16 +652,18 @@ function CheckOut(props) { console.log(" laaaaa ") if (String(props.packs).toLowerCase() === String("decouverte")) { MySy_LMS_Account_Management(); + setLoading(false); alert(" La mise à jour de votre abonnement a été correctement traitée. Vous allez recevoir par email les details de la commande et la facture.") window.location.reload(); } else { MySy_LMS_Account_Management(); + setLoading(false); alert(" La mise à jour de votre abonnement a été correctement traitée. Vous allez recevoir par email les details de la commande et la facture.") window.location.reload(); } - + } @@ -665,15 +672,18 @@ function CheckOut(props) { else { setapiorderid("0"); setapiorderidmessage(data['message']); + setLoading(false); } }).catch((error) => { console.error('Error:', error); setapiorderid("0"); + setLoading(false); }); + } const [paymentadded, setpaymentadded] = useState(""); @@ -1108,6 +1118,10 @@ function CheckOut(props) { return (
+ {isLoading &&
+
+
} + {String(apiorderid) === String("0") &&
Impossible de créer la commande.
{apiorderidmessage} @@ -1334,7 +1348,7 @@ function CheckOut(props) { variant="standard" /> - + Confirmer la commande} + && !stripe_existing_souscription_id + && + + } {(String(okcommande) !== String("ko") || (String(props.packs).toLowerCase() === String("decouverte"))) && @@ -1928,7 +1942,7 @@ function CheckOut(props) {
{' '} - Important :
+ Important :
La modification de votre abonnement va entrainer la désactivation de vos formations en cours. Mais vous pourrez les réactiver selon les conditions de votre nouvel abonnement.
diff --git a/src/components/Partner.js b/src/components/Partner.js index 6e6b92c..1e716be 100644 --- a/src/components/Partner.js +++ b/src/components/Partner.js @@ -547,7 +547,7 @@ const Partner = (props) => { if (JSON.parse(res.data.message).lms_account && String(JSON.parse(res.data.message).lms_account) === "1") { sethas_partner_lms_url(JSON.parse(res.data.message).lms_account); - my_lms_url = (JSON.parse(res.data.message).lms_url) + "user_portal.php?recid=" + encodeURIComponent(JSON.parse(res.data.message).lms_part_recid) + + my_lms_url = (JSON.parse(res.data.message).lms_virtualhost_url) + "user_portal.php?recid=" + encodeURIComponent(JSON.parse(res.data.message).lms_part_recid) + "&mysytoken=" + encodeURIComponent(JSON.parse(res.data.message).lms_pwd_mask); console.log(" ### LMS url = ", my_lms_url); diff --git a/src/components/TestUrl.js b/src/components/TestUrl.js index 1f7f131..6c6e03a 100644 --- a/src/components/TestUrl.js +++ b/src/components/TestUrl.js @@ -44,6 +44,7 @@ import { PaymentElement } from '@stripe/react-stripe-js'; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import Formation from "./Formation"; +import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import { CardElement, @@ -871,7 +872,7 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa setPokemon(response.data); //set pokemon state setLoading(false); //set loading state }); - }, 5000); + }, 50000); } @@ -895,8 +896,8 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
- {isLoading &&
-
loading in processsss
+ {isLoading &&
+
} diff --git a/src/mysy_img/mysy_spin_loading.gif b/src/mysy_img/mysy_spin_loading.gif new file mode 100644 index 0000000..8e6d471 Binary files /dev/null and b/src/mysy_img/mysy_spin_loading.gif differ diff --git a/src/styles/components/_checkout.scss b/src/styles/components/_checkout.scss index 97db721..d912191 100644 --- a/src/styles/components/_checkout.scss +++ b/src/styles/components/_checkout.scss @@ -4,7 +4,29 @@ font-size: 0.1rem; } - + .loader-container { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + background: rgba(0, 0, 0, 0.834); + z-index: 1; + top: 0px; + opacity: 80%; + } + + .spinner { + width:20rem; + height: 10rem; + border: 8px solid; + border-color: #3d5af1 transparent #3d5af1 transparent; + border-radius: 50%; + animation: spin-anim 1.2s linear infinite; + background-color: red; + color: black; + } @media only screen and (max-width: 600px) { diff --git a/src/styles/components/_partner.scss b/src/styles/components/_partner.scss index 015b966..34674e3 100644 --- a/src/styles/components/_partner.scss +++ b/src/styles/components/_partner.scss @@ -1,4 +1,31 @@ .partner { + + .loader-container { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + background: rgba(0, 0, 0, 0.834); + z-index: 1; + top: 0px; + opacity: 80%; + } + + .spinner { + width:20rem; + height: 10rem; + border: 8px solid; + border-color: #3d5af1 transparent #3d5af1 transparent; + border-radius: 50%; + animation: spin-anim 1.2s linear infinite; + background-color: red; + color: black; + } + + + .label { cursor: pointer; color: #00ffff;