feat(orders): update the orders list to use vibes section

bigcommerce · Jan 3, 2025 · 0a1e0a9 · 0a1e0a9
1 parent 0d8161b
commit 0a1e0a9
Show file tree

Hide file tree

Showing 11 changed files with 332 additions and 284 deletions.
diff --git a/core/app/[locale]/(default)/account/order/[slug]/_components/order-details.tsx b/core/app/[locale]/(default)/account/order/[slug]/_components/order-details.tsx
@@ -13,7 +13,7 @@ import {
 import { OrderDataType } from '../page';
 
 const OrderState = async ({ orderState }: { orderState: OrderDataType['orderState'] }) => {
-  const t = await getTranslations('Account.Orders');
+  const t = await getTranslations('Account.OrderDetails');
   const format = await getFormatter();
   const { orderId, orderDate, status } = orderState;
 
@@ -40,7 +40,7 @@ const OrderState = async ({ orderState }: { orderState: OrderDataType['orderStat
 };
 
 const OrderSummaryInfo = async ({ summaryInfo }: { summaryInfo: OrderDataType['summaryInfo'] }) => {
-  const t = await getTranslations('Account.Orders');
+  const t = await getTranslations('Account.OrderDetails');
   const format = await getFormatter();
   const { subtotal, shipping, tax, discounts, grandTotal } = summaryInfo;
   const { nonCouponDiscountTotal, couponDiscounts } = discounts;
@@ -136,7 +136,7 @@ const combineShippingMethodInfo = async (
     return [];
   }
 
-  const t = await getTranslations('Account.Orders');
+  const t = await getTranslations('Account.OrderDetails');
   const format = await getFormatter();
   const { shippingProviderName, shippingMethodName, shippedAt } = shipment;
   const providerWithMethod = `${shippingProviderName} - ${shippingMethodName}`;
@@ -158,7 +158,7 @@ const ShippingInfo = async ({
   isMultiConsignments: boolean;
   shippingNumber?: number;
 }) => {
-  const t = await getTranslations('Account.Orders');
+  const t = await getTranslations('Account.OrderDetails');
   const shippingConsignments = consignments.shipping;
 
   if (!shippingConsignments) {
@@ -233,7 +233,7 @@ const ShippingInfo = async ({
 };
 
 export const OrderDetails = async ({ data }: { data: OrderDataType }) => {
-  const t = await getTranslations('Account.Orders');
+  const t = await getTranslations('Account.OrderDetails');
   const { orderState, summaryInfo, consignments } = data;
   const shippingConsignments = consignments.shipping;
   const isMultiShippingConsignments = shippingConsignments && shippingConsignments.length > 1;

diff --git a/core/app/[locale]/(default)/account/orders/_components/orders-list.tsx b/core/app/[locale]/(default)/account/orders/_components/orders-list.tsx
diff --git a/core/app/[locale]/(default)/account/orders/_components/product-snippet.tsx b/core/app/[locale]/(default)/account/orders/_components/product-snippet.tsx
@@ -45,6 +45,8 @@ export const OrderItemFragment = graphql(`
   }
 `);
 
+export type OrderItemFragmentType = ResultOf<typeof OrderItemFragment>;
+
 export type ProductSnippetFragment = Omit<
   ResultOf<typeof ProductCardFragment>,
   'productOptions' | 'reviewSummary' | 'inventory' | 'availabilityV2' | 'brand' | 'path'
@@ -97,7 +99,7 @@ export const assembleProductData = (orderItem: ResultOf<typeof OrderItemFragment
 };
 
 const Price = async ({ price }: { price?: PricesType }) => {
-  const t = await getTranslations('Product.Details.Prices');
+  const t = await getTranslations('Product.ProductDetails.Prices');
 
   if (!price) {
     return;
@@ -149,7 +151,7 @@ export const ProductSnippet = async ({
 }: Props) => {
   const { name, defaultImage, brand, productId, prices } = product;
   const format = await getFormatter();
-  const t = await getTranslations('Product.Details');
+  const t = await getTranslations('Product.ProductDetails');
   const price = pricesTransformer(prices, format);
   const isImageAvailable = defaultImage !== null;
 
@@ -214,7 +216,7 @@ export const ProductSnippet = async ({
                   );
                 })}
                 <p className="flex gap-1 text-xs">
-                  <span>{t('qty')}:</span>
+                  <span>{t('quantity')}:</span>
                   <span className="font-semibold">{product.quantity}</span>
                 </p>
               </div>

diff --git a/core/app/[locale]/(default)/account/orders/page-data.ts b/core/app/[locale]/(default)/account/orders/page-data.ts
@@ -88,7 +88,7 @@ export const getCustomerOrders = cache(
     after = '',
     filterByStatus,
     filterByDateRange,
-    limit = 2,
+    limit = 5,
   }: CustomerOrdersArgs) => {
     const customerAccessToken = await getSessionCustomerAccessToken();
     const paginationArgs = before ? { last: limit, before } : { first: limit, after };

diff --git a/core/app/[locale]/(default)/account/orders/page.tsx b/core/app/[locale]/(default)/account/orders/page.tsx
@@ -1,11 +1,10 @@
 import { notFound } from 'next/navigation';
-import { getTranslations } from 'next-intl/server';
+import { getFormatter, getTranslations } from 'next-intl/server';
 
-import { Pagination } from '~/components/ui/pagination';
+import { ordersTransformer } from '~/data-transformers/orders-transformer';
+import { pageInfoTransformer } from '~/data-transformers/page-info-transformer';
+import { OrderListSection } from '~/vibes/soul/sections/order-list-section';
 
-import { TabHeading } from '../_components/tab-heading';
-
-import { OrdersList } from './_components/orders-list';
 import { getCustomerOrders } from './page-data';
 
 interface Props {
@@ -19,6 +18,7 @@ interface Props {
 export default async function Orders({ searchParams }: Props) {
   const { before, after } = await searchParams;
   const t = await getTranslations('Account.Orders');
+  const format = await getFormatter();
 
   const customerOrdersDetails = await getCustomerOrders({
     ...(after && { after }),
@@ -30,25 +30,15 @@ export default async function Orders({ searchParams }: Props) {
   }
 
   const { orders, pageInfo } = customerOrdersDetails;
-  const { hasNextPage, hasPreviousPage, startCursor, endCursor } = pageInfo;
 
   return (
-    <>
-      <TabHeading heading="orders" />
-      {orders.length === 0 ? (
-        <div className="mx-auto w-fit">{t('noOrders')}</div>
-      ) : (
-        <OrdersList customerOrders={orders} key={endCursor} />
-      )}
-      <div className="mb-14 inline-flex w-full justify-center py-6">
-        <Pagination
-          className="my-0 flex inline-flex justify-center text-center"
-          endCursor={endCursor ?? undefined}
-          hasNextPage={hasNextPage}
-          hasPreviousPage={hasPreviousPage}
-          startCursor={startCursor ?? undefined}
-        />
-      </div>
-    </>
+    <OrderListSection
+      orderNumberLabel={t('orderNumber')}
+      orders={ordersTransformer(orders, format)}
+      paginationInfo={pageInfoTransformer(pageInfo)}
+      title={t('title')}
+      totalLabel={t('totalPrice')}
+      viewDetailsLabel={t('viewDetails')}
+    />
   );
 }