cart API

src/App.js

@@ -8,21 +8,38 @@ import Products from './pages/Products';
 import Product from './pages/Products/Product';
 import Checkout from './pages/Checkout';
 import Navbar from './components/Navbar';
+import Footer from './components/Footer/Footer';
 import Header from './components/Header';
 import theme from './theme/theme';
 import { ThemeProvider } from '@mui/material';
-import Footer from './components/Footer/Footer';
+import { fetchCart } from './redux/slices/cartSlice';
+import { useSelector, useDispatch } from 'react-redux';
+
+const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
 
 function App() {
 
+  const dispatch = useDispatch()
+
   useEffect(() => {
 
+    //Check if cart exist
+    let cartHistory = localStorage.getItem('amber-cart');
+    cartHistory = cartHistory ? JSON.parse(cartHistory) : {};
+
+    // if we got cart, then just fetch from BE based on ID
+    if (!isEmptyObject(cartHistory)) {
+
+      dispatch(fetchCart(cartHistory.id));
+
+    }
+
   }, [])
 
   return (
     <ThemeProvider theme={theme}>
       <Header />
-      <Navbar/>
+      <Navbar />
       <BrowserRouter>
         <Routes>
           <Route path='/' element={<Home />} />

src/components/Navbar/Navbar.jsx

@@ -228,7 +228,7 @@ const Navbar = () => {
               <SearchIcon sx={{ color: "white" }} />
             </IconButton>
 
-            <Badge badgeContent={1} color="primary">
+            <Badge sx={{cursor:"pointer"}} onClick={()=>{ window.location.href = "/cart" }} badgeContent={1} color="primary">
               <LocalMallIcon color="action" sx={{ color: "white" }} />
             </Badge>
 

src/components/ProductDetails/ProductDetails.jsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useSelector } from "react-redux";
 import {
   Box,
   Typography,
@@ -8,12 +7,52 @@ import {
 } from "@mui/material";
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
+import { useSelector, useDispatch } from "react-redux";
+import { createCart } from "../../redux/slices/cartSlice";
+
+// Utility function to check if an object is empty
+const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
 
 const ProductDetails = () => {
 
+  const dispatch = useDispatch()
   const product = useSelector((state) => state.products.product.data)
-  const [quantity, setQuantity] = useState(1);
-  const [selectedSize, setSelectedSize] = useState(null);
+  const cart = useSelector((state) => state.cart.cart)
+
+  const [quantity, setQuantity] = useState(1)
+  const [selectedSize, setSelectedSize] = useState(null)
+
+  const handleCart = () => {
+
+    let cartHistory = localStorage.getItem('amber-cart');
+    cartHistory = cartHistory ? JSON.parse(cartHistory) : {};
+
+    // if we got no cart, then create a new one
+    if (isEmptyObject(cart) || isEmptyObject(cartHistory)) {
+
+      dispatch(createCart());
+      
+    } else {
+
+      // // Update cart content
+      // const existingItemIndex = cartHistory.lines?.findIndex(
+      //   (line) => line.merchandiseId === item.merchandiseId
+      // );
+
+      // if (existingItemIndex !== -1) {
+      //   // If the item exists, update the quantity
+      //   cartHistory.lines[existingItemIndex].quantity += item.quantity;
+      // } else {
+      //   // If the item doesn't exist, add it
+      //   cartHistory.lines = [...(cartHistory.lines || []), item];
+      // }
+
+      // // Update Redux store and localStorage
+      // dispatch(updateCart(cartHistory)); // Redux action to update cart
+      // localStorage.setItem('amber-cart', JSON.stringify(cartHistory));
+    }
+
+  }
 
   const handleIncrement = () => {
     setQuantity((prevQuantity) => prevQuantity + 1);
@@ -25,7 +64,6 @@ const ProductDetails = () => {
 
   const handleSizeClick = (size) => {
     setSelectedSize(size);
-    // alert(`Selected size: ${size}`);
   };
 
   return (
@@ -60,7 +98,7 @@ const ProductDetails = () => {
                 key={size}
                 variant={selectedSize === size ? "contained" : "outlined"}
                 color={selectedSize === size ? "primary" : "primary"}
-                sx={{ color: "#000" }}
+                sx={{ color: selectedSize === size ? "#FFF" : "#000" }}
                 onClick={() => handleSizeClick(size)}
               >
                 {size}
@@ -79,7 +117,7 @@ const ProductDetails = () => {
             <Button
               variant="contained"
               color="primary"
-              sx={{width:"35px"}}
+              sx={{ width: "35px" }}
               onClick={handleDecrement}
             >
               <RemoveIcon />
@@ -89,14 +127,14 @@ const ProductDetails = () => {
               value={quantity}
               inputProps={{ readOnly: true, style: { textAlign: 'center' } }}
               size="small"
-              sx={{width:"100px"}}
+              sx={{ width: "100px" }}
               variant="outlined"
             />
 
             <Button
               variant="contained"
               color="primary"
-              sx={{width:"35px"}}
+              sx={{ width: "35px" }}
               onClick={handleIncrement}
             >
               <AddIcon />
@@ -115,7 +153,7 @@ const ProductDetails = () => {
         </Box>
 
         <Button
-          onClick={() => { window.location.href = "/cart" }}
+          onClick={() => { handleCart() }}
           variant="contained"
           color="common.black"
           fullWidth
@@ -129,7 +167,7 @@ const ProductDetails = () => {
             },
           }}
         >
-          BUY NOW
+          ADD TO CART
         </Button>
       </Box>
 

src/components/ProductHistoryList/ProductHistoryList.jsx

@@ -22,7 +22,9 @@ const ProductHistoryList = () => {
 
   }, [])
 
-  useEffect(()=>{ console.log(products) }, [products])
+  // useEffect(()=>{ 
+  //   console.log(products) 
+  // }, [products])
 
   const renderProduct = (id, img_url, title, price, currency) => {
 

src/components/ProductSuggestion/ProductSuggestion.jsx

@@ -28,7 +28,8 @@ const ProductSuggestion = () => {
           onClick={() => { window.location.href = `/products/${id}` }}
           sx={{
             overflow: 'hidden',
-            position: 'relative'
+            position: 'relative',
+            cursor: 'pointer'
           }}
         >
           <img

src/pages/Products/Product.jsx

@@ -30,12 +30,11 @@ const Product = () => {
       if(productHistory.includes(pid)) return
 
       productHistory = [pid, ...productHistory]
-      
       productHistory = productHistory.slice(0, 6)
-  
       productHistory = JSON.stringify(productHistory)
 
       localStorage.setItem('amber-product-history', productHistory)
+
     } else {
 
       let productHistory = [pid]

src/redux/slices/cartSlice.js

@@ -0,0 +1,148 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import CartService from '../../services/CartService';
+
+const initialState = {
+  cart: {},
+  status: null,
+  error: null,
+};
+
+// Async Thunks
+export const createCart = createAsyncThunk(
+  'cart/createCart',
+  async () => {
+    const response = await CartService.createCart();
+    return response;
+  }
+);
+
+export const addItemToCart = createAsyncThunk(
+  'cart/addItemToCart',
+  async ({ cartId, lines }, { rejectWithValue }) => {
+    try {
+      const response = await CartService.addItemToCart(cartId, lines);
+      return response;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const fetchCart = createAsyncThunk(
+  'cart/fetchCart',
+  async (cartId, { rejectWithValue }) => {
+    try {
+      const response = await CartService.getCart(cartId);
+      return response;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const updateItemQuantity = createAsyncThunk(
+  'cart/updateItemQuantity',
+  async ({ cartId, lineId, quantity }, { rejectWithValue }) => {
+    try {
+      const response = await CartService.updateItemQuantity(cartId, lineId, quantity);
+      return response;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+export const fetchCheckoutUrl = createAsyncThunk(
+  'cart/fetchCheckoutUrl',
+  async (cartId, { rejectWithValue }) => {
+    try {
+      const response = await CartService.getCheckoutUrl(cartId);
+      return response;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+// Slice
+export const cartSlice = createSlice({
+  name: 'cart',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      // Create Cart
+      .addCase(createCart.pending, (state) => {
+        state.status = 'loading';
+        state.error = null;
+      })
+      .addCase(createCart.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.cart = action.payload;
+        localStorage.setItem('amber-cart', JSON.stringify(action.payload));
+      })
+      .addCase(createCart.rejected, (state, action) => {
+        state.status = 'failed';
+        state.cart = {};
+        state.error = action.payload || action.error.message;
+      })
+
+      // Add Item to Cart
+      .addCase(addItemToCart.pending, (state) => {
+        state.status = 'loading';
+        state.error = null;
+      })
+      .addCase(addItemToCart.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.cart = action.payload;
+      })
+      .addCase(addItemToCart.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.payload || action.error.message;
+      })
+
+      // Fetch Cart
+      .addCase(fetchCart.pending, (state) => {
+        state.status = 'loading';
+        state.error = null;
+      })
+      .addCase(fetchCart.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.cart = action.payload;
+      })
+      .addCase(fetchCart.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.payload || action.error.message;
+      })
+
+      // Update Item Quantity
+      .addCase(updateItemQuantity.pending, (state) => {
+        state.status = 'loading';
+        state.error = null;
+      })
+      .addCase(updateItemQuantity.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.cart = action.payload;
+      })
+      .addCase(updateItemQuantity.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.payload || action.error.message;
+      })
+
+      // Fetch Checkout URL
+      .addCase(fetchCheckoutUrl.pending, (state) => {
+        state.status = 'loading';
+        state.error = null;
+      })
+      .addCase(fetchCheckoutUrl.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.cart.checkoutUrl = action.payload; // Only update checkout URL
+      })
+      .addCase(fetchCheckoutUrl.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.payload || action.error.message;
+      });
+  },
+});
+
+export default cartSlice.reducer;

src/redux/store.js

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import productsReducer from './slices/productSlice';
+import cartReducer from './slices/cartSlice'
 
 const store = configureStore({
   reducer: {
     products: productsReducer,
+    cart: cartReducer
   },
 });
 

src/services/CartService.js

@@ -0,0 +1,171 @@
+import { createStorefrontApiClient } from '@shopify/storefront-api-client';
+import { REACT_APP_ACCESS_TOKEN, REACT_APP_SHOP_NAME } from '../utils/httpCommon';
+
+const client = createStorefrontApiClient({
+  storeDomain: `https://${REACT_APP_SHOP_NAME}/api/2024-10/graphql.json`,
+  apiVersion: '2024-10',
+  publicAccessToken: REACT_APP_ACCESS_TOKEN,
+});
+
+// Create a cart
+const createCart = async () => {
+  const query = `
+    mutation CreateCart {
+      cartCreate {
+        cart {
+          id
+          createdAt
+          updatedAt
+        }
+        userErrors {
+          field
+          message
+        }
+      }
+    }
+  `;
+  const { data } = await client.request(query);
+  return data.cartCreate.cart;
+};
+
+// Add a line item to the cart
+const addItemToCart = async (cartId, lines) => {
+  const query = `
+    mutation AddItemToCart($cartId: ID!, $lines: [CartLineInput!]!) {
+      cartLinesAdd(cartId: $cartId, lines: $lines) {
+        cart {
+          id
+          lines(first: 10) {
+            edges {
+              node {
+                id
+                quantity
+                merchandise {
+                  ... on ProductVariant {
+                    id
+                    title
+                  }
+                }
+              }
+            }
+          }
+        }
+        userErrors {
+          field
+          message
+        }
+      }
+    }
+  `;
+  const variables = { cartId, lines };
+  const { data } = await client.request(query, variables);
+  return data.cartLinesAdd.cart;
+};
+
+// Get cart details
+const getCart = async (cartId) => {
+  const query = `
+    query GetCart($cartId: ID!) {
+      cart(id: $cartId) {
+        id
+        createdAt
+        updatedAt
+        lines(first: 10) {
+          edges {
+            node {
+              id
+              quantity
+              merchandise {
+                ... on ProductVariant {
+                  id
+                  title
+                }
+              }
+            }
+          }
+        }
+        cost {
+          subtotalAmount {
+            amount
+            currencyCode
+          }
+          totalAmount {
+            amount
+            currencyCode
+          }
+          totalTaxAmount {
+            amount
+            currencyCode
+          }
+        }
+      }
+    }
+  `;
+
+   
+  const variables = { cartId };
+  const { data } = await client.request(query, variables);
+  debugger
+  return data.cart;
+};
+
+// Update a line item's quantity
+const updateItemQuantity = async (cartId, lineId, quantity) => {
+  const query = `
+    mutation UpdateItemQuantity($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+      cartLinesUpdate(cartId: $cartId, lines: $lines) {
+        cart {
+          id
+          lines(first: 10) {
+            edges {
+              node {
+                id
+                quantity
+                merchandise {
+                  ... on ProductVariant {
+                    id
+                  }
+                }
+              }
+            }
+          }
+        }
+        userErrors {
+          field
+          message
+        }
+      }
+    }
+  `;
+  const variables = {
+    cartId,
+    lines: [{ id: lineId, quantity }],
+  };
+  const { data } = await client.request(query, variables);
+  return data.cartLinesUpdate.cart;
+};
+
+// Generate checkout URL
+const getCheckoutUrl = async (cartId) => {
+  const query = `
+    query CheckoutURL($cartId: ID!) {
+      cart(id: $cartId) {
+        checkoutUrl
+      }
+    }
+  `;
+  const variables = { cartId };
+  const { data } = await client.request(query, variables);
+  return data.cart.checkoutUrl;
+};
+
+// Export services
+const CartService = {
+  createCart,
+  addItemToCart,
+  getCart,
+  updateItemQuantity,
+  getCheckoutUrl,
+};
+
+export default CartService;