style: Design cart page

client/src/context/ServerStatusProvider.tsx

@@ -1,11 +1,5 @@
 import axios from 'axios'
-import {
-  PropsWithChildren,
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
+import { PropsWithChildren, createContext, useEffect, useState } from 'react'
 
 import { ENV } from '@/conf'
 
@@ -51,14 +45,3 @@ export default function ServerStatusProvider({ children }: PropsWithChildren) {
     </ServerStatusContext.Provider>
   )
 }
-
-// eslint-disable-next-line react-refresh/only-export-components
-export const useServerStatus = () => {
-  const context = useContext(ServerStatusContext)
-  if (context === undefined) {
-    throw new Error(
-      'useServerStatus must be used within an ServerStatusProvider'
-    )
-  }
-  return context
-}

client/src/hooks/useServerStatus.ts

@@ -0,0 +1,12 @@
+import { ServerStatusContext } from '@/context/ServerStatusProvider'
+import { useContext } from 'react'
+
+export default function useServerStatus() {
+  const context = useContext(ServerStatusContext)
+  if (context === undefined) {
+    throw new Error(
+      'useServerStatus must be used within an ServerStatusProvider'
+    )
+  }
+  return context
+}

client/src/pages/cart/CartPage.module.css

@@ -1,11 +1,9 @@
-@import '../../assets/css/colors.css';
-
 .cart-container {
   width: 1300px;
   display: flex;
   justify-content: space-between;
   margin: auto;
   margin-top: 1.2rem;
   gap: 1.2rem;
-  min-height: 100%;
+  min-height: 100vh;
 }

client/src/pages/cart/components/cart-item/CartItem.module.css

@@ -57,6 +57,57 @@
   gap: 2rem;
 }
 
