Feat: User is now able to perform payments

package.json

@@ -16,6 +16,8 @@
     "pre-commit": "npm run lint:fix && npm run format"
   },
   "dependencies": {
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.4",
     "@react-jvectormap/core": "^1.0.4",
     "@react-jvectormap/world": "^1.1.2",
     "@reduxjs/toolkit": "^2.2.6",

src/__test__/Cart/Cart.test.tsx

@@ -25,7 +25,9 @@ describe('cartSlice', () => {
   });
 
   it('should fetch cart items successfully', async () => {
-    const mockCartItems = [{ id: 1, name: 'Product 1', quantity: 2 }];
+    const mockCartItems = [
+      { id: 1, name: 'Product 1', quantity: 2, image: 'product_image.png' },
+    ];
     httpMock
       .onGet(`${process.env.VITE_BASE_URL}/cart`)
       .reply(200, { cartItems: mockCartItems });
@@ -91,13 +93,18 @@ describe('Cart component', () => {
   it('renders cart item', async () => {
     render(
       <Provider store={store}>
-        <CartItem id={1} price={100} name="Test Product" quantity={3} />
+        <CartItem
+          id={1}
+          price={100}
+          name="Test Product"
+          image="product_IMAGE.png"
+          quantity={3}
+        />
       </Provider>
     );
 
     expect(screen.getByText('$300')).toBeInTheDocument();
     expect(screen.getByText('Test Product')).toBeInTheDocument();
-    expect(screen.getByText('Size')).toBeInTheDocument();
     expect(screen.getByText('3')).toBeInTheDocument();
   });
 });

src/components/Cart/Cart.tsx

@@ -15,6 +15,7 @@ export default function Cart() {
   const products: Product[] = useAppSelector((state: RootState) =>
     selectProducts(state)
   );
+
   const cartItems = useAppSelector((state: RootState) =>
     selectCartItems(state)
   );
@@ -64,6 +65,7 @@ export default function Cart() {
             <CartItem
               id={item.id}
               quantity={item.quantity}
+              image={item.product.image}
               price={item.product.salesPrice}
               name={item.product.name}
               key={item.id}
@@ -75,6 +77,7 @@ export default function Cart() {
             .map((item) => (
               <CartItem
                 id={item.id}
+                image={item.product.image}
                 quantity={item.quantity}
                 price={item.product.salesPrice}
                 name={item.product.name}

src/components/Cart/CartItem.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import {
   updateCartItemQuantity,
   removeCartItem,
@@ -10,11 +9,11 @@ interface CartProps {
   price: number;
   name: string;
   quantity: number;
+  image: string;
 }
 
-function CartItem({ id, price, name, quantity }: CartProps) {
+function CartItem({ id, price, name, quantity, image }: CartProps) {
   const dispatch = useAppDispatch();
-  const [size, setSize] = useState<'M' | 'S' | 'L'>('M');
 
   const handleQuantityChange = (amount: number) => {
     if (quantity + amount < 1) {
@@ -26,66 +25,17 @@ function CartItem({ id, price, name, quantity }: CartProps) {
     }
   };
 
-  const handleSize = (newSize: 'M' | 'S' | 'L') => {
-    setSize(newSize);
-  };
-
   return (
     <div className="flex items-center border-b border-gray-400 pt-8 pb-4 h-max max-w-screen-md">
       <img
-        src="/product.svg"
+        src={image}
         alt="Product"
         className="w-48 h-32 object-cover rounded-md"
       />
       <div className="flex flex-col flex-grow w-full justify-between px-8">
         <span className="font-bold text-2xl">{name}</span>
         <div className="flex justify-between">
-          <div className="flex items-center gap-4 py-2 flex-col">
-            <span className="text-gray-600 text-center w-full text-sm">
-              Color
-            </span>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                className="w-6 h-6 rounded-full border-2 border-primary bg-white"
-              >
-                {' '}
-              </button>
-              <button
-                type="button"
-                className="w-6 h-6 rounded-full border-2 border-primary bg-gray-200"
-              >
-                {' '}
-              </button>
-            </div>
-          </div>
-          <div className="flex items-center gap-4 py-2 flex-col">
-            <span className="text-gray-600 text-center text-sm">Size</span>
-            <div className="flex">
-              <button
-                onClick={() => handleSize('L')}
-                type="button"
-                className={`px-3 text-sm py-1 border border-primary ${size === 'L' ? 'text-white bg-primary' : 'text-gray-600'}`}
-              >
-                L
-              </button>
-              <button
-                onClick={() => handleSize('M')}
-                type="button"
-                className={`px-3 text-sm py-1 border border-primary ${size === 'M' ? 'text-white bg-primary' : 'text-gray-600'}`}
-              >
-                M
-              </button>
-              <button
-                onClick={() => handleSize('S')}
-                type="button"
-                className={`px-3 text-sm py-1 border border-primary ${size === 'S' ? 'text-white bg-primary' : 'text-gray-600'}`}
-              >
-                S
-              </button>
-            </div>
-          </div>
-          <div className="flex items-center gap-4 py-2 flex-col text-gary-600 text-sm">
+          <div className="flex items-start gap-4 py-2 flex-col text-gary-600 text-sm">
             <span className="text-gray-600 text-center">Quantity</span>
             <div className="flex items-center space-x-2">
               <button

src/components/Checkout/Checkout.tsx

@@ -1,15 +1,18 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import BeatLoader from 'react-spinners/BeatLoader';
 import CardInput, { Card } from './CardInput';
 import { RootState } from '@/app/store';
 import { fetchCartItems, selectCartItems } from '@/features/Cart/cartSlice';
 import { Checkout as CheckoutType } from '@/interfaces/checkout';
+
 import {
   selectCheckout,
   placeOrder,
   makePayment,
   updateStatus,
   resetState,
+  makeMomoPayment,
 } from '@/features/Checkout/checkoutSlice';
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
 import {
@@ -43,6 +46,7 @@ function Checkout() {
   const [address, setAddress] = useState('');
   const [city, setCity] = useState('');
   const [coupon, setCoupon] = useState('');
+  const [momoNumber, setMomoNumber] = useState('');
 
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
@@ -61,6 +65,7 @@ function Checkout() {
   );
   const order = checkoutState.checkout;
   const { loading, error, paying } = checkoutState;
+
   function handleSave(newCard: Card) {
     setCards((prev) => [...prev, newCard]);
   }
@@ -94,10 +99,19 @@ function Checkout() {
         firstName: user?.firstName || '',
         lastName: user?.lastName || '',
       };
-      dispatch(placeOrder(checkout)).then((res) =>
-        dispatch(makePayment(res.payload.id))
-      );
-    } else dispatch(makePayment(order.id));
+      dispatch(placeOrder(checkout)).then((res) => {
+        const orderId = res.payload.id;
+        if (chosen === 'momo') {
+          dispatch(makeMomoPayment({ momoNumber, orderId }));
+        } else if (chosen === 'card') {
+          dispatch(makePayment(orderId));
+        }
+      });
+    } else if (chosen === 'momo') {
+      dispatch(makeMomoPayment({ momoNumber, orderId: order.id }));
+    } else if (chosen === 'card') {
+      dispatch(makePayment(order.id));
+    }
   }
 
   useEffect(() => {
@@ -110,7 +124,7 @@ function Checkout() {
       dispatch(resetState());
       navigate('/');
     } else if (paying && error) {
-      showErrorToast(error || 'failed');
+      showErrorToast('failed');
     }
   }, [error, loading, paying, navigate, dispatch]);
 
@@ -173,24 +187,21 @@ function Checkout() {
         {chosen === 'momo' && (
           <div className="py-6 px-4 border border-gray-300 rounded-md mb-6">
             <div className="mb">
-              <h3 className="w-full text-xl text-gray-500 ounded-md text-left">
+              <h3 className="w-full text-xl text-gray-500 rounded-md text-left">
                 My Momo Number
               </h3>
-
               <div className="rounded-md py-4 flex flex-col gap-6">
                 <div className="rounded-md p-4 border border-gray-300">
                   <label
-                    htmlFor="card"
+                    htmlFor="momoNumber"
                     className="flex items-center w-full bg-gray-100 rounded"
                   >
-                    <img
-                      src="momo.svg"
-                      alt="Mastercard"
-                      className="w-12 mr-4"
-                    />
+                    <img src="momo.svg" alt="Momo" className="w-12 mr-4" />
                     <input
                       className="text-gray-500 h-full w-full outline-none bg-gray-100"
                       placeholder="078* *** *34"
+                      value={momoNumber}
+                      onChange={(e) => setMomoNumber(e.target.value)}
                     />
                   </label>
                 </div>
@@ -415,11 +426,16 @@ function Checkout() {
         </div>
 
         <button
-          className="w-full bg-primary text-white py-4 text-2xl font-medium rounded-md"
+          className={`w-full bg-primary text-white py-4 text-2xl font-medium rounded-md ${chosen ? '' : 'opacity-50 cursor-not-allowed'} ${paying ? 'opacity-75 cursor-not-allowed' : ''}`}
           type="button"
           onClick={handlePayment}
+          disabled={!chosen || paying}
         >
-          Pay Here
+          {paying ? (
+            <BeatLoader data-testid="Loading" color="#ffffff" size={8} />
+          ) : (
+            'Pay Here'
+          )}
         </button>
       </div>
     </div>

src/features/Cart/cartSlice.tsx

@@ -2,6 +2,7 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
 import Cart from '@/interfaces/cart';
 import { RootState } from '../../app/store';
+import { showErrorToast } from '@/utils/ToastConfig';
 
 interface CartState {
   cartItems: Cart[];
@@ -82,18 +83,26 @@ export const removeCartItem = createAsyncThunk(
 
 export const addCartItem = createAsyncThunk(
   'cart/addCartItem',
-  async ({ productId, quantity }: { productId: number; quantity: number }) => {
-    const tokenFromStorage = localStorage.getItem('token') || '';
-    const response = await axios.post<AddPayload>(
-      `${baseUrl}/cart`,
-      { productId, quantity },
-      {
-        headers: {
-          Authorization: `Bearer ${tokenFromStorage}`,
-        },
-      }
-    );
-    return response.data.cartItem;
+  async (
+    { productId, quantity }: { productId: number; quantity: number },
+    { rejectWithValue }
+  ) => {
+    try {
+      const tokenFromStorage = localStorage.getItem('token') || '';
+      const response = await axios.post<AddPayload>(
+        `${baseUrl}/cart`,
+        { productId, quantity },
+        {
+          headers: {
+            Authorization: `Bearer ${tokenFromStorage}`,
+          },
+        }
+      );
+      return response.data.cartItem;
+    } catch (error) {
+      showErrorToast('Failed to add cart item');
+      return rejectWithValue((error as any).response.data);
+    }
   }
 );