handle 0 cart

src/App.js

@@ -12,7 +12,7 @@ import Footer from './components/Footer/Footer';
 import Header from './components/Header';
 import theme from './theme/theme';
 import { ThemeProvider } from '@mui/material';
-import { fetchCart } from './redux/slices/cartSlice';
+import { fetchCart, createCart } from './redux/slices/cartSlice';
 import { useSelector, useDispatch } from 'react-redux';
 
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
@@ -32,6 +32,10 @@ function App() {
 
       dispatch(fetchCart(cartHistory.id));
 
+    }else{
+
+      dispatch(createCart())
+
     }
 
   }, [])

src/components/Navbar/Navbar.jsx

@@ -10,13 +10,14 @@ import LocalMallIcon from '@mui/icons-material/LocalMall';
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import logoSrc from "../../assets/svg/logo.svg";
 import { styled } from '@mui/material/styles';
-import { MenuItem, Select, FormControl, Badge } from '@mui/material';
+import { MenuItem, Select, FormControl, Badge, Typography } from '@mui/material';
 import MobileNav from "./components/MobileNav";
 import MenuIcon from "@mui/icons-material/Menu";
 import CategoryIcon from '@mui/icons-material/Category';
 import HomeIcon from '@mui/icons-material/Home';
 import BrushIcon from '@mui/icons-material/Brush';
 import LoyaltyIcon from '@mui/icons-material/Loyalty';
