feat: feature get user order

framework/vendure/schema.d.ts

@@ -3211,7 +3211,7 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
   activeCustomer?: Maybe<
     { __typename?: 'Customer' } & Pick<
       Customer,
-      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber'
+      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber' | 'orders'
     >
   >
 }

framework/vendure/utils/queries/get-user-order-query.ts

@@ -0,0 +1,19 @@
+export const getUserOrderQuery = /* GraphQL */ `
+    query activeCustomer {
+        activeCustomer {
+            orders{
+                items{
+                    lines{
+                        productVariant{
+                            name
+                        }
+                    quantity
+                    }
+                total
+                state
+                code
+                }
+            }
+        }
+  }
+`

src/components/hooks/account/index.ts

@@ -0,0 +1,3 @@
+export { default as useGetUserOrder } from './useGetUserOrder';
+export { default as useEditUserInfo } from './useEditUserInfo'
+export { default as useEditCustomerAddress } from './useEditCustomerAddress'

src/components/hooks/account/useGetUserOrder.tsx

@@ -0,0 +1,20 @@
+import { ActiveCustomerQuery, Order } from '@framework/schema'
+import { getUserOrderQuery } from '@framework/utils/queries/get-user-order-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useGetUserOrder = () => {
+  const { data, ...rest } = useSWR<ActiveCustomerQuery>([getUserOrderQuery], gglFetcher)
+  console.log(data);
+  const addingItem = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'AddingItems');
+  const arrangingPayment = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'ArrangingPayment');
+  const cancelled = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == "Cancelled");
+  return { 
+    addingItem: addingItem,
+    arrangingPayment: arrangingPayment,
+    cancelled: cancelled,
+    ...rest 
+  }
+}
+
+export default useGetUserOrder

src/components/hooks/index.ts

@@ -1,4 +1,2 @@
 export { default as useModalCommon } from './useModalCommon'
-export { default as useEditUserInfo } from './account/useEditUserInfo'
-export { default as useEditCustomerAddress } from './account/useEditCustomerAddress'
 

src/components/modules/account/AccountPage/AccountPage.tsx

@@ -12,20 +12,10 @@ import EditInfoModal from './components/EditInfoModal/EditInfoModal'
 import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
 import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
 import { useRouter } from "next/router"
-import { useActiveCustomer } from 'src/components/hooks/auth'
+import { useActiveCustomer} from 'src/components/hooks/auth'
+import { useGetUserOrder} from 'src/components/hooks/account'
 import { AccountProps } from "./components/AccountInfomation/AccountInfomation"
