crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #82 from KieIO/feature/m2-get-user-order

Browse Source 
Feature/m2 get user order
This commit is contained in:
Quangnhankie
2021-10-15 17:27:24 +07:00
committed by GitHub
parent 75ff78e25e bd06e1d815
commit ac2bab6503
10 changed files with 74 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
framework/vendure/schema.d.ts vendored
View File

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

19
framework/vendure/utils/queries/get-user-order-query.ts Normal file
View File

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

3
src/components/hooks/account/index.ts Normal file
View File

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

20
src/components/hooks/account/useGetUserOrder.tsx Normal file
View File

@@ -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)
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

2
src/components/hooks/index.ts
View File

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

23
src/components/modules/account/AccountPage/AccountPage.tsx
View File

@@ -12,19 +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'
const waiting = [
{
id: "NO 123456",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
},
{
id: "NO 123457",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
}
]
import { useActiveCustomer} from 'src/components/hooks/auth'
import { useGetUserOrder} from 'src/components/hooks/account'
import { AccountProps } from "./components/AccountInfomation/AccountInfomation"
const delivering = [
{
@@ -72,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);
@@ -105,7 +98,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} />

2
src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
View File

@@ -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 {

28
src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
View File

@@ -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}[],
delivering: {id: string, products: string[], totalPrice: number}[],
delivered: {id: string, products: string[], totalPrice: number}[],
addingItem?: Order[],
arrangingPayment?: Order[],
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} />
)
})
}

3
src/components/modules/account/DeliveryItem/DeliveryItem.tsx
View File

@@ -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;
}

12
src/components/modules/account/DeliveryItem/components/Products/Products.tsx
View File

@@ -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:string[]): string {
function toString(products?:OrderLine[]): 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;