Front-end pour Stripe
This commit is contained in:
Victor Turgeon
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { CartContext } from "../components/Cart";
|
||||
import StripeContainer from "../components/StripeContainer"
|
||||
|
||||
const ReviewInvoice = () => {
|
||||
|
||||
@@ -28,26 +29,38 @@ const ReviewInvoice = () => {
|
||||
province: "",
|
||||
country: "",
|
||||
postalCode: "",
|
||||
prodQuant: []
|
||||
prodQuant: [],
|
||||
});
|
||||
|
||||
const [total, setTotal] = useState(-1);
|
||||
|
||||
useEffect(() => {
|
||||
const cookies = new Cookies();
|
||||
const thisInvoice = cookies.get('invoice');
|
||||
if (thisInvoice != null) {
|
||||
var dic = {};
|
||||
if (cart.items.length > 0) {
|
||||
cart.items.forEach((item) =>
|
||||
dic[item.id] = item.quantity
|
||||
cart.items.forEach((item) => {
|
||||
dic[item.id] = item.quantity;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
async function test() {
|
||||
const tpsRate = 5;
|
||||
const tvqRate = 9.975;
|
||||
|
||||
const json = JSON.stringify(dic);
|
||||
console.log(await json);
|
||||
}
|
||||
test();
|
||||
var price = cart.getTotalCost();
|
||||
var tps = 0;
|
||||
var tvq = 0;
|
||||
var totalCost;
|
||||
|
||||
tps = price * (tpsRate / 100);
|
||||
tvq = price * (tvqRate / 100);
|
||||
totalCost = price + tps + tvq;
|
||||
totalCost = totalCost * 100;
|
||||
totalCost = totalCost.toFixed(0);
|
||||
|
||||
setTotal(totalCost);
|
||||
|
||||
|
||||
setThisInvoice((e) => {
|
||||
@@ -73,65 +86,12 @@ const ReviewInvoice = () => {
|
||||
}
|
||||
}, [cart]);
|
||||
|
||||
|
||||
// const handleAddOne = (id) => {
|
||||
|
||||
// var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
|
||||
// var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
|
||||
|
||||
// modifiedPQ.quantity++;
|
||||
// modifiedProd.quantity = modifiedPQ.quantity;
|
||||
|
||||
// setProdQuant([...(prodQuant.filter((pq) => pq.id !== id)), { ...modifiedPQ }].sort((a, b) => a.id - b.id));
|
||||
// setProducts([...(products.filter((pq) => pq.product.id !== id)), { ...modifiedProd }].sort((a, b) => a.product.id - b.product.id));
|
||||
|
||||
|
||||
// }
|
||||
|
||||
// const handleRemoveOne = (id) => {
|
||||
// var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
|
||||
// var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
|
||||
|
||||
// if (modifiedPQ.quantity - 1 <= 0) {
|
||||
// setProdQuant([...(prodQuant.filter((pq) => pq.id !== id))].sort((a, b) => a.id - b.id));
|
||||
// setProducts([...(products.filter((pq) => pq.product.id !== id))].sort((a, b) => a.product.id - b.product.id));
|
||||
// }
|
||||
// else {
|
||||
// modifiedPQ.quantity--;
|
||||
// modifiedProd.quantity = modifiedPQ.quantity;
|
||||
// setProdQuant([...(prodQuant.filter((pq) => pq.id !== id)), { ...modifiedPQ }].sort((a, b) => a.id - b.id));
|
||||
// setProducts([...(products.filter((pq) => pq.product.id !== id)), { ...modifiedProd }].sort((a, b) => a.product.id - b.product.id));
|
||||
// }
|
||||
// }
|
||||
|
||||
// const handleRemoveProduct = (id) => {
|
||||
|
||||
// setProdQuant([...(prodQuant.filter((pq) => pq.id !== id))].sort((a, b) => a.id - b.id));
|
||||
// setProducts([...(products.filter((pq) => pq.product.id !== id))].sort((a, b) => a.product.id - b.product.id));
|
||||
// }
|
||||
|
||||
const handleModify = () => {
|
||||
navigate("/formulaire")
|
||||
}
|
||||
|
||||
const handleConfirmer = async () => {
|
||||
|
||||
// var dic = {};
|
||||
// if (cart.items.length > 0) {
|
||||
// cart.items.forEach((item) =>
|
||||
// dic[item.id] = item.quantity
|
||||
// )
|
||||
// }
|
||||
// const json = JSON.stringify(dic);
|
||||
// console.log(await json);
|
||||
|
||||
// const json1 = JSON.stringify(cart.items);
|
||||
// console.log(await json1);
|
||||
|
||||
//setThisInvoice({ ...thisInvoice, prodQuant: dic });
|
||||
|
||||
const json = JSON.stringify(thisInvoice);
|
||||
console.log(json);
|
||||
|
||||
const response = await fetch(`https://localhost:7292/api/Invoice`, {
|
||||
method: 'POST',
|
||||
@@ -167,69 +127,73 @@ const ReviewInvoice = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<h2 className="confirmer-infos">Veuillez confirmer les informations ci-dessous!</h2>
|
||||
<Col xs={6} md={4}>
|
||||
<>
|
||||
<Row>
|
||||
<h2 className="confirmer-infos">Veuillez confirmer les informations ci-dessous!</h2>
|
||||
<Col xs={6} md={4}>
|
||||
|
||||
<div className="review-invoice-info">
|
||||
<div>
|
||||
<label className="bold">Prénom: </label> <label>{thisInvoice.firstName}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Nom: </label> <label>{thisInvoice.lastName}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Téléphone: </label> <label>{thisInvoice.phoneNumber}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Courriel: </label> <label>{thisInvoice.emailAddress}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="review-invoice-address-container">
|
||||
<div>
|
||||
<label className="bold">Numéro civique: </label> <label>{thisInvoice.civicNumber}</label>
|
||||
</div>
|
||||
{thisInvoice.appartment != null ?
|
||||
<div className="review-invoice-info">
|
||||
<div>
|
||||
<label className="bold">Numéro d'appartement: </label> <label>{thisInvoice.appartment}</label>
|
||||
<label className="bold">Prénom: </label> <label>{thisInvoice.firstName}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Nom: </label> <label>{thisInvoice.lastName}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Téléphone: </label> <label>{thisInvoice.phoneNumber}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Courriel: </label> <label>{thisInvoice.emailAddress}</label>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<div>
|
||||
<label className="bold">Rue: </label> <label>{thisInvoice.street}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Ville: </label> <label>{thisInvoice.city}</label>
|
||||
|
||||
<div className="review-invoice-address-container">
|
||||
<div>
|
||||
<label className="bold">Numéro civique: </label> <label>{thisInvoice.civicNumber}</label>
|
||||
</div>
|
||||
{thisInvoice.appartment != null ?
|
||||
<div>
|
||||
<label className="bold">Numéro d'appartement: </label> <label>{thisInvoice.appartment}</label>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<div>
|
||||
<label className="bold">Rue: </label> <label>{thisInvoice.street}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Ville: </label> <label>{thisInvoice.city}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Province (abréviation): </label> <label>{thisInvoice.province}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Pays: </label> <label>{thisInvoice.country}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Code postal: </label> <label>{thisInvoice.postalCode}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Province (abréviation): </label> <label>{thisInvoice.province}</label>
|
||||
<div className="review-invoice-info">
|
||||
<TotalProductsPrice
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Pays: </label> <label>{thisInvoice.country}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="bold">Code postal: </label> <label>{thisInvoice.postalCode}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="review-invoice-info">
|
||||
<TotalProductsPrice
|
||||
/>
|
||||
</div>
|
||||
<Row className="invoice-buttons">
|
||||
{/* <Row className="invoice-buttons">
|
||||
<Col xs={6}>
|
||||
<Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
|
||||
</Col>
|
||||
<Col xs={6}>
|
||||
<Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={6} md={8}>
|
||||
<ReviewProdList
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Row> */}
|
||||
</Col>
|
||||
<Col xs={6} md={8}>
|
||||
<ReviewProdList
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<StripeContainer cost={total} />
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user