-const waiting = [
+
-    {
-        id: "NO 123456",
-        products: ["Tomato", "Fish", "Pork", "Onion"],
-        totalPrice : 1000
-    },
-    {
-        id: "NO 123457",
-        products: ["Tomato", "Fish", "Pork", "Onion"],
-        totalPrice : 1000
-    }
-]
 
 const delivering = [
     {
@@ -73,7 +63,9 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     const router = useRouter()
 
     const {userInfo} = useActiveCustomer();
- 
+    
+    const {addingItem,arrangingPayment,cancelled} = useGetUserOrder();
+
 
     const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
@@ -104,7 +96,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
                         <AccountInfomation account={userInfo} onClick={showModal}  />
                     </TabPane>
                     <TabPane tabName="Your Orders"> 
-                        <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
+                        <OrderInfomation addingItem={addingItem} arrangingPayment={arrangingPayment} cancelled={cancelled} />
                     </TabPane>
                     <TabPane tabName="Favourite"> 
                         <FavouriteProducts products={PRODUCT_CART_DATA_TEST}  />

src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx

@@ -8,7 +8,7 @@ import {
   } from 'src/components/common'
 import * as Yup from 'yup'
 import { Form, Formik } from 'formik'
-import { useEditCustomerAddress, useEditUserInfo } from "src/components/hooks";
+import { useEditCustomerAddress, useEditUserInfo } from "src/components/hooks/account";
 import { LANGUAGE } from 'src/utils/language.utils'
 import { useMessage } from 'src/components/contexts'
 interface EditInfoModalProps {

src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx

@@ -4,50 +4,50 @@ import s from './OrderInformation.module.scss'
 import { TabCommon } from '../../../../../common'
 import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
 import DeliveryItem from '../../../DeliveryItem/DeliveryItem'
+import { Order } from "@framework/schema"
 
 
 interface OrderInformationProps {
-    waiting: {id: string, products: string[], totalPrice: number}[],
+    addingItem?: Order[],
-    delivering: {id: string, products: string[], totalPrice: number}[],
+    arrangingPayment?: Order[],
-    delivered: {id: string, products: string[], totalPrice: number}[],
+    cancelled?: Order[],
 }
 
-const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {
+const OrderInformation = ({ addingItem, arrangingPayment, cancelled} : OrderInformationProps) => {
-
     return (
         <section className={s.orderInformation}>
             <div className={s.title}>Order Information</div>
 
             <div className={s.tabs}>
                 <TabCommon>
-                    <TabPane tabName={"Wait for Comfirmation"} >
+                    <TabPane tabName={"Adding Item"} >
                         <div className={s.blank}></div>
                         {
-                            waiting.map((order, i) => {
+                            addingItem?.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="waiting" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.code} id={order.code} status="waiting" products={order.lines} totalPrice={order.total} />
                                 )
                             }) 
                         }
                     </TabPane>
 
-                    <TabPane tabName={"Delivering"}>
+                    <TabPane tabName={"Arranging Payment"}>
                         <div className={s.blank}></div>
                         {
-                            delivering.map((order, i) => {
+                            arrangingPayment?.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="delivering" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.id} id={order.id} status="delivering" products={order.lines} totalPrice={order.total} />
                                 )
                             }) 
                         }
                     </TabPane>
 
-                    <TabPane tabName={"Delivered"}>
+                    <TabPane tabName={"Cancelled"}>
                         <div className={s.blank}></div>
                         {
-                            delivered.map((order, i) => {
+                            cancelled?.map((order, i) => {
                                 return (
-                                    <DeliveryItem key={order.id} id={order.id} status="delivered" products={order.products} totalPrice={order.totalPrice} />
+                                    <DeliveryItem key={order.id} id={order.id} status="delivered" products={order.lines} totalPrice={order.total} />
                                 )
                             }) 
                         }

src/components/modules/account/DeliveryItem/DeliveryItem.tsx

@@ -5,12 +5,13 @@ import IdAndStatus from './components/IdAndStatus/IdAndStatus'
 import Products from './components/Products/Products'
 import TotalPrice from './components/TotalPrice/TotalPrice'
 import ReOrder from './components/ReOrder/ReOrder'
+import { OrderLine } from "@framework/schema"
 
 
 interface DeliveryItemProps {
     id: string;
     status: "waiting" | "delivering" | "delivered";
-    products: string[];
+    products?: OrderLine[];
     totalPrice: number;
 }
 

src/components/modules/account/DeliveryItem/components/Products/Products.tsx

@@ -1,19 +1,19 @@
+import { OrderLine } from "@framework/schema";
 import React from "react"
 import s from './Products.module.scss'
 
 interface ProductsProps {
-    products: string[];
+    products?: OrderLine[];
 }
 
 const Products = ({ products } : ProductsProps) => {
-
+    function toString(products?:OrderLine[]): string {
-    function toString(products:string[]): string {
         let strProducts = "";
-        products.map((prod, i) => {
+        products?.map((prod, i) => {
             if (i === 0) {
-                strProducts += prod;
+                strProducts += prod.productVariant?.name;
             } else {
-                strProducts += `, ${prod}`
+                strProducts += `, ${prod.productVariant?.name}`
             }
         });
         return strProducts;