no cookies or api call...
This commit is contained in:
parent
28fff14d96
commit
809ce36a1e
@ -1,8 +1,10 @@
|
|||||||
import { createContext, useState } from "react";
|
import { createContext, useState } from "react";
|
||||||
|
import { useCookies } from "react-cookie";
|
||||||
|
|
||||||
export const CartContext = createContext({
|
export const CartContext = createContext({
|
||||||
items: [],
|
items: [],
|
||||||
getProductQuantity: () => { },
|
getProductQuantity: () => { },
|
||||||
|
getProductRemaining: () => { },
|
||||||
addOneToCart: () => { },
|
addOneToCart: () => { },
|
||||||
removeOneFromCart: () => { },
|
removeOneFromCart: () => { },
|
||||||
deleteFromCart: () => { },
|
deleteFromCart: () => { },
|
||||||
@ -12,11 +14,12 @@ export const CartContext = createContext({
|
|||||||
|
|
||||||
export function CartProvider({ children }) {
|
export function CartProvider({ children }) {
|
||||||
|
|
||||||
|
const [cookies, setCookie] = useCookies(['cart']);
|
||||||
const [cartProducts, setCartProducts] = useState([]);
|
const [cartProducts, setCartProducts] = useState([]);
|
||||||
|
|
||||||
function addToCart(product, qty) {
|
function addToCart(product, qty) {
|
||||||
|
|
||||||
setCartProducts([...cartProducts, {...product, quantity: parseFloat(qty)}]);
|
setCartProducts([...cartProducts, { ...product, quantity: parseFloat(qty), remaining: parseFloat(product.quantity) }]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getProductQuantity(id) {
|
function getProductQuantity(id) {
|
||||||
@ -28,10 +31,20 @@ export function CartProvider({ children }) {
|
|||||||
return quantity;
|
return quantity;
|
||||||
};
|
};
|
||||||
|
|
||||||
function addOneToCart(id, qty) {
|
function getProductRemaining(id) {
|
||||||
const currentQty = getProductQuantity(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(
|
setCartProducts(
|
||||||
cartProducts.map(
|
cartProducts.map(
|
||||||
product => product.id === id
|
product => product.id === id
|
||||||
@ -46,7 +59,7 @@ export function CartProvider({ children }) {
|
|||||||
const currentQty = getProductQuantity(id);
|
const currentQty = getProductQuantity(id);
|
||||||
|
|
||||||
if (currentQty === 1)
|
if (currentQty === 1)
|
||||||
deleteFromCart();
|
deleteFromCart(id);
|
||||||
else
|
else
|
||||||
setCartProducts(
|
setCartProducts(
|
||||||
cartProducts.map(
|
cartProducts.map(
|
||||||
@ -68,7 +81,7 @@ export function CartProvider({ children }) {
|
|||||||
function getTotalCost() {
|
function getTotalCost() {
|
||||||
let totalCost = 0;
|
let totalCost = 0;
|
||||||
cartProducts.map((cartItem) => {
|
cartProducts.map((cartItem) => {
|
||||||
totalCost += (cartItem.Price * cartItem.quantity);
|
totalCost += (parseFloat(cartItem.price) * parseFloat(cartItem.quantity));
|
||||||
});
|
});
|
||||||
|
|
||||||
return totalCost;
|
return totalCost;
|
||||||
@ -77,6 +90,7 @@ export function CartProvider({ children }) {
|
|||||||
const contextValue = {
|
const contextValue = {
|
||||||
items: cartProducts,
|
items: cartProducts,
|
||||||
getProductQuantity,
|
getProductQuantity,
|
||||||
|
getProductRemaining,
|
||||||
addOneToCart,
|
addOneToCart,
|
||||||
removeOneFromCart,
|
removeOneFromCart,
|
||||||
deleteFromCart,
|
deleteFromCart,
|
||||||
|
@ -28,8 +28,11 @@ const CartButton = () => {
|
|||||||
<ModalBody>
|
<ModalBody>
|
||||||
{productsCount > 0 ?
|
{productsCount > 0 ?
|
||||||
<>
|
<>
|
||||||
<p></p>
|
|
||||||
{cart.items.map((item) => <CartCard product={item}></CartCard>)}
|
{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>
|
<h1>C'est vide! Rempli le hi hi!</h1>
|
||||||
|
@ -24,12 +24,12 @@ export function CartCard({ product }) {
|
|||||||
<Card.Body>
|
<Card.Body>
|
||||||
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
|
<div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
|
||||||
<Card.Img className="item-img" variant="top" src={imageSrc} />
|
<Card.Img className="item-img" variant="top" src={imageSrc} />
|
||||||
<Card.Title>{product.Title}</Card.Title>
|
<Card.Title>{product.title}</Card.Title>
|
||||||
<Card.Text>{product.Price}$ CA</Card.Text>
|
<Card.Text>{product.price}$ CA</Card.Text>
|
||||||
<Form as={Row}>
|
<Form as={Row}>
|
||||||
<Form.Label column="true" sm="6">Dans l'carosse: {productQuantity}</Form.Label>
|
<Form.Label column="true" sm="6">Dans l'carosse: {productQuantity}</Form.Label>
|
||||||
<Col sm="6">
|
<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>
|
<Button sm="6" className='mx-2' onClick={() => cart.removeOneFromCart(product.id)}>-</Button>
|
||||||
</Col>
|
</Col>
|
||||||
</Form>
|
</Form>
|
||||||
|
@ -149,7 +149,7 @@ const MorceauDetail = () => {
|
|||||||
<Form as={Row}>
|
<Form as={Row}>
|
||||||
<Form.Label sm="6">Dans l'carosse: {inCartQuantity}</Form.Label>
|
<Form.Label sm="6">Dans l'carosse: {inCartQuantity}</Form.Label>
|
||||||
<Button disabled={isNoStock()} className="add-to-cart"
|
<Button disabled={isNoStock()} className="add-to-cart"
|
||||||
onClick={() => cart.addOneToCart(item.id, item.quantity)}
|
onClick={() => cart.addOneToCart(item.id)}
|
||||||
sm="6">
|
sm="6">
|
||||||
+
|
+
|
||||||
</Button >
|
</Button >
|
||||||
|
@ -599,9 +599,7 @@ a {
|
|||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-status-available {
|
.detail-status-available {}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-status-backorder {}
|
.detail-status-backorder {}
|
||||||
|
|
||||||
@ -621,34 +619,34 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.detail-container-image {
|
.detail-container-image {
|
||||||
margin:auto;
|
margin: auto;
|
||||||
margin-top:25px;
|
margin-top: 25px;
|
||||||
width: 35%;
|
width: 35%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.detail-container-info {
|
.detail-container-info {
|
||||||
margin:auto;
|
margin: auto;
|
||||||
width: 35%;
|
width: 35%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-container-controls {
|
.detail-container-controls {
|
||||||
margin:auto;
|
margin: auto;
|
||||||
display:inline-flex;
|
display: inline-flex;
|
||||||
width:20%;
|
width: 20%;
|
||||||
height:100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qty-select {
|
.qty-select {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height:fit-content;
|
height: fit-content;
|
||||||
margin:auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-to-cart{
|
.add-to-cart {
|
||||||
width:auto;
|
width: auto;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -657,7 +655,7 @@ a {
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-price{
|
.detail-price {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -670,8 +668,22 @@ a {
|
|||||||
text-decoration: line-through;
|
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 {
|
.btn-fermer {
|
||||||
background-color: red !important;
|
background-color: red !important;
|
||||||
@ -726,11 +738,11 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.invoice-list-container{
|
.invoice-list-container {
|
||||||
border: beige 2px double;
|
border: beige 2px double;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invoice-item-container{
|
.invoice-item-container {
|
||||||
border: black 1px solid;
|
border: black 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user