feat(clerk-js,types,clerk-react): Add internal open/close checkout methods (#5481)

Author: alexcarpenter

.changeset/fancy-lies-sell.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce `clerk.__internal_openCheckout()` and `clerk.__internal_closeCheckout()` methods and remove `<Checkout />` from within the `<PricingTable />` component.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "96KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "30KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "35KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,7 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+  __experimental_CheckoutProps,
   __experimental_CommerceNamespace,
   __experimental_PricingTableProps,
   __internal_ComponentNavigationContext,
@@ -520,6 +521,18 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('signIn'));
   };
 
+  public __internal_openCheckout = (props?: __experimental_CheckoutProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'Checkout' })
+      .then(controls => controls.openDrawer('checkout', props || {}));
+  };
+
+  public __internal_closeCheckout = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('checkout'));
+  };
+
   public __internal_openReverification = (props?: __internal_UserVerificationModalProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (noUserExists(this)) {

packages/clerk-js/src/ui/Components.tsx

@@ -1,6 +1,7 @@
 import { useSafeLayoutEffect } from '@clerk/shared/react';
 import { createDeferredPromise } from '@clerk/shared/utils';
 import type {
+  __experimental_CheckoutProps,
   __internal_UserVerificationProps,
   Appearance,
   Clerk,
@@ -24,6 +25,7 @@ import { useClerkModalStateParams } from './hooks/useClerkModalStateParams';
 import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
+  Checkout,
   CreateOrganizationModal,
   ImpersonationFab,
   KeylessPrompt,
@@ -37,6 +39,7 @@ import {
 } from './lazyModules/components';
 import {
   LazyComponentRenderer,
+  LazyDrawerRenderer,
   LazyImpersonationFabProvider,
   LazyModalRenderer,
   LazyOneTapRenderer,
@@ -99,6 +102,16 @@ export type ComponentControls = {
       notify?: boolean;
     },
   ) => void;
+  openDrawer: <T extends 'checkout'>(
+    drawer: T,
+    props: T extends 'checkout' ? __experimental_CheckoutProps : never,
+  ) => void;
+  closeDrawer: (
+    drawer: 'checkout',
+    options?: {
+      notify?: boolean;
+    },
+  ) => void;
   prefetch: (component: 'organizationSwitcher') => void;
   // Special case, as the impersonation fab mounts automatically
   mountImpersonationFab: () => void;
@@ -131,6 +144,10 @@ interface ComponentsState {
   blankCaptchaModal: null;
   organizationSwitcherPrefetch: boolean;
   waitlistModal: null | WaitlistProps;
+  checkoutDrawer: {
+    open: false;
+    props: null | __experimental_CheckoutProps;
+  };
   nodes: Map<HTMLDivElement, HtmlNodeOptions>;
   impersonationFab: boolean;
 }
@@ -212,6 +229,10 @@ const Components = (props: ComponentsProps) => {
     organizationSwitcherPrefetch: false,
     waitlistModal: null,
     blankCaptchaModal: null,
+    checkoutDrawer: {
+      open: false,
+      props: null,
+    },
     nodes: new Map(),
     impersonationFab: false,
   });
@@ -226,6 +247,7 @@ const Components = (props: ComponentsProps) => {
     createOrganizationModal,
     waitlistModal,
     blankCaptchaModal,
+    checkoutDrawer,
     nodes,
   } = state;
 
@@ -322,6 +344,26 @@ const Components = (props: ComponentsProps) => {
       setState(s => ({ ...s, impersonationFab: true }));
     };
 
+    componentsControls.openDrawer = (name, props) => {
+      setState(s => ({
+        ...s,
+        [`${name}Drawer`]: {
+          open: true,
+          props,
+        },
+      }));
+    };
+
+    componentsControls.closeDrawer = name => {
+      setState(s => ({
+        ...s,
+        [`${name}Drawer`]: {
+          ...s[`${name}Drawer`],
+          open: false,
+        },
+      }));
+    };
+
     componentsControls.prefetch = component => {
       setState(s => ({ ...s, [`${component}Prefetch`]: true }));
     };
@@ -481,6 +523,26 @@ const Components = (props: ComponentsProps) => {
     </LazyModalRenderer>
   );
 
+  const mountedCheckoutDrawer = checkoutDrawer.props && (
+    <LazyDrawerRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'checkout' as any}
+      componentAppearance={{}}
+      flowName={'checkout'}
+      open={checkoutDrawer.open}
+      onOpenChange={() => componentsControls.closeDrawer('checkout')}
+      componentName={'Checkout'}
+      portalId={checkoutDrawer.props.portalId}
+    >
+      <Checkout
+        planId={checkoutDrawer.props.planId}
+        planPeriod={checkoutDrawer.props.planPeriod}
+        orgId={checkoutDrawer.props.orgId}
+        onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
+      />
+    </LazyDrawerRenderer>
+  );
+
   return (
     <Suspense fallback={''}>
       <LazyProviders
@@ -511,6 +573,7 @@ const Components = (props: ComponentsProps) => {
         {createOrganizationModal && mountedCreateOrganizationModal}
         {waitlistModal && mountedWaitlistModal}
         {blankCaptchaModal && mountedBlankCaptchaModal}
+        {mountedCheckoutDrawer}
 
         {state.impersonationFab && (
           <LazyImpersonationFabProvider globalAppearance={state.appearance}>

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

@@ -1,43 +1,25 @@
 import type { __experimental_CheckoutProps } from '@clerk/types';
 
-import { PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
-import { useCheckoutContext, withCoreUserGuard } from '../../contexts';
+import { __experimental_CheckoutContext } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Drawer } from '../../elements';
-import { Route, Switch } from '../../router';
 import { CheckoutPage } from './CheckoutPage';
 
 export const __experimental_Checkout = (props: __experimental_CheckoutProps) => {
   return (
     <Flow.Root flow='checkout'>
       <Flow.Part>
-        <Switch>
-          <Route>
-            <AuthenticatedRoutes {...props} />
-          </Route>
-        </Switch>
+        <__experimental_CheckoutContext.Provider
+          value={{
+            componentName: 'Checkout',
+          }}
+        >
+          <Drawer.Content>
+            <Drawer.Header title='Checkout' />
+            <CheckoutPage {...props} />
+          </Drawer.Content>
+        </__experimental_CheckoutContext.Provider>
       </Flow.Part>
     </Flow.Root>
   );
 };
-
-const AuthenticatedRoutes = withCoreUserGuard((props: __experimental_CheckoutProps) => {
-  const { mode = 'mounted', isOpen = false, setIsOpen = () => {} } = useCheckoutContext();
-
-  return (
-    <Drawer.Root
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      strategy={mode === 'mounted' ? 'fixed' : 'absolute'}
-      portalProps={{
-        id: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined,
-      }}
-    >
-      <Drawer.Overlay />
-      <Drawer.Content>
-        <Drawer.Header title='Checkout' />
-        <CheckoutPage {...props} />
-      </Drawer.Content>
-    </Drawer.Root>
-  );
-});

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

@@ -1,14 +1,13 @@
 import type { __experimental_CommerceCheckoutResource } from '@clerk/types';
 
-import { useCheckoutContext } from '../../contexts';
 import { Box, Button, descriptors, Heading, Icon, localizationKeys, Span, Text } from '../../customizables';
-import { Drawer, LineItems } from '../../elements';
+import { Drawer, LineItems, useDrawerContext } from '../../elements';
 import { Check } from '../../icons';
 
 const capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);
 
 export const CheckoutComplete = ({ checkout }: { checkout: __experimental_CommerceCheckoutResource }) => {
-  const { setIsOpen } = useCheckoutContext();
+  const { setIsOpen } = useDrawerContext();
 
   const handleClose = () => {
     if (setIsOpen) {

packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx

@@ -8,10 +8,9 @@ import type {
 import { useState } from 'react';
 
 import { PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
-import { __experimental_CheckoutContext, usePricingTableContext } from '../../contexts';
+import { usePricingTableContext } from '../../contexts';
 import { AppearanceProvider } from '../../customizables';
 import { usePlans } from '../../hooks';
-import { __experimental_Checkout } from '../Checkout';
 import { PricingTableDefault } from './PricingTableDefault';
 import { PricingTableMatrix } from './PricingTableMatrix';
 import { SubscriptionDetailDrawer } from './SubscriptionDetailDrawer';
@@ -25,10 +24,8 @@ export const __experimental_PricingTable = (props: __experimental_PricingTablePr
   const { plans, subscriptions, revalidate } = usePlans({ subscriberType });
 
   const [planPeriod, setPlanPeriod] = useState<__experimental_CommerceSubscriptionPlanPeriod>('month');
-  const [checkoutPlan, setCheckoutPlan] = useState<__experimental_CommercePlanResource>();
   const [detailSubscription, setDetailSubscription] = useState<__experimental_CommerceSubscriptionResource>();
 
-  const [showCheckout, setShowCheckout] = useState(false);
   const [showSubscriptionDetailDrawer, setShowSubscriptionDetailDrawer] = useState(false);
 
   const selectPlan = (plan: __experimental_CommercePlanResource) => {
@@ -40,8 +37,13 @@ export const __experimental_PricingTable = (props: __experimental_PricingTablePr
       setDetailSubscription(activeSubscription);
       setShowSubscriptionDetailDrawer(true);
     } else {
-      setCheckoutPlan(plan);
-      setShowCheckout(true);
+      clerk.__internal_openCheckout({
+        planId: plan.id,
+        planPeriod,
+        orgId: subscriberType === 'org' ? organization?.id : undefined,
+        onSubscriptionComplete: onSubscriptionChange,
+        portalId: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined,
+      });
     }
   };
 
@@ -74,26 +76,6 @@ export const __experimental_PricingTable = (props: __experimental_PricingTablePr
         appearanceKey='checkout'
         appearance={props.checkoutProps?.appearance}
       >
-        <__experimental_CheckoutContext.Provider
-          value={{
-            componentName: 'Checkout',
-            mode,
-            isOpen: showCheckout,
-            setIsOpen: setShowCheckout,
-          }}
-        >
-          {/*TODO: Used by InvisibleRootBox, can we simplify? */}
-          <div>
-            {checkoutPlan && (
-              <__experimental_Checkout
-                planPeriod={planPeriod}
-                planId={checkoutPlan.id}
-                orgId={subscriberType === 'org' ? organization?.id : undefined}
-                onSubscriptionComplete={onSubscriptionChange}
-              />
-            )}
-          </div>
-        </__experimental_CheckoutContext.Provider>
         <SubscriptionDetailDrawer
           isOpen={showSubscriptionDetailDrawer}
           setIsOpen={setShowSubscriptionDetailDrawer}