checkout component added

Amir-4m · Feb 15, 2023 · aef5010 · aef5010
1 parent 7719ae0
commit aef5010
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 3 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,13 +3,16 @@ import Home from "./routes/home/home.component";
 import Navigation from "./routes/navigation/navigation.component";
 import Authentication from './routes/authentication/authentication.component';
 import Shop from './routes/shop/shop.component';
+import Checkout from './routes/checkout/checkout.component';
+
 const App = () => {
   return (
     < Routes >
       <Route path='/' element={<Navigation />}>
         <Route index element={<Home />} />
         <Route path='shop' element={<Shop />} />
         <Route path='auth' element={<Authentication />} />
+        <Route path='checkout' element={<Checkout />} />
       </Route>
     </Routes >
   )

diff --git a/src/components/cart-dropdown/cart-dropdown.component.jsx b/src/components/cart-dropdown/cart-dropdown.component.jsx
@@ -1,17 +1,22 @@
 import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { CartContext } from '../../contexts/cart.context';
 import Button from '../button/button.component';
 import CartItem from '../cart-item/cart-item.component';
 import './cart-dropdown.styles.scss';
 
 const CartDropdown = () => {
     const {cartItems} = useContext(CartContext)
+    const navigate = useNavigate()
+    const goToCheckoutHandler = () => {
+        navigate('/checkout')
+    }
     return (
         <div className='cart-dropdown-container'>
             <div className='cart-items'>
                 {cartItems.map((item) => <CartItem key={item.id} cartItem={item}/>)}
             </div>
-            <Button>GO TO CHECKOUT</Button>
+            <Button onClick={goToCheckoutHandler}>GO TO CHECKOUT</Button>
         </div>
     )
 }

diff --git a/src/components/checkout-item/checkout-item.component.jsx b/src/components/checkout-item/checkout-item.component.jsx
@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { CartContext } from '../../contexts/cart.context';
+import './checkout-item.styles.scss';
+
+const CheckoutItem = ({ cartItem }) => {
+    const { name, imageUrl, price, quantity } = cartItem;
+    const { clearItemFromCart, addItemToCart, removeItemFromCart } = useContext(CartContext);
+
+    return (
+        <div className='checkout-item-container'>
+            <div className='image-container'>
+                <img src={imageUrl} alt={`${name}`} />
+            </div>
+            <span className='name'>{name}</span>
+            <span className='quantity'>
+                <div className='arrow' onClick={() => removeItemFromCart(cartItem)}>
+                    &#10094;
+                </div>
+                <span className='value'>{quantity}</span>
+                <div className='arrow' onClick={() => addItemToCart(cartItem)}>
+                    &#10095;
+                </div>
+            </span>
+            <span className='price'>${price}</span>
+            <div onClick={() => clearItemFromCart(cartItem)} className='remove-button'>&#10005;</div>
+        </div>
+    )
+}
+
+export default CheckoutItem;
diff --git a/src/components/checkout-item/checkout-item.styles.scss b/src/components/checkout-item/checkout-item.styles.scss
@@ -0,0 +1,42 @@
+.checkout-item-container {
+    width: 100%;
+    display: flex;
+    min-height: 100px;
+    border-bottom: 1px solid darkgrey;
+    padding: 15px 0;
+    font-size: 20px;
+    align-items: center;
+
+    .image-container {
+      width: 23%;
+      padding-right: 15px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .name,
+    .quantity,
+    .price {
+      width: 23%;
+    }
+
+    .quantity {
+      display: flex;
+
+      .arrow {
+        cursor: pointer;
+      }
+
+      .value {
+        margin: 0 10px;
+      }
+    }
+
+    .remove-button {
+      padding-left: 12px;
+      cursor: pointer;
+    }
+  }
+
diff --git a/src/contexts/cart.context.jsx b/src/contexts/cart.context.jsx
@@ -9,28 +9,66 @@ const addCartItem = (cartItems, productToAdd) => {
 
 }
 
+const removeCartItem = (cartItems, cartItemToRemove) => {
+    const exsistingCartItem = cartItems.find((cartItem) => cartItem.id === cartItemToRemove.id)
+    if (exsistingCartItem.quantity === 1) {
+        return cartItems.filter(cartItem => cartItem.id !== cartItemToRemove.id);
+    }
+
+    return cartItems.map((cartItem) =>
+        cartItem.id === cartItemToRemove.id
+            ? { ...cartItem, quantity: cartItem.quantity - 1 }
+            : cartItem
+    )
+
+}
+
+const clearCartItem = (cartItems, cartItemToClear) => {
+    return cartItems.filter(cartItem => cartItem.id !== cartItemToClear.id);
+
+}
 export const CartContext = createContext({
     isCartOpen: false,
     setIsCartOpen: () => { },
     cartItems: [],
     addItemToCart: () => { },
-    cartCount: 0
+    removeItemFromCart: () => { },
+    clearItemFromCart: () => { },
+    cartCount: 0,
+    cartTotal: 0
 });
 
 export const CartProvider = ({ children }) => {
     const [isCartOpen, setIsCartOpen] = useState(false)
     const [cartItems, setCartItems] = useState([]);
     const [cartCount, setCartCount] = useState(0);
+    const [cartTotal, setCartTotal] = useState(0);
+
 
     useEffect(() => {
         const newCartCount = cartItems.reduce((total, cartItem) => total + cartItem.quantity, 0)
         setCartCount(newCartCount);
     }, [cartItems])
 
+
+    useEffect(() => {
+        const newCartTotal = cartItems.reduce((total, cartItem) => total + cartItem.quantity * cartItem.price, 0)
+        setCartTotal(newCartTotal);
+    }, [cartItems])
+
+
     const addItemToCart = (product) => {
         setCartItems(addCartItem(cartItems, product))
     }
-    const value = { isCartOpen, setIsCartOpen, addItemToCart, cartItems, cartCount };
+
+    const removeItemFromCart = (product) => {
+        setCartItems(removeCartItem(cartItems, product))
+    }
+
+    const clearItemFromCart = (product) => {
+        setCartItems(clearCartItem(cartItems, product))
+    }
+    const value = { isCartOpen, setIsCartOpen, addItemToCart, cartItems, cartCount, removeItemFromCart, clearItemFromCart, cartTotal };
     return (
         <CartContext.Provider value={value}>{children}</CartContext.Provider>
     )

diff --git a/src/routes/checkout/checkout.component.jsx b/src/routes/checkout/checkout.component.jsx
@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+import { CartContext } from '../../contexts/cart.context';
+import CheckoutItem from '../../components/checkout-item/checkout-item.component';
+import './checkout.styles.scss';
+
+const Checkout = () => {
+    const { cartItems, cartTotal } = useContext(CartContext);
+    return (
+        <div className='checkout-container'>
+            <div className='checkout-header'>
+                <div className='header-block'>
+                    <span>Product</span>
+                </div>
+                <div className='header-block'>
+                    <span>Description</span>
+                </div>
+                <div className='header-block'>
+                    <span>Quantity</span>
+                </div>
+                <div className='header-block'>
+                    <span>Price</span>
+                </div>
+                <div className='header-block'>
+                    <span>Remove</span>
+                </div>
+            </div>
+            {
+                cartItems.map((cartItem) => {
+                    return (
+                        <CheckoutItem key={cartItem.id} cartItem={cartItem} />
+                    )
+                })
+            }
+            <span className='total'>Total: ${cartTotal}</span>
+        </div>
+    )
+}
+
+export default Checkout;
diff --git a/src/routes/checkout/checkout.styles.scss b/src/routes/checkout/checkout.styles.scss
@@ -0,0 +1,32 @@
+.checkout-container {
+    width: 55%;
+    min-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 50px auto 0;
+
+    .checkout-header {
+      width: 100%;
+      padding: 10px 0;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid darkgrey;
+
+      .header-block {
+        text-transform: capitalize;
+        width: 23%;
+
+        &:last-child {
+          width: 8%;
+        }
+      }
+    }
+
+    .total {
+      margin-top: 30px;
+      margin-left: auto;
+      font-size: 36px;
+    }
+  }
+