chore(core): fetch checkout url until click (#912)

.changeset/lazy-tools-collect.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+fetch checkout redirect url when user clicks proceed to checkout button

core/app/[locale]/(default)/cart/_actions/redirect-to-checkout.ts

@@ -0,0 +1,37 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+
+const CheckoutRedirectMutation = graphql(`
+  mutation CheckoutRedirectMutation($cartId: String!) {
+    cart {
+      createCartRedirectUrls(input: { cartEntityId: $cartId }) {
+        redirectUrls {
+          redirectedCheckoutUrl
+        }
+      }
+    }
+  }
+`);
+
+export const redirectToCheckout = async (formData: FormData) => {
+  const cartId = z.string().parse(formData.get('cartId'));
+
+  const { data } = await client.fetch({
+    document: CheckoutRedirectMutation,
+    variables: { cartId },
+    fetchOptions: { cache: 'no-store' },
+  });
+
+  const url = data.cart.createCartRedirectUrls.redirectUrls?.redirectedCheckoutUrl;
+
+  if (!url) {
+    throw new Error('Invalid checkout url.');
+  }
+
+  redirect(url);
+};

core/app/[locale]/(default)/cart/_components/checkout-button.tsx

@@ -1,31 +1,36 @@
-import { client } from '~/client';
-import { graphql } from '~/client/graphql';
-import { Button } from '~/components/ui/button';
+'use client';
+
+import { Loader2 as Spinner } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useFormStatus } from 'react-dom';
 
-export const CheckoutButtonMutation = graphql(`
-  mutation CheckoutButtonMutation($cartId: String!) {
-    cart {
-      createCartRedirectUrls(input: { cartEntityId: $cartId }) {
-        redirectUrls {
-          redirectedCheckoutUrl
-        }
-      }
-    }
-  }
-`);
+import { Button } from '~/components/ui/button';
 
-export const CheckoutButton = async ({ cartId, label }: { cartId: string; label: string }) => {
-  const { data } = await client.fetch({
-    document: CheckoutButtonMutation,
-    variables: { cartId },
-    fetchOptions: { cache: 'no-store' },
-  });
+import { redirectToCheckout } from '../_actions/redirect-to-checkout';
 
-  const checkoutUrl = data.cart.createCartRedirectUrls.redirectUrls?.redirectedCheckoutUrl;
+const InternalButton = () => {
+  const t = useTranslations('Cart');
+  const { pending } = useFormStatus();
 
   return (
-    <Button asChild className="mt-6">
-      <a href={checkoutUrl}>{label}</a>
+    <Button className="mt-6" disabled={pending}>
+      {pending ? (
+        <>
+          <Spinner aria-hidden="true" className="animate-spin text-primary " />
+          <span className="sr-only">{t('loading')}</span>
+        </>
+      ) : (
+        t('proceedToCheckout')
+      )}
     </Button>
   );
 };
+
+export const CheckoutButton = ({ cartId }: { cartId: string }) => {
+  return (
+    <form action={redirectToCheckout}>
+      <input name="cartId" type="hidden" value={cartId} />
+      <InternalButton />
+    </form>
+  );
+};

core/app/[locale]/(default)/cart/page.tsx

@@ -1,6 +1,6 @@
 import { cookies } from 'next/headers';
-import { getTranslations } from 'next-intl/server';
-import { Suspense } from 'react';
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages, getTranslations } from 'next-intl/server';
 
 import { getSessionCustomerId } from '~/auth';
 import { client } from '~/client';
@@ -50,7 +50,10 @@ export default async function CartPage({ params: { locale } }: Props) {
     return <EmptyCart locale={locale} />;
   }
 
+  const messages = await getMessages({ locale });
+  const Cart = messages.Cart ?? {};
   const t = await getTranslations({ locale, namespace: 'Cart' });
+
   const customerId = await getSessionCustomerId();
 
   const { data } = await client.fetch({
@@ -87,9 +90,9 @@ export default async function CartPage({ params: { locale } }: Props) {
         <div className="col-span-1 col-start-2 lg:col-start-3">
           {checkout && <CheckoutSummary data={checkout} />}
 
-          <Suspense fallback={t('loading')}>
-            <CheckoutButton cartId={cartId} label={t('proceedToCheckout')} />
-          </Suspense>
+          <NextIntlClientProvider locale={locale} messages={{ Cart }}>
+            <CheckoutButton cartId={cartId} />
+          </NextIntlClientProvider>
         </div>
       </div>
     </div>

core/app/[locale]/(default)/login/register-customer/page.tsx

@@ -56,7 +56,7 @@ export default async function RegisterCustomer({ params: { locale } }: Props) {
 
   return (
     <div className="mx-auto mb-10 mt-8 text-base lg:w-2/3">
-      <h1 className="my-6 my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
+      <h1 className="my-6 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
       <NextIntlClientProvider locale={locale} messages={{ Account }}>
         <RegisterCustomerForm
           addressFields={addressFields}

core/tests/ui/desktop/e2e/cart.spec.ts

@@ -22,7 +22,7 @@ test('Edit product quantity in cart', async ({ page }) => {
   await page.getByRole('link', { name: 'Cart Items 1' }).click();
 
   await expect(page.getByRole('heading', { level: 1, name: 'Your cart' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Proceed to checkout' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Proceed to checkout' })).toBeVisible();
 
   await page.getByRole('button', { name: 'Increase count' }).click();
 
@@ -37,7 +37,7 @@ test('Proceed to checkout', async ({ page }) => {
 
   await expect(page.getByRole('heading', { level: 1, name: 'Your cart' })).toBeVisible();
 
-  await page.getByRole('link', { name: 'Proceed to checkout' }).click();
+  await page.getByRole('button', { name: 'Proceed to checkout' }).click();
 
   await expect(page.getByRole('heading', { name: 'Order Summary', level: 3 })).toBeVisible();
   await expect(page.getByRole('heading', { name: `1 x ${sampleProduct}`, level: 4 })).toBeVisible();

core/tests/ui/desktop/e2e/coupon.spec.ts

@@ -13,7 +13,7 @@ test.beforeEach(async ({ page }) => {
   await page.getByRole('link', { name: 'Cart Items 1' }).click();
 
   await expect(page.getByRole('heading', { level: 1, name: 'Your cart' })).toBeVisible();
-  await expect(page.getByRole('link', { name: 'Proceed to checkout' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Proceed to checkout' })).toBeVisible();
 
   await page.getByRole('button', { name: 'Add' }).nth(1).click();
 });
@@ -46,7 +46,7 @@ test('Coupon code fails', async ({ page }) => {
 });
 
 test('Apply coupon on checkout', async ({ page }) => {
-  await page.getByRole('link', { name: 'Proceed to checkout' }).click();
+  await page.getByRole('button', { name: 'Proceed to checkout' }).click();
 
   await expect(page.getByRole('link', { name: 'Coupon/Gift Certificate' })).toBeVisible();
   await expect(page.getByText('Total (USD) $225.00')).toBeVisible();

core/tests/ui/mobile/checkout-experience.spec.ts

@@ -20,7 +20,7 @@ test('Checkout experience on ios mobile', async ({ page }) => {
   await page.getByRole('link', { name: 'Cart Items 1' }).click();
   await expect(page.getByRole('heading', { level: 1, name: 'Your cart' })).toBeVisible();
 
-  await page.getByRole('link', { name: 'Proceed to checkout' }).click();
+  await page.getByRole('button', { name: 'Proceed to checkout' }).click();
 
   await page.getByLabel('Email').fill(faker.internet.email());