chore(clerk-js): Nest existing commerce settings under billing

.changeset/clear-lights-talk.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Nest existing commerce settings under `billing`.

packages/clerk-js/bundlewatch.config.json

@@ -1,7 +1,7 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "590kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "73.67KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "73.69KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "99KB" },
     { "path": "./dist/vendors*.js", "maxSize": "36KB" },

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

@@ -84,7 +84,7 @@ import {
   createAllowedRedirectOrigins,
   createBeforeUnloadTracker,
   createPageLifecycle,
-  disabledCommerceFeature,
+  disabledBillingFeature,
   disabledOrganizationsFeature,
   errorThrower,
   generateSignatureWithCoinbaseWallet,
@@ -955,7 +955,7 @@ export class Clerk implements ClerkInterface {
 
   public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledCommerceFeature(this, this.environment)) {
+    if (disabledBillingFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PricingTable'), {
           code: 'cannot_render_commerce_disabled',

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

@@ -10,8 +10,10 @@ import { BaseResource } from './internal';
  * @internal
  */
 export class __experimental_CommerceSettings extends BaseResource implements __experimental_CommerceSettingsResource {
-  stripePublishableKey: string = '';
-  enabled: boolean = false;
+  billing = {
+    stripePublishableKey: '',
+    enabled: false,
+  };
 
   public constructor(
     data: __experimental_CommerceSettingsJSON | __experimental_CommerceSettingsJSONSnapshot | null = null,
@@ -26,15 +28,20 @@ export class __experimental_CommerceSettings extends BaseResource implements __e
     if (!data) {
       return this;
     }
-    this.stripePublishableKey = data.stripe_publishable_key;
-    this.enabled = data.enabled;
+
+    // TODO(@commerce): Remove `?.` once we launch.
+    this.billing.stripePublishableKey = data?.billing?.stripe_publishable_key || '';
+    this.billing.enabled = data?.billing?.enabled || false;
+
     return this;
   }
 
   public __internal_toSnapshot(): __experimental_CommerceSettingsJSONSnapshot {
     return {
-      stripe_publishable_key: this.stripePublishableKey,
-      enabled: this.enabled,
+      billing: {
+        stripe_publishable_key: this.billing.stripePublishableKey,
+        enabled: this.billing.enabled,
+      },
     } as unknown as __experimental_CommerceSettingsJSONSnapshot;
   }
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/Environment.test.ts.snap

@@ -10,8 +10,10 @@ exports[`Environment __internal_toSnapshot() 1`] = `
     "single_session_mode": true,
   },
   "commerce_settings": {
-    "enabled": false,
-    "stripe_publishable_key": "",
+    "billing": {
+      "enabled": false,
+      "stripe_publishable_key": "",
+    },
   },
   "display_config": {
     "after_create_organization_url": "",
@@ -272,9 +274,11 @@ exports[`Environment __internal_toSnapshot() 1`] = `
 exports[`Environment defaults values when instantiated without arguments 1`] = `
 Environment {
   "__experimental_commerceSettings": __experimental_CommerceSettings {
-    "enabled": false,
+    "billing": {
+      "enabled": false,
+      "stripePublishableKey": "",
+    },
     "pathRoot": "",
-    "stripePublishableKey": "",
   },
   "authConfig": AuthConfig {
     "claimedAt": null,
@@ -499,9 +503,11 @@ Environment {
 exports[`Environment has the same initial properties 1`] = `
 Environment {
   "__experimental_commerceSettings": __experimental_CommerceSettings {
-    "enabled": false,
+    "billing": {
+      "enabled": false,
+      "stripePublishableKey": "",
+    },
     "pathRoot": "",
-    "stripePublishableKey": "",
   },
   "authConfig": AuthConfig {
     "claimedAt": null,

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

@@ -59,7 +59,7 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {experimental?.commerce && __experimental_commerceSettings.enabled && (
+        {experimental?.commerce && __experimental_commerceSettings.billing.enabled && (
           <Route path={isBillingPageRoot ? undefined : 'organization-billing'}>
             <Switch>
               <Route index>

packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx

@@ -73,14 +73,16 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => {
   const externalGatewayId = checkout?.externalGatewayId ?? initializedPaymentSource?.externalGatewayId;
   const externalClientSecret = checkout?.externalClientSecret ?? initializedPaymentSource?.externalClientSecret;
 
+  const stripePublishableKey = __experimental_commerceSettings.billing.stripePublishableKey;
+
   useEffect(() => {
-    if (!stripePromiseRef.current && externalGatewayId && __experimental_commerceSettings.stripePublishableKey) {
+    if (!stripePromiseRef.current && externalGatewayId && stripePublishableKey) {
       if (__BUILD_DISABLE_RHC__) {
         clerkUnsupportedEnvironmentWarning('Stripe');
         return;
       }
 
-      stripePromiseRef.current = loadStripe(__experimental_commerceSettings.stripePublishableKey, {
+      stripePromiseRef.current = loadStripe(stripePublishableKey, {
         stripeAccount: externalGatewayId,
       });
 

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

@@ -56,7 +56,7 @@ export const UserProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {experimental?.commerce && __experimental_commerceSettings.enabled && (
+        {experimental?.commerce && __experimental_commerceSettings.billing.enabled && (
           <Route path={isBillingPageRoot ? undefined : 'billing'}>
             <Switch>
               <Route index>

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

@@ -1,6 +1,6 @@
 import type { CustomPage, EnvironmentResource, LoadedClerk } from '@clerk/types';
 
-import { isValidUrl } from '../../utils';
+import { disabledBillingFeature, 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';
@@ -91,7 +91,7 @@ const createCustomPages = (
     commerce:
       clerk.sdkMetadata?.environment === 'test'
         ? false
-        : clerk.__internal_getOption('experimental')?.commerce && environment?.__experimental_commerceSettings.enabled,
+        : clerk.__internal_getOption('experimental')?.commerce && !disabledBillingFeature(clerk, environment),
   });
 
   if (isDevelopmentSDK(clerk)) {

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

@@ -22,6 +22,6 @@ export const disabledOrganizationsFeature: ComponentGuard = (_, environment) =>
   return !environment?.organizationSettings.enabled;
 };
 
-export const disabledCommerceFeature: ComponentGuard = (_, environment) => {
-  return !environment?.__experimental_commerceSettings.enabled;
+export const disabledBillingFeature: ComponentGuard = (_, environment) => {
+  return !environment?.__experimental_commerceSettings.billing.enabled;
 };

packages/types/src/commerceSettings.ts

@@ -4,12 +4,17 @@ import type { ClerkResourceJSON } from './json';
 import type { ClerkResource } from './resource';
 
 export interface __experimental_CommerceSettingsJSON extends ClerkResourceJSON {
-  enabled: boolean;
-  stripe_publishable_key: string;
+  billing: {
+    enabled: boolean;
+    stripe_publishable_key: string;
+  };
 }
 
 export interface __experimental_CommerceSettingsResource extends ClerkResource {
-  enabled: boolean;
-  stripePublishableKey: string;
+  billing: {
+    enabled: boolean;
+    stripePublishableKey: string;
+  };
+
   __internal_toSnapshot: () => __experimental_CommerceSettingsJSONSnapshot;
 }