Streamable cart (#1913)

* fix: toaster position * refactor: use streamable in cart * chore: changeset
bigcommerce · Jan 29, 2025 · 1cead1d · 1cead1d
1 parent 0098c6b
commit 1cead1d
Show file tree

Hide file tree

Showing 7 changed files with 465 additions and 491 deletions.
diff --git a/.changeset/smooth-flowers-joke.md b/.changeset/smooth-flowers-joke.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Applied streamable pattern to Cart.
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
@@ -3,6 +3,7 @@ import { getFormatter, getTranslations } from 'next-intl/server';
 
 import { Cart as CartComponent, CartEmptyState } from '@/vibes/soul/sections/cart';
 import { getCartId } from '~/lib/cart';
+import { exists } from '~/lib/utils';
 
 import { redirectToCheckout } from './_actions/redirect-to-checkout';
 import { updateLineItem } from './_actions/update-line-item';
@@ -89,7 +90,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={{
@@ -100,28 +126,7 @@ export default async function Cart() {
         incrementLineItemLabel={t('increment')}
         key={`${cart.entityId}-${cart.version}`}
         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

diff --git a/core/vibes/soul/primitives/toaster/index.tsx b/core/vibes/soul/primitives/toaster/index.tsx
@@ -23,7 +23,7 @@ export const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         unstyled: true,
         classNames: {
-          toast: 'group focus-visible:ring-0',
+          toast: 'group focus-visible:ring-0 right-0',
         },
       }}
       {...props}