Ela_Front/src/components/CheckOut.js

1644 lines
71 KiB
JavaScript

import React, { useRef, useState, useEffect } from "react";
import Button from '@mui/material/Button';
import { getCookie } from 'react-use-cookie';
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import axios from "axios";
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import AccountCircle from '@mui/icons-material/AccountCircle';
import PhoneIcon from '@mui/icons-material/Phone'
import EmailIcon from '@mui/icons-material/Email'
import HomeIcon from '@mui/icons-material/Home'
import { useHistory } from "react-router-dom";
import OrderConfirmation from "./OrderConfirmation";
import { IoAddCircleOutline } from "react-icons/io5";
import MyPaymentMethode from "./PaymentMethode";
import img_visa_mastercard from "./../mysy_img/visa_mastercard.png"
import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png";
import img_paypal from "./../mysy_img/paypal.png"
import moment from "moment";
import {
CardElement,
useStripe,
useElements,
} from '@stripe/react-stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { PaymentElement } from '@stripe/react-stripe-js';
const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p');
function CheckOut(props) {
const [myApiResponse, setmyApiResponse] = useState("");
const [result, setResult] = useState("");
const [menu, setmenu] = useState("default");
const [fields1desabled, setfields1desabled] = useState(true);
const [periode, setperiode] = useState("Mensuel");
const [testval, settestval] = useState();
const [gotocheckout, setgotocheckout] = useState("0");
const [currentpack, setcurrentpack] = useState(props.packs);
const [periodicity, setperiodicity] = useState(props.periodicity);
const [packprice, setpackprice] = useState(props.mypackprice);
const [getpackproducts, setgetpackproducts] = useState();
const scrollDiv = useRef(null);
const [okcommande, setokcommande] = useState();
const stripe = useStripe();
const elements = useElements();
// recuperation et gestion du token utilisateur
const history = useHistory();
const stored_part = getCookie('tokenmysypart');
if (!stored_part || stored_part.length <= 0) {
history.push("/PartnerLogin");
}
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 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";
}
const [stripe_account_id, setstripe_account_id] = useState("aaa");
const [stripe_paymentmethod_id, setstripe_paymentmethod_id] = useState();
function getCurrentUserData() {
settestval('d'); // ==> Do not delete
setaddfacturationinfo_api("");
setaddfacturationinfo_response("");
setokcommande("");
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 getCurrentUserData res.data.status = " + res.data.status);
//console.log(" In getCurrentUserData res.data.message = " + res.data.message);
setmyApiResponse("True");
setResult(res.data.message);
var mylocaltraining = JSON.parse(res.data.message);
if (mylocaltraining) {
setstripe_account_id(mylocaltraining.stripe_account_id);
setstripe_paymentmethod_id(mylocaltraining.stripe_paymentmethod_id);
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) {
var tmp_val = 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 (tmp_val.trim().length <= 0 &&
(String(props.packs).toLowerCase() !== String("decouverte"))) {
document.getElementsByName("adr_street")[0].style.borderColor = "#FF0000";
setokcommande("ko");
}
}
else {
if (String(props.packs).toLowerCase() !== String("decouverte")) {
document.getElementsByName("adr_street")[0].style.backgroundColor = "#FF0000";
setokcommande("ko");
}
}
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_city.trim().length <= 0) {
document.getElementsByName("adr_city")[0].style.borderColor = "#FF0000";
setokcommande("ko");
}
}
else {
if (String(props.packs).toLowerCase() !== String("decouverte")) {
document.getElementsByName("adr_city")[0].style.backgroundColor = "#FF0000";
setokcommande("ko");
}
}
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_zip.trim().length <= 0) {
document.getElementsByName("adr_zip")[0].style.borderColor = "#FF0000";
setokcommande("ko");
}
}
else {
if (String(props.packs).toLowerCase() !== String("decouverte")) {
document.getElementsByName("adr_zip")[0].style.backgroundColor = "#FF0000";
setokcommande("ko");
}
}
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_adr_country.trim().length <= 0) {
document.getElementsByName("adr_country")[0].style.borderColor = "#FF0000";
setokcommande("ko");
}
}
else {
if (String(props.packs).toLowerCase() !== String("decouverte")) {
document.getElementsByName("adr_country")[0].style.backgroundColor = "#FF0000";
setokcommande("ko");
}
}
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_email.trim().length <= 0) {
document.getElementsByName("email")[0].style.borderColor = "#FF0000";
setokcommande("ko");
}
}
else {
if (String(props.packs).toLowerCase() !== String("decouverte")) {
document.getElementsByName("email")[0].style.backgroundColor = "#FF0000";
setokcommande("ko");
}
}
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 enablefieds1() {
setaddfacturationinfo_api("");
setaddfacturationinfo_response("");
setokcommande("ko");
setfields1desabled(false);
document.getElementsByName("nom")[0].disabled = false;
document.getElementsByName("nom")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("telephone")[0].disabled = false;
document.getElementsByName("telephone")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("email")[0].disabled = false;
document.getElementsByName("email")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("adr_street")[0].disabled = false;
document.getElementsByName("adr_street")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("adr_zip")[0].disabled = false;
document.getElementsByName("adr_zip")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("adr_city")[0].disabled = false;
document.getElementsByName("adr_city")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("adr_country")[0].disabled = false;
document.getElementsByName("adr_country")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByName("vat_num")[0].disabled = false;
document.getElementsByName("vat_num")[0].style.backgroundColor = "#FFFFFF";
}
const [addpayementcheckout, setaddpayementcheckout] = useState();
function menu_paymentmethode() {
setaddpayementcheckout("addpaymentmethode");
//alert("kk");
}
function get_production_service_by_pack() {
const formData = new FormData();
const url = process.env.REACT_APP_API_URL + "myclass/api/get_product_service/";
formData.append('token', stored_part);
formData.append('pack_name', props.packs);
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);
setgetpackproducts(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");
setgetpackproducts("");
}
}).catch((error) => {
console.warn('Not good man :( mysearchtext = ');
setmyApiResponse("False");
setgetpackproducts("");
//setmyApimyApiMessage("")
})
}
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('### GetPayementMode : Success:', data['message'], "data['status'] = ", data['status']);
if (String(data['status']) === String("False") ||
!data['message'][0] || Object.keys(data['message'][0]).length === 0
) {
//console.log("erreur rrrr:" + data['status'])
setpaymentmodeapi("False");
setokcommande("ko");
}
else {
setpaymentmodeapi("True");
setpaymentmode(data['message']);
initpayement_front();
if (scrollDiv.current) {
scrollDiv.current.scrollIntoView({ behavior: "smooth" });
}
}
}).catch((error) => {
console.error('Error:', error);
setpaymentmodeapi("false");
setokcommande("ko");
});
}
useEffect(() => {
getCurrentUserData();
get_production_service_by_pack();
GetPayementMode();
window.scrollTo(0, 0);
}, []);
const [orderid, setorderid] = useState();
const [apiorderid, setapiorderid] = useState();
const [apiorderidmessage, setapiorderidmessage] = useState();
function Ordervalidation() {
//alert(" confirmation ok");
if (String(nb_formations) === "0") {
alert(" Vous devez choisir un nombre de formation ");
document.getElementById('div_nb_formation').style.color = "red";
document.getElementById('div_ttc').style.color = "red";
return;
}
var form = new FormData();
const stored_cookie = getCookie('tokenmysypart');
form.append("token", stored_cookie);
form.append("periodicite", periodicity);
//form.append("prix_ttc", "1");
//form.append("prix_ht", "1");
form.append("discount", "0");
form.append("pack", currentpack);
/*
/!\ : Important, il faut preciser le nombre d'article envoyé avec ceci : form.append("nb_product", nb_article);
*/
form.append("nb_product", "1");
if (String(props.packs).toLowerCase() === String("decouverte")) {
form.append("end_date", moment(moment()).add(15, 'days').format("DD/MM/YYYY"));
}
var prod_service = ""
getpackproducts.map((service) => (
prod_service = prod_service + " -- " + JSON.parse(service).designation
))
//alert("prod_ser = " + prod_service);
form.append("0", JSON.stringify({
"code": currentpack, "prix": packprice, "comment": "nc", "qty": nb_formations, "pack_products": prod_service
}));
//form.append("1", JSON.stringify({ "code": "art_supp", "prix": "120", "comment": "nc" }));
var myurl = process.env.REACT_APP_API_URL + "myclass/api/createOrder/";
fetch(myurl,
{
method: 'POST',
body: form,
})
.then((data) => data.json())
.then((data) => {
console.log('Success:', data['message'], "data['status'] = ", data['status'], "ORDER ID = ", data['order_id']);
if (String(data['status']) === String("true")) {
setorderid(data['order_id']);
setapiorderid("1");
setmenu("ordervalide");
setpaymentmodeapi("");
setpaymentmode("");
setgotocheckout("");
if (parseFloat(packprice) > 0)
finalize_abonnement();
}
else {
setapiorderid("0");
setapiorderidmessage(data['message']);
}
}).catch((error) => {
console.error('Error:', error);
setapiorderid("0");
});
}
const [paymentadded, setpaymentadded] = useState("");
const [menumodepayement, setmenumodepayement] = useState("");
function menu_cb() {
setmenumodepayement("cb");
}
function menu_sepa() {
setmenumodepayement("sepa");
}
const [invoiceAdressOK, setinvoiceAdressOK] = useState();
function checkInvoicingField() {
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;
if (nom.trim().length <= 0) {
alert("Information de facturation incomplete : Le nom ");
setinvoiceAdressOK(false);
return;
}
if (email.trim().length <= 0) {
alert("Information de facturation incomplete : L'email ");
setinvoiceAdressOK(false);
return;
}
if (adr_street.trim().length <= 0) {
alert("Information de facturation incomplete : L'adresse ");
setinvoiceAdressOK(false);
return;
}
if (adr_zip.trim().length <= 0) {
alert("Information de facturation incomplete : Le code postal ");
setinvoiceAdressOK(false);
return;
}
if (adr_city.trim().length <= 0) {
alert("Information de facturation incomplete : La ville ");
setinvoiceAdressOK(false);
return;
}
if (adr_country.trim().length <= 0) {
alert("Information de facturation incomplete : Le pays ");
setinvoiceAdressOK(false);
return;
}
}
const [addfacturationinfo_api, setaddfacturationinfo_api] = useState("");
const [addfacturationinfo_response, setaddfacturationinfo_response] = useState("");
function RecordData_infoFacturation() {
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);
if (nom.trim().length <= 0) {
alert("Information de facturation incomplete : Le nom ");
setinvoiceAdressOK(false);
return;
}
if (email.trim().length <= 0) {
alert("Information de facturation incomplete : L'email ");
setinvoiceAdressOK(false);
return;
}
if (adr_street.trim().length <= 0) {
alert("Information de facturation incomplete : L'adresse ");
setinvoiceAdressOK(false);
return;
}
if (adr_zip.trim().length <= 0) {
alert("Information de facturation incomplete : Le code postal ");
setinvoiceAdressOK(false);
return;
}
if (adr_city.trim().length <= 0) {
alert("Information de facturation incomplete : La ville ");
setinvoiceAdressOK(false);
return;
}
if (adr_country.trim().length <= 0) {
alert("Information de facturation incomplete : Le pays ");
setinvoiceAdressOK(false);
return;
}
fetch(
url,
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
console.log('Success:', result['message'], "result['status'] = ", result['status']);
setaddfacturationinfo_api(result['status']);
if (String(result['status']) === String("true")) {
setaddfacturationinfo_response(result['message']);
setfields1desabled(true);
setokcommande("");
}
else {
setaddfacturationinfo_response("");
setfields1desabled(false);
}
})
.catch((error) => {
console.error('Error:', error);
setaddfacturationinfo_api("false");
setaddfacturationinfo_response("");
});
};
// Gestion payement Stripe
const [price_ch, setprice_ch] = useState("price_1LpyndAbmaEugrFTKZAAkm72");
const [customer_ch, setcustomer_ch] = useState();
const [subscriptionData, setSubscriptionData] = useState(null);
const [payement_id, setpayement_id] = useState();
const [clientSecret_id, setclientSecret_id] = useState();
const [paymentIntent, setPaymentIntent] = useState();
function initpayement_front() {
//alert("debut initpayement_front price_ch = " + price_ch);
createSubscription(price_ch);
}
const createSubscription = async (priceId) => {
var cust_strip_id = "";
//----
const formData_tpm = new FormData();
const url_tmp = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/";
formData_tpm.append('token', stored_part);
fetch(url_tmp, {
method: 'POST',
body: formData_tpm,
}).then((data) => data.json())
.then((data) => {
//console.log(" GRRRRRRRRRR data.message = " + data.message);
//console.log(" statusstatus data.status = " + data.status);
if (String(data['status']) === String("true")) {
var mylocaltraining = JSON.parse(data.message);
if (mylocaltraining) {
cust_strip_id = mylocaltraining.stripe_account_id;
var myurl = process.env.REACT_APP_API_URL + "myclass/api/create-subscription/";
var form = new FormData();
form.append("customerid", cust_strip_id);
form.append("priceid", price_ch);
fetch(myurl, {
method: 'POST',
body: form,
}).then((data) => data.json())
.then((data) => {
//console.log(' #### subscription_id:', data['subscription_id'], ' ### payment_intent_client_secret:', data['payment_intent_client_secret'], "data['Status'] = ", data['status'],);
if (String(data['status']) === String("true")) {
//console.log(" subscriptionId = " + subscriptionId + " -- et clientSecret = " + clientSecret);
setclientSecret_id(data['payment_intent_client_secret']);
setpayement_id(data['subscription_id']);
//setSubscriptionData(data['subscription_id'], data['payment_intent_client_secret'] );
//alert(" subscriptionId = " + data['subscription_id'] + " -- et clientSecret = " + data['payment_intent_client_secret']);
}
}).catch((error) => {
console.log('Error:', error.message);
});
}
}
}).catch((error) => {
console.log('Error:', error.message);
});
//--
};
const [payement_ok, setpayement_ok] = useState();
const [amount_captured, setamount_captured] = useState();
function finalize_abonnement() {
//alert("Finalization de l'abonnement ");
// Initialize an instance of stripe.
const handleSubmit_ch = async (e) => {
// Get a reference to a mounted CardElement. Elements knows how
// to find your CardElement because there can only ever be one of
// each type of element.
const cardElement = elements.getElement(CardElement);
// Use card Element to tokenize payment details
//alert(' clientSecret_id = ' + clientSecret_id)
let { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret_id, {
payment_method: {
card: cardElement,
billing_details: {
name: "cherif test MYSY",
}
}
});
if (error) {
// show error and collect new card details.
alert(error.message);
console.log(error.message);
return;
}
else {
//alert(" OKK paymentIntent = " + paymentIntent);
console.log(paymentIntent);
setPaymentIntent(paymentIntent);
//alert(" debut conformation cmd ");
Ordervalidation();
}
}
const handleSubmit_MySy_Back = async (e) => {
var myurl = process.env.REACT_APP_API_URL + "myclass/api/confirm_payment/";
var form = new FormData();
form.append("stripe_payment_id", payement_id);
form.append('token', stored_part);
fetch(myurl, {
method: 'POST',
body: form,
}).then((data) => data.json())
.then((data) => {
//console.log(' #### status:', data['status'], ' -- payement_id:', data['payement_id'], " -- amount_captured = ", data['amount_captured'],);
if (String(data['status']) === String("true")) {
setpayement_ok("1");
setamount_captured(data['amount_captured']);
setPaymentIntent("1");
}
else {
setpayement_ok("0");
}
}).catch((error) => {
console.log('Error:', error.message);
setpayement_ok("0");
});
}
//handleSubmit_ch();
handleSubmit_MySy_Back();
}
// Fing gestion stripe
const [nb_formations, setnb_formations] = useState("0");
const change_nb_formations = event => {
let valeur = event.target.value;
if (String(props.packs).toLowerCase() === String("decouverte")) {
setnb_formations("1");
}
else {
setnb_formations(event.target.value);
}
document.getElementById('div_nb_formation').style.color = "#104277";
document.getElementById('div_ttc').style.color = "#104277";
}
return (
<div className="checkout">
{String(apiorderid) === String("0") && <div className="koUpdateData">
Impossible de créer la commande.<br />
{apiorderidmessage}
</div>}
{String(menu) === String("default") && <div>
<h2 style={{ "textAlign": "center", "marginBottom": "2rem" }} ref={scrollDiv}> Récapitulatif de votre commande </h2>
<div className="div_row" >
<div className="div_row_gauche">
<div className="titre1"> Produits et Services </div>
Vous avez choisi un pack : <b> {String(props.packs).toLocaleUpperCase()} </b> :
{getpackproducts && String(getpackproducts).length > 0 && getpackproducts.map((service) => (
<ul className="list_produits_service">
{JSON.parse(service).designation}
</ul>
))}
</div>
<div className="div_row_droite"> <div className="titre1"> Detail prix </div>
<div>
<div style={{ "width": "90%" }}>
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
Periodicité :
</div>
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
<b><u> {periodicity} </u> </b>
</div>
</div>
<div style={{ "width": "90%" }}>
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
Prix unitaire :
</div>
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
{packprice}
</div>
</div>
<div style={{ "width": "90%" }} id="div_nb_formation" className="mob_heigh">
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
Nombre de formations :
</div>
{(String(props.packs).toLowerCase() !== String("decouverte")) &&
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
<input
value={nb_formations}
onChange={change_nb_formations}
type="number"
min="1"
max="50"
className="nb_ftion"
/>
</div>
}
{(String(props.packs).toLowerCase() === String("decouverte")) &&
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
1
</div>
}
</div>
<div style={{ "width": "90%" }}>
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
TVA :
</div>
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
{packprice * nb_formations * 0.2}
</div>
</div>
<div style={{ "width": "90%" }}>
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
Discount :
</div>
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
0
</div>
</div>
<div style={{ "width": "90%" }} id="div_ttc">
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
Total TTC :
</div>
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
{packprice * nb_formations * 1.2}
</div>
<div> &nbsp;
</div>
</div>
{String(props.packs).toLowerCase() === String("decouverte") && <div style={{ "width": "100%" }}>
<div style={{ "textAlign": "left", "width": "30%", "float": "left", "color": "red" }}>
* Offre valable jusqu'au
</div>
<div style={{ "textAlign": "right", "width": "30%", "float": "left", "color": "red" }}>
{moment(moment()).add(15, 'days').format("DD/MM/YYYY")}
</div>
<div> &nbsp;
</div>
</div>}
</div>
</div>
</div>
<hr style={{ "width": "100%" }} />
<div className="div_row">
<div className="div_row_gauche">
<div className="titre1"> Detail de Facturation </div>
{String(addfacturationinfo_api) === String("true") && String(addfacturationinfo_response).length > 3 &&
<div className="okUpdateData"> La modification ete prise en compte </div>}
{String(addfacturationinfo_api) === String("false") || String(addfacturationinfo_response) === String("0") &&
<div className="koUpdateData"> Impossible de modifier les informations de facturation </div>}
<Box alignItems="left" sx={{ '& > :not(style)': { m: 1 }, width: '100%', }}>
<TextField
required
disabled
label="Raison sociale"
name="nom"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
disabled
label="num TVA"
name="vat_num"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
disabled
name="telephone"
label="Téléphone"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PhoneIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="email"
disabled
required
label="Adresse mail"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<EmailIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="adr_street"
disabled
required
label="Adresse"
className="texte_area_adress"
sx={{ m: 1, width: '90%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="adr_zip"
disabled
required
label="Code Postal"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<TextField
name="adr_city"
disabled
required
label="Ville"
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<TextField
name="adr_country"
label="Pays"
disabled
required
className="texte_area"
sx={{ m: 1, width: '48%' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<HomeIcon />
</InputAdornment>
),
}}
variant="standard"
/>
<br />
<div className="div_row22">
{fields1desabled == false && <div className="div_row">
<div className="div_row_gauche">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData_infoFacturation}>Enregister</Button>
</div>
<div className="div_row_droite">
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={getCurrentUserData}>Annuler</Button>
</div>
</div>
}
{fields1desabled == true &&
<Button variant="contained" color="success" className="div_row22 btn_modif" onClick={enablefieds1}>Editer</Button>
}
</div>
</Box>
</div>
<div className="div_row_droite"> <div className="titre1"> Mode de Paiement</div>
{String(paymentmodeapi) === String("True") && <div>
{paymentmode && String(paymentmode).length > 0 && paymentmode.map((payment) => (
<ul className="list_produits_service">
<div>
<ul>
Type carte : {(JSON.parse(payment).brand)}
</ul>
<ul>
Nom carte : {(JSON.parse(payment).nom_carte)}
</ul>
<ul>
Num carte : XXXXXX{(JSON.parse(payment).last4)}
</ul>
<ul>
Expiration : {(JSON.parse(payment).exp_month)}/{(JSON.parse(payment).exp_year)}
</ul>
<ul>
Date Creation : {(JSON.parse(payment).createdatetime)}
</ul>
<img src={img_logo_stripe} className="img_payment_checkout" /> &nbsp;
</div>
</ul>
))}
<br />
{/*payement_id &&
<div style={{ "width": "100%", "marginLeft": "auto", "marginRight": "auto" }}>
<h1>Subscribe</h1>
{clientSecret_id && <div> <button onClick={initpayement_front}>
Valide payement {clientSecret_id}
</button>
setpaymentmode = {paymentmode}
</div>}
<div> les info de payement stocké sont :
{paymentmode}
</div>
<p>
Try the successful test card: <span>4242424242424242</span>.
</p>
<p>
Try the test card that requires SCA: <span>4000002500003155</span>.
</p>
<p>
Use any <i>future</i> expiry date, CVC,5 digit postal code
</p>
<hr />
<div>
<label>
Full name
<input type="text" id="name" value="cherif balde" />
</label>
<CardElement />
<button onClick={finalize_abonnement}>
Finalise Subscribe / Confirmer la commande
</button>
{paymentIntent && <h3> PAYEMENT OK REDIRECTION VERS LA PAGE OK</h3>}
</div>
</div>
*/}
{paymentmode && String(paymentmode).length > 0 && paymentmode.map((payment) => (
<ul className="list_produits_service">
{String(JSON.parse(payment).type) === String("sepa") && <div>
<div className="titre1" style={{ "fontSize": "small", "fontWeight": "normal" }}> Prelevement SEPA </div>
<li>
BIC : {JSON.parse(payment).bic}
</li>
<li>
IBAN : {(JSON.parse(payment).iban).substring(0, 10)}XXX
</li>
<li>
Titulaire du compte : {JSON.parse(payment).nom_compte}
</li>
<li>
Dernière mise à jour : {(JSON.parse(payment).date_update).substring(0, 10)}
</li>
</div>}
{String(JSON.parse(payment).type) === String("cb") && <div>
<div className="titre1" style={{ "fontSize": "small", "fontWeight": "normal" }}> Prelevement Carte Bancaire </div>
<li>
Num carte : {(JSON.parse(payment).num_carte).substring(0, 4)}XXXXXXXXX
</li>
<li>
Date expiration : {JSON.parse(payment).date_exp_carte}
</li>
<li>
Titulaire de la carte : {JSON.parse(payment).nom_carte}
</li>
<li>
Dernière mise à jour : {(JSON.parse(payment).date_update).substring(0, 10)}
</li>
</div>}
</ul>
))}
{!paymentmode || String(paymentmode).length <= 0 && String(props.packs).toLocaleLowerCase() !== "decouverte" && <div className="koUpdateData div_row_central">
Vous n'avez pas de mode de Paiement enregistré
<div style={{
"width": "50%", "marginLeft": "auto",
"cursor": "pointer", "marginLeft": "auto", "marginRight": "auto", "textAlign": "center", "color": "green"
}} onClick={menu_paymentmethode}> <IoAddCircleOutline /><br />Ajouter un mode de paiement</div>
{String(addpayementcheckout) === String("addpaymentmethode") && <div>
<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(menumodepayement) === String("cb") && <div>
<div className="div_row_chekout">
<div className="div_row_gauche" style={{ "minHeight": "4rem" }}> Carte Bancaire </div>
<div className="div_row_droite" style={{ "textAlign": "right", "maxHeight": "rem" }}>
<img src={img_logo_stripe} className="img_payment_chekout" /> &nbsp;
</div>
</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"
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 style={{ "width": "10%" }}> &nbsp;</div>
<hr />
<div className="div_row_central">
<div className="titre1" onClick={menu_sepa}> Prélèvement par virement SEPA</div>
{String(menumodepayement) === 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 style={{ "width": "10%" }}> &nbsp;</div>
<hr />
<div className="div_row_centre">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregister</Button>
</div>
</div>
</div>}
</div>
}
{!paymentmode || String(paymentmode).length <= 0 && String(props.packs).toLocaleLowerCase() === "decouverte" && <div className="div_row_central">
Vous n'avez pas de mode de Paiement enregistré
<div style={{
"width": "50%", "marginLeft": "auto",
"cursor": "pointer", "marginLeft": "auto", "marginRight": "auto", "textAlign": "center", "color": "green"
}} onClick={menu_paymentmethode}> <IoAddCircleOutline /><br />Ajouter un mode de paiement</div>
{String(addpayementcheckout) === String("addpaymentmethode") && <div>
<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(menumodepayement) === String("cb") && <div>
<div className="div_row_chekout">
<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_chekout" /> &nbsp;
<img src={img_paypal} className="img_payment_chekout" />
</div>
</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"
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 style={{ "width": "10%" }}> &nbsp;</div>
<hr />
<div className="div_row_central">
<div className="titre1" onClick={menu_sepa}> Prélèvement par virement SEPA</div>
{String(menumodepayement) === 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 style={{ "width": "10%" }}> &nbsp;</div>
<hr />
<div className="div_row_centre">
<Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregister</Button>
</div>
</div>
</div>}
</div>
}
</div>}
{String(paymentmodeapi) === String("False") && (String(props.packs).toLowerCase() !== String("decouverte")) &&
<div className="koUpdateData">
Impossible de recuperer votre mode de payment
</div>
}
{(String(props.packs).toLowerCase() === String("decouverte")) &&
<div className="OkUpdateData">
Abonnement decouverte : Gratuit 15 jours
</div>
}
</div>
</div>
<div className="div_row">
<div className="div_row_center">
{(String(okcommande) !== String("ko") ||
(String(props.packs).toLowerCase() === String("decouverte")))
&& <Button variant="contained" color="success" className="div_row22 btn_enreg_cmd " onClick={Ordervalidation}>Confirmer la commande</Button>}
{String(okcommande) === String("ko") && (String(props.packs).toLowerCase() !== String("decouverte")) && <Button variant="contained" disabled className="div_row22 btn_enreg_cmd " onClick={""}>Confirmer la commande</Button>}
</div>
</div>
</div>}
{String(menu) === String("ordervalide") && String(apiorderid) === String("1") && <div>
<OrderConfirmation num_cmd={orderid} packs={String(props.packs).toLocaleUpperCase()} />
</div>}
</div>);
}
export default CheckOut;