refactor: use streamable in cart

bigcommerce · Jan 17, 2025 · d8665f0 · d8665f0
1 parent 65b4c57
commit d8665f0
Show file tree

Hide file tree

Showing 5 changed files with 459 additions and 490 deletions.
diff --git a/core/app/[locale]/(default)/cart/_actions/update-line-item.ts b/core/app/[locale]/(default)/cart/_actions/update-line-item.ts
@@ -6,8 +6,8 @@ import { parseWithZod } from '@conform-to/zod';
 import { FragmentOf } from 'gql.tada';
 import { getTranslations } from 'next-intl/server';
 
+import { CartLineItem } from '@/vibes/soul/sections/cart';
 import { cartLineItemActionFormDataSchema } from '@/vibes/soul/sections/cart/schema';
-import { CartLineItem } from '@/vibes/soul/sections/cart/types';
 
 import { DigitalItemFragment, PhysicalItemFragment } from '../page-data';
 

diff --git a/core/app/[locale]/(default)/cart/page.tsx b/core/app/[locale]/(default)/cart/page.tsx
@@ -2,6 +2,7 @@ import { cookies } from 'next/headers';
 import { getFormatter, getTranslations } from 'next-intl/server';
 
 import { Cart as CartComponent, CartEmptyState } from '@/vibes/soul/sections/cart';
+import { exists } from '~/lib/utils';
 
 import { redirectToCheckout } from './_actions/redirect-to-checkout';
 import { updateLineItem } from './_actions/update-line-item';
@@ -88,7 +89,32 @@ export default async function Cart() {
   return (
     <>
       <CartComponent
+        cart={{
+          lineItems: formattedLineItems,
+          total: format.number(checkout?.grandTotal?.value || 0, {
+            style: 'currency',
+            currency: cart.currencyCode,
+          }),
+          totalLabel: t('CheckoutSummary.grandTotal'),
+          summaryItems: [
+            {
+              label: t('CheckoutSummary.subTotal'),
+              value: format.number(checkout?.subtotal?.value ?? 0, {
+                style: 'currency',
+                currency: cart.currencyCode,
+              }),
+            },
+            checkout?.taxTotal && {
+              label: 'Tax',
+              value: format.number(checkout.taxTotal.value, {
+                style: 'currency',
+                currency: cart.currencyCode,
+              }),
+            },
+          ].filter(exists),
+        }}
         checkoutAction={redirectToCheckout}
+        checkoutLabel={t('proceedToCheckout')}
         decrementLineItemLabel={t('decrement')}
         deleteLineItemLabel={t('removeItem')}
         emptyState={{
@@ -98,28 +124,7 @@ export default async function Cart() {
         }}
         incrementLineItemLabel={t('increment')}
         lineItemAction={updateLineItem}
-        lineItems={formattedLineItems}
-        summary={{
-          title: t('CheckoutSummary.title'),
-          taxLabel: t('CheckoutSummary.tax'),
-          tax: checkout?.taxTotal
-            ? format.number(checkout.taxTotal.value, {
-                style: 'currency',
-                currency: cart.currencyCode,
-              })
-            : '',
-          subtotalLabel: t('CheckoutSummary.subTotal'),
-          subtotal: format.number(checkout?.subtotal?.value ?? 0, {
-            style: 'currency',
-            currency: cart.currencyCode,
-          }),
-          grandTotalLabel: t('CheckoutSummary.grandTotal'),
-          grandTotal: format.number(checkout?.grandTotal?.value || 0, {
-            style: 'currency',
-            currency: cart.currencyCode,
-          }),
-          ctaLabel: t('proceedToCheckout'),
-        }}
+        summaryTitle={t('CheckoutSummary.title')}
         title={t('title')}
       />
       <CartViewed