Merge branch 'main' of https://github.com/pooriaset/nextjs-shop-app

.vscode/settings.json

@@ -14,6 +14,7 @@
     "ecommerce",
     "iranyekanwebboldfanum",
     "muirtl",
+    "nextauth",
     "nextjs",
     "Parens",
     "prefixer",

codegen.ts

@@ -12,6 +12,9 @@ const config: CodegenConfig = {
       presetConfig: {
         fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
       },
+      config: {
+        avoidOptionals: true,
+      },
     },
   },
   overwrite: true,

package.json

@@ -22,11 +22,13 @@
     "@mui/material": "^5.15.14",
     "@mui/material-nextjs": "^5.15.11",
     "@persian-tools/persian-tools": "^3.5.2",
+    "@types/js-cookie": "^3.0.6",
     "add": "^2.0.6",
     "deepmerge": "^4.3.1",
     "graphql": "^16.8.1",
     "graphql-request": "^7.0.1",
     "jotai": "^2.8.1",
+    "js-cookie": "^3.0.5",
     "material-ui-confirm": "^3.0.7",
     "next": "^14.2.3",
     "next-auth": "^4.24.10",

public/robots.txt

@@ -0,0 +1,4 @@
+user-agent: *
+disallow: /card
+disallow: /checkout
+disallow: /profile*

src/@types/global.d.ts

@@ -1,8 +1,18 @@
 import en from '../data/i18n/en.json';
-
 type Messages = typeof en;
 
 declare global {
   // Use type safe message keys with `next-intl`
   interface IntlMessages extends Messages {}
+
+  namespace NodeJS {
+    interface ProcessEnv {
+      NEXT_PUBLIC_WOOCOMMERCE_SESSION_KEY: string;
+      NEXT_PUBLIC_GRAPHQL_URL: string;
+    }
+  }
+
+  type Nullable<T> = {
+    [P in keyof T]: T[P] | null;
+  };
 }

src/app/[locale]/(auth)/account/signin/confirm/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { SIGN_IN_PAGE_PATHNAME } from '@/app/api/auth/[...nextauth]/route';
+import { SIGN_IN_PAGE_PATHNAME } from '@/config/routes';
 import Logo from '@/components/common/Logo';
 import { useAppContext } from '@/hooks/useAppContext';
 import { Link } from '@/navigation';
