chore(clerk-js): Use nested AppearanceProvider for Checkout component (#5443)

Author: alexcarpenter

.changeset/rare-rules-fly.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Wrap nested `<Checkout />` component in its own AppearanceProvider to recieve its own appearance object.

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

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import { PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
 import { __experimental_CheckoutContext, usePricingTableContext } from '../../contexts';
+import { AppearanceProvider } from '../../customizables';
 import { useFetch } from '../../hooks';
 import { __experimental_Checkout } from '../Checkout';
 import { PlanDetailDrawer } from './PlanDetailDrawer';
@@ -54,33 +55,38 @@ export const __experimental_PricingTable = (props: __experimental_PricingTablePr
         />
       )}
 
-      <__experimental_CheckoutContext.Provider
-        value={{
-          componentName: 'Checkout',
-          mode,
-          isOpen: showCheckout,
-          setIsOpen: setShowCheckout,
-        }}
+      <AppearanceProvider
+        appearanceKey='checkout'
+        appearance={props.checkoutProps?.appearance}
       >
-        {/*TODO: Used by InvisibleRootBox, can we simplify? */}
-        <div>
-          <__experimental_Checkout
-            planPeriod={planPeriod}
-            planId={selectedPlan?.id}
-          />
-        </div>
-      </__experimental_CheckoutContext.Provider>
-      <PlanDetailDrawer
-        isOpen={showPlanDetail}
-        setIsOpen={setShowPlanDetail}
-        plan={selectedPlan}
-        planPeriod={planPeriod}
-        setPlanPeriod={setPlanPeriod}
-        strategy={mode === 'mounted' ? 'fixed' : 'absolute'}
-        portalProps={{
-          id: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined,
-        }}
-      />
+        <__experimental_CheckoutContext.Provider
+          value={{
+            componentName: 'Checkout',
+            mode,
+            isOpen: showCheckout,
+            setIsOpen: setShowCheckout,
+          }}
+        >
+          {/*TODO: Used by InvisibleRootBox, can we simplify? */}
+          <div>
+            <__experimental_Checkout
+              planPeriod={planPeriod}
+              planId={selectedPlan?.id}
+            />
+          </div>
+        </__experimental_CheckoutContext.Provider>
+        <PlanDetailDrawer
+          isOpen={showPlanDetail}
+          setIsOpen={setShowPlanDetail}
+          plan={selectedPlan}
+          planPeriod={planPeriod}
+          setPlanPeriod={setPlanPeriod}
+          strategy={mode === 'mounted' ? 'fixed' : 'absolute'}
+          portalProps={{
+            id: mode === 'modal' ? PROFILE_CARD_SCROLLBOX_ID : undefined,
+          }}
+        />
+      </AppearanceProvider>
     </>
   );
 };

packages/types/src/clerk.ts

@@ -1490,6 +1490,7 @@ type __experimental_PricingTableMatrixProps = {
 
 type __experimental_PricingTableBaseProps = {
   appearance?: PricingTableTheme;
+  checkoutProps?: Pick<__experimental_CheckoutProps, 'appearance'>;
 };
 
 export type __experimental_PricingTableProps = __experimental_PricingTableBaseProps &