feat: cart response fix

components/cards/cart-card/CartCard.jsx

   return (
     <Card
       sx={{
-        ml: 10,
-        mr: { sm: 10, lg: 1 },
+        ml: { xs: 2, md: 10 },
+        mr: { xs: 1, md: 10, lg: 1 },
         backgroundColor: '#f2f2f2',
         p: 2,
         mb: 2,
             </Button>
           </ButtonGroup>
           <Button
+            disableRipple
             sx={{
               height: 35,
               mt: 1,
-              width: 125,
+              width: 118,
               fontSize: 15,
               textTransform: 'none',
               backgroundColor: '#C6453E',

components/cards/data-card/DataCard.jsx

-import { Box, Paper, Typography } from '@mui/material';
+import { Box, Card, Typography } from '@mui/material';
 import Image from 'next/image';
 import PropType from 'prop-types';
 
 const DataCard = ({ data, quantity }) => {
   return (
-    <Paper
+    <Card
+      height="100%"
       sx={{
-        p: 3,
-        width: { lg: '100%', xs: '35%' },
-        mb: 2,
-        ml: { lg: 0, xs: 6 },
         backgroundColor: '#f2f2f2',
-        display: 'flex',
-        flex: { xs: [0, 0, '32%'], lg: 'none' },
+        mb: 2,
+        py: 2,
+        mx: { xs: 0, sm: 1 },
+        width: { xs: '100%', sm: '44%', md: '30%', lg: '100%' },
       }}
-      elevation={3}
     >
       <Box
         sx={{
-          width: '30%',
-          display: { xs: 'none', lg: 'flex' },
-        }}
-      >
-        <Image
-          src="/images/coffee-mug.svg"
-          alt="profile"
-          width={200}
-          height={250}
-        />
-      </Box>
-      <Box
-        sx={{
-          ml: { xs: 0, md: 3 },
           display: 'flex',
-          flexDirection: 'column',
+          flexDirection: { xs: 'column', lg: 'row' },
         }}
       >
-        <Typography
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Image
+            src="/images/coffee-mug.svg"
+            alt="profile"
+            width={200}
+            height={200}
+          />
+        </Box>
+        <Box
           sx={{
             width: '100%',
-            textAlign: 'center',
-            fontWeight: 600,
-            fontSize: { md: 20, xs: 16 },
-          }}
-        >
-          {data.name}
-        </Typography>
-        <Typography
-          sx={{
-            width: '100%',
-            textAlign: 'center',
-            fontWeight: 600,
-            fontSize: { md: 20, xs: 16 },
-          }}
-        >
-          x{quantity}
-        </Typography>
-
-        <Typography
-          sx={{
-            mt: { lg: 3, xs: 1 },
-            textAlign: 'center',
-            fontSize: 14,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyItems: 'center',
           }}
         >
-          ${data.price} (per unit)
-        </Typography>
+          <Typography
+            sx={{
+              textAlign: 'center',
+              fontWeight: 600,
+              fontSize: { md: 20, xs: 16 },
+              pt: { xs: 2 },
+            }}
+          >
+            {data.name}
+          </Typography>
+          <Typography
+            sx={{
+              width: '100%',
+              textAlign: 'center',
+              fontWeight: 600,
+              fontSize: { md: 20, xs: 16 },
+            }}
+          >
+            x{quantity}
+          </Typography>
+          <Typography
+            sx={{
+              mt: { lg: 3, xs: 1 },
+              textAlign: 'center',
+              fontSize: 14,
+            }}
+          >
+            ${data.price} (per unit)
+          </Typography>
+        </Box>
       </Box>
-    </Paper>
+    </Card>
   );
 };
 

components/cart-content/CartContent.jsx

         {mapProductsToDom()}
       </Grid>
       <Grid item lg={4} xs={12}>
-        <Box sx={{ mr: { xs: 10 }, mt: 2, pl: { xs: 10, lg: 0 } }}>
+        <Box sx={{ mr: { md: 12 }, mt: 2, ml: { xs: 2, md: 12, lg: 0 } }}>
           <OrderSummaryCard
             data={{ totalPrice: totalPrice, totalQuantity: totalQuantity }}
           ></OrderSummaryCard>

components/checkout-content/CheckoutContent.jsx

-import { Grid, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
   };
 
   return (
-    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+    <Box container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
       <StepTitle
         title="Items in Your Cart"
         breadcrumbsArray={['Cart', 'Checkout']}
       />
-      <Grid item xs={12} sx={{ mt: 1 }}>
-        <Typography sx={{ pl: 12, fontSize: 20 }}>
+      <Box sx={{ ml: { xs: 2, md: 12 }, my: 2 }}>
+        <Typography sx={{ fontSize: 20 }}>
           The following fields will be used as the shipping details for your
           order
         </Typography>
-      </Grid>
-      <Grid item lg={8} xs={12}>
-        <ShippingDetailsForm
-          backBtn={true}
-          isCheckout={true}
-          submitHandler={submitHandler}
-        ></ShippingDetailsForm>
-      </Grid>
-      <Grid item lg={4} xs={12}>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', lg: 'row' },
+          mr: { xs: 2, md: 12 },
+          ml: { xs: 2, md: 12 },
+        }}
+      >
+        <Box flexGrow={1}>
+          <ShippingDetailsForm
+            backBtn={true}
+            isCheckout={true}
+            submitHandler={submitHandler}
+          ></ShippingDetailsForm>
+        </Box>
         <Box
           sx={{
-            width: '80%',
-            mt: 2,
-            height: '100%',
-            ml: { xs: 12, lg: 0 },
-            display: { lg: 'block', xs: 'flex' },
-            flexWrap: { xs: 'wrap', lg: 'none' },
-            justifyContent: { xs: 'center', lg: 'none' },
+            ml: { lg: 2 },
+            mt: { xs: 5, md: 5, lg: 2 },
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row', lg: 'column' },
+            justifyContent: { sm: 'space-between', md: 'flex-start' },
+            flexWrap: 'wrap',
           }}
         >
           {mapProductsToDom()}
         </Box>
-      </Grid>
-    </Grid>
+      </Box>
+    </Box>
   );
 };
 

components/forms/shipping-details/ShippingDetailsForm.jsx

   });
 
   return (
-    <Paper
-      sx={{ p: 3, width: '90%', ml: 12, mt: 2, backgroundColor: '#f2f2f2' }}
-      elevation={3}
-    >
+    <Paper sx={{ p: 3, mt: 2, backgroundColor: '#f2f2f2' }} elevation={3}>
       <Box
         sx={{
           width: '100%',

components/layout/steps-title/StepTitle.jsx

       <Grid item xs={12}>
         <Typography
           variant="h3"
-          sx={{ pl: 12, mt: 12, height: '100%', color: 'primary.main' }}
+          sx={{
+            ml: { xs: 2, md: 12 },
+            mt: 12,
+            height: '100%',
+            color: 'primary.main',
+          }}
         >
           {title}
         </Typography>
       </Grid>
       <Grid item xs={12}>
-        <Divider sx={{ backgroundColor: 'primary.main', mx: 12 }} />
+        <Divider
+          sx={{
+            backgroundColor: 'primary.main',
+            ml: { xs: 2, md: 12 },
+            mr: { xs: 2, md: 12 },
+          }}
+        />
       </Grid>
       <Grid item xs={12} sx={{ mt: 4 }}>
         <Breadcrumbs
           aria-label="breadcrumb"
           separator={<NavigateNextIcon fontSize="small" />}
-          sx={{ pl: 12, fontSize: 20 }}
+          sx={{ ml: { xs: 2, md: 12 }, fontSize: 20 }}
         >
           {breadcrumbsArray.map((entry, index) => {
             return (
               <Typography
-                fontSize="20px"
+                sx={{ fontSize: { xs: '16px', md: '22px' } }}
                 key={index}
                 color={index === breadcrumbsArray.length - 1 ? 'red' : 'black'}
               >
               </Typography>
             );
           })}
-          <Typography></Typography>
         </Breadcrumbs>
       </Grid>
     </>

components/product-card/ProductCard.jsx

             disabled={inCart}
             onClick={() => addProductToCart(1)}
             sx={{
+              '&.Mui-disabled': {
+                backgroundColor: '#f2d675',
+                color: '#464646',
+              },
+              '&:hover': {
+                backgroundColor: '#f2d675',
+                color: '#464646',
+                boxShadow: 'none',
+              },
               backgroundColor: '#CBA213',
               height: 50,
               width: 150,

components/products-grid/ProductsGrid.jsx

 import { Button, Container, Grid } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
 import { Box } from '@mui/system';
 import Image from 'next/image';
 import ProductCard from '../product-card/ProductCard';
 
-const ProductsGrid = ({ allProducts, hasNextPage, fetchNextPage }) => {
+const ProductsGrid = ({
+  allProducts,
+  hasNextPage,
+  fetchNextPage,
+  isFetchingNextPage,
+}) => {
   const dataToDisplay = allProducts.pages.map((page) =>
     page.product.map((item) => (
       <Grid key={item._id} item md={4} sm={6} xs={12} sx={{ mb: '100px' }}>
           <Button
             onClick={fetchNextPage}
             startIcon={
-              <Image
-                src="/images/arrow.svg"
-                alt="arrow down"
-                width={29}
-                height={29}
-              />
+              !isFetchingNextPage && (
+                <Image
+                  src="/images/arrow.svg"
+                  alt="arrow down"
+                  width={29}
+                  height={29}
+                />
+              )
             }
             sx={{
               backgroundColor: 'primary.main',
               },
             }}
           >
-            Load More
+            {isFetchingNextPage && (
+              <CircularProgress
+                style={{
+                  color: '#fff',
+                  width: '29px',
+                  height: '29px',
+                  marginRight: '20px',
+                }}
+              />
+            )}
+            {isFetchingNextPage
+              ? 'Loading...'
+              : hasNextPage
+              ? 'Load More'
+              : 'Nothing more to load'}
           </Button>
         )}
       </Box>

components/products/featured-product/ProductInfo.jsx

         }}
       >
         <ButtonGroup
+          disabled={inCart}
           size="small"
           aria-label="small outlined button group"
           sx={{
             height: 50,
             width: 150,
             color: 'white',
+            '&.Mui-disabled': {
+              backgroundColor: '#f2d675',
+              color: '#464646',
+            },
+            '&:hover': {
+              backgroundColor: '#f2d675',
+              color: '#464646',
+              boxShadow: 'none',
+            },
           }}
           disabled={inCart}
           onClick={() => addProductToCart(quantity)}

components/review-content/ReviewContent.jsx

-import { Button, Grid, Typography } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useRouter } from 'next/router';
 import { destroyCookie } from 'nookies';
     }
   }, []);
   return (
-    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+    <Box sx={{ py: 10, height: '100%', width: '100%' }}>
       <StepTitle
         title="Review"
         breadcrumbsArray={['Cart', 'Checkout', 'Shipping', 'Payment', 'Review']}
       />
-      <Grid item xs={12} sx={{ mt: 1 }}>
-        <Typography
-          sx={{
-            width: '100%',
-            textAlign: 'center',
-            color: 'primary.main',
-            fontWeight: 600,
-            fontSize: 22,
-          }}
-        >
-          ORDER COMPLETE SUCCESSFULLY
-        </Typography>
-      </Grid>
-      <Grid item xs={12} sx={{ mt: 1 }}>
-        <Typography
-          sx={{
-            width: '100%',
-            fontWeight: 600,
-            mt: 2,
-            textAlign: 'center',
-          }}
-        >
-          Thank you for placing your order with us. We wll get to work on
-          sending your order as soon as possible
-        </Typography>
-      </Grid>
-      <Grid item xs={12} sx={{ mt: 1 }}>
-        <Typography
-          sx={{
-            width: '100%',
-            textAlign: 'center',
-            mt: 2,
-            fontSize: 44,
-            fontWeight: 600,
-          }}
-        >
-          Order Summary
-        </Typography>
-      </Grid>
-      <Grid item xs={12}>
+      <Box sx={{ ml: { xs: 2 }, mr: { xs: 2 }, mt: 6 }}>
+        <Box>
+          <Typography
+            sx={{
+              width: '100%',
+              textAlign: 'center',
+              color: 'primary.main',
+              fontWeight: 600,
+              fontSize: 22,
+            }}
+          >
+            ORDER COMPLETE SUCCESSFULLY
+          </Typography>
+        </Box>
+        <Box sx={{ mt: 1 }}>
+          <Typography
+            sx={{
+              width: '100%',
+              fontWeight: 600,
+              mt: 2,
+              textAlign: 'center',
+            }}
+          >
+            Thank you for placing your order with us. We wll get to work on
+            sending your order as soon as possible
+          </Typography>
+        </Box>
+        <Box sx={{ mt: 1 }}>
+          <Typography
+            sx={{
+              width: '100%',
+              textAlign: 'center',
+              mt: 4,
+              mb: 4,
+              fontSize: 44,
+              fontWeight: 600,
+            }}
+          >
+            Order Summary
+          </Typography>
+        </Box>
         <Box
           sx={{
             backgroundColor: '#f2f2f2',
-            mt: 4,
-            ml: 12,
-            width: '85%',
+            my: 1,
+            ml: { md: 12 },
+            mr: { md: 12 },
             borderRadius: 2,
-            p: 1,
+            p: 2,
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
             Order placed on: {orderData.time}
           </Typography>
         </Box>
-      </Grid>
-      <Grid item xs={12}>
         <Box
           sx={{
             backgroundColor: '#f2f2f2',
-            ml: 12,
-            width: '85%',
+            ml: { md: 12 },
+            mr: { md: 12 },
             borderRadius: 2,
-            p: 1,
+            p: 2,
+            my: 1,
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
             Email: {orderData?.shippingAddress?.email}
           </Typography>
         </Box>
-      </Grid>
-      <Grid item xs={12}>
         <Box
           sx={{
             backgroundColor: '#f2f2f2',
-            ml: 12,
-            width: '85%',
+            ml: { md: 12 },
+            mr: { md: 12 },
             borderRadius: 2,
-            p: 1,
+            p: 2,
+            my: 1,
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
-            Total: ${orderData?.totalPrice.toFixed(2)}
+            Total: ${orderData?.totalPrice}
           </Typography>
         </Box>
-      </Grid>
-      <Grid item xs={12}>
         <Box
           sx={{
             backgroundColor: '#f2f2f2',
-            ml: 12,
-            width: '85%',
+            ml: { md: 12 },
+            mr: { md: 12 },
             borderRadius: 2,
-            p: 1,
+            p: 2,
+            my: 1,
           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
             {orderData?.shippingAddress?.postcode}
           </Typography>
         </Box>
-      </Grid>
-      <Grid item xs={12} sx={{ mt: 1 }}>
-        <Box
-          sx={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            mt: 2,
-            borderRadius: 2,
-            p: 1,
-          }}
-        >
-          <Button
-            variant="contained"
+        <Box sx={{ mt: 1 }}>
+          <Box
             sx={{
-              mt: 3,
-              mb: 2,
-              height: 50,
-              width: 150,
-              textTransform: 'none',
-              backgroundColor: '#CBA213',
-              color: 'white',
-              mr: 2,
-              fontSize: 16,
-            }}
-            onClick={() => {
-              router.push('/');
+              width: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              mt: 2,
+              borderRadius: 2,
+              p: 1,
             }}
           >
-            Back to Home
-          </Button>
+            <Button
+              variant="contained"
+              sx={{
+                mt: 3,
+                mb: 2,
+                height: 50,
+                width: 150,
+                textTransform: 'none',
+                backgroundColor: '#CBA213',
+                color: 'white',
+                mr: 2,
+                fontSize: 16,
+              }}
+              onClick={() => {
+                router.push('/');
+              }}
+            >
+              Back to Home
+            </Button>
+          </Box>
         </Box>
-      </Grid>
-    </Grid>
+      </Box>
+    </Box>
   );
 };
 

components/shipping-content/ShippingContent.jsx

-import { Checkbox, FormControlLabel, Grid, Typography } from '@mui/material';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useRouter } from 'next/router';
 import { setCookie } from 'nookies';
   };
 
   return (
-    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+    <Box container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
       <StepTitle
         title="Shipping"
         breadcrumbsArray={['Cart', 'Checkout', 'Shipping']}
       />
-      <Grid item xs={12} sx={{ mt: 1 }}>
-        <Typography sx={{ pl: 12, fontSize: 20 }}>
+      <Box sx={{ ml: { xs: 2, md: 12 }, my: 2 }}>
+        <Typography sx={{ fontSize: 20 }}>
           The following fields will be used as the shipping details for your
           order
         </Typography>
-      </Grid>
-      <Grid item xs={12} lg={8}>
-        <ShippingData
-          email={checkoutStorage?.userInfo?.email}
-          address={checkoutStorage?.userInfo?.address}
-          city={checkoutStorage?.userInfo?.city}
-          postcode={checkoutStorage?.userInfo?.postcode}
-          handleOpen={handleOpen}
-        />
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            backgroundColor: '#f2f2f2',
-            alignItems: 'center',
-            ml: 12,
-            mb: 2,
-            width: '30%',
-            borderRadius: 2,
-            p: 1,
-          }}
-        >
-          <FormControlLabel
-            control={<Checkbox checked disabled />}
-            label="Free Shipping"
-            sx={{ color: 'black', ml: 2 }}
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', lg: 'row' },
+          mr: { xs: 2, md: 12 },
+        }}
+      >
+        <Box flexGrow={1} sx={{ minWidth: '65%', ml: { xs: 2, md: 12 } }}>
+          <ShippingData
+            email={checkoutStorage?.userInfo?.email}
+            address={checkoutStorage?.userInfo?.address}
+            city={checkoutStorage?.userInfo?.city}
+            postcode={checkoutStorage?.userInfo?.postcode}
+            handleOpen={handleOpen}
+          />
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              backgroundColor: '#f2f2f2',
+              alignItems: 'center',
+              mb: 2,
+              width: { sm: '200px' },
+              borderRadius: 2,
+              p: 1,
+            }}
+          >
+            <FormControlLabel
+              control={<Checkbox checked disabled />}
+              label="Free Shipping"
+              sx={{ color: 'black', ml: 2 }}
+            />
+          </Box>
+          <ButtonGroup
+            handleStripePayment={handleStripePayment}
+            handleBackToCart={handleBackToCart}
           />
         </Box>
