BEINISISNIDSFINSDOvhpbfdslkvmh f,uidafmjkuzvrnhdahgdsxzk.gjSUrabéj

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 (
+        <div className="review-invoice-container">
+
+            <div className="review-invoice-info">
+                <div>
+                    <label>Prénom: </label>
+                    <input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+                </div>
+                <div>
+                    <label>Nom: </label>
+                    <input value={lastName} onChange={(e) => setLastName(e.target.value)} />
+                </div>
+                <div>
+                    <label>Téléphone: </label>
+                    <input value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
+                </div>
+                <div>
+                    <label>Courriel: </label>
+                    <input value={emailAddress} onChange={(e) => setEmailAddress(e.target.value)} />
+                </div>
+            </div>
+
+            <div className="review-invoice-address-container">
+                <div>
+                    <label>Numéro civique: </label>
+                    <input type="number" min="0" value={civicNumber} onChange={(e) => setCivicNumber(e.target.value)} />
+                </div>
+                <div>
+                    <label>Numéro d'appartement: </label>
+                    <input value={appartment} onChange={(e) => setAppartment(e.target.value)} />
+                </div>
+                <div>
+                    <label>Rue: </label>
+                    <input value={street} onChange={(e) => setStreet(e.target.value)} />
+                </div>
+                <div>
+                    <label>Ville: </label>
+                    <input value={city} onChange={(e) => setCity(e.target.value)} />
+                </div>
+                <div>
+                    <label>Province (abréviation): </label>
+                    <input value={province} onChange={(e) => setProvince(e.target.value)} />
+                </div>
+                <div>
+                    <label>Pays: </label>
+                    <input value={country} onChange={(e) => setCountry(e.target.value)} />
+                </div>
+                <div>
+                    <label>Code postal: </label>
+                    <input value={postalCode} onChange={(e) => setPostalCode(e.target.value)} />
+                </div>
+            </div>
+
+            <div>
+                <ReviewProdList
+                    products={products}
+                    onAddOne={handleAddOne}
+                    onRemoveOne={handleRemoveOne}
+                    onRemoveProduct={handleRemoveProduct}
+                />
+                <TotalProductsPrice
+                    products={products}
+                />
+            </div>
+
+        </div>
+    );
 }
 
 export default ReviewInvoice;