- #{invoice.id} ({getStatus(invoice.status)})
-
+ #{invoice.id} ({getStatus(invoice.status)})
+
+ :
+ null
+ }
<>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js
index 7d5d624..8b7891e 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js
@@ -1,8 +1,13 @@
-const ReviewProdItem = ({ pq, onAddOne, onRemoveOne, onRemoveProduct }) => {
+export function ReviewProdItem({ pq, /*onAddOne, onRemoveOne, onRemoveProduct*/ }) {
+
+ const productTotal = (p) => {
+ return (p.quantity * (p.status == 3 || p.status == 4 ? p.promoPrice : p.price))
+ }
+
return (
-
+
)
}
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js
index 506cffa..1e1730a 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js
@@ -1,17 +1,24 @@
import ReviewProdItem from "./ReviewProdItem";
+import { CartContext } from './Cart';
+import { useContext } from 'react';
+
+export function ReviewProdList(/*{ products , onAddOne, onRemoveOne, onRemoveProduct }*/) {
+ const cart = useContext(CartContext);
-const ReviewProdList = ({ products, onAddOne, onRemoveOne, onRemoveProduct }) => {
return (
-
- {products.map((p) => (
-
- ))}
+
+
Produits
+
+ {cart.items.map((p) => (
+
+ ))}
+
)
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js b/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js
index 983cfce..400de19 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js
@@ -1,38 +1,45 @@
-const TotalProductsPrice = ({ products }) => {
+import { CartContext } from './Cart';
+import { useContext } from 'react';
- const productTotal = (p) => {
- return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
- }
+export function TotalProductsPrice(/*{ products }*/) {
- const getPriceHTML = (prods) => {
+ const cart = useContext(CartContext);
+
+ // 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 price = cart.getTotalCost();
var tps = 0;
var tvq = 0;
+ var total;
- prods.map((p) => {
- price += productTotal(p);
- });
+ // prods.map((p) => {
+ // price += productTotal(p);
+ // });
tps = price * (tpsRate / 100);
tvq = price * (tvqRate / 100);
+ total = price + tps + tvq;
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
+ Total = {total.toFixed(2)} $ CA
);
}
return (
- {getPriceHTML(products)}
+ {getPriceHTML(/*products*/)}
)
}
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
index dc00044..b584840 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
@@ -1,55 +1,69 @@
-import { useState } from "react";
-import { useEffect } from "react";
+import { useState, useContext, useEffect } from "react";
import Cookies from "universal-cookie";
import ReviewProdList from "../components/ReviewProdList";
import TotalProductsPrice from "../components/TotalProductsPrice";
+import { Row, Col, Button } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import CartProvider from "../components/Cart";
+
const ReviewInvoice = () => {
const cookies = new Cookies();
+ const navigate = useNavigate();
+ const mySwal = withReactContent(Swal);
- const [products, setProducts] = useState([]);
+ const cart = useContext(CartProvider);
- 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({});
+ //const [products, setProducts] = useState([]);
+
+ const [thisInvoice, setThisInvoice] = useState({
+ firstName: "",
+ lastName: "",
+ phoneNumber: "",
+ emailAddress: "",
+ civicNumber: "",
+ appartment: "",
+ street: "",
+ city: "",
+ province: "",
+ country: "",
+ postalCode: "",
+ prodQuant: []
+ });
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));
- })
- });
+ setThisInvoice((e) => {
+ return {
+ ...e,
+ firstName: thisInvoice.firstName,
+ lastName: thisInvoice.lastName,
+ phoneNumber: thisInvoice.phoneNumber,
+ emailAddress: thisInvoice.emailAddress,
+ civicNumber: thisInvoice.civicNumber,
+ appartment: thisInvoice.appartment,
+ street: thisInvoice.street,
+ city: thisInvoice.city,
+ province: thisInvoice.province,
+ country: thisInvoice.country,
+ postalCode: thisInvoice.postalCode,
+ prodQuant: 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!");
@@ -57,109 +71,161 @@ const ReviewInvoice = () => {
}, []);
- const handleAddOne = (id) => {
+ // const handleAddOne = (id) => {
- var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
- var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
+ // var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
+ // var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
- modifiedPQ.quantity++;
- modifiedProd.quantity = modifiedPQ.quantity;
+ // 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));
+ // 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 handleRemoveOne = (id) => {
- var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
- var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
+ const handleConfirmer = async () => {
+ console.log(thisInvoice);
- 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));
+ // let formData = new FormData();
+ // Object.keys(thisInvoice).map((k) => {
+ // formData.set(k, thisInvoice[k]);
+ // });
+
+ // console.log(formData);
+ const json = JSON.stringify(thisInvoice);
+
+ const response = await fetch(`https://localhost:7292/api/Invoice`, {
+ method: 'POST',
+ credentials: 'include',
+ mode: 'cors',
+ headers: {
+ 'accept': 'application/json',
+ },
+ body: json
+ })
+ console.log(json);
+
+ if (response.ok) {
+ mySwal.fire({
+ title: 'Commande envoyée avec succès!',
+ timer: 2000,
+ icon: "success"
+ })
+ cart.items = [];
+ navigate('./myinvoices');
}
+ else
+ console.log("Erreur de creation la commande #" + thisInvoice.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 (
-
+
+ Veuillez confirmer les informations ci-dessous!
+
-
-
-
-
-
Numéro civique:
-
setCivicNumber(e.target.value)} />
+
-
-
-
+
+
+ Confirmer
+
+
+ Modifier
+
+
+
+
-
-
-
-
+
+
);
}
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 1199c36..64d7752 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -762,13 +762,30 @@ a {
.invoice-item-products {
color: white;
- width: 40%;
+ width: 75%;
margin: auto;
+ align-content: center;
+}
+
+.invoice-item-products h3 {
+ text-align: center !important;
+ color:purple;
+ font-weight: bold;
+ background-color: beige;
+ width: auto;
+ border: 3px solid purple;
+ margin-top: 5px;
}
.invoice-item-products li {
padding: 5px;
- /* border: white 1px solid; */
+ background-color: black;
+ border-radius: 3px;
+ margin-bottom: 2px;
+}
+
+.invoice-item-product {
+ padding: 5px;
background-color: black;
border-radius: 3px;
margin-bottom: 2px;
@@ -780,17 +797,60 @@ a {
.invoice-item-price {}
-.formulaire-address{
- border:gray 1px solid;
+.formulaire-address {
+ border: gray 1px solid;
padding: 10px;
margin-bottom: 10px;
border-radius: 2px;
}
-.review-invoice-address-container{
- border:black 1px solid;
+.review-invoice-info {
+ border: black 5px solid;
+ margin: 5px;
+ padding: 2%;
+ border-radius: 10px;
+ background-color: purple;
+ color: white;
}
+.review-invoice-address-container {
+ border: purple 5px solid;
+ margin: 5px;
+ padding: 2%;
+ border-radius: 10px;
+ background-color: beige;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.invoice-buttons {
+ display:flex;
+ margin:5%;
+}
+
+.invoice-button {
+ margin:2%;
+ width: 100%;
+ align-content: center;
+}
+
+.confirmer {
+ background-color: green;
+}
+
+.modifier {
+ background-color: firebrick;
+}
+
+.confirmer-infos {
+ text-align: center;
+ color:white;
+ font-weight: bold;
+}
+
+
/* -------------------------------------------------------- */
/* specification pour les moyennes écrans
/* -------------------------------------------------------- */
@@ -805,7 +865,7 @@ a {
}
.invoice-item-products {
- margin-top:10px;
+ margin-top: 10px;
margin-bottom: 10px;
width: 90%;
}