-        <ButtonGroup
-          handleStripePayment={handleStripePayment}
-          handleBackToCart={handleBackToCart}
-        />
-      </Grid>
-      <Grid item xs={12} lg={4}>
         <Box
           sx={{
-            width: '80%',
-            mt: 2,
-            height: '100%',
-            ml: { xs: 12, lg: 0 },
-            display: { lg: 'block', xs: 'flex' },
-            flexWrap: { xs: 'wrap', lg: 'none' },
-            justifyContent: { xs: 'center', lg: 'none' },
+            ml: { xs: 2, md: 12, lg: 2 },
+            mt: { xs: 5, md: 5, lg: 2 },
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row', lg: 'column' },
+            justifyContent: { sm: 'flex-start' },
+            flexWrap: 'wrap',
           }}
         >
           {mapProductsToDom()}
         </Box>
-      </Grid>
+      </Box>
       <ShippingModal
         open={open}
         handleClose={handleClose}
         handleChangeShipping={handleChangeShipping}
         handleChangeContact={handleChangeContact}
       />
-    </Grid>
+    </Box>
   );
 };
 

components/shipping-content/shipping-btnGroup/ButtonGroup.jsx

     <Box
       sx={{
         display: 'flex',
-        ml: 12,
         mb: 2,
         borderRadius: 2,
-        p: 1,
       }}
     >
       <Button

components/shipping-content/shipping-data/ShippingData.jsx

           backgroundColor: '#f2f2f2',
           alignItems: 'center',
           mt: 2,
-          ml: 12,
           mb: 2,
           borderRadius: 2,
           p: 1,
           justifyContent: 'space-between',
           backgroundColor: '#f2f2f2',
           alignItems: 'center',
-          ml: 12,
           mb: 2,
           borderRadius: 2,
           p: 1,

components/shipping-content/shipping-modal/ShippingModal.jsx

     >
       <Box
         sx={{
-          width: '50%',
+          width: { xs: '90%', md: '50%' },
           top: '50%',
           left: '50%',
           position: 'absolute',

pages/products/index.js

 const Products = () => {
   const [filter, setFilter] = useState('');
   const [sort, setSort] = useState('');
-  const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteProducts(
-    filter,
-    sort
-  );
+  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useInfiniteProducts(filter, sort);
 
   const handleProductTypeChange = (event) => {
     const filterText = event.target.value;
           productType={filter}
           fetchNextPage={fetchNextPage}
           hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
         />
       )}
     </Box>