chore(clerk-js): Use error metadata for invalid change plan screen on <Checkout /> (#6102)

Author: panteliselef

.changeset/itchy-keys-shake.md

@@ -0,0 +1,5 @@
+---
+'@clerk/testing': patch
+---
+
+Bug fix: Toggling the period switch would not match the requested period `startCheckout({ period })`.

.changeset/rotten-ghosts-build.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Use error metadata for invalid change plan screen on `Checkout` component.

.changeset/sad-lines-share.md

@@ -0,0 +1,6 @@
+---
+'@clerk/shared': patch
+'@clerk/types': patch
+---
+
+Parse partial `plan` in `ClerkAPIError.meta`

integration/tests/pricing-table.test.ts

@@ -316,5 +316,38 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
 
       await fakeUser.deleteIfExists();
     });
+
+    test('displays notice then plan cannot change', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+
+      const fakeUser = u.services.users.createFakeUser();
+      await u.services.users.createBapiUser(fakeUser);
+
+      await u.po.signIn.goTo();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.page.goToRelative('/user');
+
+      await u.po.userProfile.waitForMounted();
+      await u.po.userProfile.switchToBillingTab();
+      await u.po.page.getByRole('button', { name: 'Switch plans' }).click();
+      await u.po.pricingTable.startCheckout({ planSlug: 'plus', period: 'annually' });
+      await u.po.checkout.waitForMounted();
+      await u.po.checkout.fillTestCard();
+      await u.po.checkout.clickPayOrSubscribe();
+      await expect(u.po.page.getByText('Payment was successful!')).toBeVisible();
+
+      await u.po.checkout.confirmAndContinue();
+      await u.po.pricingTable.startCheckout({ planSlug: 'pro', shouldSwitch: true, period: 'monthly' });
+      await u.po.checkout.waitForMounted();
+      await expect(
+        page
+          .locator('.cl-checkout-root')
+          .getByText(
+            'You cannot subscribe to this plan by paying monthly. To subscribe to this plan, you need to choose to pay annually',
+          ),
+      ).toBeVisible();
+
+      await fakeUser.deleteIfExists();
+    });
   });
 });

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "605kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "69.2KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "69.3KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "53KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "106.3KB" },

packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

@@ -1,10 +1,10 @@
 import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { ClerkAPIError, CommerceCheckoutResource, CommercePlanResource } from '@clerk/types';
+import type { ClerkAPIError, CommerceCheckoutResource } from '@clerk/types';
 import { createContext, useContext, useEffect, useMemo } from 'react';
 import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';
 
-import { useCheckoutContext, usePlans } from '../../contexts';
+import { useCheckoutContext } from '../../contexts';
 
 type CheckoutStatus = 'pending' | 'ready' | 'completed' | 'missing_payer_email' | 'invalid_plan_change' | 'error';
 
@@ -14,7 +14,6 @@ const CheckoutContextRoot = createContext<{
   updateCheckout: (checkout: CommerceCheckoutResource) => void;
   errors: ClerkAPIError[];
   startCheckout: () => void;
-  plan: CommercePlanResource | undefined;
   status: CheckoutStatus;
 } | null>(null);
 
