fix(clerk-js,types): Correctly pass Checkout appearance prop through PricingTable (#5888)

Co-authored-by: panteliselef <panteliselef@outlook.com>

Author: alexcarpenter

.changeset/famous-fans-create.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Fix issue where we were not correctly passing the checkoutProps through within the PricingTable component. Removes internal checkoutProps prefix from PricingTableBaseProps.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "68.3KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "104KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "104.1KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39.5KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

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

@@ -50,7 +50,13 @@ const PricingTableRoot = (props: PricingTableProps) => {
       return clerk.redirectToSignIn();
     }
 
-    handleSelectPlan({ mode, plan, planPeriod, event });
+    handleSelectPlan({
+      mode,
+      plan,
+      planPeriod,
+      event,
+      appearance: props.checkoutProps?.appearance,
+    });
     return;
   };
 

packages/clerk-js/src/ui/contexts/components/Plans.tsx

@@ -1,5 +1,6 @@
 import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type {
+  Appearance,
   CommercePlanResource,
   CommerceSubscriberType,
   CommerceSubscriptionPlanPeriod,
@@ -135,6 +136,7 @@ type HandleSelectPlanProps = {
   onSubscriptionChange?: () => void;
   mode?: 'modal' | 'mounted';
   event?: React.MouseEvent<HTMLElement>;
+  appearance?: Appearance;
 };
 
 export const usePlansContext = () => {
@@ -254,7 +256,7 @@ export const usePlansContext = () => {
 
   // handle the selection of a plan, either by opening the subscription details or checkout
   const handleSelectPlan = useCallback(
-    ({ plan, planPeriod, onSubscriptionChange, mode = 'mounted', event }: HandleSelectPlanProps) => {
+    ({ plan, planPeriod, onSubscriptionChange, mode = 'mounted', event, appearance }: HandleSelectPlanProps) => {
       const subscription = activeOrUpcomingSubscription(plan);
 
       const portalRoot = getClosestProfileScrollBox(mode, event);
@@ -267,6 +269,7 @@ export const usePlansContext = () => {
             ctx.revalidate();
             onSubscriptionChange?.();
           },
+          appearance,
           portalRoot,
         });
       } else {
@@ -284,6 +287,7 @@ export const usePlansContext = () => {
             ctx.revalidate();
             onSubscriptionChange?.();
           },
+          appearance,
           portalRoot,
         });
       }

packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

@@ -28,7 +28,7 @@ export function MountedCheckoutDrawer({
       key={user?.id}
       globalAppearance={appearance}
       appearanceKey={'checkout' as any}
-      componentAppearance={{}}
+      componentAppearance={checkoutDrawer.props.appearance || {}}
       flowName={'checkout'}
       open={checkoutDrawer.open}
       onOpenChange={onOpenChange}
@@ -43,6 +43,7 @@ export function MountedCheckoutDrawer({
           subscriberType={checkoutDrawer.props.subscriberType}
           onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
           portalRoot={checkoutDrawer.props.portalRoot}
+          appearance={checkoutDrawer.props.appearance}
         />
       )}
     </LazyDrawerRenderer>

packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx

@@ -28,7 +28,7 @@ export function MountedPlanDetailDrawer({
       key={user?.id}
       globalAppearance={appearance}
       appearanceKey={'planDetails' as any}
-      componentAppearance={{}}
+      componentAppearance={planDetailsDrawer.props.appearance || {}}
       flowName={'planDetails'}
       open={planDetailsDrawer.open}
       onOpenChange={onOpenChange}
@@ -40,6 +40,7 @@ export function MountedPlanDetailDrawer({
         {...planDetailsDrawer.props}
         subscriberType={planDetailsDrawer.props.subscriberType || 'user'}
         onSubscriptionCancel={planDetailsDrawer.props.onSubscriptionCancel || (() => {})}
+        appearance={planDetailsDrawer.props.appearance}
       />
     </LazyDrawerRenderer>
   );

packages/types/src/clerk.ts

@@ -1568,15 +1568,40 @@ export type WaitlistProps = {
 export type WaitlistModalProps = WaitlistProps;
 
 type PricingTableDefaultProps = {
+  /**
+   * The position of the CTA button.
+   * @default 'bottom'
+   */
   ctaPosition?: 'top' | 'bottom';
+  /**
+   * Whether to collapse features on the pricing table.
+   * @default false
+   */
   collapseFeatures?: boolean;
+  /**
+   * Full URL or path to navigate to after checkout is complete and the user clicks the "Continue" button.
+   * @default undefined
+   */
   newSubscriptionRedirectUrl?: string;
 };
 
 type PricingTableBaseProps = {
+  /**
+   * Whether to show pricing table for organizations.
+   * @default false
+   */
   forOrganizations?: boolean;
+  /**
+   * Customisation options to fully match the Clerk components to your own brand.
+   * These options serve as overrides and will be merged with the global `appearance`
+   * prop of ClerkProvider (if one is provided)
+   */
   appearance?: PricingTableTheme;
-  __internal_CheckoutProps?: Pick<__internal_CheckoutProps, 'appearance'>;
+  /*
+   * Specify options for the underlying <Checkout /> component.
+   * e.g. <PricingTable checkoutProps={{appearance: {variables: {colorText: 'blue'}}}} />
+   */
+  checkoutProps?: Pick<__internal_CheckoutProps, 'appearance'>;
 };
 
 type PortalRoot = HTMLElement | null | undefined;