From fd8ade08f00621f697ca693b6976f66af9a544a0 Mon Sep 17 00:00:00 2001 From: Victor Turgeon Date: Tue, 8 Nov 2022 10:22:15 -0500 Subject: [PATCH] =?UTF-8?q?BEINISISNIDSFINSDOvhpbfdslkvmh=20f,uidafmjkuzvr?= =?UTF-8?q?nhdahgdsxzk.gjSUrab=C3=A9j?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ReviewProdItem.js | 9 + .../src/components/ReviewProdList.js | 20 +++ .../src/components/TotalProductsPrice.js | 40 +++++ .../src/pages/ReviewInvoice.js | 154 +++++++++++++++++- .../src/stylesheets/site.css | 4 + 5 files changed, 226 insertions(+), 1 deletion(-) create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js new file mode 100644 index 0000000..7d5d624 --- /dev/null +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js @@ -0,0 +1,9 @@ +const ReviewProdItem = ({ pq, onAddOne, onRemoveOne, onRemoveProduct }) => { + return ( +
+ +
+ ) +} + +export default ReviewProdItem \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js new file mode 100644 index 0000000..506cffa --- /dev/null +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js @@ -0,0 +1,20 @@ +import ReviewProdItem from "./ReviewProdItem"; + +const ReviewProdList = ({ products, onAddOne, onRemoveOne, onRemoveProduct }) => { + return ( +
+ {products.map((p) => ( + + ))} +
+ + ) +} + +export default ReviewProdList; \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js b/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js new file mode 100644 index 0000000..983cfce --- /dev/null +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js @@ -0,0 +1,40 @@ +const TotalProductsPrice = ({ products }) => { + + const productTotal = (p) => { + return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price)) + } + + const getPriceHTML = (prods) => { + + const tpsRate = 5; + const tvqRate = 9.975; + + var price = 0; + var tps = 0; + var tvq = 0; + + prods.map((p) => { + price += productTotal(p); + }); + + tps = price * (tpsRate / 100); + tvq = price * (tvqRate / 100); + + return ( +
+ Sous-total = {price.toFixed(2)} $ CA
+ + TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA
+ + TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA
+ Total = {(price + tps + tvq).toFixed(2)} $ CA +
+ ); + } + + return ( +
+ {getPriceHTML(products)} +
+ ) +} + +export default TotalProductsPrice; \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js index 20f11bc..0e9f48e 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js @@ -1,5 +1,157 @@ -const ReviewInvoice = () =>{ +import { useState } from "react"; +import { useEffect } from "react"; +import Cookies from "universal-cookie"; +import ReviewProdList from "../components/ReviewProdList"; +import TotalProductsPrice from "../components/TotalProductsPrice"; +const ReviewInvoice = () => { + const cookies = new Cookies(); + + const [products, setProducts] = useState([]); + + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [phoneNumber, setPhoneNumber] = useState(""); + const [emailAddress, setEmailAddress] = useState(""); + const [civicNumber, setCivicNumber] = useState(0); + const [appartment, setAppartment] = useState(""); + const [street, setStreet] = useState(""); + const [city, setCity] = useState(""); + const [province, setProvince] = useState(""); + const [country, setCountry] = useState(""); + const [postalCode, setPostalCode] = useState(""); + const [prodQuant, setProdQuant] = useState({}); + + useEffect(() => { + const thisInvoice = cookies.get('invoice'); + if (thisInvoice != null) { + setFirstName(thisInvoice.firstName); + setLastName(thisInvoice.lastName); + setPhoneNumber(thisInvoice.phoneNumber); + setEmailAddress(thisInvoice.emailAddress); + setCivicNumber(thisInvoice.civicNumber); + setAppartment(thisInvoice.appartment); + setStreet(thisInvoice.street); + setCity(thisInvoice.city); + setProvince(thisInvoice.province); + setCountry(thisInvoice.country); + setPostalCode(thisInvoice.postalCode); + setProdQuant(thisInvoice.prodQuant); + + var prods = []; + + Object.keys(thisInvoice.prodQuant).map((k) => { + fetch(`https://localhost:7292/api/Product?id=${k}`) + .then(async (response) => { + prods.push({ product: await response.json(), quantity: thisInvoice.prodQuant[k] }); + }).then(() => { + setProducts(prods.sort((a, b) => a.product.id - b.product.id)); + }) + }); + + + } + else { + console.log("No invoice to review!"); + } + }, []); + + + const handleAddOne = (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--; + 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)); + } + + + return ( +
+ +
+
+ + setFirstName(e.target.value)} /> +
+
+ + setLastName(e.target.value)} /> +
+
+ + setPhoneNumber(e.target.value)} /> +
+
+ + setEmailAddress(e.target.value)} /> +
+
+ +
+
+ + setCivicNumber(e.target.value)} /> +
+
+ + setAppartment(e.target.value)} /> +
+
+ + setStreet(e.target.value)} /> +
+
+ + setCity(e.target.value)} /> +
+
+ + setProvince(e.target.value)} /> +
+
+ + setCountry(e.target.value)} /> +
+
+ + setPostalCode(e.target.value)} /> +
+
+ +
+ + +
+ +
+ ); } export default ReviewInvoice; \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css index 9b6d0a8..1199c36 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css +++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css @@ -787,6 +787,10 @@ a { border-radius: 2px; } +.review-invoice-address-container{ + border:black 1px solid; +} + /* -------------------------------------------------------- */ /* specification pour les moyennes écrans /* -------------------------------------------------------- */