finishing touches on subscription details

Author: panteliselef

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

@@ -3,7 +3,6 @@ import type {
   __experimental_PlanDetailsProps,
   __experimental_SubscriptionDetailsProps,
   __internal_CheckoutProps,
-  __internal_PlanDetailsProps,
   __internal_UserVerificationProps,
   Appearance,
   Clerk,
@@ -113,9 +112,9 @@ export type ComponentControls = {
     props: T extends 'checkout'
       ? __internal_CheckoutProps
       : T extends 'planDetails'
-        ? __internal_PlanDetailsProps
+        ? __experimental_PlanDetailsProps
         : T extends 'subscriptionDetails'
-          ? __internal_PlanDetailsProps
+          ? __experimental_SubscriptionDetailsProps
           : never,
   ) => void;
   closeDrawer: (

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

@@ -24,7 +24,7 @@ import { formatDate } from '@/ui/utils/formatDate';
 
 const isFreePlan = (plan: CommercePlanResource) => !plan.hasBaseFee;
 
-import { usePlansContext, useSubscriberTypeContext, useSubscriptions } from '../../contexts';
+import { SubscriberTypeContext, usePlansContext, useSubscriberTypeContext, useSubscriptions } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import {
   Badge,
@@ -59,7 +59,9 @@ export const SubscriptionDetails = (props: __experimental_SubscriptionDetailsPro
   return (
     <Drawer.Content>
       <SubscriptionDetailsContext.Provider value={{ componentName: 'SubscriptionDetails', ...props }}>
-        <SubscriptionDetailsInternal {...props} />
+        <SubscriberTypeContext.Provider value={props.for}>
+          <SubscriptionDetailsInternal {...props} />
+        </SubscriberTypeContext.Provider>
       </SubscriptionDetailsContext.Provider>
     </Drawer.Content>
   );

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

@@ -362,6 +362,7 @@ export const usePlansContext = () => {
 
       if (subscription && subscription.planPeriod === planPeriod && !subscription.canceledAtDate) {
         clerk.__experimental_openSubscriptionDetails({
+          for: subscriberType,
           onSubscriptionCancel: () => {
             revalidateAll();
             onSubscriptionChange?.();

packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 
 const DEFAUlT = 'user';
-export const SubscriberTypeContext = createContext<'user' | 'org'>(DEFAUlT);
+export const SubscriberTypeContext = createContext<'user' | 'org' | undefined>(DEFAUlT);
 
 export const useSubscriberTypeContext = () => useContext(SubscriberTypeContext) || DEFAUlT;
 

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

@@ -27,7 +27,7 @@ export function MountedCheckoutDrawer({
       // Without this, the drawer would not be rendered after a session switch.
       key={user?.id}
       globalAppearance={appearance}
-      appearanceKey={'checkout' as any}
+      appearanceKey={'checkout'}
       componentAppearance={checkoutDrawer.props.appearance || {}}
       flowName={'checkout'}
       open={checkoutDrawer.open}

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

@@ -27,7 +27,7 @@ export function MountedSubscriptionDetailDrawer({
       // Without this, the drawer would not be rendered after a session switch.
       key={user?.id}
       globalAppearance={appearance}
-      appearanceKey={'planDetails' as any}
+      appearanceKey={'subscriptionDetails' as any}
       componentAppearance={subscriptionDetailsDrawer.props.appearance || {}}
       flowName={'subscriptionDetails'}
       open={subscriptionDetailsDrawer.open}

packages/types/src/appearance.ts

@@ -884,6 +884,7 @@ export type WaitlistTheme = Theme;
 export type PricingTableTheme = Theme;
 export type CheckoutTheme = Theme;
 export type PlanDetailTheme = Theme;
+export type SubscriptionDetailsTheme = Theme;
 export type APIKeysTheme = Theme;
 export type OAuthConsentTheme = Theme;
 

packages/types/src/clerk.ts

@@ -12,6 +12,7 @@ import type {
   PricingTableTheme,
   SignInTheme,
   SignUpTheme,
+  SubscriptionDetailsTheme,
   UserButtonTheme,
   UserProfileTheme,
   UserVerificationTheme,
@@ -1777,7 +1778,8 @@ export type __experimental_PlanDetailsProps = {
 };
 
 export type __experimental_SubscriptionDetailsProps = {
-  appearance?: PlanDetailTheme;
+  for?: CommerceSubscriberType;
+  appearance?: SubscriptionDetailsTheme;
   onSubscriptionCancel?: () => void;
   portalId?: string;
   portalRoot?: PortalRoot;