+import Grid from '@mui/material/Grid2';
 import { useSelector } from 'react-redux';
 
 function calculateTotalQuantity(cartItems) {
@@ -83,20 +84,20 @@ const Navbar = () => {
   const [showHeader, setShowHeader] = useState(true);
   const [lastScrollPos, setLastScrollPos] = useState(0);
   const [language, setLanguage] = useState('English');
-  
+
   const cart = useSelector((state) => state.cart.cart)
   const [cartAmount, setCartAmount] = useState(0);
 
   const [open, setOpen] = React.useState(false);
-  
+
   useEffect(() => {
-    
-    if(!cart?.lines?.nodes) return // don't need to do anything if we have no cart data
+
+    if (!cart?.lines?.nodes) return // don't need to do anything if we have no cart data
 
     setCartAmount(calculateTotalQuantity(cart?.lines?.nodes))
 
   }, [cart])
-  
+
 
 
   const handleChange = (event) => {
@@ -126,7 +127,7 @@ const Navbar = () => {
         sx={{
           backgroundColor: {
             xs: showHeader ? "rgba(0,0,0,0)" : "background.black",// somehow the logic for scrolling header is the same so I just gonna use showHeader state
-            md: "rgba(0,0,0,0.9)", 
+            md: "rgba(0,0,0,0.9)",
             lg: "background.black"
           },
           boxShadow: {
@@ -246,7 +247,7 @@ const Navbar = () => {
               <SearchIcon sx={{ color: "white" }} />
             </IconButton>
 
-            <Badge sx={{cursor:"pointer"}} onClick={()=>{ window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
+            <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
               <LocalMallIcon color="action" sx={{ color: "white" }} />
             </Badge>
 
@@ -258,7 +259,7 @@ const Navbar = () => {
         </Toolbar>
       </AppBar>
 
-      <MobileNav open={open} menu={navItem} onClose={()=>{setOpen(false)}} />
+      <MobileNav open={open} menu={navItem} onClose={() => { setOpen(false) }} />
     </>
   );
 };

src/components/ProductDetails/ProductDetails.jsx

@@ -320,6 +320,24 @@ const ProductDetails = () => {
         >
           ADD TO CART {showLoader && <CircularProgress sx={{ml:1}} color="white" size={20} />} 
         </Button>
+
+        { cart?.lines?.nodes?.length > 0 && <Button
+          onClick={() => { window.location.href = '/cart' }}
+          variant="contained"
+          color="common.black"
+          fullWidth
+          disabled={showLoader}
+          sx={{
+            backgroundColor: (theme) => theme.palette.primary.main,
+            color: "white",
+            textTransform: "none",
+            "&:hover": {
+              backgroundColor: (theme) => theme.palette.grey[900],
+            },
+          }}
+        >
+          PAY NOW
+        </Button>}
       </Box>
       {alert.open && (
         <Alert

src/pages/Cart.jsx

@@ -12,8 +12,13 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
+import { addItemToCart, updateItemQuantity } from '../redux/slices/cartSlice';
 import { useSelector, useDispatch } from 'react-redux';
 
+
+// Utility function to check if an object is empty
+const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
+
 const Cart = () => {
 
   const dispatch = useDispatch()
@@ -27,9 +32,26 @@ const Cart = () => {
   }, [])
 
   useEffect(() => {
+
+    if(cart?.lines?.nodes?.length == 0) window.location.href = "/"
+
     setCartProducts(cart?.lines?.nodes || [])
+
   }, [cart])
 
+  const handleUpdateCart = ({ quantity,  lineId}) => {
+
+    let cartHistory = localStorage.getItem('amber-cart');
+    cartHistory = cartHistory ? JSON.parse(cartHistory) : {};
+
+    dispatch(updateItemQuantity({
+      cartId:cartHistory.id,
+      lineId,
+      quantity,
+    }))
+
+  }
+
 
   return (
     <>
@@ -83,10 +105,10 @@ const Cart = () => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {cartProducts?.map(({ cost, merchandise, quantity }) => {
-                
-                let {amount, currencyCode} = cost.totalAmount
-                let {id, image, product, title } = merchandise // the title here is actually the variant title name
+              {cartProducts?.map(({ id, cost, merchandise, quantity }) => {
+
+                let { amount, currencyCode } = cost.totalAmount
+                let { image, product, title } = merchandise
 
                 return (
                   <TableRow
@@ -105,14 +127,14 @@ const Cart = () => {
                           height: 100,
                           aspectRatio: '4 / 4',
                           objectFit: 'cover',
-                          objectPosition:"top center"
+                          objectPosition: "top center"
                         }}
                       />
                     </TableCell>
                     <TableCell>
                       <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{product.title}</Typography>
-                      
-                      {product?.collections?.nodes?.map(({title}) => (<Typography variant='body2'>{title}</Typography>) )}
+
+                      {product?.collections?.nodes?.map(({ title }) => (<Typography variant='body2'>{title}</Typography>))}
 
                     </TableCell>
                     <TableCell align='center'>
@@ -120,13 +142,23 @@ const Cart = () => {
                     </TableCell>
                     <TableCell align='center'>
                       <Box sx={{ display: "flex", justifyContent: "center" }}>
-                        <IconButton>
+
+                        <IconButton onClick={() => {
+
+                          handleUpdateCart({ quantity: quantity - 1, lineId:id })
+                        }}>
                           <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
                         </IconButton>
+
                         <p style={{ fontSize: 20, fontWeight: "bold" }}>{quantity}</p>
-                        <IconButton >
+
+                        <IconButton onClick={() => {
+
+                          handleUpdateCart({ quantity: quantity + 1, lineId:id })
+                        }}>
                           <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
                         </IconButton>
+
                       </Box>
                     </TableCell>
                     <TableCell align='center'>
@@ -197,7 +229,7 @@ const Cart = () => {
             <Button
               variant="contained"
               color="common.black"
-              onClick={() => { window.location.href = "/checkout" }}
+              onClick={() => { window.location.href = cart.checkoutUrl }}
               sx={{
                 backgroundColor: (theme) => theme.palette.common.black,
                 color: "white",

src/redux/slices/cartSlice.js

@@ -108,7 +108,9 @@ export const cartSlice = createSlice({
       })
       .addCase(fetchCart.fulfilled, (state, action) => {
         state.status = 'succeeded';
-        localStorage.setItem('amber-cart', JSON.stringify(action.payload));
+        if(action.payload) localStorage.setItem('amber-cart', JSON.stringify(action.payload))
+        else localStorage.removeItem('amber-cart')
+        
         state.cart = action.payload;
       })
       .addCase(fetchCart.rejected, (state, action) => {
@@ -123,6 +125,7 @@ export const cartSlice = createSlice({
       })
       .addCase(updateItemQuantity.fulfilled, (state, action) => {
         state.status = 'succeeded';
+        localStorage.setItem('amber-cart', JSON.stringify(action.payload));
         state.cart = action.payload;
       })
       .addCase(updateItemQuantity.rejected, (state, action) => {

src/services/CartService.js

@@ -32,6 +32,7 @@ const addItemToCart = async (cartId, lines) => {
       cartLinesAdd(cartId: $cartId, lines: $lines) {
         cart {
           id
+          checkoutUrl
           createdAt
           updatedAt
           cost {
@@ -48,7 +49,7 @@ const addItemToCart = async (cartId, lines) => {
               currencyCode
             }
           }
-          lines(first: 10) {
+          lines(first: 99) {
             nodes {
               id
               merchandise {
@@ -104,6 +105,7 @@ const getCart = async (cartId) => {
     {
       cart(id: "${cartId}") {
         id
+        checkoutUrl
         createdAt
         updatedAt
         cost {
@@ -165,29 +167,64 @@ const getCart = async (cartId) => {
 
 // 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
+          checkoutUrl
+          createdAt
+          updatedAt
+          cost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+            subtotalAmount {
+              amount
+              currencyCode
+            }
+            totalTaxAmount {
+              amount
+              currencyCode
+            }
+          }
+          lines(first: 99) {
+            nodes {
+              id
+              merchandise {
+                ... on ProductVariant {
+                  id
+                  title
+                  selectedOptions {
+                    name
+                    value
+                  }
+                  image {
+                    src
+                  }
+                  product {
+                    title
+                    collections(first: 5) {
+                      nodes {
+                        title
+                      }
+                    }
                   }
                 }
               }
+              quantity
+              cost {
+                totalAmount {
+                  amount
+                  currencyCode
+                }
+              }
             }
           }
         }
-        userErrors {
-          field
-          message
-        }
       }
     }
   `;
@@ -195,7 +232,12 @@ const updateItemQuantity = async (cartId, lineId, quantity) => {
     cartId,
     lines: [{ id: lineId, quantity }],
   };
-  const { data } = await client.request(query, variables);
+  const {data, errors, extensions} = await client.request(query,{
+    variables: {
+      cartId,
+      lines: [{ id: lineId, quantity }]
+    }
+  });
   return data.cartLinesUpdate.cart;
 };