feat: complete cart item controller of the product page

src/app/[locale]/(main)/(container)/products/[...params]/components/AddToCartDialog.tsx

@@ -39,6 +39,15 @@ const AddToCartDialog: FC<AddToCartDialogProps> = ({ open, onClose, data }) => {
           fullWidth: true,
           size: 'large',
         },
+        {
+          id: 'resume-buying',
+          onClick: onClose,
+          color: 'inherit',
+          variant: 'outlined',
+          children: t('pages.cart.addToCartDialog.resume'),
+          fullWidth: true,
+          size: 'large',
+        },
       ]}
       dialogContentProps={{
         dividers: true,

src/app/[locale]/(main)/(container)/products/[...params]/components/BuyBox.tsx

@@ -27,6 +27,7 @@ import DiscountPercentage from '../../../../../../../components/common/DiscountP
 import OldPrice from '../../../../../../../components/common/OldPrice';
 import PriceLabel from '../../../../../../../components/common/PriceLabel';
 import AddToCartDialog from './AddToCartDialog';
+import CartItemController from './CartItemController';
 
 const listItems = [
   {
@@ -80,10 +81,6 @@ const BuyBox: FC<BuyBoxProps> = ({ variations }) => {
       variationId: selectedVariantId!,
     });
     handleOpenAddToCartDialog();
-
-    setTimeout(() => {
-      handleCloseAddToCartDialog();
-    }, 5000);
   };
 
   const { findInCart } = useCartUtils();
@@ -92,6 +89,8 @@ const BuyBox: FC<BuyBoxProps> = ({ variations }) => {
     variationId: selectedVariantId!,
   });
 
+  const height = 55;
+
   return (
     <>
       <AddToCartDialog
@@ -180,13 +179,18 @@ const BuyBox: FC<BuyBoxProps> = ({ variations }) => {
               isLoading={addOrUpdateCartItemLoading}
               fullWidth
               variant="contained"
-              color="error"
+              color="primary"
               size="large"
               onClick={handleClickOnAdd}
+              sx={{ minHeight: height }}
             >
               {t('buttons.addToCart')}
             </ButtonWithLoading>
           )}
+
+          {itemInCart && (
+            <CartItemController item={itemInCart} height={height} />
+          )}
         </Box>
       </Box>
     </>

src/app/[locale]/(main)/(container)/products/[...params]/components/CartItemController.tsx

@@ -0,0 +1,148 @@
+import { getFragmentData } from '@/graphql/types';
+import {
+  CartItemContentFragment,
+  ProductContentSliceFragmentDoc,
+  ProductVariationContentSliceFragmentDoc,
+} from '@/graphql/types/graphql';
+import useAddOrUpdateCartItem from '@/hooks/useAddOrUpdateCartItem';
+import useRemoveCartItem from '@/hooks/useRmoveCartItem';
+import { Link } from '@/navigation';
+import { Add, DeleteOutline, Remove } from '@mui/icons-material';
+import {
+  Box,
+  CircularProgress,
+  Collapse,
+  IconButton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useTranslations } from 'next-intl';
+import { FC } from 'react';
+
+export interface CartItemControllerProps {
+  item: CartItemContentFragment;
+  height: number;
+}
+
+const CartItemController: FC<CartItemControllerProps> = ({ item, height }) => {
+  const isDecreaseEnabled = item.quantity ? item.quantity > 1 : false;
+
+  const variant = getFragmentData(
+    ProductVariationContentSliceFragmentDoc,
+    item.variation?.node,
+  );
+
+  const product = getFragmentData(
+    ProductContentSliceFragmentDoc,
+    item.product?.node,
+  );
+
+  const { removeCartItemMutate, removeCartItemMutateLoading } =
+    useRemoveCartItem();
+
+  const handleClickOnRemove = () => {
+    removeCartItemMutate({ variationId: variant?.databaseId });
+  };
+
+  const { addOrUpdateCartItemMutate, addOrUpdateCartItemLoading } =
+    useAddOrUpdateCartItem();
+
+  const handleClickOnIncrease = () => {
+    const quantity = item.quantity! + 1;
+    addOrUpdateCartItemMutate({
+      variationId: variant?.databaseId,
+      productId: product?.databaseId!,
+      quantity,
+    });
+  };
+  const handleClickOnDecrease = () => {
+    const quantity = item.quantity! - 1;
+    addOrUpdateCartItemMutate({
+      variationId: variant?.databaseId,
+      productId: product?.databaseId!,
+      quantity,
+    });
+  };
+
+  const isLoading = removeCartItemMutateLoading || addOrUpdateCartItemLoading;
+
+  const t = useTranslations();
+
+  return (
+    <Stack spacing={1} justifyContent="center">
+      <Stack
+        direction="row"
+        spacing={0.5}
+        alignItems="center"
+        justifyContent="center"
+        sx={{
+          border: '1px solid',
+          borderColor: 'divider',
+          height,
+          borderRadius: 1,
+        }}
+      >
+        <IconButton
+          onClick={handleClickOnIncrease}
+          size="large"
+          disabled={isLoading}
+          color="primary"
+        >
+          <Add />
+        </IconButton>
+
+        <Box
+          sx={{
+            width: 48,
+            height: 48,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Typography
+            color="primary"
+            sx={{
+              fontWeight: 700,
+            }}
+          >
+            {isLoading ? <CircularProgress size={20} /> : item.quantity}
+          </Typography>
+        </Box>
+
+        {isDecreaseEnabled && (
+          <IconButton
+            onClick={handleClickOnDecrease}
+            size="large"
+            disabled={isLoading}
+            color="primary"
+          >
+            <Remove />
+          </IconButton>
+        )}
+        <IconButton
+          onClick={handleClickOnRemove}
+          size="large"
+          disabled={isLoading}
+          color="error"
+        >
+          <DeleteOutline />
+        </IconButton>
+      </Stack>
+      <Collapse appear in={true}>
+        <Stack direction="row" justifyContent="center" spacing={1}>
+          <Typography variant="body2">
+            {t('pages.product.buyBox.inYourCart')}
+          </Typography>
+          <Link href="/cart">
+            <Typography color="primary" variant="body2">
+              {t('pages.product.buyBox.viewCart')}
+            </Typography>
+          </Link>
+        </Stack>
+      </Collapse>
+    </Stack>
+  );
+};
+
+export default CartItemController;

src/data/i18n/en.json

@@ -91,7 +91,8 @@
       },
       "addToCartDialog": {
         "title": "This product added to cart!",
-        "buttonTitle": "Go to Cart"
+        "buttonTitle": "Go to Cart",
+        "resume": "Resume"
       },
       "title": "Your Cart"
     },
@@ -104,6 +105,10 @@
       },
       "tooltips": {
         "fullScreen": "Full Screen"
+      },
+      "buyBox": {
+        "inYourCart": "In your cart",
+        "viewCart": "ٰView Cart"
       }
     },
     "notfound": {

src/data/i18n/fa.json

@@ -91,7 +91,8 @@
       },
       "addToCartDialog": {
         "title": "این کالا به سبد خرید اضافه شد!",
-        "buttonTitle": "برو به سبد خرید!"
+        "buttonTitle": "برو به سبد خرید!",
+        "resume": "ادامه خرید"
       },
       "title": "سبد خرید شما"
     },
