diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js index 429006c..c8ff940 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js @@ -84,13 +84,18 @@ const InvoiceItem = ({ invoice }) => {
-
- #{invoice.id} ({getStatus(invoice.status)}) -
+ {invoice.status != null ? +
+ #{invoice.id} ({getStatus(invoice.status)}) +
+ : + null + }
Adresse d'expédition:
{invoice.firstName} {invoice.lastName}
- {invoice.shippingAddress.civicNumber} {invoice.shippingAddress.street}
+ {invoice.shippingAddress.civicNumber} {invoice.shippingAddress.street}
+ {invoice.shippingAddress.appartment != null ? <>App: {invoice.shippingAddress.appartment}
: null} {invoice.shippingAddress.city}, {invoice.shippingAddress.province} {invoice.shippingAddress.postalCode}
{invoice.shippingAddress.country}
@@ -99,7 +104,7 @@ const InvoiceItem = ({ invoice }) => {

Produits

<> 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 ( -
- -
+ +
{pq.quantity} x {pq.title}
{productTotal(pq).toFixed(2)} $ CA
+ ) } 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!

+ -
-
- - setFirstName(e.target.value)} /> +
+
+ + {/* setFirstName(e.target.value)} /> */} +
+
+ + {/* setLastName(e.target.value)} /> */} +
+
+ + {/* setPhoneNumber(e.target.value)} /> */} +
+
+ + {/* setEmailAddress(e.target.value)} /> */} +
-
- - setLastName(e.target.value)} /> -
-
- - setPhoneNumber(e.target.value)} /> -
-
- - setEmailAddress(e.target.value)} /> -
-
-
-
- - setCivicNumber(e.target.value)} /> +
+
+ + {/* setCivicNumber(e.target.value)} /> */} +
+ {thisInvoice.appartment != null ? +
+ + {/* setAppartment(e.target.value)} /> */} +
+ : null + } +
+ + {/* setStreet(e.target.value)} /> */} +
+
+ + {/* setCity(e.target.value)} /> */} +
+
+ + {/* setProvince(e.target.value)} /> */} +
+
+ + {/* setCountry(e.target.value)} /> */} +
+
+ + {/* setPostalCode(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)} /> -
-
- -
+ + + + + + + + + + - -
- -
+ + ); } 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%; }