no cookies or api call...

GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js

@@ -1,8 +1,10 @@
 import { createContext, useState } from "react";
+import { useCookies } from "react-cookie";
 
 export const CartContext = createContext({
     items: [],
     getProductQuantity: () => { },
+    getProductRemaining: () => { },
     addOneToCart: () => { },
     removeOneFromCart: () => { },
     deleteFromCart: () => { },
@@ -12,11 +14,12 @@ export const CartContext = createContext({
 
 export function CartProvider({ children }) {
 
+    const [cookies, setCookie] = useCookies(['cart']);
     const [cartProducts, setCartProducts] = useState([]);
 
     function addToCart(product, qty) {
 
-        setCartProducts([...cartProducts, {...product, quantity: parseFloat(qty)}]);
+        setCartProducts([...cartProducts, { ...product, quantity: parseFloat(qty), remaining: parseFloat(product.quantity) }]);
     }
 
     function getProductQuantity(id) {
@@ -28,10 +31,20 @@ export function CartProvider({ children }) {
         return quantity;
     };
 
-    function addOneToCart(id, qty) {
-        const currentQty = getProductQuantity(id);
+    function getProductRemaining(id) {
+        const remaining = cartProducts.find(product => product.id === id)?.remaining;
+        if (remaining === undefined) {
+            return 0;
+        }
 
-        if (qty > currentQty) {
+        return remaining;
+    };
+
+    function addOneToCart(id) {
+        const currentQty = getProductQuantity(id);
+        const remaining = getProductRemaining(id);
+
+        if (remaining > currentQty) {
             setCartProducts(
                 cartProducts.map(
                     product => product.id === id
@@ -46,7 +59,7 @@ export function CartProvider({ children }) {
         const currentQty = getProductQuantity(id);
 
         if (currentQty === 1)
-            deleteFromCart();
+            deleteFromCart(id);
         else
             setCartProducts(
                 cartProducts.map(
@@ -68,7 +81,7 @@ export function CartProvider({ children }) {
     function getTotalCost() {
         let totalCost = 0;
         cartProducts.map((cartItem) => {
-            totalCost += (cartItem.Price * cartItem.quantity);
+            totalCost += (parseFloat(cartItem.price) * parseFloat(cartItem.quantity));
         });
 
         return totalCost;
@@ -77,6 +90,7 @@ export function CartProvider({ children }) {
     const contextValue = {
         items: cartProducts,
         getProductQuantity,
+        getProductRemaining,
         addOneToCart,
         removeOneFromCart,
         deleteFromCart,

GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js

@@ -28,8 +28,11 @@ const CartButton = () => {
                 <ModalBody>
                     {productsCount > 0 ?
                         <>
-                            <p></p>
                             {cart.items.map((item) => <CartCard product={item}></CartCard>)}
+                            <div className="payer">
+                                <h className="total">Total: {cart.getTotalCost().toFixed(2)}$ CAD</h>
+                                <Button className="payer">Payer</Button>
+                            </div>
                         </>
                         :
                         <h1>C'est vide! Rempli le hi hi!</h1>

GrossesMitaines/grosses-mitaines-ui/src/components/CartCard.js

@@ -24,12 +24,12 @@ export function CartCard({ product }) {
                 <Card.Body>
                     <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                     <Card.Img className="item-img" variant="top" src={imageSrc} />
-                    <Card.Title>{product.Title}</Card.Title>
-                    <Card.Text>{product.Price}$ CA</Card.Text>
+                    <Card.Title>{product.title}</Card.Title>
+                    <Card.Text>{product.price}$ CA</Card.Text>
                     <Form as={Row}>
                         <Form.Label column="true" sm="6">Dans l'carosse: {productQuantity}</Form.Label>
                         <Col sm="6">
-                            <Button sm="6" className='mx-2' onClick={() => cart.addOneToCart(product.id, product.quantity)}>+</Button>
+                            <Button sm="6" className='mx-2' onClick={() => cart.addOneToCart(product.id)}>+</Button>
                             <Button sm="6" className='mx-2' onClick={() => cart.removeOneFromCart(product.id)}>-</Button>
                         </Col>
                     </Form>

GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js

@@ -149,7 +149,7 @@ const MorceauDetail = () => {
                             <Form as={Row}>
                                 <Form.Label sm="6">Dans l'carosse: {inCartQuantity}</Form.Label>
                                 <Button disabled={isNoStock()} className="add-to-cart"
-                                    onClick={() => cart.addOneToCart(item.id, item.quantity)}
+                                    onClick={() => cart.addOneToCart(item.id)}
                                     sm="6">
                                     +
                                 </Button >

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -599,9 +599,7 @@ a {
     margin-top: 25px;
 }
 
-.detail-status-available {
-
-}
+.detail-status-available {}
 
 .detail-status-backorder {}
 
@@ -621,34 +619,34 @@ a {
 }
 
 .detail-container-image {
-    margin:auto;
-    margin-top:25px;
+    margin: auto;
+    margin-top: 25px;
     width: 35%;
     height: 100%;
 }
 
 
 .detail-container-info {
-    margin:auto;
+    margin: auto;
     width: 35%;
     height: 100%;
 }
 
 .detail-container-controls {
-    margin:auto;
-    display:inline-flex;
-    width:20%;
-    height:100%;
+    margin: auto;
+    display: inline-flex;
+    width: 20%;
+    height: 100%;
 }
 
 .qty-select {
     width: fit-content;
-    height:fit-content;
-    margin:auto;
+    height: fit-content;
+    margin: auto;
 }
 
-.add-to-cart{
-    width:auto;
+.add-to-cart {
+    width: auto;
     margin-left: 10px;
 }
 
@@ -657,7 +655,7 @@ a {
     height: auto;
 }
 
-.detail-price{
+.detail-price {
     font-weight: bold;
 }
 
@@ -670,8 +668,22 @@ a {
     text-decoration: line-through;
 }
 
+.total {
+    margin: 5%;
+    color: green;
+    font-weight: bold;
+}
 
+.payer {
+    display: flex;
+    margin: 5%;
+    margin-left: auto;
+}
 
+.carosse {
+    border-color: purple;
+    border-width: 2%;
+}
 
 .btn-fermer {
     background-color: red !important;
@@ -726,11 +738,11 @@ a {
 }
 
 
-.invoice-list-container{
+.invoice-list-container {
     border: beige 2px double;
 }
 
-.invoice-item-container{
+.invoice-item-container {
     border: black 1px solid;
 }