@@ -104,6 +105,10 @@
       },
       "tooltips": {
         "fullScreen": "بزرگنمایی"
+      },
+      "buyBox": {
+        "inYourCart": "در سبد شما",
+        "viewCart": "مشاهده سبد خرید"
       }
     },
     "notfound": {

src/hooks/useAddOrUpdateCartItem.ts

@@ -13,7 +13,7 @@ export interface MutateCartFunction {
   (values: {
     quantity: number;
     productId: number;
-    variationId: number;
+    variationId: number | undefined;
     extraData?: any;
   }): Promise<any>;
 }
@@ -51,6 +51,10 @@ const useAddOrUpdateCartItem: IUseAddOrUpdateCartItem = () => {
 
   const addOrUpdateCartItemMutate: MutateCartFunction = async (values) => {
     const { quantity, variationId, productId, extraData } = values;
+    if (!variationId) {
+      throw new Error('Variation id is undefined.');
+    }
+
     const quantityFound = findInCart({ variationId })?.quantity || 0;
 
     if (quantityFound) {

src/hooks/useRmoveCartItem.ts

@@ -4,7 +4,7 @@ import { useMutation } from '@apollo/client';
 import useCartUtils from './useCartUtils';
 
 export interface RemoveCartItemMutate {
-  (values: { variationId: number }): Promise<any>;
+  (values: { variationId: number | undefined }): Promise<any>;
 }
 
 export interface IUseRemoveCartItem {
@@ -29,6 +29,10 @@ const useRemoveCartItem: IUseRemoveCartItem = () => {
   const removeCartItemMutate: RemoveCartItemMutate = async ({
     variationId,
   }) => {
+    if (!variationId) {
+      throw new Error('Variation  id is undefined.');
+    }
+
     const quantityFound = findInCart({ variationId })?.quantity || 0;
 
     if (!quantityFound) {