diff --git a/.changeset/clear-lights-talk.md b/.changeset/clear-lights-talk.md new file mode 100644 index 00000000000..5ba5e3b2c59 --- /dev/null +++ b/.changeset/clear-lights-talk.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Nest existing commerce settings under `billing`. diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 102a75c2b17..cdb93834bf3 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.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" }, diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index b6732cdddd8..98028397ea9 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/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', diff --git a/packages/clerk-js/src/core/resources/CommerceSettings.ts b/packages/clerk-js/src/core/resources/CommerceSettings.ts index 65b19ffedbf..7071797b5b4 100644 --- a/packages/clerk-js/src/core/resources/CommerceSettings.ts +++ b/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; } } 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 2259e9f58ed..7d6572c3697 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 @@ -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, diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx index a67e6f36264..c5aa8cfb470 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx @@ -59,7 +59,7 @@ export const OrganizationProfileRoutes = () => { - {experimental?.commerce && __experimental_commerceSettings.enabled && ( + {experimental?.commerce && __experimental_commerceSettings.billing.enabled && ( diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx index 611d7b00656..71ed8ac8071 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx +++ b/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, }); diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx index 71dfa2c0936..0d3c9a242b7 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx @@ -56,7 +56,7 @@ export const UserProfileRoutes = () => { - {experimental?.commerce && __experimental_commerceSettings.enabled && ( + {experimental?.commerce && __experimental_commerceSettings.billing.enabled && ( diff --git a/packages/clerk-js/src/ui/utils/createCustomPages.tsx b/packages/clerk-js/src/ui/utils/createCustomPages.tsx index 140908b89b4..1c1d75753b3 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 { 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)) { diff --git a/packages/clerk-js/src/utils/componentGuards.ts b/packages/clerk-js/src/utils/componentGuards.ts index 2d3144a8e02..ba71cae5b40 100644 --- a/packages/clerk-js/src/utils/componentGuards.ts +++ b/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; }; diff --git a/packages/types/src/commerceSettings.ts b/packages/types/src/commerceSettings.ts index f8219a34eba..61850caaa7a 100644 --- a/packages/types/src/commerceSettings.ts +++ b/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; }