fix(clerk-js): Hide billing tab when appropriate

Author: panteliselef

.changeset/mighty-lions-cut.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Hide billing tab when no paid plans exist, the user does not have a current or past subscription.

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

@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
 );
 
 export const OrganizationProfileRoutes = () => {
-  const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
+  const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
     useOrganizationProfileContext();
   const { apiKeysSettings, commerceSettings } = useEnvironment();
 
@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {commerceSettings.billing.organization.enabled ? (
+        {commerceSettings.billing.organization.enabled && shouldShowBilling ? (
           <Protect
             condition={has =>
               has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })

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

@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
 );
 
 export const UserProfileRoutes = () => {
-  const { pages } = useUserProfileContext();
+  const { pages, shouldShowBilling } = useUserProfileContext();
   const { apiKeysSettings, commerceSettings } = useEnvironment();
 
   const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {commerceSettings.billing.user.enabled ? (
+        {commerceSettings.billing.user.enabled && shouldShowBilling ? (
           <Route path={isBillingPageRoot ? undefined : 'billing'}>
             <Switch>
               <Route index>

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

@@ -6,9 +6,10 @@ import type { CustomPageContent } from '@/ui/utils/createCustomPages';
 import { createOrganizationProfileCustomPages } from '@/ui/utils/createCustomPages';
 
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
-import { useEnvironment } from '../../contexts';
 import { useRouter } from '../../router';
 import type { OrganizationProfileCtx } from '../../types';
+import { useEnvironment } from '../EnvironmentContext';
+import { useStatements, useSubscription } from './Plans';
 
 type PagesType = {
   routes: NavbarRoute[];
@@ -24,6 +25,7 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & {
   isGeneralPageRoot: boolean;
   isBillingPageRoot: boolean;
   isApiKeysPageRoot: boolean;
+  shouldShowBilling: boolean;
 };
 
 export const OrganizationProfileContext = createContext<OrganizationProfileCtx | null>(null);
@@ -40,9 +42,23 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
 
   const { componentName, customPages, ...ctx } = context;
 
+  const subscription = useSubscription();
+  const statements = useStatements();
+
+  const hasNonFreeSubscription = subscription.data?.subscriptionItems.some(item => item.plan.hasBaseFee);
+
+  // TODO(@BILLING): Remove this when C1s can disable user billing seperately from the organization billing.
+  const shouldShowBilling =
+    // The instance has at lease one visible plan the C2 can choose
+    environment.commerceSettings.billing.organization.hasPaidPlans ||
+    // The C2 has a subscription, it can be active or past due, or scheduled for cancellation.
+    hasNonFreeSubscription ||
+    // The C2 had a subscription in the past
+    Boolean(statements.data.length > 0);
+
   const pages = useMemo(
-    () => createOrganizationProfileCustomPages(customPages || [], clerk, environment),
-    [customPages],
+    () => createOrganizationProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment),
+    [customPages, shouldShowBilling],
   );
 
   const navigateAfterLeaveOrganization = () =>
@@ -65,5 +81,6 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     isGeneralPageRoot,
     isBillingPageRoot,
     isApiKeysPageRoot,
+    shouldShowBilling,
   };
 };

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

@@ -9,6 +9,7 @@ import type { ParsedQueryString } from '../../router';
 import { useRouter } from '../../router';
 import type { UserProfileCtx } from '../../types';
 import { useEnvironment } from '../EnvironmentContext';
+import { useStatements, useSubscription } from './Plans';
 
 type PagesType = {
   routes: NavbarRoute[];
@@ -21,6 +22,7 @@ export type UserProfileContextType = UserProfileCtx & {
   authQueryString: string | null;
   pages: PagesType;
   shouldAllowIdentificationCreation: boolean;
+  shouldShowBilling: boolean;
 };
 
 export const UserProfileContext = createContext<UserProfileCtx | null>(null);
@@ -32,15 +34,29 @@ export const useUserProfileContext = (): UserProfileContextType => {
   const environment = useEnvironment();
   const { user } = useUser();
 
+  const subscription = useSubscription();
+  const statements = useStatements();
+
+  const hasNonFreeSubscription = subscription.data?.subscriptionItems.some(item => item.plan.hasBaseFee);
+
+  // TODO(@BILLING): Remove this when C1s can disable user billing seperately from the organization billing.
+  const shouldShowBilling =
+    // The instance has at lease one visible plan the C2 can choose
+    environment.commerceSettings.billing.user.hasPaidPlans ||
+    // The C2 has a subscription, it can be active or past due, or scheduled for cancellation.
+    hasNonFreeSubscription ||
+    // The C2 had a subscription in the past
+    Boolean(statements.data.length > 0);
+
   if (!context || context.componentName !== 'UserProfile') {
     throw new Error('Clerk: useUserProfileContext called outside of the mounted UserProfile component.');
   }
 
   const { componentName, customPages, ...ctx } = context;
 
   const pages = useMemo(() => {
-    return createUserProfileCustomPages(customPages || [], clerk, environment);
-  }, [customPages]);
+    return createUserProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment);
+  }, [customPages, shouldShowBilling]);
 
   const shouldAllowIdentificationCreation = useMemo(() => {
     const { enterpriseSSO } = environment.userSettings;
@@ -62,5 +78,6 @@ export const useUserProfileContext = (): UserProfileContextType => {
     queryParams,
     authQueryString: '',
     shouldAllowIdentificationCreation,
+    shouldShowBilling,
   };
 };

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

@@ -57,6 +57,7 @@ type CreateCustomPagesParams = {
 export const createUserProfileCustomPages = (
   customPages: CustomPage[],
   clerk: LoadedClerk,
+  shouldShowBilling: boolean,
   environment?: EnvironmentResource,
 ) => {
   return createCustomPages(
@@ -67,13 +68,15 @@ export const createUserProfileCustomPages = (
       excludedPathsFromDuplicateWarning: [],
     },
     clerk,
+    shouldShowBilling,
     environment,
   );
 };
 
 export const createOrganizationProfileCustomPages = (
   customPages: CustomPage[],
   clerk: LoadedClerk,
+  shouldShowBilling: boolean,
   environment?: EnvironmentResource,
 ) => {
   return createCustomPages(
@@ -84,6 +87,7 @@ export const createOrganizationProfileCustomPages = (
       excludedPathsFromDuplicateWarning: [],
     },
     clerk,
+    shouldShowBilling,
     environment,
     true,
   );
@@ -92,13 +96,14 @@ export const createOrganizationProfileCustomPages = (
 const createCustomPages = (
   { customPages, getDefaultRoutes, setFirstPathToRoot, excludedPathsFromDuplicateWarning }: CreateCustomPagesParams,
   clerk: LoadedClerk,
+  shouldShowBilling: boolean,
   environment?: EnvironmentResource,
   organization?: boolean,
 ) => {
   const { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels } = getDefaultRoutes({
     commerce: organization
-      ? !disabledOrganizationBillingFeature(clerk, environment)
-      : !disabledUserBillingFeature(clerk, environment),
+      ? !disabledOrganizationBillingFeature(clerk, environment) && shouldShowBilling
+      : !disabledUserBillingFeature(clerk, environment) && shouldShowBilling,
     apiKeys: !disabledAPIKeysFeature(clerk, environment) && (organization ? canViewOrManageAPIKeys(clerk) : true),
   });