feat(clerk-js,types): Update logic for showing Billing nav within profiles (#6315)

Author: aeliox

.changeset/public-bags-stay.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Adjust the cases in which the Billing item shows within the `UserProfile` and `OrgProfile` components

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

@@ -94,8 +94,8 @@ import {
   createAllowedRedirectOrigins,
   createBeforeUnloadTracker,
   createPageLifecycle,
+  disabledAllBillingFeatures,
   disabledAPIKeysFeature,
-  disabledBillingFeature,
   disabledOrganizationsFeature,
   errorThrower,
   generateSignatureWithCoinbaseWallet,
@@ -576,7 +576,7 @@ export class Clerk implements ClerkInterface {
 
   public __internal_openCheckout = (props?: __internal_CheckoutProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledBillingFeature(this, this.environment)) {
+    if (disabledAllBillingFeatures(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('Checkout'), {
           code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE,
@@ -605,7 +605,7 @@ export class Clerk implements ClerkInterface {
 
   public __internal_openPlanDetails = (props: __internal_PlanDetailsProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledBillingFeature(this, this.environment)) {
+    if (disabledAllBillingFeatures(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PlanDetails'), {
           code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE,
@@ -1060,7 +1060,7 @@ export class Clerk implements ClerkInterface {
 
   public mountPricingTable = (node: HTMLDivElement, props?: PricingTableProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledBillingFeature(this, this.environment)) {
+    if (disabledAllBillingFeatures(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PricingTable'), {
           code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE,

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

@@ -11,6 +11,14 @@ export class CommerceSettings extends BaseResource implements CommerceSettingsRe
     enabled: false,
     hasPaidUserPlans: false,
     hasPaidOrgPlans: false,
+    organization: {
+      enabled: false,
+      hasPaidPlans: false,
+    },
+    user: {
+      enabled: false,
+      hasPaidPlans: false,
+    },
   };
 
   public constructor(data: CommerceSettingsJSON | CommerceSettingsJSONSnapshot | null = null) {
@@ -27,6 +35,10 @@ export class CommerceSettings extends BaseResource implements CommerceSettingsRe
     this.billing.enabled = data.billing.enabled || false;
     this.billing.hasPaidUserPlans = data.billing.has_paid_user_plans || false;
     this.billing.hasPaidOrgPlans = data.billing.has_paid_org_plans || false;
+    this.billing.organization.enabled = data.billing.organization.enabled || false;
+    this.billing.organization.hasPaidPlans = data.billing.organization.has_paid_plans || false;
+    this.billing.user.enabled = data.billing.user.enabled || false;
+    this.billing.user.hasPaidPlans = data.billing.user.has_paid_plans || false;
 
     return this;
   }
@@ -38,6 +50,14 @@ export class CommerceSettings extends BaseResource implements CommerceSettingsRe
         enabled: this.billing.enabled,
         has_paid_user_plans: this.billing.hasPaidUserPlans,
         has_paid_org_plans: this.billing.hasPaidOrgPlans,
+        organization: {
+          enabled: this.billing.organization.enabled,
+          has_paid_plans: this.billing.organization.hasPaidPlans,
+        },
+        user: {
+          enabled: this.billing.user.enabled,
+          has_paid_plans: this.billing.user.hasPaidPlans,
+        },
       },
     } as unknown as CommerceSettingsJSONSnapshot;
   }

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {commerceSettings.billing.enabled && commerceSettings.billing.hasPaidOrgPlans && (
+        {commerceSettings.billing.organization.enabled ? (
           <Protect
             condition={has =>
               has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
@@ -96,11 +96,13 @@ export const OrganizationProfileRoutes = () => {
                     <OrganizationBillingPage />
                   </Suspense>
                 </Route>
-                <Route path='plans'>
-                  <Suspense fallback={''}>
-                    <OrganizationPlansPage />
-                  </Suspense>
-                </Route>
+                {commerceSettings.billing.organization.hasPaidPlans ? (
+                  <Route path='plans'>
+                    <Suspense fallback={''}>
+                      <OrganizationPlansPage />
+                    </Suspense>
+                  </Route>
+                ) : null}
                 <Route path='statement/:statementId'>
                   <Suspense fallback={''}>
                     <OrganizationStatementPage />
@@ -114,7 +116,7 @@ export const OrganizationProfileRoutes = () => {
               </Switch>
             </Route>
           </Protect>
-        )}
+        ) : null}
         {apiKeysSettings.enabled && (
           <Protect
             condition={has =>

packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

@@ -2,6 +2,7 @@ import { ProfileSection } from '@/ui/elements/Section';
 
 import { useProtect } from '../../common';
 import {
+  useEnvironment,
   usePlansContext,
   useSubscriberTypeContext,
   useSubscriberTypeLocalizationRoot,
@@ -44,6 +45,7 @@ export function SubscriptionsList({
     has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
   );
   const { navigate } = useRouter();
+  const { commerceSettings } = useEnvironment();
 
   const sortedSubscriptions = subscriptions.sort((a, b) => {
     // alway put active subscriptions first
@@ -188,22 +190,25 @@ export function SubscriptionsList({
         </Table>
       )}
 
-      <ProfileSection.ArrowButton
-        id='subscriptionsList'
-        textLocalizationKey={subscriptions.length > 0 ? arrowButtonText : arrowButtonEmptyText}
-        sx={[
-          t => ({
-            justifyContent: 'start',
-            height: t.sizes.$8,
-          }),
-        ]}
-        leftIcon={subscriptions.length > 0 ? ArrowsUpDown : Plus}
-        leftIconSx={t => ({
-          width: t.sizes.$4,
-          height: t.sizes.$4,
-        })}
-        onClick={() => void navigate('plans')}
-      />
+      {(commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
+      (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'org') ? (
+        <ProfileSection.ArrowButton
+          id='subscriptionsList'
+          textLocalizationKey={subscriptions.length > 0 ? arrowButtonText : arrowButtonEmptyText}
+          sx={[
+            t => ({
+              justifyContent: 'start',
+              height: t.sizes.$8,
+            }),
+          ]}
+          leftIcon={subscriptions.length > 0 ? ArrowsUpDown : Plus}
+          leftIconSx={t => ({
+            width: t.sizes.$4,
+            height: t.sizes.$4,
+          })}
+          onClick={() => void navigate('plans')}
+        />
+      ) : null}
     </ProfileSection.Root>
   );
 }

packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx

@@ -80,19 +80,21 @@ export const UserProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {commerceSettings.billing.enabled && commerceSettings.billing.hasPaidUserPlans && (
+        {commerceSettings.billing.user.enabled ? (
           <Route path={isBillingPageRoot ? undefined : 'billing'}>
             <Switch>
               <Route index>
                 <Suspense fallback={''}>
                   <BillingPage />
                 </Suspense>
               </Route>
-              <Route path='plans'>
-                <Suspense fallback={''}>
-                  <PlansPage />
-                </Suspense>
-              </Route>
+              {commerceSettings.billing.user.hasPaidPlans ? (
+                <Route path='plans'>
+                  <Suspense fallback={''}>
+                    <PlansPage />
+                  </Suspense>
+                </Route>
+              ) : null}
               <Route path='statement/:statementId'>
                 <Suspense fallback={''}>
                   <StatementPage />
@@ -105,7 +107,7 @@ export const UserProfileRoutes = () => {
               </Route>
             </Switch>
           </Route>
-        )}
+        ) : null}
         {apiKeysSettings.enabled && (
           <Route path={isAPIKeysPageRoot ? undefined : 'api-keys'}>
             <Switch>

packages/clerk-js/src/ui/utils/createCustomPages.tsx

@@ -3,9 +3,8 @@ import type { CustomPage, EnvironmentResource, LoadedClerk } from '@clerk/types'
 import {
   canViewOrManageAPIKeys,
   disabledAPIKeysFeature,
-  disabledBillingFeature,
-  hasPaidOrgPlans,
-  hasPaidUserPlans,
+  disabledOrganizationBillingFeature,
+  disabledUserBillingFeature,
   isValidUrl,
 } from '../../utils';
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID, USER_PROFILE_NAVBAR_ROUTE_ID } from '../constants';
@@ -97,9 +96,9 @@ const createCustomPages = (
   organization?: boolean,
 ) => {
   const { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels } = getDefaultRoutes({
-    commerce:
-      !disabledBillingFeature(clerk, environment) &&
-      (organization ? hasPaidOrgPlans(clerk, environment) : hasPaidUserPlans(clerk, environment)),
+    commerce: organization
+      ? !disabledOrganizationBillingFeature(clerk, environment)
+      : !disabledUserBillingFeature(clerk, environment),
     apiKeys: !disabledAPIKeysFeature(clerk, environment) && (organization ? canViewOrManageAPIKeys(clerk) : true),
   });
 

packages/clerk-js/src/utils/componentGuards.ts

@@ -22,16 +22,24 @@ export const disabledOrganizationsFeature: ComponentGuard = (_, environment) =>
   return !environment?.organizationSettings.enabled;
 };
 
-export const disabledBillingFeature: ComponentGuard = (_, environment) => {
-  return !environment?.commerceSettings.billing.enabled;
+export const disabledUserBillingFeature: ComponentGuard = (_, environment) => {
+  return !environment?.commerceSettings.billing.user.enabled;
+};
+
+export const disabledOrganizationBillingFeature: ComponentGuard = (_, environment) => {
+  return !environment?.commerceSettings.billing.organization.enabled;
+};
+
+export const disabledAllBillingFeatures: ComponentGuard = (_, environment) => {
+  return disabledUserBillingFeature(_, environment) && disabledOrganizationBillingFeature(_, environment);
 };
 
 export const hasPaidOrgPlans: ComponentGuard = (_, environment) => {
-  return environment?.commerceSettings.billing.hasPaidOrgPlans || false;
+  return environment?.commerceSettings.billing.organization.hasPaidPlans || false;
 };
 
 export const hasPaidUserPlans: ComponentGuard = (_, environment) => {
-  return environment?.commerceSettings.billing.hasPaidUserPlans || false;
+  return environment?.commerceSettings.billing.user.hasPaidPlans || false;
 };
 
 export const disabledAPIKeysFeature: ComponentGuard = (_, environment) => {

packages/types/src/commerceSettings.ts

@@ -9,6 +9,14 @@ export interface CommerceSettingsJSON extends ClerkResourceJSON {
     stripe_publishable_key: string;
     has_paid_user_plans: boolean;
     has_paid_org_plans: boolean;
+    organization: {
+      enabled: boolean;
+      has_paid_plans: boolean;
+    };
+    user: {
+      enabled: boolean;
+      has_paid_plans: boolean;
+    };
   };
 }
 
@@ -18,6 +26,14 @@ export interface CommerceSettingsResource extends ClerkResource {
     stripePublishableKey: string;
     hasPaidUserPlans: boolean;
     hasPaidOrgPlans: boolean;
+    organization: {
+      enabled: boolean;
+      hasPaidPlans: boolean;
+    };
+    user: {
+      enabled: boolean;
+      hasPaidPlans: boolean;
+    };
   };
 
   __internal_toSnapshot: () => CommerceSettingsJSONSnapshot;