-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(core): update order page to use slug
- Loading branch information
1 parent
a82faf0
commit 520cbd1
Showing
8 changed files
with
305 additions
and
274 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
199 changes: 199 additions & 0 deletions
199
core/app/[locale]/(default)/account/(tabs)/order/[slug]/page-data.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client'; | ||
| import { cache } from 'react'; | ||
|
|
||
| import { getSessionCustomerAccessToken } from '~/auth'; | ||
| import { client } from '~/client'; | ||
| import { graphql, ResultOf, VariablesOf } from '~/client/graphql'; | ||
| import { revalidate } from '~/client/revalidate-target'; | ||
| import { ExistingResultType } from '~/client/util'; | ||
|
|
||
| import { | ||
| OrderItemFragment, | ||
| ProductAttributes, | ||
| ProductAttributesVariables, | ||
| } from '../../orders/_components/product-snippet'; | ||
|
|
||
| export const OrderShipmentFragment = graphql(` | ||
| fragment OrderShipmentFragment on OrderShipment { | ||
| shippingMethodName | ||
| shippingProviderName | ||
| tracking { | ||
| __typename | ||
| ... on OrderShipmentNumberAndUrlTracking { | ||
| number | ||
| url | ||
| } | ||
| ... on OrderShipmentUrlOnlyTracking { | ||
| url | ||
| } | ||
| ... on OrderShipmentNumberOnlyTracking { | ||
| number | ||
| } | ||
| } | ||
| } | ||
| `); | ||
|
|
||
| const CustomerOrderDetails = graphql( | ||
| ` | ||
| query CustomerOrderDetails($filter: OrderFilterInput) { | ||
| site { | ||
| order(filter: $filter) { | ||
| entityId | ||
| orderedAt { | ||
| utc | ||
| } | ||
| status { | ||
| label | ||
| value | ||
| } | ||
| totalIncTax { | ||
| value | ||
| currencyCode | ||
| } | ||
| subTotal { | ||
| value | ||
| currencyCode | ||
| } | ||
| discounts { | ||
| nonCouponDiscountTotal { | ||
| value | ||
| currencyCode | ||
| } | ||
| couponDiscounts { | ||
| couponCode | ||
| discountedAmount { | ||
| value | ||
| currencyCode | ||
| } | ||
| } | ||
| } | ||
| shippingCostTotal { | ||
| value | ||
| currencyCode | ||
| } | ||
| taxTotal { | ||
| value | ||
| currencyCode | ||
| } | ||
| billingAddress { | ||
| firstName | ||
| lastName | ||
| address1 | ||
| city | ||
| stateOrProvince | ||
| postalCode | ||
| country | ||
| } | ||
| consignments { | ||
| shipping { | ||
| edges { | ||
| node { | ||
| entityId | ||
| shippingAddress { | ||
| firstName | ||
| lastName | ||
| address1 | ||
| city | ||
| stateOrProvince | ||
| postalCode | ||
| country | ||
| } | ||
| shipments { | ||
| edges { | ||
| node { | ||
| entityId | ||
| shippedAt { | ||
| utc | ||
| } | ||
| ...OrderShipmentFragment | ||
| } | ||
| } | ||
| } | ||
| lineItems { | ||
| edges { | ||
| node { | ||
| ...OrderItemFragment | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `, | ||
| [OrderItemFragment, OrderShipmentFragment], | ||
| ); | ||
|
|
||
| export const getProductAttributes = cache(async (variables: ProductAttributesVariables) => { | ||
| const response = await client.fetch({ | ||
| document: ProductAttributes, | ||
| variables, | ||
| fetchOptions: { next: { revalidate } }, | ||
| }); | ||
|
|
||
| return response.data.site.product; | ||
| }); | ||
|
|
||
| type ShippingConsignments = NonNullable< | ||
| NonNullable<ResultOf<typeof CustomerOrderDetails>['site']['order']>['consignments'] | ||
| >['shipping']; | ||
|
|
||
| export const addProductAttributesToShippingConsignments = async ( | ||
| consignments: ShippingConsignments, | ||
| ) => { | ||
| const shipping = removeEdgesAndNodes(consignments); | ||
|
|
||
| const shippingConsignments = await Promise.all( | ||
| shipping.map(async (consignment) => { | ||
| const { lineItems, shipments, ...otherItems } = consignment; | ||
| const extendedLineItems = await Promise.all( | ||
| removeEdgesAndNodes(lineItems).map(async ({ productEntityId, ...otherAttributes }) => { | ||
| const productAtrributes = await getProductAttributes({ | ||
| entityId: productEntityId, | ||
| }); | ||
|
|
||
| const { path = '' } = productAtrributes ?? {}; | ||
|
|
||
| return { | ||
| productEntityId, | ||
| path, | ||
| ...otherAttributes, | ||
| }; | ||
| }), | ||
| ); | ||
|
|
||
| return { | ||
| lineItems: extendedLineItems, | ||
| shipments: removeEdgesAndNodes(shipments), | ||
| ...otherItems, | ||
| }; | ||
| }), | ||
| ); | ||
|
|
||
| return shippingConsignments; | ||
| }; | ||
|
|
||
| type OrderVariables = VariablesOf<typeof CustomerOrderDetails>; | ||
|
|
||
| export const getOrderDetails = cache(async (variables: OrderVariables) => { | ||
| const customerAccessToken = await getSessionCustomerAccessToken(); | ||
|
|
||
| const response = await client.fetch({ | ||
| document: CustomerOrderDetails, | ||
| variables, | ||
| fetchOptions: { cache: 'no-store' }, | ||
| customerAccessToken, | ||
| }); | ||
| const order = response.data.site.order; | ||
|
|
||
| if (!order) { | ||
| return undefined; | ||
| } | ||
|
|
||
| return order; | ||
| }); | ||
|
|
||
| export type OrderDetailsType = ExistingResultType<typeof getOrderDetails>; |
68 changes: 68 additions & 0 deletions
68
core/app/[locale]/(default)/account/(tabs)/order/[slug]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { notFound } from 'next/navigation'; | ||
|
|
||
| import { ExistingResultType } from '~/client/util'; | ||
|
|
||
| import { OrderDetails } from './_components/order-details'; | ||
| import { | ||
| addProductAttributesToShippingConsignments, | ||
| getOrderDetails, | ||
| OrderDetailsType, | ||
| } from './page-data'; | ||
|
|
||
| interface Props { | ||
| params: Promise<{ | ||
| slug: string; | ||
| locale: string; | ||
| }>; | ||
| } | ||
|
|
||
| const mapOrderData = async (order: OrderDetailsType) => { | ||
| const shipping = | ||
| order.consignments?.shipping && | ||
| (await addProductAttributesToShippingConsignments(order.consignments.shipping)); | ||
|
|
||
| return { | ||
| orderState: { | ||
| orderId: order.entityId, | ||
| status: order.status, | ||
| orderDate: order.orderedAt, | ||
| }, | ||
| summaryInfo: { | ||
| subtotal: order.subTotal, | ||
| discounts: order.discounts, | ||
| shipping: order.shippingCostTotal, | ||
| tax: order.taxTotal, | ||
| grandTotal: order.totalIncTax, | ||
| }, | ||
| paymentInfo: { | ||
| billingAddress: order.billingAddress, | ||
| // TODO: add payments data | ||
| }, | ||
| consignments: { | ||
| shipping, | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| export type OrderDataType = ExistingResultType<typeof mapOrderData>; | ||
|
|
||
| export default async function Order(props: Props) { | ||
| const { slug } = await props.params; | ||
| const entityId = Number(slug); | ||
|
|
||
| const order = await getOrderDetails({ | ||
| filter: { | ||
| entityId, | ||
| }, | ||
| }); | ||
|
|
||
| if (!order) { | ||
| notFound(); | ||
| } | ||
|
|
||
| const data = await mapOrderData(order); | ||
|
|
||
| return <OrderDetails data={data} />; | ||
| } | ||
|
|
||
| export const runtime = 'edge'; |
16 changes: 4 additions & 12 deletions
16
core/app/[locale]/(default)/account/(tabs)/orders/_components/orders-content.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.