04/06/23 - 23h

recette2
cherif 2023-06-04 23:22:12 +02:00
parent 0370e6aeb4
commit d06f050160
1 changed files with 178 additions and 20 deletions

View File

@ -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> &nbsp;
</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> &nbsp;
</div>