-.item-margin-top {
+.item-info {
   margin-top: 1.1rem;
+  max-width: 20rem;
+  width: 20rem;
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.seller {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #878787;
+  font-size: 14px;
+  margin-top: 0.8rem;
+}
+
+.green {
+  color: #388e3c;
+}
+
+.item-price-offer-discount {
+  margin: 0.7rem 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.item-price-offer-discount s {
+  color: #878787;
+  font-size: 14px;
+}
+
+.item-price-offer-discount span {
+  font-size: 14px;
+}
+
+.price {
+  font-size: 18px;
+  font-weight: 500;
+  color: #212121;
+}
+
+.delivery-by {
+  font-size: 14px;
+  margin-left: 3rem;
+}
+
+.delivery-by s {
+  color: #878787;
 }

client/src/pages/cart/components/cart-item/CartItem.tsx

@@ -1,5 +1,7 @@
 import useHandleDispatch from '@/hooks/useHandleDispatch'
 import type { CartType } from '@/types'
+import { cx } from '@/utils'
+import fa from '../../../../assets/img/fa.png'
 import styles from './CartItem.module.css'
 
 type CartItemProps = {
@@ -16,16 +18,26 @@ export default function CartItem({ product }: CartItemProps) {
         <div className={styles.cartImage}>
           <img width={200} src={product.thumbnail} />
         </div>
-        <div className={styles.itemMarginTop}>
-          <p>{product.title}</p>
-          <small>{product.description}</small>
-          <s>$871</s> <strong>${product.price} </strong>
-          <span> {product.discountPercentage}% Off </span>
-          <small> 3 offers available</small>
-          <br />
-          <small>Seller: Internet</small>
+        <div className={styles.itemInfo}>
+          <p className={styles.title}>{product.title}</p>
+          <span className={styles.seller}>
+            Seller:Internet
+            <span>
+              <img src={fa} width={56} alt="flipkart assured" />
+            </span>
+          </span>
+          <section className={styles.itemPriceOfferDiscount}>
+            <s>$871</s> <div className={styles.price}>${product.price}</div>
+            <span className={cx(styles.green, styles.discount)}>
+              {product.discountPercentage}% Off
+            </span>
+            <span className={styles.green}>3 offers applied</span>
+          </section>
         </div>
-        <small>Delivery by Mon Jan 15</small>
+        <span className={styles.deliveryBy}>
+          Delivery by Mon Jan 15 | <s>$3</s>{' '}
+          <span className={styles.green}>Free</span>{' '}
+        </span>
       </div>
       <div className={styles.cartItemQuantity}>
         <button

client/src/pages/cart/components/cart-price-details/CartPriceDetails.module.css

@@ -1,10 +1,9 @@
-@import '../../../../assets/css/colors.css';
-
 .cart-price {
   background-color: var(--color-white-bg);
   height: fit-content;
-  width: 40rem;
+  width: 25rem;
   padding: 1rem;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
 }
 
 .cart-price section {
@@ -13,3 +12,48 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.price {
+  color: #212121;
+}
+
+.cart-price-heading {
+  display: block;
+  color: #878787;
+  padding-left: 15px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.green {
+  color: #388e3c;
+}
+
+.delivery s {
+  margin: 0.5rem;
+  color: #717478;
+}
+
+.saving {
+  margin: 0.99rem 1rem 0 0.99rem;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.total-amount {
+  font-weight: 500;
+  font-size: 18px;
+  color: #212121;
+}
+
+.secure-section {
+  text-align: left;
+  color: #878787;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  font-weight: 500;
+  margin: 1.4rem 1rem 0 0.8rem;
+}

client/src/pages/cart/components/cart-price-details/CartPriceDetails.tsx

@@ -1,38 +1,56 @@
 import { Divider } from '@mui/material'
 
 import type { CartType } from '@/types'
-import { totalCartPrice } from '@/utils'
+import { calculateTotalDiscount, cx, totalCartPrice } from '@/utils'
+import shield from '../../../../assets/img/shield.svg'
 import styles from './CartPriceDetails.module.css'
 
-type Props = {
+type CartDataProps = {
   cartData: CartType[]
 }
 
-export default function CartPriceDetails({ cartData }: Props) {
+export default function CartPriceDetails({ cartData }: CartDataProps) {
   return (
-    <div className={styles.cartPrice}>
-      <span>PRICE DETAILS</span>
-      <Divider />
-      <section>
-        <span>{`Price (${cartData.length} items) `}</span>
-        <span>${`${totalCartPrice(cartData)}`}</span>
-      </section>
-      <section>
-        <span>Discount</span>
-        <span>- $134</span>
-      </section>
-      <section>
-        <span>Delivery Charges</span>
+    <div>
+      <div className={styles.cartPrice}>
+        <span className={styles.cartPriceHeading}>PRICE DETAILS</span>
+        <Divider />
+        <section className={styles.price}>
+          <span>{`Price (${cartData.length} items) `}</span>
+          <span>${`${totalCartPrice(cartData)}`}</span>
+        </section>
+        <section>
+          <span>Discount</span>
+          <span className={styles.green}>
+            − ${calculateTotalDiscount(cartData)}
+          </span>
+        </section>
+        <section className={styles.delivery}>
+          <span>Delivery Charges</span>
+          <span>
+            <s>$40</s>
+            <span className={styles.green}>Free</span>
+          </span>
+        </section>
+        <Divider />
+        <section className={styles.totalAmount}>
+          <div>Total Amount</div>
+          <span>${`${totalCartPrice(cartData)}`}</span>
+        </section>
+        <Divider />
+        <p className={cx(styles.green, styles.saving)}>
+          You will save ${calculateTotalDiscount(cartData)} on this order
+        </p>
+      </div>
+      <div className={styles.secureSection}>
         <span>
-          <s>$340</s> Free
+          <img width={25} src={shield} alt="shield" />
         </span>
-      </section>
-      <Divider />
-      <section>
-        <strong>Total Amount</strong>
-        <strong>${`${totalCartPrice(cartData)}`}</strong>
-      </section>
-      <p>You will save $134 on this order</p>
+        <span>
+          Safe and Secure Payments. Easy returns. <br /> 100% Authentic
+          products.
+        </span>
+      </div>
     </div>
   )
 }

client/src/pages/cart/components/place-order/PlaceOrder.tsx

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-import { useServerStatus } from '@/context/ServerStatusProvider'
+import useServerStatus from '@/hooks/useServerStatus'
 import { totalCartPrice } from '@/utils'
 import toast from 'react-hot-toast'
 import styles from './PlaceOrder.module.css'
@@ -12,11 +12,11 @@ declare global {
   }
 }
 
-type Props = {
+type CartDataProps = {
   cartData: []
 }
 
-export default function PlaceOrder({ cartData }: Props) {
+export default function PlaceOrder({ cartData }: CartDataProps) {
   const serverStatus = useServerStatus()
 
   const amount = totalCartPrice(cartData)
@@ -59,7 +59,7 @@ export default function PlaceOrder({ cartData }: Props) {
     if (serverStatus?.status)
       toast.promise(performCheckout(), {
         loading: 'Processing...',
-        success: <b>Done!</b>,
+        success: 'Done!',
         error: 'Server is not running',
       })
   }

client/src/utils/index.ts

@@ -26,3 +26,20 @@ export const getOriginalAndThumbnailImg = (images: string[]) => {
     }
   })
 }
+
+export const calculateTotalDiscount = (cartData: CartType[]): number => {
+  let totalDiscount = 0
+  for (let i = 0; i < cartData.length; i++) {
+    const discountAmount = calculateSavings(
+      cartData[i].price,
+      cartData[i].discountPercentage
+    )
+    totalDiscount += discountAmount * (cartData[i].quantity || 1)
+  }
+  return Math.round(totalDiscount)
+}
+
+function calculateSavings(price: number, discountPercentage: number): number {
+  const discountAmount = (price * discountPercentage) / 100
+  return discountAmount
+}