feat: add orders page

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

@@ -0,0 +1,20 @@
+import { Divider, Stack, Typography } from '@mui/material';
+import { FC, ReactNode } from 'react';
+
+export interface CardHeaderProps {
+  title: string;
+  children?: ReactNode;
+}
+const CardHeader: FC<CardHeaderProps> = ({ title, children }) => {
+  return (
+    <Stack spacing={0.5}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography variant="subtitle1">{title}</Typography>
+        {children}
+      </Stack>
+      <Divider />
+    </Stack>
+  );
+};
+
+export default CardHeader;

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

@@ -4,7 +4,11 @@ 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 {
+  HomeOutlined,
+  PersonOutline,
+  ShoppingBagOutlined,
+} from '@mui/icons-material';
 import { useTranslations } from 'next-intl';
 
 const Menu = () => {
@@ -18,6 +22,11 @@ const Menu = () => {
     : t('profile.user');
 
   const items = [
+    {
+      label: t('profile.activitySummary'),
+      href: '/profile',
+      icon: HomeOutlined,
+    },
     {
       label: t('profile.myOrders'),
       href: '/profile/orders',
@@ -41,7 +50,7 @@ const Menu = () => {
       }}
     >
       <MenuHeader
-        isLoading={!!error || loading}
+        // isLoading={!!error || loading}
         fullName={fullName}
         username={data?.customer?.username || ''}
       />

src/app/[locale]/(main)/profile/orders/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { GET_CUSTOMER_ORDERS } from '@/graphql/queries/customer';
+import { GetCustomerOrdersQuery } from '@/graphql/types/graphql';
+import { useQuery } from '@apollo/client';
+import { Card, CardContent, Stack } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import CardHeader from '../components/CardHeader';
+import OrderItem from '../components/OrderItem';
+import OrderItemSkeleton from '../components/OrderItemSkeleton';
+
+const Page = () => {
+  const t = useTranslations();
+
+  const { data, loading, error } = useQuery<GetCustomerOrdersQuery>(
+    GET_CUSTOMER_ORDERS,
+    {
+      variables: {
+        count: 10,
+        statuses: [],
+      },
+    },
+  );
+
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <CardHeader title={t('order.ordersHistory')} />
+        <Stack spacing={1.5} mt={2}>
+          {loading || !!error ? (
+            <OrderItemSkeleton />
+          ) : (
+            <>
+              {data?.customer?.orders?.edges?.map((edge) => {
+                const order = edge.node!;
+                return <OrderItem key={order.id} {...order} />;
+              })}
+            </>
+          )}
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Page;

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

@@ -1,12 +1,14 @@
 'use client';
 
 import { GET_CUSTOMER_ORDERS } from '@/graphql/queries/customer';
+import { GetCustomerOrdersQuery } from '@/graphql/types/graphql';
+import { Link } from '@/navigation';
 import { useQuery } from '@apollo/client';
-import { Card, CardContent, CardHeader, Stack } from '@mui/material';
+import { Button, Card, CardContent, Stack } from '@mui/material';
 import { useTranslations } from 'next-intl';
+import CardHeader from './components/CardHeader';
 import OrderItem from './components/OrderItem';
 import OrderItemSkeleton from './components/OrderItemSkeleton';
-import { GetCustomerOrdersQuery } from '@/graphql/types/graphql';
 
 const Page = () => {
   const t = useTranslations();
@@ -24,14 +26,19 @@ const Page = () => {
   return (
     <Stack spacing={2}>
       <Card variant="outlined">
-        <CardHeader
-          titleTypographyProps={{
-            variant: 'subtitle1',
-          }}
-          title={t('profile.latestOrders')}
-        />
         <CardContent>
-          <Stack spacing={1.5}>
+          <CardHeader title={t('profile.latestOrders')}>
+            <Button
+              variant="text"
+              color="info"
+              component={Link}
+              href="/profile/orders"
+            >
+              {t('buttons.viewMore')}
+            </Button>
+          </CardHeader>
+
+          <Stack spacing={1.5} mt={2}>
             {loading || !!error ? (
               <OrderItemSkeleton />
             ) : (

src/app/api/auth/[...nextauth]/route.ts

@@ -1,7 +1,7 @@
 import { SIGN_IN_PAGE_PATHNAME } from '@/config/routes';
 import { LOGIN_USER_MUTATION } from '@/graphql/queries/auth';
 import { LoginUserMutation } from '@/graphql/types/graphql';
-import { GraphQLClient } from 'graphql-request';
+import { graphQLClient } from '@/services/common';
 import NextAuth from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
 
@@ -18,10 +18,6 @@ const handler = NextAuth({
         password: { label: 'Password', type: 'password' },
       },
       async authorize(credentials, req) {
-        const graphQLClient = new GraphQLClient(
-          process.env.NEXT_PUBLIC_GRAPHQL_URL!,
-        );
-
         const data = await graphQLClient.request<LoginUserMutation>(
           LOGIN_USER_MUTATION,
           { ...credentials },

src/components/CustomSkeleton/CustomSkeleton.tsx

@@ -6,6 +6,7 @@ export interface CustomSkeletonProps extends SkeletonProps {
 }
 const CustomSkeleton: FC<CustomSkeletonProps> = ({ isLoading, ...props }) => {
   if (!isLoading) {
+    return props.children;
   }
   return <Skeleton variant="rectangular" width="100%" {...props} />;
 };

src/data/i18n/en.json

@@ -59,7 +59,8 @@
     "addToCart": "Add To Cart",
     "yes": "Yes",
     "no": "No",
-    "removeAll": "Remove All"
+    "removeAll": "Remove All",
+    "viewMore": "View More"
   },
   "footer": {
     "links": {
@@ -194,9 +195,11 @@
     "myOrders": "My Orders",
     "accountInfo": "Account Information",
     "latestOrders": "Latest Orders",
-    "user": "User"
+    "user": "User",
+    "activitySummary": "Activity Summary"
   },
   "order": {
-    "view": "View"
+    "view": "View",
+    "ordersHistory": "Orders History"
   }
-}
+}

src/data/i18n/fa.json

@@ -55,7 +55,8 @@
     "addToCart": "افزودن به سبد",
     "yes": "بله",
     "no": "خیر",
-    "removeAll": "حذف همه"
+    "removeAll": "حذف همه",
+    "viewMore": "مشاهده بیشتر"
   },
   "footer": {
     "links": {
@@ -194,9 +195,11 @@
     "myOrders": "سفارش‌های من",
     "accountInfo": "اطلاعات حساب کاربری",
     "latestOrders": "آخرین سفارش‌های من",
-    "user": "User"
+    "user": "User",
+    "activitySummary": "خلاصه فعالیت‌ها"
   },
   "order": {
-    "view": "مشاهده سفارش"
+    "view": "مشاهده سفارش",
+    "ordersHistory": "تاریخچه سفارشات"
   }
-}
+}

src/services/common.ts

@@ -9,13 +9,13 @@ export const Sleep = (time = 3000) => {
   });
 };
 
+export const graphQLClient = new GraphQLClient(
+  process.env.NEXT_PUBLIC_GRAPHQL_URL!,
+);
+
 async function fetchSessionToken() {
   let sessionToken;
   try {
-    const graphQLClient = new GraphQLClient(
-      process.env.NEXT_PUBLIC_GRAPHQL_URL!,
-    );
-
     const data = await graphQLClient.request<{
       customer: { sessionToken: string };
     }>(GET_CUSTOMER_SESSION_QUERY);

tsconfig.json

@@ -22,5 +22,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", ".next"]
 }