feat(core): add path to PDP for Orders

bigcommerce · Nov 13, 2024 · e709701 · e709701
1 parent 324f32b
commit e709701
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 73 deletions.
diff --git a/.changeset/old-tables-bow.md b/.changeset/old-tables-bow.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+add path to PDP for Orders
diff --git a/core/app/[locale]/(default)/account/(tabs)/orders/_components/order-details.tsx b/core/app/[locale]/(default)/account/(tabs)/orders/_components/order-details.tsx
@@ -1,4 +1,3 @@
-import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { getFormatter, getTranslations } from 'next-intl/server';
 
 import { Link } from '~/components/link';
@@ -130,8 +129,8 @@ const combineAddressInfo = (
 };
 const combineShippingMethodInfo = async (
   shipment?: NonNullable<
-    NonNullable<OrderDetailsDataType['consignments']['shipping']>[number]['shipments']['edges']
-  >[number]['node'],
+    NonNullable<OrderDetailsDataType['consignments']['shipping']>[number]['shipments']
+  >[number],
 ) => {
   if (!shipment) {
     return [];
@@ -152,38 +151,37 @@ const combineShippingMethodInfo = async (
 
 const ShippingInfo = async ({
   consignments,
-  isMutiConsignments,
+  isMultiConsignments,
   shippingNumber,
 }: {
   consignments: OrderDetailsDataType['consignments'];
-  isMutiConsignments: boolean;
+  isMultiConsignments: boolean;
   shippingNumber?: number;
 }) => {
   const t = await getTranslations('Account.Orders');
-  const orderShipments = consignments.shipping?.map(({ shipments, shippingAddress }) => ({
-    shipments: removeEdgesAndNodes(shipments),
-    shippingAddress,
-  }));
+  const shippingConsignments = consignments.shipping;
 
-  if (!orderShipments) {
+  if (!shippingConsignments) {
     return;
   }
 
   let customerShippingAddress: string[] = [];
   let customerShippingMethod: string[] = [];
   let trackingData;
 
-  if (!isMutiConsignments && orderShipments[0]?.shippingAddress) {
-    trackingData = orderShipments[0].shipments[0]?.tracking;
-    customerShippingAddress = combineAddressInfo(orderShipments[0].shippingAddress);
-    customerShippingMethod = await combineShippingMethodInfo(orderShipments[0].shipments[0]);
+  if (!isMultiConsignments && shippingConsignments[0]?.shippingAddress) {
+    trackingData = shippingConsignments[0].shipments[0]?.tracking;
+    customerShippingAddress = combineAddressInfo(shippingConsignments[0].shippingAddress);
+    customerShippingMethod = await combineShippingMethodInfo(shippingConsignments[0].shipments[0]);
   }
 
-  if (isMutiConsignments && shippingNumber !== undefined && orderShipments[shippingNumber]) {
-    trackingData = orderShipments[shippingNumber].shipments[0]?.tracking;
-    customerShippingAddress = combineAddressInfo(orderShipments[shippingNumber].shippingAddress);
+  if (isMultiConsignments && shippingNumber !== undefined && shippingConsignments[shippingNumber]) {
+    trackingData = shippingConsignments[shippingNumber].shipments[0]?.tracking;
+    customerShippingAddress = combineAddressInfo(
+      shippingConsignments[shippingNumber].shippingAddress,
+    );
     customerShippingMethod = await combineShippingMethodInfo(
-      orderShipments[shippingNumber].shipments[0],
+      shippingConsignments[shippingNumber].shipments[0],
     );
   }
 
@@ -196,10 +194,10 @@ const ShippingInfo = async ({
     <div
       className={cn(
         'border border-gray-200 p-6',
-        isMutiConsignments && 'flex flex-col gap-4 border-none md:flex-row md:gap-16',
+        isMultiConsignments && 'flex flex-col gap-4 border-none md:flex-row md:gap-16',
       )}
     >
-      {!isMutiConsignments ? (
+      {!isMultiConsignments ? (
         <p className="border-b border-gray-200 pb-4 text-lg font-semibold">{t('shippingTitle')}</p>
       ) : null}
       <div className="flex flex-col gap-2 py-4">
@@ -211,7 +209,7 @@ const ShippingInfo = async ({
       <div
         className={cn(
           'flex flex-col gap-2 border-t border-gray-200 pt-4 text-base',
-          isMutiConsignments && 'border-0',
+          isMultiConsignments && 'border-0',
         )}
       >
         <p className="font-semibold">{t('shippingMethod')}</p>
@@ -237,31 +235,28 @@ const ShippingInfo = async ({
 export const OrderDetails = async ({ data }: { data: OrderDetailsDataType }) => {
   const t = await getTranslations('Account.Orders');
   const { orderState, summaryInfo, consignments } = data;
-  const isMultiShippingConsignments = consignments.shipping && consignments.shipping.length > 1;
-
-  const orderContent = consignments.shipping?.map(({ lineItems }) => ({
-    lineItems: removeEdgesAndNodes(lineItems),
-  }));
+  const shippingConsignments = consignments.shipping;
+  const isMultiShippingConsignments = shippingConsignments && shippingConsignments.length > 1;
 
   return (
     <div className="mb-14">
       <OrderState orderState={orderState} />
       <div className="flex flex-col gap-8 lg:flex-row">
         <div className="flex flex-col gap-8 lg:w-2/3">
-          {orderContent?.map((consignment, idx) => {
+          {shippingConsignments?.map((consignment, idx) => {
             const { lineItems } = consignment;
 
             return (
               <div className="w-full border border-gray-200 p-6" key={idx}>
                 <p className="border-b border-gray-200 pb-4 text-xl font-semibold lg:text-2xl">
                   {isMultiShippingConsignments
-                    ? `${t('shipmentTitle')} ${idx + 1}/${orderContent.length}`
+                    ? `${t('shipmentTitle')} ${idx + 1}/${shippingConsignments.length}`
                     : t('orderContents')}
                 </p>
                 {isMultiShippingConsignments && (
                   <ShippingInfo
                     consignments={consignments}
-                    isMutiConsignments={true}
+                    isMultiConsignments={true}
                     shippingNumber={idx}
                   />
                 )}
@@ -286,7 +281,7 @@ export const OrderDetails = async ({ data }: { data: OrderDetailsDataType }) =>
         <div className="flex grow flex-col gap-8">
           <OrderSummaryInfo summaryInfo={summaryInfo} />
           {!isMultiShippingConsignments && (
-            <ShippingInfo consignments={consignments} isMutiConsignments={false} />
+            <ShippingInfo consignments={consignments} isMultiConsignments={false} />
           )}
           {/* TODO: add PaymentInfo component later */}
         </div>

diff --git a/core/app/[locale]/(default)/account/(tabs)/orders/_components/orders-list.tsx b/core/app/[locale]/(default)/account/(tabs)/orders/_components/orders-list.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { useFormatter, useTranslations } from 'next-intl';
 
 import { Link } from '~/components/link';
@@ -161,21 +160,9 @@ const OrderDetails = ({
 };
 
 export const OrdersList = ({ customerOrders }: OrdersListProps) => {
-  const ordersHistory = customerOrders.map((order) => ({
-    ...order,
-    consignments: {
-      shipping: order.consignments.shipping
-        ? order.consignments.shipping.map(({ lineItems, shipments }) => ({
-            lineItems: removeEdgesAndNodes(lineItems),
-            shipments: removeEdgesAndNodes(shipments),
-          }))
-        : null,
-    },
-  }));
-
   return (
     <ul className="flex w-full flex-col">
-      {ordersHistory.map(({ entityId, orderedAt, status, totalIncTax, consignments }) => {
+      {customerOrders.map(({ entityId, orderedAt, status, totalIncTax, consignments }) => {
         // NOTE: tracking url will be supported later
         const trackingUrl = consignments.shipping
           ? consignments.shipping

diff --git a/core/app/[locale]/(default)/account/(tabs)/orders/_components/product-snippet.tsx b/core/app/[locale]/(default)/account/(tabs)/orders/_components/product-snippet.tsx
@@ -1,6 +1,6 @@
 import { useFormatter, useTranslations } from 'next-intl';
 
-import { FragmentOf, graphql, ResultOf } from '~/client/graphql';
+import { graphql, ResultOf } from '~/client/graphql';
 import { BcImage } from '~/components/bc-image';
 import { Link } from '~/components/link';
 import { ProductCardFragment } from '~/components/product-card/fragment';
@@ -11,6 +11,7 @@ import { cn } from '~/lib/utils';
 export const OrderItemFragment = graphql(`
   fragment OrderItemFragment on OrderPhysicalLineItem {
     entityId
+    productEntityId
     brand
     name
     quantity
@@ -32,8 +33,10 @@ export const OrderItemFragment = graphql(`
 
 export type ProductSnippetFragment = Omit<
   ResultOf<typeof ProductCardFragment>,
-  'productOptions' | 'reviewSummary' | 'inventory' | 'availabilityV2'
+  'productOptions' | 'reviewSummary' | 'inventory' | 'availabilityV2' | 'brand'
 > & {
+  path: string;
+  brand: string | null;
   quantity: number;
   productOptions?: Array<{
     __typename: string;
@@ -42,24 +45,35 @@ export type ProductSnippetFragment = Omit<
   }>;
 };
 
-export const assembleProductData = (orderItem: FragmentOf<typeof OrderItemFragment>) => {
-  const { entityId: productId, name, brand, image, subTotalListPrice, productOptions } = orderItem;
+type ExtendedOrderItem = ResultOf<typeof OrderItemFragment> & {
+  path: string;
+};
+
+export const assembleProductData = (orderItem: ExtendedOrderItem) => {
+  const {
+    entityId,
+    productEntityId: productId,
+    name,
+    path,
+    brand,
+    image,
+    subTotalListPrice,
+    productOptions,
+  } = orderItem;
 
   return {
-    entityId: productId,
+    entityId,
+    productId,
     name,
-    brand: {
-      name: brand ?? '',
-      path: '', // will be added later
-    },
+    brand,
     defaultImage: image
       ? {
           url: image.url,
           altText: image.altText,
         }
       : null,
     productOptions,
-    path: '', // will be added later
+    path,
     quantity: orderItem.quantity,
     prices: {
       price: subTotalListPrice,
@@ -161,16 +175,16 @@ export const ProductSnippet = ({
         )}
       </div>
       <div className="flex flex-1 flex-col gap-1">
-        {brand ? <p className={cn('text-base text-gray-500', brandSize)}>{brand.name}</p> : null}
+        {brand ? <p className={cn('text-base text-gray-500', brandSize)}>{brand}</p> : null}
         {isExtended ? (
           <div className="flex flex-col items-start justify-between md:flex-row">
             <div>
               <h3 className={cn('text-base font-semibold', productSize)}>
                 <Link
-                  className="focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-primary/20 focus-visible:ring-0"
+                  className="hover:text-primary focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-primary/20 focus-visible:ring-0"
                   href={path}
                 >
-                  <span aria-hidden="true" className="absolute inset-0 bottom-20" />
+                  <span aria-hidden="true" className="absolute inset-0" />
                   {name}
                 </Link>
               </h3>
@@ -196,10 +210,10 @@ export const ProductSnippet = ({
         ) : (
           <h3 className={cn('text-base font-semibold', productSize)}>
             <Link
-              className="focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-primary/20 focus-visible:ring-0"
+              className="hover:text-primary focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-primary/20 focus-visible:ring-0"
               href={path}
             >
-              <span aria-hidden="true" className="absolute inset-0 bottom-20" />
+              <span aria-hidden="true" className="absolute inset-0" />
               {name}
             </Link>
           </h3>