From 04754fa82f777784384c23f28fb7e30606214e10 Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Tue, 15 Apr 2025 08:55:19 -0700 Subject: [PATCH 1/2] feat(clerk-js,types): Add billing profile route check for paid user / org plans --- .changeset/shy-shrimps-drive.md | 6 +++++ packages/clerk-js/bundlewatch.config.json | 2 +- .../src/core/resources/CommerceSettings.ts | 6 +++++ .../__snapshots__/Environment.test.ts.snap | 2 ++ .../OrganizationProfileRoutes.tsx | 24 ++++++++++--------- .../UserProfile/UserProfileRoutes.tsx | 24 ++++++++++--------- .../src/ui/utils/createCustomPages.tsx | 8 +++++-- .../clerk-js/src/utils/componentGuards.ts | 8 +++++++ packages/types/src/commerceSettings.ts | 4 ++++ 9 files changed, 59 insertions(+), 25 deletions(-) create mode 100644 .changeset/shy-shrimps-drive.md diff --git a/.changeset/shy-shrimps-drive.md b/.changeset/shy-shrimps-drive.md new file mode 100644 index 00000000000..69e7ee928b2 --- /dev/null +++ b/.changeset/shy-shrimps-drive.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Add check for paid user and org plans to display Billing tabs diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index c87828cd67d..620f7b58748 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -1,7 +1,7 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "590kB" }, - { "path": "./dist/clerk.browser.js", "maxSize": "73.75KB" }, + { "path": "./dist/clerk.browser.js", "maxSize": "73.83KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" }, { "path": "./dist/ui-common*.js", "maxSize": "99KB" }, { "path": "./dist/vendors*.js", "maxSize": "36KB" }, diff --git a/packages/clerk-js/src/core/resources/CommerceSettings.ts b/packages/clerk-js/src/core/resources/CommerceSettings.ts index 7071797b5b4..bca1e26cb73 100644 --- a/packages/clerk-js/src/core/resources/CommerceSettings.ts +++ b/packages/clerk-js/src/core/resources/CommerceSettings.ts @@ -13,6 +13,8 @@ export class __experimental_CommerceSettings extends BaseResource implements __e billing = { stripePublishableKey: '', enabled: false, + hasPaidOrgPlans: false, + hasPaidUserPlans: false, }; public constructor( @@ -32,6 +34,8 @@ export class __experimental_CommerceSettings extends BaseResource implements __e // TODO(@commerce): Remove `?.` once we launch. this.billing.stripePublishableKey = data?.billing?.stripe_publishable_key || ''; this.billing.enabled = data?.billing?.enabled || false; + this.billing.hasPaidOrgPlans = data?.billing?.has_paid_org_plans || false; + this.billing.hasPaidUserPlans = data?.billing?.has_paid_user_plans || false; return this; } @@ -41,6 +45,8 @@ export class __experimental_CommerceSettings extends BaseResource implements __e billing: { stripe_publishable_key: this.billing.stripePublishableKey, enabled: this.billing.enabled, + has_paid_org_plans: this.billing.hasPaidOrgPlans, + has_paid_user_plans: this.billing.hasPaidUserPlans, }, } as unknown as __experimental_CommerceSettingsJSONSnapshot; } diff --git a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap index 7d6572c3697..5fb4f03e7d1 100644 --- a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap +++ b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap @@ -12,6 +12,8 @@ exports[`Environment __internal_toSnapshot() 1`] = ` "commerce_settings": { "billing": { "enabled": false, + "has_paid_org_plans": false, + "has_paid_user_plans": false, "stripe_publishable_key": "", }, }, diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx index c5aa8cfb470..c591ace0161 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx @@ -59,17 +59,19 @@ export const OrganizationProfileRoutes = () => { - {experimental?.commerce && __experimental_commerceSettings.billing.enabled && ( - - - - - - - - - - )} + {experimental?.commerce && + __experimental_commerceSettings.billing.enabled && + __experimental_commerceSettings.billing.hasPaidOrgPlans && ( + + + + + + + + + + )} ); diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx index 0d3c9a242b7..7dba5d3df5a 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx @@ -56,17 +56,19 @@ export const UserProfileRoutes = () => { - {experimental?.commerce && __experimental_commerceSettings.billing.enabled && ( - - - - - - - - - - )} + {experimental?.commerce && + __experimental_commerceSettings.billing.enabled && + __experimental_commerceSettings.billing.hasPaidUserPlans && ( + + + + + + + + + + )} ); diff --git a/packages/clerk-js/src/ui/utils/createCustomPages.tsx b/packages/clerk-js/src/ui/utils/createCustomPages.tsx index 1c1d75753b3..5d2d4772fac 100644 --- a/packages/clerk-js/src/ui/utils/createCustomPages.tsx +++ b/packages/clerk-js/src/ui/utils/createCustomPages.tsx @@ -1,6 +1,6 @@ import type { CustomPage, EnvironmentResource, LoadedClerk } from '@clerk/types'; -import { disabledBillingFeature, isValidUrl } from '../../utils'; +import { disabledBillingFeature, hasPaidOrgPlans, hasPaidUserPlans, isValidUrl } from '../../utils'; import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID, USER_PROFILE_NAVBAR_ROUTE_ID } from '../constants'; import type { NavbarRoute } from '../elements'; import { CreditCard, Organization, TickShield, User, Users } from '../icons'; @@ -79,6 +79,7 @@ export const createOrganizationProfileCustomPages = ( }, clerk, environment, + true, ); }; @@ -86,12 +87,15 @@ const createCustomPages = ( { customPages, getDefaultRoutes, setFirstPathToRoot, excludedPathsFromDuplicateWarning }: CreateCustomPagesParams, clerk: LoadedClerk, environment?: EnvironmentResource, + organization?: boolean, ) => { const { INITIAL_ROUTES, pageToRootNavbarRouteMap, validReorderItemLabels } = getDefaultRoutes({ commerce: clerk.sdkMetadata?.environment === 'test' ? false - : clerk.__internal_getOption('experimental')?.commerce && !disabledBillingFeature(clerk, environment), + : clerk.__internal_getOption('experimental')?.commerce && + !disabledBillingFeature(clerk, environment) && + (organization ? hasPaidOrgPlans(clerk, environment) : hasPaidUserPlans(clerk, environment)), }); if (isDevelopmentSDK(clerk)) { diff --git a/packages/clerk-js/src/utils/componentGuards.ts b/packages/clerk-js/src/utils/componentGuards.ts index ba71cae5b40..7df6d1cf5b5 100644 --- a/packages/clerk-js/src/utils/componentGuards.ts +++ b/packages/clerk-js/src/utils/componentGuards.ts @@ -25,3 +25,11 @@ export const disabledOrganizationsFeature: ComponentGuard = (_, environment) => export const disabledBillingFeature: ComponentGuard = (_, environment) => { return !environment?.__experimental_commerceSettings.billing.enabled; }; + +export const hasPaidOrgPlans: ComponentGuard = (_, environment) => { + return environment?.__experimental_commerceSettings.billing.hasPaidOrgPlans || false; +}; + +export const hasPaidUserPlans: ComponentGuard = (_, environment) => { + return environment?.__experimental_commerceSettings.billing.hasPaidUserPlans || false; +}; diff --git a/packages/types/src/commerceSettings.ts b/packages/types/src/commerceSettings.ts index 61850caaa7a..1ed1070daaf 100644 --- a/packages/types/src/commerceSettings.ts +++ b/packages/types/src/commerceSettings.ts @@ -6,6 +6,8 @@ import type { ClerkResource } from './resource'; export interface __experimental_CommerceSettingsJSON extends ClerkResourceJSON { billing: { enabled: boolean; + has_paid_org_plans: boolean; + has_paid_user_plans: boolean; stripe_publishable_key: string; }; } @@ -13,6 +15,8 @@ export interface __experimental_CommerceSettingsJSON extends ClerkResourceJSON { export interface __experimental_CommerceSettingsResource extends ClerkResource { billing: { enabled: boolean; + hasPaidOrgPlans: boolean; + hasPaidUserPlans: boolean; stripePublishableKey: string; }; From b805ce8900dde4c984e2069aefaaa288853e1cfa Mon Sep 17 00:00:00 2001 From: Keiran Flanigan Date: Tue, 15 Apr 2025 09:53:41 -0700 Subject: [PATCH 2/2] update test snapshot --- .../__tests__/__snapshots__/Environment.test.ts.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap index 5fb4f03e7d1..1bfc20011b4 100644 --- a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap +++ b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap @@ -278,6 +278,8 @@ Environment { "__experimental_commerceSettings": __experimental_CommerceSettings { "billing": { "enabled": false, + "hasPaidOrgPlans": false, + "hasPaidUserPlans": false, "stripePublishableKey": "", }, "pathRoot": "", @@ -507,6 +509,8 @@ Environment { "__experimental_commerceSettings": __experimental_CommerceSettings { "billing": { "enabled": false, + "hasPaidOrgPlans": false, + "hasPaidUserPlans": false, "stripePublishableKey": "", }, "pathRoot": "",