@@ -88,16 +87,10 @@ const useCheckoutCreator = () => {
 };
 
 const Root = ({ children }: { children: React.ReactNode }) => {
-  const { planId } = useCheckoutContext();
-  const { data: plans, isLoading: plansLoading } = usePlans();
   const { checkout, isMutating, updateCheckout, errors, startCheckout } = useCheckoutCreator();
 
-  const plan = plans?.find(p => p.id === planId);
-
-  const isLoading = isMutating || plansLoading;
-
   const status = useMemo(() => {
-    if (isLoading) return 'pending';
+    if (isMutating) return 'pending';
     const completedCode = 'completed';
     if (checkout?.status === completedCode) return completedCode;
     if (checkout) return 'ready';
@@ -106,19 +99,18 @@ const Root = ({ children }: { children: React.ReactNode }) => {
     const isMissingPayerEmail = !!errors?.some((e: ClerkAPIError) => e.code === missingCode);
     if (isMissingPayerEmail) return missingCode;
     const invalidChangeCode = 'invalid_plan_change';
-    if (errors?.[0]?.code === invalidChangeCode && plan) return invalidChangeCode;
+    if (errors?.[0]?.code === invalidChangeCode) return invalidChangeCode;
     return 'error';
-  }, [isLoading, errors, checkout, plan?.id, checkout?.status]);
+  }, [isMutating, errors, checkout, checkout?.status]);
 
   return (
     <CheckoutContextRoot.Provider
       value={{
         checkout,
-        isLoading,
+        isLoading: isMutating,
         updateCheckout,
         errors,
         startCheckout,
-        plan,
         status,
       }}
     >

packages/clerk-js/src/ui/components/Checkout/index.tsx

@@ -7,7 +7,7 @@ import { Flow, localizationKeys, Spinner } from '../../customizables';
 import { CheckoutComplete } from './CheckoutComplete';
 import { CheckoutForm } from './CheckoutForm';
 import * as CheckoutPage from './CheckoutPage';
-import { AddEmailForm, GenericError, InvalidPlanError } from './parts';
+import { AddEmailForm, GenericError, InvalidPlanScreen } from './parts';
 
 export const Checkout = (props: __internal_CheckoutProps) => {
   return (
@@ -40,7 +40,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
                 </CheckoutPage.Stage>
 
                 <CheckoutPage.Stage name='invalid_plan_change'>
-                  <InvalidPlanError />
+                  <InvalidPlanScreen />
                 </CheckoutPage.Stage>
 
                 <CheckoutPage.Stage name='missing_payer_email'>

packages/clerk-js/src/ui/components/Checkout/parts.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { Alert } from '@/ui/elements/Alert';
 import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
 import { LineItems } from '@/ui/elements/LineItems';
@@ -34,11 +36,17 @@ export const GenericError = () => {
   );
 };
 
-export const InvalidPlanError = () => {
-  const { plan } = useCheckoutContextRoot();
+export const InvalidPlanScreen = () => {
+  const { errors } = useCheckoutContextRoot();
+
+  const planFromError = useMemo(() => {
+    const error = errors?.find(e => e.code === 'invalid_plan_change');
+    return error?.meta?.plan;
+  }, [errors]);
+
   const { planPeriod } = useCheckoutContext();
 
-  if (!plan) {
+  if (!planFromError) {
     return null;
   }
 
@@ -60,12 +68,12 @@ export const InvalidPlanError = () => {
           <LineItems.Root>
             <LineItems.Group>
               <LineItems.Title
-                title={plan.name}
+                title={planFromError.name}
                 description={planPeriod === 'annual' ? localizationKeys('commerce.billedAnnually') : undefined}
               />
               <LineItems.Description
                 prefix={planPeriod === 'annual' ? 'x12' : undefined}
-                text={`${plan.currencySymbol}${planPeriod === 'month' ? plan.amountFormatted : plan.annualMonthlyAmountFormatted}`}
+                text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}
                 suffix={localizationKeys('commerce.checkout.perMonth')}
               />
             </LineItems.Group>

packages/shared/src/error.ts

@@ -95,6 +95,7 @@ export function parseError(error: ClerkAPIErrorJSON): ClerkAPIError {
       emailAddresses: error?.meta?.email_addresses,
       identifiers: error?.meta?.identifiers,
       zxcvbn: error?.meta?.zxcvbn,
+      plan: error?.meta?.plan,
     },
   };
 }
@@ -110,6 +111,7 @@ export function errorToJSON(error: ClerkAPIError | null): ClerkAPIErrorJSON {
       email_addresses: error?.meta?.emailAddresses,
       identifiers: error?.meta?.identifiers,
       zxcvbn: error?.meta?.zxcvbn,
+      plan: error?.meta?.plan,
     },
   };
 }

packages/testing/src/playwright/unstable/page-objects/pricingTable.ts

@@ -1,27 +1,66 @@
 import type { EnhancedPage } from './app';
 import { common } from './common';
 
+type BillingPeriod = 'monthly' | 'annually';
+
 export const createPricingTablePageObject = (testArgs: { page: EnhancedPage }) => {
   const { page } = testArgs;
+
+  const locators = {
+    toggle: (planSlug: string) => page.locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardPeriodToggle`),
+    indicator: (planSlug: string) => page.locator(`.cl-pricingTableCard__${planSlug} .cl-switchIndicator`),
+    badge: (planSlug: string) => page.locator(`.cl-pricingTableCard__${planSlug} .cl-badge`),
+    footer: (planSlug: string) => page.locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardFooter`),
+  };
+
+  const ensurePricingPeriod = async (planSlug: string, period: BillingPeriod): Promise<void> => {
+    async function waitForAttribute(selector: string, attribute: string, value: string, timeout = 5000) {
+      return page
+        .waitForFunction(
+          ({ sel, attr, val }) => {
+            const element = document.querySelector(sel);
+            return element?.getAttribute(attr) === val;
+          },
+          { sel: selector, attr: attribute, val: value },
+          { timeout },
+        )
+        .then(() => {
+          return true;
+        })
+        .catch(() => {
+          return false;
+        });
+    }
+
+    const isAnnually = await waitForAttribute(
+      `.cl-pricingTableCard__${planSlug} .cl-switchIndicator`,
+      'data-checked',
+      'true',
+      500,
+    );
+
+    if (isAnnually && period === 'monthly') {
+      await locators.toggle(planSlug).click();
+    }
+
+    if (!isAnnually && period === 'annually') {
+      await locators.toggle(planSlug).click();
+    }
+  };
+
   const self = {
     ...common(testArgs),
     waitForMounted: (selector = '.cl-pricingTable-root') => {
       return page.waitForSelector(selector, { state: 'attached' });
     },
-    // clickManageSubscription: async () => {
-    //   await page.getByText('Manage subscription').click();
-    // },
     clickResubscribe: async () => {
       await page.getByText('Re-subscribe').click();
     },
     waitToBeActive: async ({ planSlug }: { planSlug: string }) => {
-      return page
-        .locator(`.cl-pricingTableCard__${planSlug} .cl-badge`)
-        .getByText('Active')
-        .waitFor({ state: 'visible' });
+      return locators.badge(planSlug).getByText('Active').waitFor({ state: 'visible' });
     },
     getPlanCardCTA: ({ planSlug }: { planSlug: string }) => {
-      return page.locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardFooter`).getByRole('button', {
+      return locators.footer(planSlug).getByRole('button', {
         name: /get|switch|subscribe/i,
       });
     },
@@ -32,25 +71,17 @@ export const createPricingTablePageObject = (testArgs: { page: EnhancedPage }) =
     }: {
       planSlug: string;
       shouldSwitch?: boolean;
-      period?: 'monthly' | 'annually';
+      period?: BillingPeriod;
     }) => {
       const targetButtonName =
         shouldSwitch === true ? 'Switch to this plan' : shouldSwitch === false ? /subscribe/i : /get|switch|subscribe/i;
 
       if (period) {
-        await page.locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardPeriodToggle`).click();
-
-        const billedAnnuallyChecked = await page
-          .locator(`.cl-pricingTableCard__${planSlug} .cl-switchIndicator`)
-          .getAttribute('data-checked');
-
-        if (billedAnnuallyChecked === 'true' && period === 'monthly') {
-          await page.locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardPeriodToggle`).click();
-        }
+        await ensurePricingPeriod(planSlug, period);
       }
 
-      await page
-        .locator(`.cl-pricingTableCard__${planSlug} .cl-pricingTableCardFooter`)
+      await locators
+        .footer(planSlug)
         .getByRole('button', {
           name: targetButtonName,
         })