feat: complete switch between shipping methoods

pooriaset · pooriaset · commit 3b6c1684c1cf · 2024-12-25T00:37:55.000+03:30
diff --git a/src/app/[locale]/(main)/(container)/cart/components/CheckoutBoxSkeleton.tsx b/src/app/[locale]/(main)/(container)/cart/components/CheckoutBoxSkeleton.tsx
@@ -1,20 +1,17 @@
-import { Card, CardContent, Skeleton, Stack } from '@mui/material';
-import React from 'react';
+import { Skeleton, Stack } from '@mui/material';
 
 const CheckoutBoxSkeleton = () => {
   return (
-    <Card variant="outlined">
-      <CardContent>
-        {new Array(4).fill(1).map((key) => {
-          return (
-            <Stack direction="row" key={key} justifyContent="space-between">
-              <Skeleton width="40%" />
-              <Skeleton width="40%" />
-            </Stack>
-          );
-        })}
-      </CardContent>
-    </Card>
+    <>
+      {new Array(4).fill(1).map((key) => {
+        return (
+          <Stack direction="row" key={key} justifyContent="space-between">
+            <Skeleton height={30} width="40%" />
+            <Skeleton height={30} width="40%" />
+          </Stack>
+        );
+      })}
+    </>
   );
 };
 
diff --git a/src/app/[locale]/(main)/(container)/cart/loading.tsx b/src/app/[locale]/(main)/(container)/cart/loading.tsx
@@ -1,4 +1,6 @@
-import { Grid } from '@mui/material';
+'use client';
+
+import { Card, CardActions, CardContent, Grid, Skeleton } from '@mui/material';
 import CartItemsSkeleton from './components/CartItemsSkeleton';
 import CheckoutBoxSkeleton from './components/CheckoutBoxSkeleton';
 
@@ -10,7 +12,14 @@ const Loading = () => {
       </Grid>
 
       <Grid item lg={3} md={6} xs={12}>
-        <CheckoutBoxSkeleton />
+        <Card variant="outlined">
+          <CardContent>
+            <CheckoutBoxSkeleton />
+          </CardContent>
+          <CardActions>
+            <Skeleton width="100%" variant="rectangular" height={42} />
+          </CardActions>
+        </Card>
       </Grid>
     </Grid>
   );
diff --git a/src/app/[locale]/(main)/(container)/cart/page.tsx b/src/app/[locale]/(main)/(container)/cart/page.tsx
@@ -15,7 +15,6 @@ import useCartQuery from '@/hooks/useCartQuery';
 import { Link } from '@/navigation';
 import {
   Box,
-  Button,
   Card,
   CardActions,
   CardContent,
@@ -26,6 +25,7 @@ import {
 } from '@mui/material';
 import { useTranslations } from 'next-intl';
 
+import ButtonWithLoading from '@/components/common/ButtonWithLoading';
 import { cartAtom } from '@/store/atoms';
 import { useAtomValue } from 'jotai';
 import CartItemsSkeleton from './components/CartItemsSkeleton';
@@ -139,39 +139,40 @@ const Page = () => {
       </Grid>
 
       <Grid item lg={3} md={6} xs={12}>
-        {loading && <CheckoutBoxSkeleton />}
-
-        {!loading && (
-          <Stack
-            spacing={2}
-            sx={{
-              position: 'sticky',
-              top: 196,
-              zIndex: (theme) => theme.zIndex.drawer - 1,
-            }}
-          >
-            <Card variant="outlined">
-              <CardContent>
+        <Stack
+          spacing={2}
+          sx={{
+            position: 'sticky',
+            top: 196,
+            zIndex: (theme) => theme.zIndex.drawer - 1,
+          }}
+        >
+          <Card variant="outlined">
+            <CardContent>
+              {loading ? (
+                <CheckoutBoxSkeleton />
+              ) : (
                 <CheckoutBox content={content!} />
-              </CardContent>
-              <CardActions>
-                <Button
-                  component={Link}
-                  href="/checkout"
-                  fullWidth
-                  color="primary"
-                  size="large"
-                  variant="contained"
-                >
-                  {t('pages.cart.buttons.registerAndNextStep')}
-                </Button>
-              </CardActions>
-            </Card>
-            <Typography variant="body2" color="gray">
-              {t('messages.cart.reserveMessage')}
-            </Typography>
-          </Stack>
-        )}
+              )}
+            </CardContent>
+            <CardActions>
+              <ButtonWithLoading
+                isLoading={loading}
+                component={Link}
+                href="/checkout"
+                fullWidth
+                color="primary"
+                size="large"
+                variant="contained"
+              >
+                {t('pages.cart.buttons.registerAndNextStep')}
+              </ButtonWithLoading>
+            </CardActions>
+          </Card>
+          <Typography variant="body2" color="gray">
+            {t('messages.cart.reserveMessage')}
+          </Typography>
+        </Stack>
       </Grid>
     </Grid>
   );
diff --git a/src/app/[locale]/(main)/(container)/checkout/components/AvailableShippingMethods.tsx b/src/app/[locale]/(main)/(container)/checkout/components/AvailableShippingMethods.tsx
@@ -1,37 +1,38 @@
 import PriceLabel from '@/components/common/PriceLabel';
-import { UPDATE_SHIPPING_METHOD } from '@/graphql/queries/cart';
-import {
-  ShippingRate,
-  UpdateShippingMethodMutation,
-} from '@/graphql/types/graphql';
-import { useMutation } from '@apollo/client';
+import { ShippingRate } from '@/graphql/types/graphql';
 import { Radio, Stack, Typography } from '@mui/material';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import ShippingMethodItem from './ShippingMethodItem';
 
 export interface AvailableShippingMethodsProps {
   rates: ShippingRate[];
-  value?: string | null;
+  defaultValue?: string | null;
+  isFree?: boolean;
+  onChange?: Function;
 }
 const AvailableShippingMethods: FC<AvailableShippingMethodsProps> = ({
   rates,
-  value,
+  defaultValue,
+  isFree,
+  onChange,
 }) => {
-  const [update, { loading }] = useMutation<UpdateShippingMethodMutation>(
-    UPDATE_SHIPPING_METHOD,
-  );
+  const [value, setValue] = useState(defaultValue);
 
-  const handleChange = (value: string) => {
-    update({
-      variables: {
-        shippingMethods: [value],
-      },
-    });
+  const handleChange = async (newValue: string) => {
+    try {
+      setValue(newValue);
+      onChange?.(newValue);
+    } catch (error) {
+      setValue(defaultValue);
+    }
   };
 
   return (
     <Stack spacing={0.5}>
       {rates?.map((rate) => {
+        if (!rate) {
+          return null;
+        }
         const selected = rate.id === value;
         return (
           <ShippingMethodItem
@@ -41,9 +42,16 @@ const AvailableShippingMethods: FC<AvailableShippingMethodsProps> = ({
           >
             <Stack direction="row" spacing={1} alignItems="center">
               <Radio disableRipple checked={selected} size="small" />
+
               <Typography variant="body2">{rate.label}</Typography>
             </Stack>
-            {!!rate.cost && <PriceLabel value={rate.cost} />}
+
+            {!!rate.cost && !isFree && <PriceLabel value={rate.cost} />}
+            {isFree && (
+              <Typography color="primary" fontWeight={600}>
+                رایگان
+              </Typography>
+            )}
           </ShippingMethodItem>
         );
       })}
diff --git a/src/app/[locale]/(main)/(container)/checkout/page.tsx b/src/app/[locale]/(main)/(container)/checkout/page.tsx
@@ -1,20 +1,28 @@
 'use client';
 
-import { getFragmentData } from '@/graphql/types';
-import { CartContentFragmentDoc, ShippingRate } from '@/graphql/types/graphql';
+import ButtonWithLoading from '@/components/common/ButtonWithLoading';
+import { UPDATE_SHIPPING_METHOD } from '@/graphql/queries/cart';
+import {
+  ShippingRate,
+  UpdateShippingMethodMutation,
+} from '@/graphql/types/graphql';
 import useCartQuery from '@/hooks/useCartQuery';
+import { cartAtom } from '@/store/atoms';
+import { useMutation } from '@apollo/client';
 import {
-  Button,
   Card,
   CardActions,
   CardContent,
   Grid,
   Stack,
   TextField,
 } from '@mui/material';
+import { useAtomValue } from 'jotai';
 import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import CheckoutBox from '../cart/components/CheckoutBox';
+import CheckoutBoxSkeleton from '../cart/components/CheckoutBoxSkeleton';
 import DiscountCode from '../cart/components/DiscountCode';
 import AvailableShippingMethods from './components/AvailableShippingMethods';
 import Billing from './components/Billing';
@@ -23,19 +31,40 @@ const Page = () => {
   const t = useTranslations();
   const form = useForm();
 
-  const { loading, data } = useCartQuery();
+  const { loading, refetch } = useCartQuery();
+
+  useEffect(() => {
+    refetch();
+  }, []);
 
-  const content = getFragmentData(CartContentFragmentDoc, data?.cart);
+  const [update, { loading: shippingMethodLoading }] =
+    useMutation<UpdateShippingMethodMutation>(UPDATE_SHIPPING_METHOD);
 
+  const content = useAtomValue(cartAtom);
   if (!content?.contents?.itemCount) return <></>;
 
+  const rates = content?.availableShippingMethods?.flatMap((item) => {
+    return item?.rates;
+  }) as ShippingRate[];
+
+  const notFreeRates = rates.filter((item) => !item.methodId.includes('free'));
+
+  const isFree = rates.length !== notFreeRates.length;
+
   const onSubmit = (data: any) => {
     console.log(data);
   };
 
-  const rates = content?.availableShippingMethods?.flatMap((item) => {
-    return item?.rates;
-  }) as ShippingRate[];
+  const onShippingMethodChange = async (newValue: string) => {
+    await update({
+      variables: {
+        shippingMethods: [newValue],
+      },
+    });
+    refetch();
+  };
+
+  const isLoading = loading || shippingMethodLoading;
 
   return (
     <Grid container spacing={2} position="relative">
@@ -44,8 +73,10 @@ const Page = () => {
           <CardContent>
             <Stack spacing={3}>
               <AvailableShippingMethods
-                rates={rates}
-                value={content.chosenShippingMethods?.[0]}
+                isFree={isFree}
+                rates={notFreeRates}
+                defaultValue={content.chosenShippingMethods?.[0]}
+                onChange={onShippingMethodChange}
               />
 
               <Billing />
@@ -87,18 +118,23 @@ const Page = () => {
 
           <Card variant="outlined">
             <CardContent>
-              <CheckoutBox content={content} />
+              {isLoading ? (
+                <CheckoutBoxSkeleton />
+              ) : (
+                <CheckoutBox content={content} />
+              )}
             </CardContent>
             <CardActions>
-              <Button
+              <ButtonWithLoading
+                isLoading={isLoading}
                 type="submit"
                 variant="contained"
                 color="primary"
                 fullWidth
                 size="large"
               >
                 {t('pages.checkout.buttons.placeOrder')}
-              </Button>
+              </ButtonWithLoading>
             </CardActions>
           </Card>
         </Stack>
diff --git a/src/hooks/useAddOrUpdateCartItem.ts b/src/hooks/useAddOrUpdateCartItem.ts
@@ -57,9 +57,7 @@ const useAddOrUpdateCartItem: IUseAddOrUpdateCartItem = () => {
   const addOrUpdateCartItemMutate: MutateCartFunction = async (values) => {
     const { quantity, variationId, productId, extraData } = values;
     if (!variationId) {
-      toast.error(t('messages.cart.selectYourSize'), {
-        toastId: 'variant-is-not-exist',
-      });
+      toast.error(t('messages.cart.selectYourSize'));
       return null;
     }
 
