From 9284e8abc3ff9e11bae4c0997efa509b1618bd13 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 28 Apr 2025 13:20:26 +0300 Subject: [PATCH] fix(clerk-js): Replace commerce with billing when components cannot render --- .changeset/shy-chairs-speak.md | 5 +++ packages/clerk-js/src/core/clerk.ts | 49 ++++++++++++++++++-------- packages/clerk-js/src/core/warnings.ts | 4 +-- 3 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 .changeset/shy-chairs-speak.md diff --git a/.changeset/shy-chairs-speak.md b/.changeset/shy-chairs-speak.md new file mode 100644 index 00000000000..30179ba9946 --- /dev/null +++ b/.changeset/shy-chairs-speak.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Replace `"commerce"` with `"billing"` in error message when components cannot render because the feature is disabled. diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 5c34471961f..fa10ae89f09 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -156,6 +156,11 @@ declare global { } } +const CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE = 'cannot_render_billing_disabled'; +const CANNOT_RENDER_USER_MISSING_ERROR_CODE = 'cannot_render_user_missing'; +const CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE = 'cannot_render_organizations_disabled'; +const CANNOT_RENDER_ORGANIZATION_MISSING_ERROR_CODE = 'cannot_render_organization_missing'; +const CANNOT_RENDER_SINGLE_SESSION_ENABLED_ERROR_CODE = 'cannot_render_single_session_enabled'; const defaultOptions: ClerkOptions = { polling: true, standardBrowser: true, @@ -521,7 +526,7 @@ export class Clerk implements ClerkInterface { if (sessionExistsAndSingleSessionModeEnabled(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotOpenSignInOrSignUp, { - code: 'cannot_render_single_session_enabled', + code: CANNOT_RENDER_SINGLE_SESSION_ENABLED_ERROR_CODE, }); } return; @@ -541,6 +546,14 @@ export class Clerk implements ClerkInterface { public __internal_openCheckout = (props?: __experimental_CheckoutProps): void => { this.assertComponentsReady(this.#componentControls); + if (disabledBillingFeature(this, this.environment)) { + if (this.#instanceType === 'development') { + throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('Checkout'), { + code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE, + }); + } + return; + } void this.#componentControls .ensureMounted({ preloadHint: 'Checkout' }) .then(controls => controls.openDrawer('checkout', props || {})); @@ -553,6 +566,14 @@ export class Clerk implements ClerkInterface { public __internal_openSubscriptionDetails = (props?: __experimental_SubscriptionDetailsProps): void => { this.assertComponentsReady(this.#componentControls); + if (disabledBillingFeature(this, this.environment)) { + if (this.#instanceType === 'development') { + throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('SubscriptionDetails'), { + code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE, + }); + } + return; + } void this.#componentControls .ensureMounted({ preloadHint: 'SubscriptionDetails' }) .then(controls => controls.openDrawer('subscriptionDetails', props || {})); @@ -568,7 +589,7 @@ export class Clerk implements ClerkInterface { if (noUserExists(this)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotOpenUserProfile, { - code: 'cannot_render_user_missing', + code: CANNOT_RENDER_USER_MISSING_ERROR_CODE, }); } return; @@ -604,7 +625,7 @@ export class Clerk implements ClerkInterface { if (sessionExistsAndSingleSessionModeEnabled(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotOpenSignInOrSignUp, { - code: 'cannot_render_single_session_enabled', + code: CANNOT_RENDER_SINGLE_SESSION_ENABLED_ERROR_CODE, }); } return; @@ -626,7 +647,7 @@ export class Clerk implements ClerkInterface { if (noUserExists(this)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotOpenUserProfile, { - code: 'cannot_render_user_missing', + code: CANNOT_RENDER_USER_MISSING_ERROR_CODE, }); } return; @@ -649,7 +670,7 @@ export class Clerk implements ClerkInterface { if (disabledOrganizationsFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), { - code: 'cannot_render_organizations_disabled', + code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE, }); } return; @@ -657,7 +678,7 @@ export class Clerk implements ClerkInterface { if (noOrganizationExists(this)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderComponentWhenOrgDoesNotExist, { - code: 'cannot_render_organization_missing', + code: CANNOT_RENDER_ORGANIZATION_MISSING_ERROR_CODE, }); } return; @@ -679,7 +700,7 @@ export class Clerk implements ClerkInterface { if (disabledOrganizationsFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), { - code: 'cannot_render_organizations_disabled', + code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE, }); } return; @@ -762,7 +783,7 @@ export class Clerk implements ClerkInterface { if (noUserExists(this)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderComponentWhenUserDoesNotExist, { - code: 'cannot_render_user_missing', + code: CANNOT_RENDER_USER_MISSING_ERROR_CODE, }); } return; @@ -794,7 +815,7 @@ export class Clerk implements ClerkInterface { if (disabledOrganizationsFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), { - code: 'cannot_render_organizations_disabled', + code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE, }); } return; @@ -803,7 +824,7 @@ export class Clerk implements ClerkInterface { if (noOrganizationExists(this) && userExists) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderComponentWhenOrgDoesNotExist, { - code: 'cannot_render_organization_missing', + code: CANNOT_RENDER_ORGANIZATION_MISSING_ERROR_CODE, }); } return; @@ -834,7 +855,7 @@ export class Clerk implements ClerkInterface { if (disabledOrganizationsFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), { - code: 'cannot_render_organizations_disabled', + code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE, }); } return; @@ -865,7 +886,7 @@ export class Clerk implements ClerkInterface { if (disabledOrganizationsFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), { - code: 'cannot_render_organizations_disabled', + code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE, }); } return; @@ -904,7 +925,7 @@ export class Clerk implements ClerkInterface { if (disabledOrganizationsFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), { - code: 'cannot_render_organizations_disabled', + code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE, }); } return; @@ -979,7 +1000,7 @@ export class Clerk implements ClerkInterface { if (disabledBillingFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PricingTable'), { - code: 'cannot_render_commerce_disabled', + code: CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE, }); } return; diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts index 492d4711acb..862668ae907 100644 --- a/packages/clerk-js/src/core/warnings.ts +++ b/packages/clerk-js/src/core/warnings.ts @@ -11,9 +11,9 @@ const createMessageForDisabledOrganizations = ( `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`, ); }; -const createMessageForDisabledCommerce = (componentName: 'PricingTable' | 'Checkout') => { +const createMessageForDisabledCommerce = (componentName: 'PricingTable' | 'Checkout' | 'SubscriptionDetails') => { return formatWarning( - `The <${componentName}/> component cannot be rendered when commerce is disabled. Visit 'https://dashboard.clerk.com/last-active?path=commerce/settings' to follow the necessary steps to enable commerce. Since commerce is disabled, this is no-op.`, + `The <${componentName}/> component cannot be rendered when billing is disabled. Visit 'https://dashboard.clerk.com/last-active?path=billing/settings' to follow the necessary steps to enable commerce. Since commerce is disabled, this is no-op.`, ); }; const warnings = {