@@ -154,6 +154,7 @@ const Page = () => {
               renderer={(props) => {
                 return (
                   <Button
+                    size="small"
                     color="warning"
                     variant="outlined"
                     startIcon={<HourglassTopOutlined />}
@@ -174,6 +175,7 @@ const Page = () => {
             />
 
             <Button
+              size="small"
               LinkComponent={Link}
               href={SIGN_IN_PAGE_PATHNAME}
               variant="outlined"

src/app/[locale]/(auth)/account/signin/page.tsx

@@ -2,14 +2,15 @@
 
 import ButtonWithLoading from '@/components/common/ButtonWithLoading';
 import Logo from '@/components/common/Logo';
-import { Link } from '@/navigation';
+import { Link, useRouter } from '@/navigation';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Box, Stack, TextField, Typography } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import { signIn } from 'next-auth/react';
 import { useTranslations } from 'next-intl';
+import { useTransition } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 import * as yup from 'yup';
@@ -34,15 +35,25 @@ const Page = () => {
 
   const { control, handleSubmit } = methods;
 
-  const onSubmit: SubmitHandler<FieldNames> = async (data) => {
-    const result = await signIn('credentials', {
-      ...data,
-      redirect: true,
-      callbackUrl: '/',
+  const router = useRouter();
+
+  const [isPending, startTransition] = useTransition();
+
+  const onSubmit: SubmitHandler<FieldNames> = (data) => {
+    startTransition(async () => {
+      const result = await signIn('credentials', {
+        ...data,
+        redirect: false,
+      });
+
+      if (result) {
+        if (result.status !== 200) {
+          toast.error('An Error Occurred!');
+        } else {
+          router.push('/');
+        }
+      }
     });
-    if (result) {
-      if (result.status !== 200) toast.error(result.error);
-    }
   };
 
   return (
@@ -126,7 +137,7 @@ const Page = () => {
       </CardContent>
       <CardActions>
         <ButtonWithLoading
-          isLoading={false}
+          isLoading={isPending}
           fullWidth
           type="submit"
           variant="contained"

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

@@ -3,7 +3,7 @@ import Dialog from '@/components/Dialog/Dialog';
 import { ProductVariationContentSliceFragment } from '@/graphql/types/graphql';
 import { useRouter } from '@/navigation';
 import { useTranslations } from 'next-intl';
-import { FC } from 'react';
+import { FC, useTransition } from 'react';
 
 export interface AddToCartDialogProps {
   open: boolean;
@@ -16,8 +16,12 @@ const AddToCartDialog: FC<AddToCartDialogProps> = ({
   value,
 }) => {
   const router = useRouter();
+
+  const [isPending, startTransition] = useTransition();
   const handleClickOnGoToCart = (): void => {
-    router.push('/cart');
+    startTransition(() => {
+      router.push('/cart');
+    });
   };
 
   const t = useTranslations();
@@ -35,6 +39,7 @@ const AddToCartDialog: FC<AddToCartDialogProps> = ({
         {
           id: 'go-to-cart',
           onClick: handleClickOnGoToCart,
+          isLoading: isPending,
           color: 'primary',
           variant: 'contained',
           children: t('pages.cart.addToCartDialog.buttonTitle'),

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

@@ -4,6 +4,9 @@ import { useProductContext } from '@/app/[locale]/(main)/(container)/products/[.
 import CartItemController from '@/components/CartItemController/CartItemController';
 import useNewDialog from '@/components/Dialog/hooks/useNewDialog';
 import ButtonWithLoading from '@/components/common/ButtonWithLoading';
+import DiscountPercentage from '@/components/common/DiscountPercentage';
+import OldPrice from '@/components/common/OldPrice';
+import PriceLabel from '@/components/common/PriceLabel';
 import { getFragmentData } from '@/graphql/types';
 import {
   GetSingleProductQuery,
@@ -14,11 +17,6 @@ import useAddOrUpdateCartItem from '@/hooks/useAddOrUpdateCartItem';
 import { useAppContext } from '@/hooks/useAppContext';
 import useCartUtils from '@/hooks/useCartUtils';
 import { Link } from '@/navigation';
-import {
-  extractNumbers,
-  getMinOfRangePrice,
-  getProfitPercentage,
-} from '@/utils/price';
 import {
   AccountBalanceWalletOutlined,
   LocalShippingOutlined,
@@ -31,11 +29,9 @@ import ListItemText from '@mui/material/ListItemText';
 import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import { FC, useMemo } from 'react';
-import DiscountPercentage from '@/components/common/DiscountPercentage';
-import OldPrice from '@/components/common/OldPrice';
-import PriceLabel from '@/components/common/PriceLabel';
 import AddToCartDialog from './AddToCartDialog';
 import MobileBuyBox from './MobileBuyBox';
+import { getMaxOfRangePrice } from '@/utils/price';
 
 const listItems = [
   {
@@ -83,11 +79,6 @@ const BuyBox: FC<BuyBoxProps> = ({ product }) => {
     _variant,
   );
 
-  const profitMarginPercentage = getProfitPercentage(
-    extractNumbers(getMinOfRangePrice(variant?.price)),
-    extractNumbers(variant?.regularPrice),
-  );
-
   const { addOrUpdateCartItemMutate, addOrUpdateCartItemLoading } =
     useAddOrUpdateCartItem();
 
@@ -136,7 +127,11 @@ const BuyBox: FC<BuyBoxProps> = ({ product }) => {
         {!!discountPercentage && (
           <>
             <OldPrice
-              value={variant ? variant?.regularPrice : product.regularPrice}
+              value={
+                variant
+                  ? variant?.regularPrice
+                  : getMaxOfRangePrice(product.regularPrice)
+              }
               TypographyProps={{
                 variant: 'body1',
               }}

src/app/[locale]/(main)/profile/components/Menu.tsx

@@ -0,0 +1,54 @@
+import { GET_CUSTOMER_PROFILE } from '@/graphql/queries/customer';
+import { GetCustomerProfileQuery } from '@/graphql/types/graphql';
+import { useQuery } from '@apollo/client';
+import { Box } from '@mui/material';
+import MenuHeader from './MenuHeader';
+import MenuItems from './MenuItems';
+import { PersonOutline, ShoppingBagOutlined } from '@mui/icons-material';
+import { useTranslations } from 'next-intl';
+
+const Menu = () => {
+  const { data, loading, error } =
+    useQuery<GetCustomerProfileQuery>(GET_CUSTOMER_PROFILE);
+
+  const t = useTranslations();
+
+  const fullName = data?.customer?.firstName
+    ? data?.customer?.firstName + ' ' + data?.customer?.lastName
+    : t('profile.user');
+
+  const items = [
+    {
+      label: t('profile.myOrders'),
+      href: '/profile/orders',
+      icon: ShoppingBagOutlined,
+      count: data?.customer?.orderCount || 0,
+    },
+    {
+      label: t('profile.accountInfo'),
+      href: '/profile/information',
+      icon: PersonOutline,
+    },
+  ];
+
+  return (
+    <Box
+      sx={{
+        width: 260,
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 1,
+      }}
+    >
+      <MenuHeader
+        isLoading={!!error || loading}
+        fullName={fullName}
+        username={data?.customer?.username || ''}
+      />
+
+      <MenuItems items={items} />
+    </Box>
+  );
+};
+
+export default Menu;

src/app/[locale]/(main)/profile/components/MenuHeader.tsx

@@ -0,0 +1,40 @@
+import CustomSkeleton from '@/components/CustomSkeleton/CustomSkeleton';
+import { Link } from '@/navigation';
+import { BorderColorOutlined } from '@mui/icons-material';
+import { Box, IconButton, Stack, Typography } from '@mui/material';
+import { FC } from 'react';
+
+export interface MenuHeaderProps {
+  fullName: string;
+  username: string;
+  isLoading?: boolean;
+}
+
+const MenuHeader: FC<MenuHeaderProps> = ({ fullName, username, isLoading }) => {
+  return (
+    <Box p={2}>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Stack spacing={0.25}>
+          <CustomSkeleton isLoading={isLoading} height={20} width={40}>
+            <Typography>{fullName}</Typography>
+          </CustomSkeleton>
+          <CustomSkeleton isLoading={isLoading} height={20} width={80}>
+            <Typography variant="caption" color="text.secondary">
+              {username}
+            </Typography>
+          </CustomSkeleton>
+        </Stack>
+        <IconButton
+          component={Link}
+          href="/profile/information"
+          size="small"
+          color="primary"
+        >
+          <BorderColorOutlined fontSize="small" />
+        </IconButton>
+      </Stack>
+    </Box>
+  );
+};
+
+export default MenuHeader;