04/06/23 - 23h
parent
0370e6aeb4
commit
d06f050160
|
@ -31,6 +31,9 @@ import { loadStripe } from '@stripe/stripe-js';
|
|||
import { PaymentElement } from '@stripe/react-stripe-js';
|
||||
import Popup from 'reactjs-popup';
|
||||
|
||||
import 'react-tooltip/dist/react-tooltip.css'
|
||||
import { Tooltip } from 'react-tooltip'
|
||||
|
||||
|
||||
const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p');
|
||||
//const stripePromise_PROD = loadStripe('pk_live_51LUUfAAbmaEugrFTyfNe4Dj0vbxc5qXQqNs0rztjAKy8oSlc5EEQyJGjA8Z5kXmP2gvUMcYLUBYCIyWWzLCw59RY00PtGInkVf');
|
||||
|
@ -505,6 +508,10 @@ function CheckOut(props) {
|
|||
form1.append("customerid", cust_strip_id_global);
|
||||
form1.append("pack", currentpack);
|
||||
form1.append("qty", nb_formations);
|
||||
form1.append("discount_code", code_promo_code);
|
||||
form1.append("discount_type", code_promo_type);
|
||||
form1.append("discount_valeur", code_promo_valeur);
|
||||
|
||||
|
||||
fetch(myurl, {
|
||||
method: 'POST',
|
||||
|
@ -1117,12 +1124,81 @@ function CheckOut(props) {
|
|||
|
||||
}
|
||||
|
||||
const [code_promo_code, setcode_promo_code] = useState("");
|
||||
const [code_promo_type, setcode_promo_type] = useState("");
|
||||
const [code_promo_valeur, setcode_promo_valeur] = useState("");
|
||||
const [code_promo_text_to_display, setcode_promo_text_to_display] = useState("");
|
||||
|
||||
const [handleOnblur_Code_Promo_api, sethandleOnblur_Code_Promo_api] = useState("");
|
||||
const [handleOnblur_Code_Promo_result, sethandleOnblur_Code_Promo_result] = useState("");
|
||||
const [handleOnblur_Code_Promo_message, sethandleOnblur_Code_Promo_message] = useState("");
|
||||
|
||||
const handleOnblur_Code_Promo = (event) => {
|
||||
|
||||
setcode_promo_code("");
|
||||
setcode_promo_type("");
|
||||
setcode_promo_valeur("");
|
||||
setcode_promo_text_to_display("");
|
||||
|
||||
sethandleOnblur_Code_Promo_api("");
|
||||
sethandleOnblur_Code_Promo_result("");
|
||||
sethandleOnblur_Code_Promo_message("");
|
||||
|
||||
|
||||
|
||||
|
||||
setcode_promo_code(event.target.value);
|
||||
//console.log(" ### event.target.value = ", event.target.value);
|
||||
const formData = new FormData();
|
||||
const url = process.env.REACT_APP_API_URL + "myclass/api/Get_Given_Code_Promo/";
|
||||
formData.append('token', stored_part);
|
||||
formData.append('code_promo', event.target.value);
|
||||
|
||||
axios.post(url, formData).then(res => {
|
||||
//console.log(" In getCurrentUserData res.data.status = " + res.data.status);
|
||||
//console.log(" In getCurrentUserData res.data.message = " + res.data.message);
|
||||
if (String(res.data.status) === "true") {
|
||||
|
||||
sethandleOnblur_Code_Promo_api("true");
|
||||
sethandleOnblur_Code_Promo_result(res.data.message);
|
||||
|
||||
var mycodepromo_data = JSON.parse(res.data.message);
|
||||
if (mycodepromo_data) {
|
||||
//console.log(' mycodepromo_data = ', mycodepromo_data);
|
||||
if (mycodepromo_data.type) {
|
||||
setcode_promo_type(mycodepromo_data.type);
|
||||
}
|
||||
if (mycodepromo_data.valeur) {
|
||||
setcode_promo_valeur(mycodepromo_data.valeur);
|
||||
}
|
||||
|
||||
if (String(mycodepromo_data.type).toLocaleLowerCase() === "fix") {
|
||||
setcode_promo_text_to_display("- " + mycodepromo_data.valeur + " €")
|
||||
}
|
||||
else if (String(mycodepromo_data.type).toLocaleLowerCase() === "percent") {
|
||||
setcode_promo_text_to_display("- " + mycodepromo_data.valeur + " % ")
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
||||
sethandleOnblur_Code_Promo_api("false");
|
||||
sethandleOnblur_Code_Promo_message(res.data.message);
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
console.warn('Erro handleOnblur_Code_Promo = ', error);
|
||||
sethandleOnblur_Code_Promo_api("false");
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="checkout">
|
||||
|
||||
{isLoading && <div className="loader-container">
|
||||
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
|
||||
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
|
||||
</div>}
|
||||
|
||||
{String(apiorderid) === String("0") && <div className="koUpdateData">
|
||||
|
@ -1170,7 +1246,7 @@ function CheckOut(props) {
|
|||
</div>
|
||||
<div className="div_row_droite"> <div className="titre1"> Detail prix </div>
|
||||
<div>
|
||||
<div style={{ "width": "90%" }}>
|
||||
<div style={{ "width": "90%", "float": "left" }}>
|
||||
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
|
||||
Periodicité :
|
||||
</div>
|
||||
|
@ -1181,7 +1257,7 @@ function CheckOut(props) {
|
|||
|
||||
</div>
|
||||
|
||||
<div style={{ "width": "90%" }}>
|
||||
<div style={{ "width": "90%", "float": "left" }}>
|
||||
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
|
||||
Prix unitaire :
|
||||
</div>
|
||||
|
@ -1192,7 +1268,7 @@ function CheckOut(props) {
|
|||
|
||||
</div>
|
||||
|
||||
<div style={{ "width": "90%" }} id="div_nb_formation" className="mob_heigh">
|
||||
<div style={{ "width": "90%", "float": "left" }} id="div_nb_formation" className="mob_heigh">
|
||||
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
|
||||
Nombre de formations :
|
||||
</div>
|
||||
|
@ -1210,7 +1286,7 @@ function CheckOut(props) {
|
|||
}
|
||||
|
||||
{(String(props.packs).toLowerCase() === String("decouverte")) &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
1
|
||||
</div>
|
||||
}
|
||||
|
@ -1219,33 +1295,115 @@ function CheckOut(props) {
|
|||
</div>
|
||||
|
||||
|
||||
<div style={{ "width": "90%" }}>
|
||||
|
||||
<div style={{ "width": "90%", "float": "left" }}>
|
||||
<Tooltip id="tooltip_id_1" />
|
||||
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
|
||||
<a data-tooltip-id="tooltip_id_1" data-tooltip-content="Saisir le code promo">
|
||||
Code promo :
|
||||
<input type="text" id="discount_val" name="discount_val"
|
||||
minlength="4" maxlength="20" size="20" style={{ "width": "50%", "float": "right" }}
|
||||
onBlur={handleOnblur_Code_Promo}>
|
||||
|
||||
</input>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{code_promo_text_to_display && String(code_promo_text_to_display) != "" &&
|
||||
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right", "color": "green", "fontSize": "bold" }}>
|
||||
{code_promo_text_to_display}
|
||||
</div>
|
||||
}
|
||||
|
||||
{(!code_promo_text_to_display || String(code_promo_text_to_display)) === "" &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
0 €
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ "width": "90%", "float": "left" }} id="div_ttc">
|
||||
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
|
||||
Total HT :
|
||||
</div>
|
||||
|
||||
|
||||
{String(handleOnblur_Code_Promo_api) !== "true" &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
{packprice * nb_formations } €
|
||||
</div>
|
||||
}
|
||||
|
||||
{String(handleOnblur_Code_Promo_api) === "true" &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
|
||||
{String(code_promo_type) === "fix" && <nav>
|
||||
{((packprice * nb_formations) - parseFloat(code_promo_valeur)) } €
|
||||
</nav>}
|
||||
|
||||
{String(code_promo_type) === "percent" && <nav>
|
||||
{(((packprice * nb_formations) * (1 - (parseFloat(code_promo_valeur) / 100)))) } €
|
||||
</nav>}
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ "width": "90%", "float": "left" }}>
|
||||
<div style={{ "textAlign": "left", "width": "50%", "float": "left" }}>
|
||||
|
||||
TVA :
|
||||
</div>
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "left" }}>
|
||||
{String(handleOnblur_Code_Promo_api) !== "true" &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
{packprice * nb_formations * 0.2} €
|
||||
</div>
|
||||
</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>
|
||||
{String(handleOnblur_Code_Promo_api) === "true" &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
{String(code_promo_type) === "fix" && <nav>
|
||||
{ ( ((packprice * nb_formations) - parseFloat(code_promo_valeur)) * 0.2).toFixed(2)} €
|
||||
</nav>}
|
||||
|
||||
{String(code_promo_type) === "percent" && <nav>
|
||||
{((((packprice * nb_formations) * (1 - (parseFloat(code_promo_valeur) / 100)))) * 0.2).toFixed(2)} €
|
||||
</nav>}
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
<div style={{ "width": "90%" }} id="div_ttc">
|
||||
|
||||
<div style={{ "width": "90%", "float": "left" }} 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>
|
||||
|
||||
|
||||
{String(handleOnblur_Code_Promo_api) !== "true" &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
{packprice * nb_formations * 1.2} €
|
||||
</div>
|
||||
}
|
||||
|
||||
{String(handleOnblur_Code_Promo_api) === "true" &&
|
||||
<div style={{ "textAlign": "right", "width": "50%", "float": "right" }}>
|
||||
|
||||
{String(code_promo_type) === "fix" && <nav>
|
||||
{(((packprice * nb_formations) - parseFloat(code_promo_valeur)) * 1.2).toFixed(2)} €
|
||||
</nav>}
|
||||
|
||||
{String(code_promo_type) === "percent" && <nav>
|
||||
{((((packprice * nb_formations) * (1 - (parseFloat(code_promo_valeur) / 100)))) * 1.2).toFixed(2)} €
|
||||
</nav>}
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue