diff --git a/.changeset/better-streets-sort.md b/.changeset/better-streets-sort.md new file mode 100644 index 00000000000..79d9dcbb017 --- /dev/null +++ b/.changeset/better-streets-sort.md @@ -0,0 +1,10 @@ +--- +'@clerk/tanstack-react-start': minor +'@clerk/chrome-extension': minor +'@clerk/react-router': minor +'@clerk/nextjs': minor +'@clerk/clerk-react': minor +'@clerk/clerk-expo': minor +--- + +Export a new `` component. This component renders plans for user or organizations and upon selection the end-user is prompted with a checkout form. diff --git a/.changeset/social-tables-cover.md b/.changeset/social-tables-cover.md new file mode 100644 index 00000000000..128c723fdde --- /dev/null +++ b/.changeset/social-tables-cover.md @@ -0,0 +1,14 @@ +--- +'@clerk/tanstack-react-start': minor +'@clerk/chrome-extension': minor +'@clerk/react-router': minor +'@clerk/clerk-js': minor +'@clerk/nextjs': minor +'@clerk/shared': minor +'@clerk/clerk-react': minor +'@clerk/types': minor +'@clerk/clerk-expo': minor +'@clerk/remix': minor +--- + +Mark commerce apis as stable diff --git a/.changeset/witty-doors-hear.md b/.changeset/witty-doors-hear.md new file mode 100644 index 00000000000..63639d0a30f --- /dev/null +++ b/.changeset/witty-doors-hear.md @@ -0,0 +1,21 @@ +--- +'@clerk/clerk-js': minor +'@clerk/clerk-react': minor +'@clerk/types': minor +--- + +Expose stable commerce stable apis under `Clerk.commerce` + +## Render the pricing table component +- `Clerk.mountPricingTable` +- `Clerk.unmountPricingTable` + +## Commerce namespace +- `Clerk.commerce.initializePaymentSource()` +- `Clerk.commerce.addPaymentSource()` +- `Clerk.commerce.getPaymentSources()` +- `Clerk.commerce.billing` + - `Clerk.commerce.billing.getPlans()` + - `Clerk.commerce.billing.getSubscriptions()` + - `Clerk.commerce.billing.getInvoices()` + - `Clerk.commerce.billing.startCheckout()` diff --git a/integration/templates/next-app-router/src/app/pricing-table/page.tsx b/integration/templates/next-app-router/src/app/pricing-table/page.tsx index 70c6c7f8542..e3804e9c533 100644 --- a/integration/templates/next-app-router/src/app/pricing-table/page.tsx +++ b/integration/templates/next-app-router/src/app/pricing-table/page.tsx @@ -1,5 +1,5 @@ -import { __experimental_PricingTable } from '@clerk/nextjs'; +import { PricingTable } from '@clerk/nextjs'; -export default function PricingTable() { - return <__experimental_PricingTable />; +export default function PricingTablePage() { + return ; } diff --git a/packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap index f663fde7c23..f3220be64f2 100644 --- a/packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap @@ -13,6 +13,7 @@ exports[`public exports should not include a breaking change 1`] = ` "OrganizationList", "OrganizationProfile", "OrganizationSwitcher", + "PricingTable", "Protect", "RedirectToCreateOrganization", "RedirectToOrganizationProfile", @@ -30,7 +31,6 @@ exports[`public exports should not include a breaking change 1`] = ` "UserButton", "UserProfile", "Waitlist", - "__experimental_PricingTable", "useAuth", "useClerk", "useEmailLink", diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index 39ca0ff2deb..e64bc222ee6 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -308,7 +308,7 @@ void (async () => { }); }, '/pricing-table': () => { - Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {}); + Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {}); }, '/open-sign-in': () => { mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {}); diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 927881bf913..008d71309e9 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -14,11 +14,9 @@ import { import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url'; import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils'; import type { - __experimental_CheckoutProps, - __experimental_CommerceNamespace, - __experimental_PlanDetailsProps, - __experimental_PricingTableProps, + __internal_CheckoutProps, __internal_ComponentNavigationContext, + __internal_PlanDetailsProps, __internal_UserVerificationModalProps, AuthenticateWithCoinbaseWalletParams, AuthenticateWithGoogleOneTapParams, @@ -30,6 +28,7 @@ import type { ClerkOptions, ClientJSONSnapshot, ClientResource, + CommerceNamespace, CreateOrganizationParams, CreateOrganizationProps, CredentialReturn, @@ -50,6 +49,7 @@ import type { OrganizationResource, OrganizationSwitcherProps, PendingSessionResource, + PricingTableProps, PublicKeyCredentialCreationOptionsWithoutExtensions, PublicKeyCredentialRequestOptionsWithoutExtensions, PublicKeyCredentialWithAuthenticatorAssertionResponse, @@ -130,7 +130,7 @@ import { eventBus, events } from './events'; import type { FapiClient, FapiRequestCallback } from './fapiClient'; import { createFapiClient } from './fapiClient'; import { createClientFromJwt } from './jwt-client'; -import { __experimental_Commerce } from './modules/commerce'; +import { Commerce } from './modules/commerce'; import { BaseResource, Client, @@ -185,7 +185,7 @@ export class Clerk implements ClerkInterface { version: __PKG_VERSION__, environment: process.env.NODE_ENV || 'production', }; - private static _commerce: __experimental_CommerceNamespace; + private static _commerce: CommerceNamespace; public client: ClientResource | undefined; public session: SignedInSessionResource | null | undefined; @@ -314,9 +314,9 @@ export class Clerk implements ClerkInterface { return this.#options.standardBrowser || false; } - get __experimental_commerce(): __experimental_CommerceNamespace { + get commerce(): CommerceNamespace { if (!Clerk._commerce) { - Clerk._commerce = new __experimental_Commerce(); + Clerk._commerce = new Commerce(); } return Clerk._commerce; } @@ -544,7 +544,7 @@ export class Clerk implements ClerkInterface { void this.#componentControls.ensureMounted().then(controls => controls.closeModal('signIn')); }; - public __internal_openCheckout = (props?: __experimental_CheckoutProps): void => { + public __internal_openCheckout = (props?: __internal_CheckoutProps): void => { this.assertComponentsReady(this.#componentControls); if (disabledBillingFeature(this, this.environment)) { if (this.#instanceType === 'development') { @@ -564,7 +564,7 @@ export class Clerk implements ClerkInterface { void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('checkout')); }; - public __internal_openPlanDetails = (props?: __experimental_PlanDetailsProps): void => { + public __internal_openPlanDetails = (props?: __internal_PlanDetailsProps): void => { this.assertComponentsReady(this.#componentControls); if (disabledBillingFeature(this, this.environment)) { if (this.#instanceType === 'development') { @@ -995,7 +995,7 @@ export class Clerk implements ClerkInterface { void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node })); }; - public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => { + public mountPricingTable = (node: HTMLDivElement, props?: PricingTableProps): void => { this.assertComponentsReady(this.#componentControls); if (disabledBillingFeature(this, this.environment)) { if (this.#instanceType === 'development') { @@ -1017,7 +1017,7 @@ export class Clerk implements ClerkInterface { this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props)); }; - public __experimental_unmountPricingTable = (node: HTMLDivElement): void => { + public unmountPricingTable = (node: HTMLDivElement): void => { this.assertComponentsReady(this.#componentControls); void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ diff --git a/packages/clerk-js/src/core/modules/commerce/Commerce.ts b/packages/clerk-js/src/core/modules/commerce/Commerce.ts index 6ac7674ca63..61958719d00 100644 --- a/packages/clerk-js/src/core/modules/commerce/Commerce.ts +++ b/packages/clerk-js/src/core/modules/commerce/Commerce.ts @@ -1,33 +1,29 @@ import type { - __experimental_AddPaymentSourceParams, - __experimental_CommerceBillingNamespace, - __experimental_CommerceInitializedPaymentSourceJSON, - __experimental_CommerceNamespace, - __experimental_CommercePaymentSourceJSON, - __experimental_GetPaymentSourcesParams, - __experimental_InitializePaymentSourceParams, + AddPaymentSourceParams, ClerkPaginatedResponse, + CommerceBillingNamespace, + CommerceInitializedPaymentSourceJSON, + CommerceNamespace, + CommercePaymentSourceJSON, + GetPaymentSourcesParams, + InitializePaymentSourceParams, } from '@clerk/types'; import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams'; -import { - __experimental_CommerceInitializedPaymentSource, - __experimental_CommercePaymentSource, - BaseResource, -} from '../../resources/internal'; -import { __experimental_CommerceBilling } from './CommerceBilling'; +import { BaseResource, CommerceInitializedPaymentSource, CommercePaymentSource } from '../../resources/internal'; +import { CommerceBilling } from './CommerceBilling'; -export class __experimental_Commerce implements __experimental_CommerceNamespace { - private static _billing: __experimental_CommerceBillingNamespace; +export class Commerce implements CommerceNamespace { + private static _billing: CommerceBillingNamespace; - get __experimental_billing(): __experimental_CommerceBillingNamespace { - if (!__experimental_Commerce._billing) { - __experimental_Commerce._billing = new __experimental_CommerceBilling(); + get billing(): CommerceBillingNamespace { + if (!Commerce._billing) { + Commerce._billing = new CommerceBilling(); } - return __experimental_Commerce._billing; + return Commerce._billing; } - initializePaymentSource = async (params: __experimental_InitializePaymentSourceParams) => { + initializePaymentSource = async (params: InitializePaymentSourceParams) => { const { orgId, ...rest } = params; const json = ( await BaseResource._fetch({ @@ -37,11 +33,11 @@ export class __experimental_Commerce implements __experimental_CommerceNamespace method: 'POST', body: rest as any, }) - )?.response as unknown as __experimental_CommerceInitializedPaymentSourceJSON; - return new __experimental_CommerceInitializedPaymentSource(json); + )?.response as unknown as CommerceInitializedPaymentSourceJSON; + return new CommerceInitializedPaymentSource(json); }; - addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => { + addPaymentSource = async (params: AddPaymentSourceParams) => { const { orgId, ...rest } = params; const json = ( @@ -50,11 +46,11 @@ export class __experimental_Commerce implements __experimental_CommerceNamespace method: 'POST', body: rest as any, }) - )?.response as unknown as __experimental_CommercePaymentSourceJSON; - return new __experimental_CommercePaymentSource(json); + )?.response as unknown as CommercePaymentSourceJSON; + return new CommercePaymentSource(json); }; - getPaymentSources = async (params: __experimental_GetPaymentSourcesParams) => { + getPaymentSources = async (params: GetPaymentSourcesParams) => { const { orgId, ...rest } = params; return await BaseResource._fetch({ @@ -63,10 +59,10 @@ export class __experimental_Commerce implements __experimental_CommerceNamespace search: convertPageToOffsetSearchParams(rest), }).then(res => { const { data: paymentSources, total_count } = - res?.response as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>; + res?.response as unknown as ClerkPaginatedResponse; return { total_count, - data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)), + data: paymentSources.map(paymentSource => new CommercePaymentSource(paymentSource)), }; }); }; diff --git a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts index e4b7583123f..3d9346ca9fa 100644 --- a/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts +++ b/packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts @@ -1,43 +1,43 @@ import type { - __experimental_CommerceBillingNamespace, - __experimental_CommerceCheckoutJSON, - __experimental_CommerceInvoiceJSON, - __experimental_CommerceInvoiceResource, - __experimental_CommercePlanResource, - __experimental_CommerceProductJSON, - __experimental_CommerceSubscriptionJSON, - __experimental_CommerceSubscriptionResource, - __experimental_CreateCheckoutParams, - __experimental_GetInvoicesParams, - __experimental_GetPlansParams, - __experimental_GetSubscriptionsParams, ClerkPaginatedResponse, + CommerceBillingNamespace, + CommerceCheckoutJSON, + CommerceInvoiceJSON, + CommerceInvoiceResource, + CommercePlanResource, + CommerceProductJSON, + CommerceSubscriptionJSON, + CommerceSubscriptionResource, + CreateCheckoutParams, + GetInvoicesParams, + GetPlansParams, + GetSubscriptionsParams, } from '@clerk/types'; import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams'; import { - __experimental_CommerceCheckout, - __experimental_CommerceInvoice, - __experimental_CommercePlan, - __experimental_CommerceSubscription, BaseResource, + CommerceCheckout, + CommerceInvoice, + CommercePlan, + CommerceSubscription, } from '../../resources/internal'; -export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace { - getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => { +export class CommerceBilling implements CommerceBillingNamespace { + getPlans = async (params?: GetPlansParams): Promise => { const { data: products } = (await BaseResource._fetch({ path: `/commerce/products`, method: 'GET', search: { payerType: params?.subscriberType || '' }, - })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>; + })) as unknown as ClerkPaginatedResponse; const defaultProduct = products.find(product => product.is_default); - return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || []; + return defaultProduct?.plans.map(plan => new CommercePlan(plan)) || []; }; getSubscriptions = async ( - params: __experimental_GetSubscriptionsParams, - ): Promise> => { + params: GetSubscriptionsParams, + ): Promise> => { const { orgId, ...rest } = params; return await BaseResource._fetch({ @@ -46,18 +46,16 @@ export class __experimental_CommerceBilling implements __experimental_CommerceBi search: convertPageToOffsetSearchParams(rest), }).then(res => { const { data: subscriptions, total_count } = - res?.response as unknown as ClerkPaginatedResponse<__experimental_CommerceSubscriptionJSON>; + res?.response as unknown as ClerkPaginatedResponse; return { total_count, - data: subscriptions.map(subscription => new __experimental_CommerceSubscription(subscription)), + data: subscriptions.map(subscription => new CommerceSubscription(subscription)), }; }); }; - getInvoices = async ( - params: __experimental_GetInvoicesParams, - ): Promise> => { + getInvoices = async (params: GetInvoicesParams): Promise> => { const { orgId, ...rest } = params; return await BaseResource._fetch({ @@ -65,26 +63,25 @@ export class __experimental_CommerceBilling implements __experimental_CommerceBi method: 'GET', search: convertPageToOffsetSearchParams(rest), }).then(res => { - const { data: invoices, total_count } = - res?.response as unknown as ClerkPaginatedResponse<__experimental_CommerceInvoiceJSON>; + const { data: invoices, total_count } = res?.response as unknown as ClerkPaginatedResponse; return { total_count, - data: invoices.map(invoice => new __experimental_CommerceInvoice(invoice)), + data: invoices.map(invoice => new CommerceInvoice(invoice)), }; }); }; - startCheckout = async (params: __experimental_CreateCheckoutParams) => { + startCheckout = async (params: CreateCheckoutParams) => { const { orgId, ...rest } = params; const json = ( - await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({ + await BaseResource._fetch({ path: orgId ? `/organizations/${orgId}/commerce/checkouts` : `/me/commerce/checkouts`, method: 'POST', body: rest as any, }) - )?.response as unknown as __experimental_CommerceCheckoutJSON; + )?.response as unknown as CommerceCheckoutJSON; - return new __experimental_CommerceCheckout(json, orgId); + return new CommerceCheckout(json, orgId); }; } diff --git a/packages/clerk-js/src/core/resources/CommerceCheckout.ts b/packages/clerk-js/src/core/resources/CommerceCheckout.ts index 25261710c2a..d048006bb13 100644 --- a/packages/clerk-js/src/core/resources/CommerceCheckout.ts +++ b/packages/clerk-js/src/core/resources/CommerceCheckout.ts @@ -1,39 +1,37 @@ import { retry } from '@clerk/shared/retry'; import type { - __experimental_CommerceCheckoutJSON, - __experimental_CommerceCheckoutResource, - __experimental_CommerceCheckoutTotals, - __experimental_CommerceSubscriptionPlanPeriod, - __experimental_ConfirmCheckoutParams, + CommerceCheckoutJSON, + CommerceCheckoutResource, + CommerceCheckoutTotals, + CommercePaymentSourceResource, + CommercePlanResource, + CommerceSubscriptionPlanPeriod, + CommerceSubscriptionResource, + ConfirmCheckoutParams, } from '@clerk/types'; import { commerceTotalsFromJSON } from '../../utils'; -import { - __experimental_CommercePaymentSource, - __experimental_CommercePlan, - __experimental_CommerceSubscription, - BaseResource, -} from './internal'; +import { BaseResource, CommercePaymentSource, CommercePlan, CommerceSubscription } from './internal'; -export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource { +export class CommerceCheckout extends BaseResource implements CommerceCheckoutResource { id!: string; externalClientSecret!: string; externalGatewayId!: string; invoice_id!: string; - paymentSource?: __experimental_CommercePaymentSource; - plan!: __experimental_CommercePlan; - planPeriod!: __experimental_CommerceSubscriptionPlanPeriod; + paymentSource?: CommercePaymentSourceResource; + plan!: CommercePlanResource; + planPeriod!: CommerceSubscriptionPlanPeriod; status!: string; - subscription?: __experimental_CommerceSubscription; - totals!: __experimental_CommerceCheckoutTotals; + subscription?: CommerceSubscriptionResource; + totals!: CommerceCheckoutTotals; - constructor(data: __experimental_CommerceCheckoutJSON, orgId?: string) { + constructor(data: CommerceCheckoutJSON, orgId?: string) { super(); this.fromJSON(data); this.pathRoot = orgId ? `/organizations/${orgId}/commerce/checkouts` : `/me/commerce/checkouts`; } - protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this { + protected fromJSON(data: CommerceCheckoutJSON | null): this { if (!data) { return this; } @@ -42,19 +40,17 @@ export class __experimental_CommerceCheckout extends BaseResource implements __e this.externalClientSecret = data.external_client_secret; this.externalGatewayId = data.external_gateway_id; this.invoice_id = data.invoice_id; - this.paymentSource = data.payment_source - ? new __experimental_CommercePaymentSource(data.payment_source) - : undefined; - this.plan = new __experimental_CommercePlan(data.plan); + this.paymentSource = data.payment_source ? new CommercePaymentSource(data.payment_source) : undefined; + this.plan = new CommercePlan(data.plan); this.planPeriod = data.plan_period; this.status = data.status; - this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined; + this.subscription = data.subscription ? new CommerceSubscription(data.subscription) : undefined; this.totals = commerceTotalsFromJSON(data.totals); return this; } - confirm = (params: __experimental_ConfirmCheckoutParams): Promise => { + confirm = (params: ConfirmCheckoutParams): Promise => { const { orgId, ...rest } = params; // Retry confirmation in case of a 500 error diff --git a/packages/clerk-js/src/core/resources/CommerceFeature.ts b/packages/clerk-js/src/core/resources/CommerceFeature.ts index 52c3ea37a85..95e964662b6 100644 --- a/packages/clerk-js/src/core/resources/CommerceFeature.ts +++ b/packages/clerk-js/src/core/resources/CommerceFeature.ts @@ -1,20 +1,20 @@ -import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types'; +import type { CommerceFeatureJSON, CommerceFeatureResource } from '@clerk/types'; import { BaseResource } from './internal'; -export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource { +export class CommerceFeature extends BaseResource implements CommerceFeatureResource { id!: string; name!: string; description!: string; slug!: string; avatarUrl!: string; - constructor(data: __experimental_CommerceFeatureJSON) { + constructor(data: CommerceFeatureJSON) { super(); this.fromJSON(data); } - protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this { + protected fromJSON(data: CommerceFeatureJSON | null): this { if (!data) { return this; } diff --git a/packages/clerk-js/src/core/resources/CommerceInvoice.ts b/packages/clerk-js/src/core/resources/CommerceInvoice.ts index 911880daf7b..8f47d6b818d 100644 --- a/packages/clerk-js/src/core/resources/CommerceInvoice.ts +++ b/packages/clerk-js/src/core/resources/CommerceInvoice.ts @@ -1,26 +1,26 @@ import type { - __experimental_CommerceInvoiceJSON, - __experimental_CommerceInvoiceResource, - __experimental_CommerceInvoiceStatus, - __experimental_CommerceInvoiceTotals, + CommerceInvoiceJSON, + CommerceInvoiceResource, + CommerceInvoiceStatus, + CommerceInvoiceTotals, } from '@clerk/types'; import { commerceTotalsFromJSON } from '../../utils'; import { BaseResource } from './internal'; -export class __experimental_CommerceInvoice extends BaseResource implements __experimental_CommerceInvoiceResource { +export class CommerceInvoice extends BaseResource implements CommerceInvoiceResource { id!: string; paymentDueOn!: number; paidOn!: number; - status!: __experimental_CommerceInvoiceStatus; - totals!: __experimental_CommerceInvoiceTotals; + status!: CommerceInvoiceStatus; + totals!: CommerceInvoiceTotals; - constructor(data: __experimental_CommerceInvoiceJSON) { + constructor(data: CommerceInvoiceJSON) { super(); this.fromJSON(data); } - protected fromJSON(data: __experimental_CommerceInvoiceJSON | null): this { + protected fromJSON(data: CommerceInvoiceJSON | null): this { if (!data) { return this; } diff --git a/packages/clerk-js/src/core/resources/CommercePaymentSource.ts b/packages/clerk-js/src/core/resources/CommercePaymentSource.ts index 5dbded2b4b1..d5e3328595b 100644 --- a/packages/clerk-js/src/core/resources/CommercePaymentSource.ts +++ b/packages/clerk-js/src/core/resources/CommercePaymentSource.ts @@ -1,34 +1,31 @@ import type { - __experimental_CommerceInitializedPaymentSourceJSON, - __experimental_CommerceInitializedPaymentSourceResource, - __experimental_CommercePaymentSourceJSON, - __experimental_CommercePaymentSourceResource, - __experimental_CommercePaymentSourceStatus, - __experimental_MakeDefaultPaymentSourceParams, - __experimental_RemovePaymentSourceParams, + CommerceInitializedPaymentSourceJSON, + CommerceInitializedPaymentSourceResource, + CommercePaymentSourceJSON, + CommercePaymentSourceResource, + CommercePaymentSourceStatus, DeletedObjectJSON, + MakeDefaultPaymentSourceParams, + RemovePaymentSourceParams, } from '@clerk/types'; import { BaseResource, DeletedObject } from './internal'; -export class __experimental_CommercePaymentSource - extends BaseResource - implements __experimental_CommercePaymentSourceResource -{ +export class CommercePaymentSource extends BaseResource implements CommercePaymentSourceResource { id!: string; last4!: string; paymentMethod!: string; cardType!: string; isDefault!: boolean; - status!: __experimental_CommercePaymentSourceStatus; + status!: CommercePaymentSourceStatus; walletType: string | undefined; - constructor(data: __experimental_CommercePaymentSourceJSON) { + constructor(data: CommercePaymentSourceJSON) { super(); this.fromJSON(data); } - protected fromJSON(data: __experimental_CommercePaymentSourceJSON | null): this { + protected fromJSON(data: CommercePaymentSourceJSON | null): this { if (!data) { return this; } @@ -44,7 +41,7 @@ export class __experimental_CommercePaymentSource return this; } - public async remove(params?: __experimental_RemovePaymentSourceParams) { + public async remove(params?: RemovePaymentSourceParams) { const { orgId } = params ?? {}; const json = ( await BaseResource._fetch({ @@ -58,7 +55,7 @@ export class __experimental_CommercePaymentSource return new DeletedObject(json); } - public async makeDefault(params?: __experimental_MakeDefaultPaymentSourceParams) { + public async makeDefault(params?: MakeDefaultPaymentSourceParams) { const { orgId } = params ?? {}; await BaseResource._fetch({ path: orgId @@ -72,19 +69,16 @@ export class __experimental_CommercePaymentSource } } -export class __experimental_CommerceInitializedPaymentSource - extends BaseResource - implements __experimental_CommerceInitializedPaymentSourceResource -{ +export class CommerceInitializedPaymentSource extends BaseResource implements CommerceInitializedPaymentSourceResource { externalClientSecret!: string; externalGatewayId!: string; - constructor(data: __experimental_CommerceInitializedPaymentSourceJSON) { + constructor(data: CommerceInitializedPaymentSourceJSON) { super(); this.fromJSON(data); } - protected fromJSON(data: __experimental_CommerceInitializedPaymentSourceJSON | null): this { + protected fromJSON(data: CommerceInitializedPaymentSourceJSON | null): this { if (!data) { return this; } diff --git a/packages/clerk-js/src/core/resources/CommercePlan.ts b/packages/clerk-js/src/core/resources/CommercePlan.ts index 416b0e7523b..12ae0d0d04a 100644 --- a/packages/clerk-js/src/core/resources/CommercePlan.ts +++ b/packages/clerk-js/src/core/resources/CommercePlan.ts @@ -1,8 +1,8 @@ -import type { __experimental_CommercePlanJSON, __experimental_CommercePlanResource } from '@clerk/types'; +import type { CommercePlanJSON, CommercePlanResource } from '@clerk/types'; -import { __experimental_CommerceFeature, BaseResource } from './internal'; +import { BaseResource, CommerceFeature } from './internal'; -export class __experimental_CommercePlan extends BaseResource implements __experimental_CommercePlanResource { +export class CommercePlan extends BaseResource implements CommercePlanResource { id!: string; name!: string; amount!: number; @@ -19,14 +19,14 @@ export class __experimental_CommercePlan extends BaseResource implements __exper publiclyVisible!: boolean; slug!: string; avatarUrl!: string; - features!: __experimental_CommerceFeature[]; + features!: CommerceFeature[]; - constructor(data: __experimental_CommercePlanJSON) { + constructor(data: CommercePlanJSON) { super(); this.fromJSON(data); } - protected fromJSON(data: __experimental_CommercePlanJSON | null): this { + protected fromJSON(data: CommercePlanJSON | null): this { if (!data) { return this; } @@ -47,7 +47,7 @@ export class __experimental_CommercePlan extends BaseResource implements __exper this.publiclyVisible = data.publicly_visible; this.slug = data.slug; this.avatarUrl = data.avatar_url; - this.features = data.features.map(feature => new __experimental_CommerceFeature(feature)); + this.features = data.features.map(feature => new CommerceFeature(feature)); return this; } diff --git a/packages/clerk-js/src/core/resources/CommerceProduct.ts b/packages/clerk-js/src/core/resources/CommerceProduct.ts index cf7de1b42cb..d36da43bf18 100644 --- a/packages/clerk-js/src/core/resources/CommerceProduct.ts +++ b/packages/clerk-js/src/core/resources/CommerceProduct.ts @@ -1,20 +1,20 @@ -import type { __experimental_CommerceProductJSON, __experimental_CommerceProductResource } from '@clerk/types'; +import type { CommerceProductJSON, CommerceProductResource } from '@clerk/types'; -import { __experimental_CommercePlan, BaseResource } from './internal'; +import { BaseResource, CommercePlan } from './internal'; -export class __experimental_CommerceProduct extends BaseResource implements __experimental_CommerceProductResource { +export class CommerceProduct extends BaseResource implements CommerceProductResource { id!: string; slug!: string; currency!: string; isDefault!: boolean; - plans!: __experimental_CommercePlan[]; + plans!: CommercePlan[]; - constructor(data: __experimental_CommerceProductJSON) { + constructor(data: CommerceProductJSON) { super(); this.fromJSON(data); } - protected fromJSON(data: __experimental_CommerceProductJSON | null): this { + protected fromJSON(data: CommerceProductJSON | null): this { if (!data) { return this; } @@ -23,7 +23,7 @@ export class __experimental_CommerceProduct extends BaseResource implements __ex this.slug = data.slug; this.currency = data.currency; this.isDefault = data.is_default; - this.plans = data.plans.map(plan => new __experimental_CommercePlan(plan)); + this.plans = data.plans.map(plan => new CommercePlan(plan)); return this; } diff --git a/packages/clerk-js/src/core/resources/CommerceSettings.ts b/packages/clerk-js/src/core/resources/CommerceSettings.ts index 264bad9b8a6..bce56538fb1 100644 --- a/packages/clerk-js/src/core/resources/CommerceSettings.ts +++ b/packages/clerk-js/src/core/resources/CommerceSettings.ts @@ -1,32 +1,24 @@ -import type { - __experimental_CommerceSettingsJSON, - __experimental_CommerceSettingsJSONSnapshot, - __experimental_CommerceSettingsResource, -} from '@clerk/types'; +import type { CommerceSettingsJSON, CommerceSettingsJSONSnapshot, CommerceSettingsResource } from '@clerk/types'; import { BaseResource } from './internal'; /** * @internal */ -export class __experimental_CommerceSettings extends BaseResource implements __experimental_CommerceSettingsResource { - billing: __experimental_CommerceSettingsResource['billing'] = { +export class CommerceSettings extends BaseResource implements CommerceSettingsResource { + billing: CommerceSettingsResource['billing'] = { stripePublishableKey: '', enabled: false, hasPaidUserPlans: false, hasPaidOrgPlans: false, }; - public constructor( - data: __experimental_CommerceSettingsJSON | __experimental_CommerceSettingsJSONSnapshot | null = null, - ) { + public constructor(data: CommerceSettingsJSON | CommerceSettingsJSONSnapshot | null = null) { super(); this.fromJSON(data); } - protected fromJSON( - data: __experimental_CommerceSettingsJSON | __experimental_CommerceSettingsJSONSnapshot | null, - ): this { + protected fromJSON(data: CommerceSettingsJSON | CommerceSettingsJSONSnapshot | null): this { if (!data) { return this; } @@ -40,7 +32,7 @@ export class __experimental_CommerceSettings extends BaseResource implements __e return this; } - public __internal_toSnapshot(): __experimental_CommerceSettingsJSONSnapshot { + public __internal_toSnapshot(): CommerceSettingsJSONSnapshot { return { billing: { stripe_publishable_key: this.billing.stripePublishableKey, @@ -48,6 +40,6 @@ export class __experimental_CommerceSettings extends BaseResource implements __e has_paid_user_plans: this.billing.hasPaidUserPlans, has_paid_org_plans: this.billing.hasPaidOrgPlans, }, - } as unknown as __experimental_CommerceSettingsJSONSnapshot; + } as unknown as CommerceSettingsJSONSnapshot; } } diff --git a/packages/clerk-js/src/core/resources/CommerceSubscription.ts b/packages/clerk-js/src/core/resources/CommerceSubscription.ts index 3e880fc6e78..1a4261162a8 100644 --- a/packages/clerk-js/src/core/resources/CommerceSubscription.ts +++ b/packages/clerk-js/src/core/resources/CommerceSubscription.ts @@ -1,39 +1,36 @@ import type { - __experimental_CancelSubscriptionParams, - __experimental_CommerceSubscriptionJSON, - __experimental_CommerceSubscriptionPlanPeriod, - __experimental_CommerceSubscriptionResource, - __experimental_CommerceSubscriptionStatus, + CancelSubscriptionParams, + CommerceSubscriptionJSON, + CommerceSubscriptionPlanPeriod, + CommerceSubscriptionResource, + CommerceSubscriptionStatus, DeletedObjectJSON, } from '@clerk/types'; -import { __experimental_CommercePlan, BaseResource, DeletedObject } from './internal'; +import { BaseResource, CommercePlan, DeletedObject } from './internal'; -export class __experimental_CommerceSubscription - extends BaseResource - implements __experimental_CommerceSubscriptionResource -{ +export class CommerceSubscription extends BaseResource implements CommerceSubscriptionResource { id!: string; paymentSourceId!: string; - plan!: __experimental_CommercePlan; - planPeriod!: __experimental_CommerceSubscriptionPlanPeriod; - status!: __experimental_CommerceSubscriptionStatus; + plan!: CommercePlan; + planPeriod!: CommerceSubscriptionPlanPeriod; + status!: CommerceSubscriptionStatus; periodStart!: number; periodEnd!: number; canceledAt!: number | null; - constructor(data: __experimental_CommerceSubscriptionJSON) { + constructor(data: CommerceSubscriptionJSON) { super(); this.fromJSON(data); } - protected fromJSON(data: __experimental_CommerceSubscriptionJSON | null): this { + protected fromJSON(data: CommerceSubscriptionJSON | null): this { if (!data) { return this; } this.id = data.id; this.paymentSourceId = data.payment_source_id; - this.plan = new __experimental_CommercePlan(data.plan); + this.plan = new CommercePlan(data.plan); this.planPeriod = data.plan_period; this.status = data.status; this.periodStart = data.period_start; @@ -42,7 +39,7 @@ export class __experimental_CommerceSubscription return this; } - public async cancel(params: __experimental_CancelSubscriptionParams) { + public async cancel(params: CancelSubscriptionParams) { const { orgId } = params; const json = ( await BaseResource._fetch({ diff --git a/packages/clerk-js/src/core/resources/Environment.ts b/packages/clerk-js/src/core/resources/Environment.ts index 9a13e2211cc..e0bb18b426b 100644 --- a/packages/clerk-js/src/core/resources/Environment.ts +++ b/packages/clerk-js/src/core/resources/Environment.ts @@ -1,6 +1,6 @@ import type { - __experimental_CommerceSettingsResource, AuthConfigResource, + CommerceSettingsResource, DisplayConfigResource, EnvironmentJSON, EnvironmentJSONSnapshot, @@ -10,7 +10,7 @@ import type { } from '@clerk/types'; import { eventBus, events } from '../../core/events'; -import { __experimental_CommerceSettings, AuthConfig, BaseResource, DisplayConfig, UserSettings } from './internal'; +import { AuthConfig, BaseResource, CommerceSettings, DisplayConfig, UserSettings } from './internal'; import { OrganizationSettings } from './OrganizationSettings'; export class Environment extends BaseResource implements EnvironmentResource { @@ -22,7 +22,7 @@ export class Environment extends BaseResource implements EnvironmentResource { pathRoot = '/environment'; userSettings: UserSettingsResource = new UserSettings(); organizationSettings: OrganizationSettingsResource = new OrganizationSettings(); - __experimental_commerceSettings: __experimental_CommerceSettingsResource = new __experimental_CommerceSettings(); + commerceSettings: CommerceSettingsResource = new CommerceSettings(); public static getInstance(): Environment { if (!Environment.instance) { @@ -48,7 +48,7 @@ export class Environment extends BaseResource implements EnvironmentResource { this.maintenanceMode = this.withDefault(data.maintenance_mode, this.maintenanceMode); this.organizationSettings = new OrganizationSettings(data.organization_settings); this.userSettings = new UserSettings(data.user_settings); - this.__experimental_commerceSettings = new __experimental_CommerceSettings(data.commerce_settings); + this.commerceSettings = new CommerceSettings(data.commerce_settings); return this; } @@ -87,7 +87,7 @@ export class Environment extends BaseResource implements EnvironmentResource { maintenance_mode: this.maintenanceMode, organization_settings: this.organizationSettings.__internal_toSnapshot(), user_settings: this.userSettings.__internal_toSnapshot(), - commerce_settings: this.__experimental_commerceSettings.__internal_toSnapshot(), + commerce_settings: this.commerceSettings.__internal_toSnapshot(), }; } } diff --git a/packages/clerk-js/src/core/resources/Organization.ts b/packages/clerk-js/src/core/resources/Organization.ts index e452cb35742..41307a1be5c 100644 --- a/packages/clerk-js/src/core/resources/Organization.ts +++ b/packages/clerk-js/src/core/resources/Organization.ts @@ -1,16 +1,16 @@ import type { - __experimental_CommerceSubscriptionJSON, - __experimental_CommerceSubscriptionResource, - __experimental_GetSubscriptionsParams, AddMemberParams, ClerkPaginatedResponse, ClerkResourceReloadParams, + CommerceSubscriptionJSON, + CommerceSubscriptionResource, CreateOrganizationParams, GetDomainsParams, GetInvitationsParams, GetMembershipRequestParams, GetMemberships, GetRolesParams, + GetSubscriptionsParams, InviteMemberParams, InviteMembersParams, OrganizationDomainJSON, @@ -31,12 +31,7 @@ import type { import { convertPageToOffsetSearchParams } from '../../utils/convertPageToOffsetSearchParams'; import { unixEpochToDate } from '../../utils/date'; -import { - __experimental_CommerceSubscription, - BaseResource, - OrganizationInvitation, - OrganizationMembership, -} from './internal'; +import { BaseResource, CommerceSubscription, OrganizationInvitation, OrganizationMembership } from './internal'; import { OrganizationDomain } from './OrganizationDomain'; import { OrganizationMembershipRequest } from './OrganizationMembershipRequest'; import { Role } from './Role'; @@ -237,20 +232,20 @@ export class Organization extends BaseResource implements OrganizationResource { }).then(res => new OrganizationMembership(res?.response as OrganizationMembershipJSON)); }; - __experimental_getSubscriptions = async ( - getSubscriptionsParams?: __experimental_GetSubscriptionsParams, - ): Promise> => { + getSubscriptions = async ( + getSubscriptionsParams?: GetSubscriptionsParams, + ): Promise> => { return await BaseResource._fetch({ path: `/organizations/${this.id}/subscriptions`, method: 'GET', search: convertPageToOffsetSearchParams(getSubscriptionsParams), }).then(res => { const { data: subscriptions, total_count } = - res?.response as unknown as ClerkPaginatedResponse<__experimental_CommerceSubscriptionJSON>; + res?.response as unknown as ClerkPaginatedResponse; return { total_count, - data: subscriptions.map(subscription => new __experimental_CommerceSubscription(subscription)), + data: subscriptions.map(subscription => new CommerceSubscription(subscription)), }; }); }; 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 1bfc20011b4..3e85a3566ee 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 @@ -275,7 +275,13 @@ exports[`Environment __internal_toSnapshot() 1`] = ` exports[`Environment defaults values when instantiated without arguments 1`] = ` Environment { - "__experimental_commerceSettings": __experimental_CommerceSettings { + "authConfig": AuthConfig { + "claimedAt": null, + "pathRoot": "", + "reverification": false, + "singleSessionMode": false, + }, + "commerceSettings": CommerceSettings { "billing": { "enabled": false, "hasPaidOrgPlans": false, @@ -284,12 +290,6 @@ Environment { }, "pathRoot": "", }, - "authConfig": AuthConfig { - "claimedAt": null, - "pathRoot": "", - "reverification": false, - "singleSessionMode": false, - }, "displayConfig": DisplayConfig { "afterCreateOrganizationUrl": "", "afterJoinWaitlistUrl": "", @@ -506,7 +506,13 @@ Environment { exports[`Environment has the same initial properties 1`] = ` Environment { - "__experimental_commerceSettings": __experimental_CommerceSettings { + "authConfig": AuthConfig { + "claimedAt": null, + "pathRoot": "", + "reverification": true, + "singleSessionMode": true, + }, + "commerceSettings": CommerceSettings { "billing": { "enabled": false, "hasPaidOrgPlans": false, @@ -515,12 +521,6 @@ Environment { }, "pathRoot": "", }, - "authConfig": AuthConfig { - "claimedAt": null, - "pathRoot": "", - "reverification": true, - "singleSessionMode": true, - }, "displayConfig": DisplayConfig { "afterCreateOrganizationUrl": "", "afterJoinWaitlistUrl": "", diff --git a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Organization.test.ts.snap b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Organization.test.ts.snap index 39122a1625d..c75d48deaf9 100644 --- a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Organization.test.ts.snap +++ b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Organization.test.ts.snap @@ -2,7 +2,6 @@ exports[`Organization has the same initial properties 1`] = ` Organization { - "__experimental_getSubscriptions": [Function], "addMember": [Function], "adminDeleteEnabled": true, "createDomain": [Function], @@ -14,6 +13,7 @@ Organization { "getMembershipRequests": [Function], "getMemberships": [Function], "getRoles": [Function], + "getSubscriptions": [Function], "hasImage": true, "id": "test_id", "imageUrl": "https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18xbHlXRFppb2JyNjAwQUtVZVFEb1NsckVtb00iLCJyaWQiOiJ1c2VyXzJKbElJQTN2VXNjWXh1N2VUMnhINmFrTGgxOCIsImluaXRpYWxzIjoiREsifQ?width=160", diff --git a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap index 1196d8108d4..f5ef5e33515 100644 --- a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap +++ b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap @@ -6,7 +6,6 @@ OrganizationMembership { "destroy": [Function], "id": "test_id", "organization": Organization { - "__experimental_getSubscriptions": [Function], "addMember": [Function], "adminDeleteEnabled": true, "createDomain": [Function], @@ -18,6 +17,7 @@ OrganizationMembership { "getMembershipRequests": [Function], "getMemberships": [Function], "getRoles": [Function], + "getSubscriptions": [Function], "hasImage": true, "id": "test_org_id", "imageUrl": "https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18xbHlXRFppb2JyNjAwQUtVZVFEb1NsckVtb00iLCJyaWQiOiJ1c2VyXzJKbElJQTN2VXNjWXh1N2VUMnhINmFrTGgxOCIsImluaXRpYWxzIjoiREsifQ?width=160", diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx index fdb327bd0ef..462ab15f2b2 100644 --- a/packages/clerk-js/src/ui/Components.tsx +++ b/packages/clerk-js/src/ui/Components.tsx @@ -1,7 +1,7 @@ import { createDeferredPromise } from '@clerk/shared/utils'; import type { - __experimental_CheckoutProps, - __experimental_PlanDetailsProps, + __internal_CheckoutProps, + __internal_PlanDetailsProps, __internal_UserVerificationProps, Appearance, Clerk, @@ -110,9 +110,9 @@ export type ComponentControls = { openDrawer: ( drawer: T, props: T extends 'checkout' - ? __experimental_CheckoutProps + ? __internal_CheckoutProps : T extends 'planDetails' - ? __experimental_PlanDetailsProps + ? __internal_PlanDetailsProps : never, ) => void; closeDrawer: ( @@ -155,11 +155,11 @@ interface ComponentsState { waitlistModal: null | WaitlistProps; checkoutDrawer: { open: false; - props: null | __experimental_CheckoutProps; + props: null | __internal_CheckoutProps; }; planDetailsDrawer: { open: false; - props: null | __experimental_PlanDetailsProps; + props: null | __internal_PlanDetailsProps; }; nodes: Map; impersonationFab: boolean; diff --git a/packages/clerk-js/src/ui/components/Checkout/Checkout.tsx b/packages/clerk-js/src/ui/components/Checkout/Checkout.tsx index 03ef90b08a6..51acaac457a 100644 --- a/packages/clerk-js/src/ui/components/Checkout/Checkout.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/Checkout.tsx @@ -1,16 +1,16 @@ -import type { __experimental_CheckoutProps } from '@clerk/types'; +import type { __internal_CheckoutProps } from '@clerk/types'; -import { __experimental_CheckoutContext, SubscriberTypeContext } from '../../contexts'; +import { CheckoutContext, SubscriberTypeContext } from '../../contexts'; import { Flow } from '../../customizables'; import { Drawer } from '../../elements'; import { CheckoutPage } from './CheckoutPage'; -export const __experimental_Checkout = (props: __experimental_CheckoutProps) => { +export const Checkout = (props: __internal_CheckoutProps) => { return ( - <__experimental_CheckoutContext.Provider + - + diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx index c0b07594d76..9a430e946be 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx @@ -1,4 +1,4 @@ -import type { __experimental_CommerceCheckoutResource } from '@clerk/types'; +import type { CommerceCheckoutResource } from '@clerk/types'; import { Box, Button, descriptors, Heading, Icon, localizationKeys, Span, Text } from '../../customizables'; import { Drawer, LineItems, useDrawerContext } from '../../elements'; @@ -7,7 +7,7 @@ import { formatDate } from '../../utils'; const capitalize = (name: string) => name[0].toUpperCase() + name.slice(1); -export const CheckoutComplete = ({ checkout }: { checkout: __experimental_CommerceCheckoutResource }) => { +export const CheckoutComplete = ({ checkout }: { checkout: CommerceCheckoutResource }) => { const { setIsOpen } = useDrawerContext(); const handleClose = () => { diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index 13721a6872a..9253d3dc6b7 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -1,11 +1,11 @@ import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { - __experimental_CommerceCheckoutResource, - __experimental_CommerceMoney, - __experimental_CommercePaymentSourceResource, - __experimental_ConfirmCheckoutParams, ClerkAPIError, ClerkRuntimeError, + CommerceCheckoutResource, + CommerceMoney, + CommercePaymentSourceResource, + ConfirmCheckoutParams, } from '@clerk/types'; import type { SetupIntent } from '@stripe/stripe-js'; import { useMemo, useState } from 'react'; @@ -25,8 +25,8 @@ export const CheckoutForm = ({ checkout, onCheckoutComplete, }: { - checkout: __experimental_CommerceCheckoutResource; - onCheckoutComplete: (checkout: __experimental_CommerceCheckoutResource) => void; + checkout: CommerceCheckoutResource; + onCheckoutComplete: (checkout: CommerceCheckoutResource) => void; }) => { const { plan, planPeriod, totals } = checkout; @@ -118,16 +118,16 @@ const CheckoutFormElements = ({ checkout, onCheckoutComplete, }: { - checkout: __experimental_CommerceCheckoutResource; - onCheckoutComplete: (checkout: __experimental_CommerceCheckoutResource) => void; + checkout: CommerceCheckoutResource; + onCheckoutComplete: (checkout: CommerceCheckoutResource) => void; }) => { - const { __experimental_commerce } = useClerk(); + const { commerce } = useClerk(); const { user } = useUser(); const { organization } = useOrganization(); const { subscriberType } = useCheckoutContext(); const { data } = useFetch( - __experimental_commerce?.getPaymentSources, + commerce?.getPaymentSources, { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), }, @@ -142,7 +142,7 @@ const CheckoutFormElements = ({ const { data: paymentSources } = data || { data: [] }; - const confirmCheckout = async (params: __experimental_ConfirmCheckoutParams) => { + const confirmCheckout = async (params: ConfirmCheckoutParams) => { try { const newCheckout = await checkout.confirm({ ...params, @@ -254,15 +254,15 @@ const PaymentSourceMethods = ({ onPaymentSourceSubmit, isSubmitting, }: { - checkout: __experimental_CommerceCheckoutResource; - totalDueNow: __experimental_CommerceMoney; - paymentSources: __experimental_CommercePaymentSourceResource[]; + checkout: CommerceCheckoutResource; + totalDueNow: CommerceMoney; + paymentSources: CommercePaymentSourceResource[]; onPaymentSourceSubmit: React.FormEventHandler; isSubmitting: boolean; }) => { - const [selectedPaymentSource, setSelectedPaymentSource] = useState< - __experimental_CommercePaymentSourceResource | undefined - >(checkout.paymentSource || paymentSources.find(p => p.isDefault)); + const [selectedPaymentSource, setSelectedPaymentSource] = useState( + checkout.paymentSource || paymentSources.find(p => p.isDefault), + ); const options = useMemo(() => { return paymentSources.map(source => { diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx index 7391d079d02..a2b870bc78f 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx @@ -1,4 +1,4 @@ -import type { __experimental_CheckoutProps, __experimental_CommerceCheckoutResource } from '@clerk/types'; +import type { __internal_CheckoutProps, CommerceCheckoutResource } from '@clerk/types'; import { Alert, Box, localizationKeys, Spinner } from '../../customizables'; import { Drawer, useDrawerContext } from '../../elements'; @@ -7,7 +7,7 @@ import { EmailForm } from '../UserProfile/EmailForm'; import { CheckoutComplete } from './CheckoutComplete'; import { CheckoutForm } from './CheckoutForm'; -export const CheckoutPage = (props: __experimental_CheckoutProps) => { +export const CheckoutPage = (props: __internal_CheckoutProps) => { const { planId, planPeriod, subscriberType, onSubscriptionComplete } = props; const { setIsOpen } = useDrawerContext(); @@ -17,7 +17,7 @@ export const CheckoutPage = (props: __experimental_CheckoutProps) => { subscriberType, }); - const onCheckoutComplete = (newCheckout: __experimental_CommerceCheckoutResource) => { + const onCheckoutComplete = (newCheckout: CommerceCheckoutResource) => { invalidate(); // invalidate the initial checkout on complete updateCheckout(newCheckout); onSubscriptionComplete?.(); diff --git a/packages/clerk-js/src/ui/components/Invoices/InvoicesList.tsx b/packages/clerk-js/src/ui/components/Invoices/InvoicesList.tsx index b8ca2a6544a..76c2600fcfd 100644 --- a/packages/clerk-js/src/ui/components/Invoices/InvoicesList.tsx +++ b/packages/clerk-js/src/ui/components/Invoices/InvoicesList.tsx @@ -1,4 +1,4 @@ -import type { __experimental_CommerceInvoiceResource, __experimental_CommerceInvoiceStatus } from '@clerk/types'; +import type { CommerceInvoiceResource, CommerceInvoiceStatus } from '@clerk/types'; import React from 'react'; import { useInvoicesContext } from '../../contexts'; @@ -50,7 +50,7 @@ export const InvoicesList = () => { ); }; -const InvoicesListRow = ({ invoice }: { invoice: __experimental_CommerceInvoiceResource }) => { +const InvoicesListRow = ({ invoice }: { invoice: CommerceInvoiceResource }) => { const { paymentDueOn, id, @@ -58,7 +58,7 @@ const InvoicesListRow = ({ invoice }: { invoice: __experimental_CommerceInvoiceR totals: { grandTotal }, } = invoice; const { navigate } = useRouter(); - const badgeColorSchemeMap: Record<__experimental_CommerceInvoiceStatus, 'success' | 'warning' | 'danger'> = { + const badgeColorSchemeMap: Record = { paid: 'success', unpaid: 'warning', past_due: 'danger', diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx index 8da2d3e33a9..141cb14bc2a 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx @@ -1,7 +1,7 @@ import { - __experimental_PricingTableContext, InvoicesContextProvider, PlansContextProvider, + PricingTableContext, SubscriberTypeContext, useSubscriptions, } from '../../contexts'; @@ -20,8 +20,8 @@ import { import { useTabState } from '../../hooks/useTabState'; import { useRouter } from '../../router'; import { InvoicesList } from '../Invoices'; -import { __experimental_PaymentSources } from '../PaymentSources/PaymentSources'; -import { __experimental_PricingTable } from '../PricingTable'; +import { PaymentSources } from '../PaymentSources/PaymentSources'; +import { PricingTable } from '../PricingTable'; import { SubscriptionsList } from '../Subscriptions'; const orgTabMap = { @@ -96,9 +96,9 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => { /> ) : ( - <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}> - <__experimental_PricingTable /> - + + + )} @@ -107,7 +107,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => { - <__experimental_PaymentSources /> + diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx index 418b52484cd..96f12083c9c 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx @@ -1,7 +1,7 @@ -import { __experimental_PricingTableContext, PlansContextProvider, SubscriberTypeContext } from '../../contexts'; +import { PlansContextProvider, PricingTableContext, SubscriberTypeContext } from '../../contexts'; import { Header } from '../../elements'; import { useRouter } from '../../router'; -import { __experimental_PricingTable } from '../PricingTable/PricingTable'; +import { PricingTable } from '../PricingTable/PricingTable'; const OrganizationPlansPageInternal = () => { const { navigate } = useRouter(); @@ -17,9 +17,9 @@ const OrganizationPlansPageInternal = () => { - <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}> - <__experimental_PricingTable /> - + + + ); }; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx index b921ad969c9..7036ef0cf08 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx @@ -17,7 +17,7 @@ const OrganizationBillingPage = lazy(() => export const OrganizationProfileRoutes = () => { const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot } = useOrganizationProfileContext(); - const { __experimental_commerceSettings } = useEnvironment(); + const { commerceSettings } = useEnvironment(); const customPageRoutesWithContents = pages.contents?.map((customPage, index) => { const shouldFirstCustomItemBeOnRoot = !isGeneralPageRoot && !isMembersPageRoot && index === 0; @@ -60,7 +60,7 @@ export const OrganizationProfileRoutes = () => { - {__experimental_commerceSettings.billing.enabled && __experimental_commerceSettings.billing.hasPaidOrgPlans && ( + {commerceSettings.billing.enabled && commerceSettings.billing.hasPaidOrgPlans && ( diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx index bf283a28d5a..1202fc8c5d6 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx @@ -1,5 +1,5 @@ import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; -import type { __experimental_CommerceCheckoutResource, ClerkAPIError, ClerkRuntimeError } from '@clerk/types'; +import type { ClerkAPIError, ClerkRuntimeError, CommerceCheckoutResource } from '@clerk/types'; import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'; import type { Appearance as StripeAppearance, SetupIntent, Stripe } from '@stripe/stripe-js'; import { loadStripe } from '@stripe/stripe-js'; @@ -16,15 +16,15 @@ import { handleError, normalizeColorString } from '../../utils'; type AddPaymentSourceProps = { onSuccess: (context: { stripeSetupIntent?: SetupIntent }) => Promise; - checkout?: __experimental_CommerceCheckoutResource; + checkout?: CommerceCheckoutResource; submitLabel?: LocalizationKey; cancelAction?: () => void; }; export const AddPaymentSource = (props: AddPaymentSourceProps) => { const { checkout, submitLabel, onSuccess, cancelAction } = props; - const { __experimental_commerce } = useClerk(); - const { __experimental_commerceSettings } = useEnvironment(); + const { commerce } = useClerk(); + const { commerceSettings } = useEnvironment(); const { organization } = useOrganization(); const { user } = useUser(); const subscriberType = useSubscriberTypeContext(); @@ -58,7 +58,7 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => { // if we have a checkout, we can use the checkout's client secret and gateway id // otherwise, we need to initialize a new payment source const { data: initializedPaymentSource, invalidate } = useFetch( - !checkout ? __experimental_commerce.initializePaymentSource : undefined, + !checkout ? commerce.initializePaymentSource : undefined, { gateway: 'stripe', ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), @@ -70,7 +70,7 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => { const externalGatewayId = checkout?.externalGatewayId ?? initializedPaymentSource?.externalGatewayId; const externalClientSecret = checkout?.externalClientSecret ?? initializedPaymentSource?.externalClientSecret; - const stripePublishableKey = __experimental_commerceSettings.billing.stripePublishableKey; + const stripePublishableKey = commerceSettings.billing.stripePublishableKey; useEffect(() => { if (!stripePromiseRef.current && externalGatewayId && stripePublishableKey) { @@ -87,7 +87,7 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => { setStripe(stripeInstance); }); } - }, [externalGatewayId, __experimental_commerceSettings]); + }, [externalGatewayId, commerceSettings]); // invalidate the initialized payment source when the component unmounts useEffect(() => { diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx index c6427cec301..bb9196a82b7 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx @@ -1,13 +1,9 @@ -import type { __experimental_CommercePaymentSourceResource } from '@clerk/types'; +import type { CommercePaymentSourceResource } from '@clerk/types'; import { Badge, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables'; import { ApplePay, CreditCard } from '../../icons'; -export const PaymentSourceRow = ({ - paymentSource, -}: { - paymentSource: __experimental_CommercePaymentSourceResource; -}) => { +export const PaymentSourceRow = ({ paymentSource }: { paymentSource: CommercePaymentSourceResource }) => { return ( void }) => { const { close } = useActionContext(); - const { __experimental_commerce } = useClerk(); + const { commerce } = useClerk(); const subscriberType = useSubscriberTypeContext(); const { organization } = useOrganization(); const onAddPaymentSourceSuccess = async (context: { stripeSetupIntent?: SetupIntent }) => { - await __experimental_commerce.addPaymentSource({ + await commerce.addPaymentSource({ gateway: 'stripe', paymentToken: context.stripeSetupIntent?.payment_method as string, ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), @@ -43,7 +43,7 @@ const RemoveScreen = ({ paymentSource, revalidate, }: { - paymentSource: __experimental_CommercePaymentSourceResource; + paymentSource: CommercePaymentSourceResource; revalidate: () => void; }) => { const { close } = useActionContext(); @@ -93,13 +93,13 @@ const RemoveScreen = ({ }; const PaymentSources = () => { - const { __experimental_commerce } = useClerk(); + const { commerce } = useClerk(); const { organization } = useOrganization(); const subscriberType = useSubscriberTypeContext(); const { user } = useUser(); const { data, revalidate } = useFetch( - __experimental_commerce?.getPaymentSources, + commerce?.getPaymentSources, { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}) }, undefined, `commerce-payment-sources-${user?.id}`, @@ -152,13 +152,11 @@ const PaymentSources = () => { ); }; -export const __experimental_PaymentSources = PaymentSources; - const PaymentSourceMenu = ({ paymentSource, revalidate, }: { - paymentSource: __experimental_CommercePaymentSourceResource; + paymentSource: CommercePaymentSourceResource; revalidate: () => void; }) => { const { open } = useActionContext(); @@ -193,3 +191,5 @@ const PaymentSourceMenu = ({ return ; }; + +export { PaymentSources }; diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx index 9218e73d2f2..6c7fa740fde 100644 --- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx +++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx @@ -1,11 +1,11 @@ import { useClerk, useOrganization } from '@clerk/shared/react'; import type { - __experimental_CommercePlanResource, - __experimental_CommerceSubscriptionPlanPeriod, - __experimental_CommerceSubscriptionResource, - __experimental_PlanDetailsProps, + __internal_PlanDetailsProps, ClerkAPIError, ClerkRuntimeError, + CommercePlanResource, + CommerceSubscriptionPlanPeriod, + CommerceSubscriptionResource, } from '@clerk/types'; import { useState } from 'react'; import * as React from 'react'; @@ -27,7 +27,7 @@ import { Alert, Avatar, Drawer, SegmentedControl, useDrawerContext } from '../.. import { InformationCircle } from '../../icons'; import { formatDate, handleError } from '../../utils'; -export const PlanDetails = (props: __experimental_PlanDetailsProps) => { +export const PlanDetails = (props: __internal_PlanDetailsProps) => { return ( @@ -42,13 +42,13 @@ const _PlanDetails = ({ onSubscriptionCancel, portalId, planPeriod: _planPeriod = 'month', -}: __experimental_PlanDetailsProps) => { +}: __internal_PlanDetailsProps) => { const clerk = useClerk(); const { organization } = useOrganization(); const [showConfirmation, setShowConfirmation] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [cancelError, setCancelError] = useState(); - const [planPeriod, setPlanPeriod] = useState<__experimental_CommerceSubscriptionPlanPeriod>(_planPeriod); + const [planPeriod, setPlanPeriod] = useState(_planPeriod); const { setIsOpen } = useDrawerContext(); const { activeOrUpcomingSubscription, revalidate, buttonPropsForPlan } = usePlansContext(); @@ -305,10 +305,10 @@ const _PlanDetails = ({ * -----------------------------------------------------------------------------------------------*/ interface HeaderProps { - plan: __experimental_CommercePlanResource; - subscription?: __experimental_CommerceSubscriptionResource; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; - setPlanPeriod: (val: __experimental_CommerceSubscriptionPlanPeriod) => void; + plan: CommercePlanResource; + subscription?: CommerceSubscriptionResource; + planPeriod: CommerceSubscriptionPlanPeriod; + setPlanPeriod: (val: CommerceSubscriptionPlanPeriod) => void; closeSlot?: React.ReactNode; } @@ -504,7 +504,7 @@ const Header = React.forwardRef((props, ref) => { setPlanPeriod(value as __experimental_CommerceSubscriptionPlanPeriod)} + onChange={value => setPlanPeriod(value as CommerceSubscriptionPlanPeriod)} > { +export const PricingTable = (props: PricingTableProps) => { const clerk = useClerk(); const { mode = 'mounted' } = usePricingTableContext(); const subscriberType = useSubscriberTypeContext(); @@ -21,9 +17,9 @@ const PricingTable = (props: __experimental_PricingTableProps) => { const { plans, handleSelectPlan } = usePlansContext(); - const [planPeriod, setPlanPeriod] = useState<__experimental_CommerceSubscriptionPlanPeriod>('month'); + const [planPeriod, setPlanPeriod] = useState('month'); - const selectPlan = (plan: __experimental_CommercePlanResource) => { + const selectPlan = (plan: CommercePlanResource) => { if (!clerk.isSignedIn) { return clerk.redirectToSignIn(); } @@ -31,11 +27,11 @@ const PricingTable = (props: __experimental_PricingTableProps) => { handleSelectPlan({ mode, plan, planPeriod }); }; - const { __experimental_commerce } = useClerk(); + const { commerce } = useClerk(); const { user } = useUser(); useFetch( - user ? __experimental_commerce?.getPaymentSources : undefined, + user ? commerce?.getPaymentSources : undefined, { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}), }, @@ -67,5 +63,3 @@ const PricingTable = (props: __experimental_PricingTableProps) => { ); }; - -export const __experimental_PricingTable = PricingTable; diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index 83e64e04244..5f4e6833968 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -1,9 +1,5 @@ import { useClerk } from '@clerk/shared/react'; -import type { - __experimental_CommercePlanResource, - __experimental_CommerceSubscriptionPlanPeriod, - __experimental_PricingTableProps, -} from '@clerk/types'; +import type { CommercePlanResource, CommerceSubscriptionPlanPeriod, PricingTableProps } from '@clerk/types'; import * as React from 'react'; import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID, USER_PROFILE_CARD_SCROLLBOX_ID } from '../../constants'; @@ -31,13 +27,13 @@ import { common, InternalThemeProvider } from '../../styledSystem'; import { colors } from '../../utils'; interface PricingTableDefaultProps { - plans?: __experimental_CommercePlanResource[] | null; - highlightedPlan?: __experimental_CommercePlanResource['slug']; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; - setPlanPeriod: (val: __experimental_CommerceSubscriptionPlanPeriod) => void; - onSelect: (plan: __experimental_CommercePlanResource) => void; + plans?: CommercePlanResource[] | null; + highlightedPlan?: CommercePlanResource['slug']; + planPeriod: CommerceSubscriptionPlanPeriod; + setPlanPeriod: (val: CommerceSubscriptionPlanPeriod) => void; + onSelect: (plan: CommercePlanResource) => void; isCompact?: boolean; - props: __experimental_PricingTableProps; + props: PricingTableProps; } export function PricingTableDefault({ @@ -93,12 +89,12 @@ export function PricingTableDefault({ * -----------------------------------------------------------------------------------------------*/ interface CardProps { - plan: __experimental_CommercePlanResource; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; - setPlanPeriod: (p: __experimental_CommerceSubscriptionPlanPeriod) => void; - onSelect: (plan: __experimental_CommercePlanResource) => void; + plan: CommercePlanResource; + planPeriod: CommerceSubscriptionPlanPeriod; + setPlanPeriod: (p: CommerceSubscriptionPlanPeriod) => void; + onSelect: (plan: CommercePlanResource) => void; isCompact?: boolean; - props: __experimental_PricingTableProps; + props: PricingTableProps; } function Card(props: CardProps) { @@ -210,10 +206,10 @@ function Card(props: CardProps) { * -----------------------------------------------------------------------------------------------*/ interface CardHeaderProps { - plan: __experimental_CommercePlanResource; + plan: CommercePlanResource; isCompact?: boolean; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; - setPlanPeriod: (val: __experimental_CommerceSubscriptionPlanPeriod) => void; + planPeriod: CommerceSubscriptionPlanPeriod; + setPlanPeriod: (val: CommerceSubscriptionPlanPeriod) => void; } const CardHeader = React.forwardRef((props, ref) => { @@ -414,7 +410,7 @@ const CardHeader = React.forwardRef((props, ref setPlanPeriod(value as __experimental_CommerceSubscriptionPlanPeriod)} + onChange={value => setPlanPeriod(value as CommerceSubscriptionPlanPeriod)} > ((props, ref * -----------------------------------------------------------------------------------------------*/ interface CardFeaturesListProps { - plan: __experimental_CommercePlanResource; + plan: CommercePlanResource; /** * @default false */ diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx index 3f473307426..348d7165d1a 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx @@ -1,4 +1,4 @@ -import type { __experimental_CommercePlanResource, __experimental_CommerceSubscriptionPlanPeriod } from '@clerk/types'; +import type { CommercePlanResource, CommerceSubscriptionPlanPeriod } from '@clerk/types'; import * as React from 'react'; import { usePlansContext } from '../../contexts'; @@ -22,11 +22,11 @@ import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../ import { colors } from '../../utils'; interface PricingTableMatrixProps { - plans: __experimental_CommercePlanResource[]; - highlightedPlan?: __experimental_CommercePlanResource['slug']; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; - setPlanPeriod: (val: __experimental_CommerceSubscriptionPlanPeriod) => void; - onSelect: (plan: __experimental_CommercePlanResource) => void; + plans: CommercePlanResource[]; + highlightedPlan?: CommercePlanResource['slug']; + planPeriod: CommerceSubscriptionPlanPeriod; + setPlanPeriod: (val: CommerceSubscriptionPlanPeriod) => void; + onSelect: (plan: CommercePlanResource) => void; } export function PricingTableMatrix({ @@ -135,7 +135,7 @@ export function PricingTableMatrix({ setPlanPeriod(value as __experimental_CommerceSubscriptionPlanPeriod)} + onChange={value => setPlanPeriod(value as CommerceSubscriptionPlanPeriod)} > { + const handleSelectSubscription = (subscription: CommerceSubscriptionResource) => { handleSelectPlan({ mode: 'modal', // always modal for now plan: subscription.plan, diff --git a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx index bf4662943ab..4eba38f2336 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx @@ -1,7 +1,7 @@ import { - __experimental_PricingTableContext, InvoicesContextProvider, PlansContextProvider, + PricingTableContext, SubscriberTypeContext, useSubscriptions, } from '../../contexts'; @@ -20,8 +20,8 @@ import { import { useTabState } from '../../hooks/useTabState'; import { useRouter } from '../../router'; import { InvoicesList } from '../Invoices'; -import { __experimental_PaymentSources } from '../PaymentSources'; -import { __experimental_PricingTable } from '../PricingTable'; +import { PaymentSources } from '../PaymentSources/PaymentSources'; +import { PricingTable } from '../PricingTable'; import { SubscriptionsList } from '../Subscriptions'; const tabMap = { @@ -98,9 +98,9 @@ const BillingPageInternal = withCardStateProvider(() => { /> ) : ( - <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}> - <__experimental_PricingTable /> - + + + )} @@ -109,7 +109,7 @@ const BillingPageInternal = withCardStateProvider(() => { - <__experimental_PaymentSources /> + diff --git a/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx index 0144b9a3dd9..b5cee8eaa84 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx @@ -1,7 +1,7 @@ -import { __experimental_PricingTableContext, PlansContextProvider, SubscriberTypeContext } from '../../contexts'; +import { PlansContextProvider, PricingTableContext, SubscriberTypeContext } from '../../contexts'; import { Header } from '../../elements'; import { useRouter } from '../../router'; -import { __experimental_PricingTable } from '../PricingTable/PricingTable'; +import { PricingTable } from '../PricingTable/PricingTable'; const PlansPageInternal = () => { const { navigate } = useRouter(); @@ -25,9 +25,9 @@ const PlansPageInternal = () => { - <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}> - <__experimental_PricingTable /> - + + + ); }; diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx index 5cfd852b1f0..7d7cc93154f 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx @@ -17,7 +17,7 @@ const BillingPage = lazy(() => export const UserProfileRoutes = () => { const { pages } = useUserProfileContext(); - const { __experimental_commerceSettings } = useEnvironment(); + const { commerceSettings } = useEnvironment(); const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT; const isSecurityPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.SECURITY; @@ -57,30 +57,29 @@ export const UserProfileRoutes = () => { - {__experimental_commerceSettings.billing.enabled && - __experimental_commerceSettings.billing.hasPaidUserPlans && ( - - - - - - - - - {/* TODO(@commerce): Should this be lazy loaded ? */} - - - - - - {/* TODO(@commerce): Should this be lazy loaded ? */} - - - - - - - )} + {commerceSettings.billing.enabled && commerceSettings.billing.hasPaidUserPlans && ( + + + + + + + + + {/* TODO(@commerce): Should this be lazy loaded ? */} + + + + + + {/* TODO(@commerce): Should this be lazy loaded ? */} + + + + + + + )} ); diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx index 868cec35345..7096376861e 100644 --- a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx +++ b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx @@ -1,15 +1,15 @@ -import type { __experimental_PricingTableProps, UserButtonProps, WaitlistProps } from '@clerk/types'; +import type { PricingTableProps, UserButtonProps, WaitlistProps } from '@clerk/types'; import type { ReactNode } from 'react'; import type { AvailableComponentName, AvailableComponentProps } from '../types'; import { - __experimental_PricingTableContext, CreateOrganizationContext, GoogleOneTapContext, OrganizationListContext, OrganizationProfileContext, OrganizationSwitcherContext, PlansContextProvider, + PricingTableContext, SignInContext, SignUpContext, SubscriberTypeContext, @@ -83,15 +83,11 @@ export function ComponentContextProvider({ ); case 'PricingTable': return ( - + - <__experimental_PricingTableContext.Provider - value={{ componentName, ...(props as __experimental_PricingTableProps) }} - > + {children} - + ); diff --git a/packages/clerk-js/src/ui/contexts/components/Checkout.ts b/packages/clerk-js/src/ui/contexts/components/Checkout.ts index 58809fa6688..9e70e8bc98d 100644 --- a/packages/clerk-js/src/ui/contexts/components/Checkout.ts +++ b/packages/clerk-js/src/ui/contexts/components/Checkout.ts @@ -1,11 +1,11 @@ import { createContext, useContext } from 'react'; -import type { __experimental_CheckoutCtx } from '../../types'; +import type { CheckoutCtx } from '../../types'; -export const __experimental_CheckoutContext = createContext<__experimental_CheckoutCtx | null>(null); +export const CheckoutContext = createContext(null); export const useCheckoutContext = () => { - const context = useContext(__experimental_CheckoutContext); + const context = useContext(CheckoutContext); if (!context || context.componentName !== 'Checkout') { throw new Error('Clerk: useCheckoutContext called outside Checkout.'); diff --git a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx b/packages/clerk-js/src/ui/contexts/components/Invoices.tsx index 64115c9cca1..5495c4f188a 100644 --- a/packages/clerk-js/src/ui/contexts/components/Invoices.tsx +++ b/packages/clerk-js/src/ui/contexts/components/Invoices.tsx @@ -3,19 +3,19 @@ import type { PropsWithChildren } from 'react'; import { createContext, useContext } from 'react'; import { useFetch } from '../../hooks'; -import type { __experimental_InvoicesCtx } from '../../types'; +import type { InvoicesCtx } from '../../types'; import { useSubscriberTypeContext } from './SubscriberType'; -const InvoicesContext = createContext<__experimental_InvoicesCtx | null>(null); +const InvoicesContext = createContext(null); export const InvoicesContextProvider = ({ children }: PropsWithChildren) => { - const { __experimental_commerce } = useClerk(); + const { commerce } = useClerk(); const { organization } = useOrganization(); const subscriberType = useSubscriberTypeContext(); const { user } = useUser(); const { data, isLoading, revalidate } = useFetch( - __experimental_commerce?.__experimental_billing.getInvoices, + commerce?.billing.getInvoices, { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}) }, undefined, `commerce-invoices-${user?.id}`, diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx index 5591a0870ce..11c4c7025a6 100644 --- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx +++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx @@ -1,9 +1,9 @@ import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { - __experimental_CommercePlanResource, - __experimental_CommerceSubscriberType, - __experimental_CommerceSubscriptionPlanPeriod, - __experimental_CommerceSubscriptionResource, + CommercePlanResource, + CommerceSubscriberType, + CommerceSubscriptionPlanPeriod, + CommerceSubscriptionResource, } from '@clerk/types'; import type { PropsWithChildren } from 'react'; import { createContext, useCallback, useContext, useMemo } from 'react'; @@ -12,17 +12,17 @@ import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID, USER_PROFILE_CARD_SCROLLBOX_ID import { useFetch } from '../../hooks'; import type { LocalizationKey } from '../../localization'; import { localizationKeys } from '../../localization'; -import type { __experimental_PlansCtx } from '../../types'; +import type { PlansCtx } from '../../types'; import { useSubscriberTypeContext } from './SubscriberType'; -const PlansContext = createContext<__experimental_PlansCtx | null>(null); +const PlansContext = createContext(null); -export const useSubscriptions = (subscriberType?: __experimental_CommerceSubscriberType) => { - const { __experimental_commerce } = useClerk(); +export const useSubscriptions = (subscriberType?: CommerceSubscriberType) => { + const { commerce } = useClerk(); const { organization } = useOrganization(); const { user } = useUser(); return useFetch( - user ? __experimental_commerce?.__experimental_billing.getSubscriptions : undefined, + user ? commerce?.billing.getSubscriptions : undefined, { orgId: subscriberType === 'org' ? organization?.id : undefined }, undefined, `commerce-subscriptions-${user?.id}`, @@ -30,7 +30,7 @@ export const useSubscriptions = (subscriberType?: __experimental_CommerceSubscri }; export const PlansContextProvider = ({ children }: PropsWithChildren) => { - const { __experimental_commerce } = useClerk(); + const { commerce } = useClerk(); const { organization } = useOrganization(); const { user } = useUser(); const subscriberType = useSubscriberTypeContext(); @@ -44,12 +44,7 @@ export const PlansContextProvider = ({ children }: PropsWithChildren) => { data: plans, isLoading: isLoadingPlans, revalidate: revalidatePlans, - } = useFetch( - __experimental_commerce?.__experimental_billing.getPlans, - { subscriberType }, - undefined, - 'commerce-plans', - ); + } = useFetch(commerce?.billing.getPlans, { subscriberType }, undefined, 'commerce-plans'); // Revalidates the next time the hooks gets mounted const { revalidate: revalidateInvoices } = useFetch( @@ -84,8 +79,8 @@ export const PlansContextProvider = ({ children }: PropsWithChildren) => { }; type HandleSelectPlanProps = { - plan: __experimental_CommercePlanResource; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; + plan: CommercePlanResource; + planPeriod: CommerceSubscriptionPlanPeriod; onSubscriptionChange?: () => void; mode?: 'modal' | 'mounted'; }; @@ -103,7 +98,7 @@ export const usePlansContext = () => { // return the active or upcoming subscription for a plan if it exists const activeOrUpcomingSubscription = useCallback( - (plan: __experimental_CommercePlanResource) => { + (plan: CommercePlanResource) => { return ctx.subscriptions.find(subscription => subscription.plan.id === plan.id); }, [ctx.subscriptions], @@ -115,13 +110,7 @@ export const usePlansContext = () => { }, [ctx.subscriptions]); const canManageSubscription = useCallback( - ({ - plan, - subscription: sub, - }: { - plan?: __experimental_CommercePlanResource; - subscription?: __experimental_CommerceSubscriptionResource; - }) => { + ({ plan, subscription: sub }: { plan?: CommercePlanResource; subscription?: CommerceSubscriptionResource }) => { const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined); return !subscription || !subscription.canceledAt; @@ -136,8 +125,8 @@ export const usePlansContext = () => { subscription: sub, isCompact = false, }: { - plan?: __experimental_CommercePlanResource; - subscription?: __experimental_CommerceSubscriptionResource; + plan?: CommercePlanResource; + subscription?: CommerceSubscriptionResource; isCompact?: boolean; }): { localizationKey: LocalizationKey; variant: 'bordered' | 'solid'; colorScheme: 'secondary' | 'primary' } => { const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined); @@ -158,7 +147,7 @@ export const usePlansContext = () => { [activeOrUpcomingSubscription], ); - const captionForSubscription = useCallback((subscription: __experimental_CommerceSubscriptionResource) => { + const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => { if (subscription.status === 'upcoming') { return localizationKeys('badge__startsAt', { date: subscription.periodStart }); } else if (subscription.canceledAt) { diff --git a/packages/clerk-js/src/ui/contexts/components/PricingTable.ts b/packages/clerk-js/src/ui/contexts/components/PricingTable.ts index 862a0921c2d..b9843406cd5 100644 --- a/packages/clerk-js/src/ui/contexts/components/PricingTable.ts +++ b/packages/clerk-js/src/ui/contexts/components/PricingTable.ts @@ -1,11 +1,11 @@ import { createContext, useContext } from 'react'; -import type { __experimental_PricingTableCtx } from '../../types'; +import type { PricingTableCtx } from '../../types'; -export const __experimental_PricingTableContext = createContext<__experimental_PricingTableCtx | null>(null); +export const PricingTableContext = createContext(null); export const usePricingTableContext = () => { - const context = useContext(__experimental_PricingTableContext); + const context = useContext(PricingTableContext); if (!context || context.componentName !== 'PricingTable') { throw new Error('Clerk: usePricingTableContext called outside PricingTable.'); diff --git a/packages/clerk-js/src/ui/hooks/useCheckout.ts b/packages/clerk-js/src/ui/hooks/useCheckout.ts index 68e05ef6d2f..95c18e32fd2 100644 --- a/packages/clerk-js/src/ui/hooks/useCheckout.ts +++ b/packages/clerk-js/src/ui/hooks/useCheckout.ts @@ -1,18 +1,14 @@ import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; -import type { - __experimental_CheckoutProps, - __experimental_CommerceCheckoutResource, - ClerkAPIError, -} from '@clerk/types'; +import type { __internal_CheckoutProps, ClerkAPIError, CommerceCheckoutResource } from '@clerk/types'; import { useCallback, useEffect, useState } from 'react'; import { useFetch } from './useFetch'; -export const useCheckout = (props: __experimental_CheckoutProps) => { +export const useCheckout = (props: __internal_CheckoutProps) => { const { planId, planPeriod, subscriberType = 'user' } = props; - const { __experimental_commerce } = useClerk(); + const { commerce } = useClerk(); const { organization } = useOrganization(); - const [currentCheckout, setCurrentCheckout] = useState<__experimental_CommerceCheckoutResource | null>(null); + const [currentCheckout, setCurrentCheckout] = useState(null); const { user } = useUser(); const { @@ -22,7 +18,7 @@ export const useCheckout = (props: __experimental_CheckoutProps) => { revalidate, error, } = useFetch( - __experimental_commerce?.__experimental_billing.startCheckout, + commerce?.billing.startCheckout, { planId, planPeriod, @@ -32,7 +28,7 @@ export const useCheckout = (props: __experimental_CheckoutProps) => { `commerce-checkout-${user?.id}`, ); - const updateCheckout = useCallback((newCheckout: __experimental_CommerceCheckoutResource) => { + const updateCheckout = useCallback((newCheckout: CommerceCheckoutResource) => { setCurrentCheckout(newCheckout); }, []); diff --git a/packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx b/packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx index 36900687c79..b98885cfcd1 100644 --- a/packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx +++ b/packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx @@ -1,5 +1,5 @@ import { useUser } from '@clerk/shared/react'; -import type { __experimental_CheckoutProps, Appearance } from '@clerk/types'; +import type { __internal_CheckoutProps, Appearance } from '@clerk/types'; import { Checkout } from './components'; import { LazyDrawerRenderer } from './providers'; @@ -13,7 +13,7 @@ export function MountedCheckoutDrawer({ onOpenChange: (open: boolean) => void; checkoutDrawer: { open: false; - props: null | __experimental_CheckoutProps; + props: null | __internal_CheckoutProps; }; }) { const { user } = useUser(); diff --git a/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx b/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx index 83c72a66b05..86c82ff1228 100644 --- a/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx +++ b/packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx @@ -1,5 +1,5 @@ import { useUser } from '@clerk/shared/react'; -import type { __experimental_PlanDetailsProps, Appearance } from '@clerk/types'; +import type { __internal_PlanDetailsProps, Appearance } from '@clerk/types'; import { PlanDetails } from './components'; import { LazyDrawerRenderer } from './providers'; @@ -13,7 +13,7 @@ export function MountedPlanDetailDrawer({ onOpenChange: (open: boolean) => void; planDetailsDrawer: { open: false; - props: null | __experimental_PlanDetailsProps; + props: null | __internal_PlanDetailsProps; }; }) { const { user } = useUser(); diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts index 9378632fa35..eebba1e0a69 100644 --- a/packages/clerk-js/src/ui/lazyModules/components.ts +++ b/packages/clerk-js/src/ui/lazyModules/components.ts @@ -93,12 +93,10 @@ export const KeylessPrompt = lazy(() => ); export const PricingTable = lazy(() => - componentImportPaths.PricingTable().then(module => ({ default: module.__experimental_PricingTable })), + componentImportPaths.PricingTable().then(module => ({ default: module.PricingTable })), ); -export const Checkout = lazy(() => - componentImportPaths.Checkout().then(module => ({ default: module.__experimental_Checkout })), -); +export const Checkout = lazy(() => componentImportPaths.Checkout().then(module => ({ default: module.Checkout }))); export const PlanDetails = lazy(() => componentImportPaths.PlanDetails().then(module => ({ default: module.PlanDetails })), diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index 66e6061196d..a443a89cf1d 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/packages/clerk-js/src/ui/types.ts @@ -1,16 +1,16 @@ import type { - __experimental_CheckoutProps, - __experimental_CommerceInvoiceResource, - __experimental_CommercePlanResource, - __experimental_CommerceSubscriptionResource, - __experimental_PlanDetailsProps, - __experimental_PricingTableProps, + __internal_CheckoutProps, + __internal_PlanDetailsProps, __internal_UserVerificationProps, + CommerceInvoiceResource, + CommercePlanResource, + CommerceSubscriptionResource, CreateOrganizationProps, GoogleOneTapProps, OrganizationListProps, OrganizationProfileProps, OrganizationSwitcherProps, + PricingTableProps, SignInFallbackRedirectUrl, SignInForceRedirectUrl, SignInProps, @@ -46,10 +46,11 @@ export type AvailableComponentProps = | CreateOrganizationProps | OrganizationListProps | WaitlistProps - | __experimental_PricingTableProps - | __experimental_CheckoutProps + | PricingTableProps + | __internal_CheckoutProps | __internal_UserVerificationProps - | __experimental_PlanDetailsProps; + // Do we need this ? + | __internal_PlanDetailsProps; type ComponentMode = 'modal' | 'mounted'; @@ -111,32 +112,32 @@ export type WaitlistCtx = WaitlistProps & { mode?: ComponentMode; }; -export type __experimental_PricingTableCtx = __experimental_PricingTableProps & { +export type PricingTableCtx = PricingTableProps & { componentName: 'PricingTable'; mode?: ComponentMode; }; -export type __experimental_CheckoutCtx = __experimental_CheckoutProps & { +export type CheckoutCtx = __internal_CheckoutProps & { componentName: 'Checkout'; }; -export type __experimental_PaymentSourcesCtx = { +export type PaymentSourcesCtx = { componentName: 'PaymentSources'; }; -export type __experimental_InvoicesCtx = { +export type InvoicesCtx = { componentName: 'Invoices'; - invoices: __experimental_CommerceInvoiceResource[]; + invoices: CommerceInvoiceResource[]; totalCount: number; isLoading: boolean; revalidate: () => void; - getInvoiceById: (invoiceId: string) => __experimental_CommerceInvoiceResource | undefined; + getInvoiceById: (invoiceId: string) => CommerceInvoiceResource | undefined; }; -export type __experimental_PlansCtx = { +export type PlansCtx = { componentName: 'Plans'; - plans: __experimental_CommercePlanResource[]; - subscriptions: __experimental_CommerceSubscriptionResource[]; + plans: CommercePlanResource[]; + subscriptions: CommerceSubscriptionResource[]; isLoading: boolean; revalidate: () => void; }; @@ -158,6 +159,6 @@ export type AvailableComponentCtx = | OrganizationListCtx | GoogleOneTapCtx | WaitlistCtx - | __experimental_PricingTableCtx - | __experimental_CheckoutCtx; + | PricingTableCtx + | CheckoutCtx; export type AvailableComponentName = AvailableComponentCtx['componentName']; diff --git a/packages/clerk-js/src/utils/commerce.ts b/packages/clerk-js/src/utils/commerce.ts index aee05f73bb7..459fe26a5d0 100644 --- a/packages/clerk-js/src/utils/commerce.ts +++ b/packages/clerk-js/src/utils/commerce.ts @@ -1,13 +1,13 @@ import type { - __experimental_CommerceCheckoutTotals, - __experimental_CommerceCheckoutTotalsJSON, - __experimental_CommerceInvoiceTotals, - __experimental_CommerceInvoiceTotalsJSON, - __experimental_CommerceMoney, - __experimental_CommerceMoneyJSON, + CommerceCheckoutTotals, + CommerceCheckoutTotalsJSON, + CommerceInvoiceTotals, + CommerceInvoiceTotalsJSON, + CommerceMoney, + CommerceMoneyJSON, } from '@clerk/types'; -export const commerceMoneyFromJSON = (data: __experimental_CommerceMoneyJSON): __experimental_CommerceMoney => { +export const commerceMoneyFromJSON = (data: CommerceMoneyJSON): CommerceMoney => { return { amount: data.amount, amountFormatted: data.amount_formatted, @@ -16,11 +16,7 @@ export const commerceMoneyFromJSON = (data: __experimental_CommerceMoneyJSON): _ }; }; -export const commerceTotalsFromJSON = < - T extends __experimental_CommerceInvoiceTotalsJSON | __experimental_CommerceCheckoutTotalsJSON, ->( - data: T, -) => { +export const commerceTotalsFromJSON = (data: T) => { const totals = { grandTotal: commerceMoneyFromJSON(data.grand_total), subtotal: commerceMoneyFromJSON(data.subtotal), @@ -42,7 +38,5 @@ export const commerceTotalsFromJSON = < }; } - return totals as T extends { total_due_now: __experimental_CommerceMoneyJSON } - ? __experimental_CommerceCheckoutTotals - : __experimental_CommerceInvoiceTotals; + return totals as T extends { total_due_now: CommerceMoneyJSON } ? CommerceCheckoutTotals : CommerceInvoiceTotals; }; diff --git a/packages/clerk-js/src/utils/componentGuards.ts b/packages/clerk-js/src/utils/componentGuards.ts index 7df6d1cf5b5..1444da564a8 100644 --- a/packages/clerk-js/src/utils/componentGuards.ts +++ b/packages/clerk-js/src/utils/componentGuards.ts @@ -23,13 +23,13 @@ export const disabledOrganizationsFeature: ComponentGuard = (_, environment) => }; export const disabledBillingFeature: ComponentGuard = (_, environment) => { - return !environment?.__experimental_commerceSettings.billing.enabled; + return !environment?.commerceSettings.billing.enabled; }; export const hasPaidOrgPlans: ComponentGuard = (_, environment) => { - return environment?.__experimental_commerceSettings.billing.hasPaidOrgPlans || false; + return environment?.commerceSettings.billing.hasPaidOrgPlans || false; }; export const hasPaidUserPlans: ComponentGuard = (_, environment) => { - return environment?.__experimental_commerceSettings.billing.hasPaidUserPlans || false; + return environment?.commerceSettings.billing.hasPaidUserPlans || false; }; diff --git a/packages/expo/src/web/uiComponents.tsx b/packages/expo/src/web/uiComponents.tsx index b0d9c95ce1d..4f2bfb72050 100644 --- a/packages/expo/src/web/uiComponents.tsx +++ b/packages/expo/src/web/uiComponents.tsx @@ -1,10 +1,10 @@ import { - __experimental_PricingTable as BasePricingTable, CreateOrganization as BaseCreateOrganization, GoogleOneTap as BaseGoogleOneTap, OrganizationList as BaseOrganizationList, OrganizationProfile as BaseOrganizationProfile, OrganizationSwitcher as BaseOrganizationSwitcher, + PricingTable as BasePricingTable, SignIn as BaseSignIn, SignInButton as BaseSignInButton, SignInWithMetamaskButton as BaseSignInWithMetamaskButton, @@ -52,4 +52,4 @@ export const SignInWithMetamaskButton: typeof BaseSignInWithMetamaskButton = WrapComponent(BaseSignInWithMetamaskButton); export const GoogleOneTap: typeof BaseGoogleOneTap = WrapComponent(BaseGoogleOneTap); export const Waitlist: typeof BaseWaitlist = WrapComponent(BaseWaitlist); -export const __experimental_PricingTable: typeof BasePricingTable = WrapComponent(BasePricingTable); +export const PricingTable: typeof BasePricingTable = WrapComponent(BasePricingTable); diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx index 2326c74d83e..dbcc933bf2e 100644 --- a/packages/nextjs/src/client-boundary/uiComponents.tsx +++ b/packages/nextjs/src/client-boundary/uiComponents.tsx @@ -22,7 +22,7 @@ export { UserButton, GoogleOneTap, Waitlist, - __experimental_PricingTable, + PricingTable, } from '@clerk/clerk-react'; // The assignment of UserProfile with BaseUserProfile props is used diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts index 6020c3e723e..c69287ea42e 100644 --- a/packages/nextjs/src/index.ts +++ b/packages/nextjs/src/index.ts @@ -34,7 +34,7 @@ export { UserProfile, GoogleOneTap, Waitlist, - __experimental_PricingTable, + PricingTable, } from './client-boundary/uiComponents'; /** diff --git a/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap index f28a9082fe5..49c10a61589 100644 --- a/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap @@ -13,6 +13,7 @@ exports[`root public exports > should not change unexpectedly 1`] = ` "OrganizationList", "OrganizationProfile", "OrganizationSwitcher", + "PricingTable", "Protect", "RedirectToCreateOrganization", "RedirectToOrganizationProfile", @@ -30,7 +31,6 @@ exports[`root public exports > should not change unexpectedly 1`] = ` "UserButton", "UserProfile", "Waitlist", - "__experimental_PricingTable", "useAuth", "useClerk", "useEmailLink", diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index a6b408fc1d9..f932a18115d 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -9,7 +9,7 @@ export { OrganizationList, GoogleOneTap, Waitlist, - __experimental_PricingTable, + PricingTable, } from './uiComponents'; export { diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index 6384164ce75..efba0fe8130 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -1,11 +1,11 @@ import { logErrorInDevMode } from '@clerk/shared/utils'; import type { - __experimental_PricingTableProps, CreateOrganizationProps, GoogleOneTapProps, OrganizationListProps, OrganizationProfileProps, OrganizationSwitcherProps, + PricingTableProps, SignInProps, SignUpProps, UserButtonProps, @@ -573,8 +573,8 @@ export const Waitlist = withClerk( { component: 'Waitlist', renderWhileLoading: true }, ); -export const __experimental_PricingTable = withClerk( - ({ clerk, component, fallback, ...props }: WithClerkProp<__experimental_PricingTableProps & FallbackProp>) => { +export const PricingTable = withClerk( + ({ clerk, component, fallback, ...props }: WithClerkProp) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === 'rendering' || !clerk.loaded; @@ -588,8 +588,8 @@ export const __experimental_PricingTable = withClerk( {clerk.loaded && ( ); }, - { component: '__experimental_PricingTable', renderWhileLoading: true }, + { component: 'PricingTable', renderWhileLoading: true }, ); diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 5b9e282e060..6cebc4260b7 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -3,10 +3,8 @@ import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus'; import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript'; import { handleValueOrFn } from '@clerk/shared/utils'; import type { - __experimental_CheckoutProps, - __experimental_CommerceNamespace, - __experimental_PlanDetailsProps, - __experimental_PricingTableProps, + __internal_CheckoutProps, + __internal_PlanDetailsProps, __internal_UserVerificationModalProps, __internal_UserVerificationProps, AuthenticateWithCoinbaseWalletParams, @@ -18,6 +16,7 @@ import type { ClerkOptions, ClerkStatus, ClientResource, + CommerceNamespace, CreateOrganizationParams, CreateOrganizationProps, DomainOrProxyUrl, @@ -32,6 +31,7 @@ import type { OrganizationProfileProps, OrganizationResource, OrganizationSwitcherProps, + PricingTableProps, RedirectOptions, SetActiveParams, SignInProps, @@ -94,15 +94,15 @@ type WithVoidReturnFunctions = { type IsomorphicLoadedClerk = Without< WithVoidReturnFunctions, | 'client' + | 'commerce' | '__internal_addNavigationListener' | '__internal_getCachedResources' | '__internal_reloadInitialResources' - | '__experimental_commerce' | '__internal_setComponentNavigationContext' | '__internal_setActiveInProgress' > & { client: ClientResource | undefined; - __experimental_commerce: __experimental_CommerceNamespace | undefined; + commerce: CommerceNamespace | undefined; }; export class IsomorphicClerk implements IsomorphicLoadedClerk { @@ -113,8 +113,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { private preopenOneTap?: null | GoogleOneTapProps = null; private preopenUserVerification?: null | __internal_UserVerificationProps = null; private preopenSignIn?: null | SignInProps = null; - private preopenCheckout?: null | __experimental_CheckoutProps = null; - private preopenPlanDetails?: null | __experimental_PlanDetailsProps = null; + private preopenCheckout?: null | __internal_CheckoutProps = null; + private preopenPlanDetails?: null | __internal_PlanDetailsProps = null; private preopenSignUp?: null | SignUpProps = null; private preopenUserProfile?: null | UserProfileProps = null; private preopenOrganizationProfile?: null | OrganizationProfileProps = null; @@ -130,7 +130,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { private premountOrganizationListNodes = new Map(); private premountMethodCalls = new Map, MethodCallback>(); private premountWaitlistNodes = new Map(); - private premountPricingTableNodes = new Map(); + private premountPricingTableNodes = new Map(); // A separate Map of `addListener` method calls to handle multiple listeners. private premountAddListenerCalls = new Map< ListenerCallback, @@ -597,7 +597,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { }); this.premountPricingTableNodes.forEach((props, node) => { - clerkjs.__experimental_mountPricingTable(node, props); + clerkjs.mountPricingTable(node, props); }); /** @@ -673,8 +673,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } } - get __experimental_commerce(): __experimental_CommerceNamespace | undefined { - return this.clerkjs?.__experimental_commerce; + get commerce(): CommerceNamespace | undefined { + return this.clerkjs?.commerce; } __unstable__setEnvironment(...args: any): void { @@ -728,7 +728,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } }; - __internal_openCheckout = (props?: __experimental_CheckoutProps) => { + __internal_openCheckout = (props?: __internal_CheckoutProps) => { if (this.clerkjs && this.loaded) { this.clerkjs.__internal_openCheckout(props); } else { @@ -744,7 +744,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } }; - __internal_openPlanDetails = (props?: __experimental_PlanDetailsProps) => { + __internal_openPlanDetails = (props?: __internal_PlanDetailsProps) => { if (this.clerkjs && this.loaded) { this.clerkjs.__internal_openPlanDetails(props); } else { @@ -1025,17 +1025,17 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } }; - __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps) => { + mountPricingTable = (node: HTMLDivElement, props?: PricingTableProps) => { if (this.clerkjs && this.loaded) { - this.clerkjs.__experimental_mountPricingTable(node, props); + this.clerkjs.mountPricingTable(node, props); } else { this.premountPricingTableNodes.set(node, props); } }; - __experimental_unmountPricingTable = (node: HTMLDivElement) => { + unmountPricingTable = (node: HTMLDivElement) => { if (this.clerkjs && this.loaded) { - this.clerkjs.__experimental_unmountPricingTable(node); + this.clerkjs.unmountPricingTable(node); } else { this.premountPricingTableNodes.delete(node); } diff --git a/packages/shared/src/react/hooks/useOrganization.tsx b/packages/shared/src/react/hooks/useOrganization.tsx index 12c1fe71d56..b326bf236ab 100644 --- a/packages/shared/src/react/hooks/useOrganization.tsx +++ b/packages/shared/src/react/hooks/useOrganization.tsx @@ -1,11 +1,11 @@ import type { - __experimental_CommerceSubscriptionResource, - __experimental_GetSubscriptionsParams, ClerkPaginatedResponse, + CommerceSubscriptionResource, GetDomainsParams, GetInvitationsParams, GetMembershipRequestParams, GetMembersParams, + GetSubscriptionsParams, OrganizationDomainResource, OrganizationInvitationResource, OrganizationMembershipRequestResource, @@ -34,7 +34,7 @@ export type UseOrganizationParams = { *
    *
  • `enrollmentMode`: A string that filters the domains by the provided [enrollment mode](https://clerk.com/docs/organizations/verified-domains#enrollment-mode).
    • *
  • Any of the properties described in [Shared properties](#shared-properties).
    • - *
+ * . */ domains?: true | PaginatedHookConfig; /** @@ -43,7 +43,7 @@ export type UseOrganizationParams = { *
    *
  • `status`: A string that filters the membership requests by the provided status.
    • *
  • Any of the properties described in [Shared properties](#shared-properties).
    • - *
+ * . */ membershipRequests?: true | PaginatedHookConfig; /** @@ -53,7 +53,7 @@ export type UseOrganizationParams = { *
  • `role`: An array of [`OrganizationCustomRoleKey`](https://clerk.com/docs/references/javascript/types/organization-custom-role-key).
    • *
  • `query`: A string that filters the memberships by the provided string.
    • *
  • Any of the properties described in [Shared properties](#shared-properties).
    • - * + * . */ memberships?: true | PaginatedHookConfig; /** @@ -62,7 +62,7 @@ export type UseOrganizationParams = { *
      *
    • `status`: A string that filters the invitations by the provided status.
      • *
    • Any of the properties described in [Shared properties](#shared-properties).
      • - *
    + * . */ invitations?: true | PaginatedHookConfig; /** @@ -71,9 +71,9 @@ export type UseOrganizationParams = { *
      *
    • `orgId`: A string that filters the subscriptions by the provided organization ID.
      • *
    • Any of the properties described in [Shared properties](#shared-properties).
      • - *
    + * . */ - subscriptions?: true | PaginatedHookConfig<__experimental_GetSubscriptionsParams>; + subscriptions?: true | PaginatedHookConfig; }; /** @@ -112,7 +112,7 @@ export type UseOrganizationReturn = /** * Includes a paginated list of the organization's subscriptions. */ - subscriptions: PaginatedResourcesWithDefault<__experimental_CommerceSubscriptionResource>; + subscriptions: PaginatedResourcesWithDefault; } | { isLoaded: true; @@ -122,7 +122,7 @@ export type UseOrganizationReturn = membershipRequests: PaginatedResourcesWithDefault; memberships: PaginatedResourcesWithDefault; invitations: PaginatedResourcesWithDefault; - subscriptions: PaginatedResourcesWithDefault<__experimental_CommerceSubscriptionResource>; + subscriptions: PaginatedResourcesWithDefault; } | { isLoaded: boolean; @@ -145,7 +145,7 @@ export type UseOrganizationReturn = T['invitations'] extends { infinite: true } ? true : false > | null; subscriptions: PaginatedResources< - __experimental_CommerceSubscriptionResource, + CommerceSubscriptionResource, T['subscriptions'] extends { infinite: true } ? true : false > | null; }; @@ -461,13 +461,13 @@ export function useOrganization(params?: T): Us ); const subscriptions = usePagesOrInfinite< - __experimental_GetSubscriptionsParams, - ClerkPaginatedResponse<__experimental_CommerceSubscriptionResource> + GetSubscriptionsParams, + ClerkPaginatedResponse >( { ...subscriptionsParams, }, - organization?.__experimental_getSubscriptions, + organization?.getSubscriptions, { keepPreviousData: subscriptionsSafeValues.keepPreviousData, infinite: subscriptionsSafeValues.infinite, diff --git a/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap index eccf59334a3..f0247688460 100644 --- a/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap @@ -25,6 +25,7 @@ exports[`root public exports > should not change unexpectedly 1`] = ` "OrganizationList", "OrganizationProfile", "OrganizationSwitcher", + "PricingTable", "Protect", "RedirectToCreateOrganization", "RedirectToOrganizationProfile", @@ -42,7 +43,6 @@ exports[`root public exports > should not change unexpectedly 1`] = ` "UserButton", "UserProfile", "Waitlist", - "__experimental_PricingTable", "useAuth", "useClerk", "useEmailLink", diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 0ca5b4ae428..dd03d305d5a 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -16,10 +16,10 @@ import type { } from './appearance'; import type { ClientResource } from './client'; import type { - __experimental_CommerceNamespace, - __experimental_CommercePlanResource, - __experimental_CommerceSubscriberType, - __experimental_CommerceSubscriptionPlanPeriod, + CommerceNamespace, + CommercePlanResource, + CommerceSubscriberType, + CommerceSubscriptionPlanPeriod, } from './commerce'; import type { CustomMenuItem } from './customMenuItems'; import type { CustomPage } from './customPages'; @@ -181,7 +181,7 @@ export interface Clerk { user: UserResource | null | undefined; /** Commerce Object */ - __experimental_commerce: __experimental_CommerceNamespace; + commerce: CommerceNamespace; telemetry: TelemetryCollector | undefined; @@ -210,7 +210,7 @@ export interface Clerk { * Opens the Clerk Checkout component in a drawer. * @param props Optional checkout configuration parameters. */ - __internal_openCheckout: (props?: __experimental_CheckoutProps) => void; + __internal_openCheckout: (props?: __internal_CheckoutProps) => void; /** * Closes the Clerk Checkout drawer. @@ -221,7 +221,7 @@ export interface Clerk { * Opens the Clerk PlanDetails drawer component in a drawer. * @param props Optional subscription details drawer configuration parameters. */ - __internal_openPlanDetails: (props?: __experimental_PlanDetailsProps) => void; + __internal_openPlanDetails: (props?: __internal_PlanDetailsProps) => void; /** * Closes the Clerk PlanDetails drawer. @@ -447,7 +447,7 @@ export interface Clerk { * @param targetNode Target node to mount the PricingTable component. * @param props configuration parameters. */ - __experimental_mountPricingTable: (targetNode: HTMLDivElement, props?: __experimental_PricingTableProps) => void; + mountPricingTable: (targetNode: HTMLDivElement, props?: PricingTableProps) => void; /** * Unmount a pricing table component from the target element. @@ -455,7 +455,7 @@ export interface Clerk { * * @param targetNode Target node to unmount the PricingTable component from. */ - __experimental_unmountPricingTable: (targetNode: HTMLDivElement) => void; + unmountPricingTable: (targetNode: HTMLDivElement) => void; /** * Register a listener that triggers a callback each time important Clerk resources are changed. @@ -1560,35 +1560,83 @@ export type WaitlistProps = { export type WaitlistModalProps = WaitlistProps; -type __experimental_PricingTableDefaultProps = { +type PricingTableDefaultProps = { ctaPosition?: 'top' | 'bottom'; collapseFeatures?: boolean; }; -type __experimental_PricingTableBaseProps = { +type PricingTableBaseProps = { forOrganizations?: boolean; + /** + * Customisation options to fully match the Clerk components to your own brand. + * These options serve as overrides and will be merged with the global `appearance` + * prop of ClerkProvided (if one is provided) + */ appearance?: PricingTableTheme; - checkoutProps?: Pick<__experimental_CheckoutProps, 'appearance'>; + /* + * Specify options for the underlying component. + * e.g. + */ + checkoutProps?: Pick<__internal_CheckoutProps, 'appearance'>; }; -export type __experimental_PricingTableProps = __experimental_PricingTableBaseProps & - __experimental_PricingTableDefaultProps; +export type PricingTableProps = PricingTableBaseProps & PricingTableDefaultProps; -export type __experimental_CheckoutProps = { +export type __internal_CheckoutProps = { + /** + * Customisation options to fully match the Clerk components to your own brand. + * These options serve as overrides and will be merged with the global `appearance` + * prop of ClerkProvided (if one is provided) + */ appearance?: CheckoutTheme; + /** + * The ID of the plan a user or organization is subscribing to. + */ planId?: string; - planPeriod?: __experimental_CommerceSubscriptionPlanPeriod; - subscriberType?: __experimental_CommerceSubscriberType; + /** + * The period of the plan a user or organization is subscribing to. + */ + planPeriod?: CommerceSubscriptionPlanPeriod; + /** + * The type of subscriber the planId is for. + */ + subscriberType?: CommerceSubscriberType; + /** + * A callback function to be executed after a subscription is completed. + */ onSubscriptionComplete?: () => void; + /** + * The ID of a html element where the drawer will mount to. + */ portalId?: string; }; -export type __experimental_PlanDetailsProps = { +export type __internal_PlanDetailsProps = { + /** + * Customisation options to fully match the Clerk components to your own brand. + * These options serve as overrides and will be merged with the global `appearance` + * prop of ClerkProvided (if one is provided) + */ appearance?: PlanDetailTheme; - plan?: __experimental_CommercePlanResource; - subscriberType?: __experimental_CommerceSubscriberType; - planPeriod?: __experimental_CommerceSubscriptionPlanPeriod; + /** + * The plan of a user or organization to see details of. + */ + plan?: CommercePlanResource; + /** + * The type of subscriber the planId is for. + */ + subscriberType?: CommerceSubscriberType; + /** + * The period of the plan a user or organization is subscribing to. + */ + planPeriod?: CommerceSubscriptionPlanPeriod; + /** + * A callback function to be executed after a subscription is cancelled. + */ onSubscriptionCancel?: () => void; + /** + * The ID of a html element where the drawer will mount to. + */ portalId?: string; }; diff --git a/packages/types/src/commerce.ts b/packages/types/src/commerce.ts index bfcb88966c4..fc75fd7708c 100644 --- a/packages/types/src/commerce.ts +++ b/packages/types/src/commerce.ts @@ -5,47 +5,39 @@ import type { ClerkResource } from './resource'; type WithOptionalOrgType = T & { orgId?: string; }; -export interface __experimental_CommerceNamespace { - __experimental_billing: __experimental_CommerceBillingNamespace; +export interface CommerceNamespace { + billing: CommerceBillingNamespace; getPaymentSources: ( - params: __experimental_GetPaymentSourcesParams, - ) => Promise>; - initializePaymentSource: ( - params: __experimental_InitializePaymentSourceParams, - ) => Promise<__experimental_CommerceInitializedPaymentSourceResource>; - addPaymentSource: ( - params: __experimental_AddPaymentSourceParams, - ) => Promise<__experimental_CommercePaymentSourceResource>; + params: GetPaymentSourcesParams, + ) => Promise>; + initializePaymentSource: (params: InitializePaymentSourceParams) => Promise; + addPaymentSource: (params: AddPaymentSourceParams) => Promise; } -export interface __experimental_CommerceBillingNamespace { - getPlans: () => Promise<__experimental_CommercePlanResource[]>; - getSubscriptions: ( - params: __experimental_GetSubscriptionsParams, - ) => Promise>; - getInvoices: ( - params: __experimental_GetInvoicesParams, - ) => Promise>; - startCheckout: (params: __experimental_CreateCheckoutParams) => Promise<__experimental_CommerceCheckoutResource>; +export interface CommerceBillingNamespace { + getPlans: () => Promise; + getSubscriptions: (params: GetSubscriptionsParams) => Promise>; + getInvoices: (params: GetInvoicesParams) => Promise>; + startCheckout: (params: CreateCheckoutParams) => Promise; } -export type __experimental_CommerceSubscriberType = 'org' | 'user'; -export type __experimental_CommerceSubscriptionStatus = 'active' | 'ended' | 'upcoming'; -export type __experimental_CommerceSubscriptionPlanPeriod = 'month' | 'annual'; +export type CommerceSubscriberType = 'org' | 'user'; +export type CommerceSubscriptionStatus = 'active' | 'ended' | 'upcoming'; +export type CommerceSubscriptionPlanPeriod = 'month' | 'annual'; -export interface __experimental_CommerceProductResource extends ClerkResource { +export interface CommerceProductResource extends ClerkResource { id: string; slug: string | null; currency: string; isDefault: boolean; - plans: __experimental_CommercePlanResource[]; + plans: CommercePlanResource[]; } -export interface __experimental_GetPlansParams { - subscriberType?: __experimental_CommerceSubscriberType; +export interface GetPlansParams { + subscriberType?: CommerceSubscriberType; } -export interface __experimental_CommercePlanResource extends ClerkResource { +export interface CommercePlanResource extends ClerkResource { id: string; name: string; amount: number; @@ -62,10 +54,10 @@ export interface __experimental_CommercePlanResource extends ClerkResource { publiclyVisible: boolean; slug: string; avatarUrl: string; - features: __experimental_CommerceFeatureResource[]; + features: CommerceFeatureResource[]; } -export interface __experimental_CommerceFeatureResource extends ClerkResource { +export interface CommerceFeatureResource extends ClerkResource { id: string; name: string; description: string; @@ -73,115 +65,114 @@ export interface __experimental_CommerceFeatureResource extends ClerkResource { avatarUrl: string; } -export type __experimental_CommercePaymentSourceStatus = 'active' | 'expired' | 'disconnected'; +export type CommercePaymentSourceStatus = 'active' | 'expired' | 'disconnected'; -export type __experimental_GetPaymentSourcesParams = WithOptionalOrgType; +export type GetPaymentSourcesParams = WithOptionalOrgType; -export type __experimental_PaymentGateway = 'stripe' | 'paypal'; +export type PaymentGateway = 'stripe' | 'paypal'; -export type __experimental_InitializePaymentSourceParams = WithOptionalOrgType<{ - gateway: __experimental_PaymentGateway; +export type InitializePaymentSourceParams = WithOptionalOrgType<{ + gateway: PaymentGateway; }>; -export type __experimental_AddPaymentSourceParams = WithOptionalOrgType<{ - gateway: __experimental_PaymentGateway; +export type AddPaymentSourceParams = WithOptionalOrgType<{ + gateway: PaymentGateway; paymentToken: string; }>; -export type __experimental_RemovePaymentSourceParams = WithOptionalOrgType; -export type __experimental_MakeDefaultPaymentSourceParams = WithOptionalOrgType; +export type RemovePaymentSourceParams = WithOptionalOrgType; +export type MakeDefaultPaymentSourceParams = WithOptionalOrgType; -export interface __experimental_CommercePaymentSourceResource extends ClerkResource { +export interface CommercePaymentSourceResource extends ClerkResource { id: string; last4: string; paymentMethod: string; cardType: string; isDefault: boolean; - status: __experimental_CommercePaymentSourceStatus; + status: CommercePaymentSourceStatus; walletType: string | undefined; - remove: (params?: __experimental_RemovePaymentSourceParams) => Promise; - makeDefault: (params?: __experimental_MakeDefaultPaymentSourceParams) => Promise; + remove: (params?: RemovePaymentSourceParams) => Promise; + makeDefault: (params?: MakeDefaultPaymentSourceParams) => Promise; } -export interface __experimental_CommerceInitializedPaymentSourceResource extends ClerkResource { +export interface CommerceInitializedPaymentSourceResource extends ClerkResource { externalClientSecret: string; externalGatewayId: string; } -export type __experimental_GetInvoicesParams = WithOptionalOrgType; +export type GetInvoicesParams = WithOptionalOrgType; -export type __experimental_CommerceInvoiceStatus = 'paid' | 'unpaid' | 'past_due'; +export type CommerceInvoiceStatus = 'paid' | 'unpaid' | 'past_due'; -export interface __experimental_CommerceInvoiceResource extends ClerkResource { +export interface CommerceInvoiceResource extends ClerkResource { id: string; - totals: __experimental_CommerceInvoiceTotals; + totals: CommerceInvoiceTotals; paymentDueOn: number; paidOn: number; - status: __experimental_CommerceInvoiceStatus; + status: CommerceInvoiceStatus; } -export type __experimental_GetSubscriptionsParams = WithOptionalOrgType; -export type __experimental_CancelSubscriptionParams = WithOptionalOrgType; +export type GetSubscriptionsParams = WithOptionalOrgType; +export type CancelSubscriptionParams = WithOptionalOrgType; -export interface __experimental_CommerceSubscriptionResource extends ClerkResource { +export interface CommerceSubscriptionResource extends ClerkResource { id: string; paymentSourceId: string; - plan: __experimental_CommercePlanResource; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; - status: __experimental_CommerceSubscriptionStatus; + plan: CommercePlanResource; + planPeriod: CommerceSubscriptionPlanPeriod; + status: CommerceSubscriptionStatus; periodStart: number; periodEnd: number; canceledAt: number | null; - cancel: (params: __experimental_CancelSubscriptionParams) => Promise; + cancel: (params: CancelSubscriptionParams) => Promise; } -export interface __experimental_CommerceMoney { +export interface CommerceMoney { amount: number; amountFormatted: string; currency: string; currencySymbol: string; } -export interface __experimental_CommerceCheckoutTotals { - subtotal: __experimental_CommerceMoney; - grandTotal: __experimental_CommerceMoney; - taxTotal: __experimental_CommerceMoney; - totalDueNow: __experimental_CommerceMoney; +export interface CommerceCheckoutTotals { + subtotal: CommerceMoney; + grandTotal: CommerceMoney; + taxTotal: CommerceMoney; + totalDueNow: CommerceMoney; proration?: { days: number; - ratePerDay: __experimental_CommerceMoney; - totalProration: __experimental_CommerceMoney; + ratePerDay: CommerceMoney; + totalProration: CommerceMoney; }; } // eslint-disable-next-line @typescript-eslint/no-empty-object-type -export interface __experimental_CommerceInvoiceTotals - extends Omit<__experimental_CommerceCheckoutTotals, 'totalDueNow'> {} +export interface CommerceInvoiceTotals extends Omit {} -export type __experimental_CreateCheckoutParams = WithOptionalOrgType<{ +export type CreateCheckoutParams = WithOptionalOrgType<{ planId: string; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; + planPeriod: CommerceSubscriptionPlanPeriod; }>; -export type __experimental_ConfirmCheckoutParams = WithOptionalOrgType< +export type ConfirmCheckoutParams = WithOptionalOrgType< | { paymentSourceId?: string; } | { paymentToken?: string; - gateway?: __experimental_PaymentGateway; + gateway?: PaymentGateway; } >; -export interface __experimental_CommerceCheckoutResource extends ClerkResource { +export interface CommerceCheckoutResource extends ClerkResource { id: string; externalClientSecret: string; externalGatewayId: string; invoice_id: string; - paymentSource?: __experimental_CommercePaymentSourceResource; - plan: __experimental_CommercePlanResource; - planPeriod: __experimental_CommerceSubscriptionPlanPeriod; + paymentSource?: CommercePaymentSourceResource; + plan: CommercePlanResource; + planPeriod: CommerceSubscriptionPlanPeriod; status: string; - totals: __experimental_CommerceCheckoutTotals; - subscription?: __experimental_CommerceSubscriptionResource; - confirm: (params: __experimental_ConfirmCheckoutParams) => Promise<__experimental_CommerceCheckoutResource>; + totals: CommerceCheckoutTotals; + subscription?: CommerceSubscriptionResource; + confirm: (params: ConfirmCheckoutParams) => Promise; } diff --git a/packages/types/src/commerceSettings.ts b/packages/types/src/commerceSettings.ts index bf961d08513..f488b477b6b 100644 --- a/packages/types/src/commerceSettings.ts +++ b/packages/types/src/commerceSettings.ts @@ -1,9 +1,8 @@ -import type { __experimental_CommerceSettingsJSONSnapshot } from 'snapshots'; - import type { ClerkResourceJSON } from './json'; import type { ClerkResource } from './resource'; +import type { CommerceSettingsJSONSnapshot } from './snapshots'; -export interface __experimental_CommerceSettingsJSON extends ClerkResourceJSON { +export interface CommerceSettingsJSON extends ClerkResourceJSON { billing: { enabled: boolean; stripe_publishable_key: string; @@ -12,7 +11,7 @@ export interface __experimental_CommerceSettingsJSON extends ClerkResourceJSON { }; } -export interface __experimental_CommerceSettingsResource extends ClerkResource { +export interface CommerceSettingsResource extends ClerkResource { billing: { enabled: boolean; stripePublishableKey: string; @@ -20,5 +19,5 @@ export interface __experimental_CommerceSettingsResource extends ClerkResource { hasPaidOrgPlans: boolean; }; - __internal_toSnapshot: () => __experimental_CommerceSettingsJSONSnapshot; + __internal_toSnapshot: () => CommerceSettingsJSONSnapshot; } diff --git a/packages/types/src/environment.ts b/packages/types/src/environment.ts index f1b142ed2c6..91076d2b119 100644 --- a/packages/types/src/environment.ts +++ b/packages/types/src/environment.ts @@ -1,5 +1,5 @@ import type { AuthConfigResource } from './authConfig'; -import type { __experimental_CommerceSettingsResource } from './commerceSettings'; +import type { CommerceSettingsResource } from './commerceSettings'; import type { DisplayConfigResource } from './displayConfig'; import type { OrganizationSettingsResource } from './organizationSettings'; import type { ClerkResource } from './resource'; @@ -11,7 +11,7 @@ export interface EnvironmentResource extends ClerkResource { organizationSettings: OrganizationSettingsResource; authConfig: AuthConfigResource; displayConfig: DisplayConfigResource; - __experimental_commerceSettings: __experimental_CommerceSettingsResource; + commerceSettings: CommerceSettingsResource; isSingleSession: () => boolean; isProduction: () => boolean; isDevelopmentOrStaging: () => boolean; diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts index 224139b82e8..097a31ca5b5 100644 --- a/packages/types/src/json.ts +++ b/packages/types/src/json.ts @@ -3,12 +3,12 @@ */ import type { - __experimental_CommerceInvoiceStatus, - __experimental_CommercePaymentSourceStatus, - __experimental_CommerceSubscriptionPlanPeriod, - __experimental_CommerceSubscriptionStatus, + CommerceInvoiceStatus, + CommercePaymentSourceStatus, + CommerceSubscriptionPlanPeriod, + CommerceSubscriptionStatus, } from './commerce'; -import type { __experimental_CommerceSettingsJSON } from './commerceSettings'; +import type { CommerceSettingsJSON } from './commerceSettings'; import type { DisplayConfigJSON } from './displayConfig'; import type { EnterpriseProtocol, EnterpriseProvider } from './enterpriseAccount'; import type { ActClaim } from './jwtv2'; @@ -67,7 +67,7 @@ export interface ImageJSON { export interface EnvironmentJSON extends ClerkResourceJSON { auth_config: AuthConfigJSON; - commerce_settings: __experimental_CommerceSettingsJSON; + commerce_settings: CommerceSettingsJSON; display_config: DisplayConfigJSON; user_settings: UserSettingsJSON; organization_settings: OrganizationSettingsJSON; @@ -584,7 +584,7 @@ export interface WaitlistJSON extends ClerkResourceJSON { updated_at: number; } -export interface __experimental_CommerceFeatureJSON extends ClerkResourceJSON { +export interface CommerceFeatureJSON extends ClerkResourceJSON { object: 'commerce_feature'; id: string; name: string; @@ -593,7 +593,7 @@ export interface __experimental_CommerceFeatureJSON extends ClerkResourceJSON { avatar_url: string; } -export interface __experimental_CommercePlanJSON extends ClerkResourceJSON { +export interface CommercePlanJSON extends ClerkResourceJSON { object: 'commerce_plan'; id: string; name: string; @@ -611,89 +611,88 @@ export interface __experimental_CommercePlanJSON extends ClerkResourceJSON { publicly_visible: boolean; slug: string; avatar_url: string; - features: __experimental_CommerceFeatureJSON[]; + features: CommerceFeatureJSON[]; } -export interface __experimental_CommerceProductJSON extends ClerkResourceJSON { +export interface CommerceProductJSON extends ClerkResourceJSON { object: 'commerce_product'; id: string; slug: string; currency: string; is_default: boolean; - plans: __experimental_CommercePlanJSON[]; + plans: CommercePlanJSON[]; } -export interface __experimental_CommercePaymentSourceJSON extends ClerkResourceJSON { +export interface CommercePaymentSourceJSON extends ClerkResourceJSON { object: 'commerce_payment_source'; id: string; last4: string; payment_method: string; card_type: string; is_default: boolean; - status: __experimental_CommercePaymentSourceStatus; + status: CommercePaymentSourceStatus; wallet_type: string | null; } -export interface __experimental_CommerceInitializedPaymentSourceJSON extends ClerkResourceJSON { +export interface CommerceInitializedPaymentSourceJSON extends ClerkResourceJSON { object: 'commerce_payment_source_initialize'; external_client_secret: string; external_gateway_id: string; } -export interface __experimental_CommerceInvoiceJSON extends ClerkResourceJSON { +export interface CommerceInvoiceJSON extends ClerkResourceJSON { object: 'commerce_invoice'; id: string; paid_on: number; payment_due_on: number; - status: __experimental_CommerceInvoiceStatus; - totals: __experimental_CommerceInvoiceTotalsJSON; + status: CommerceInvoiceStatus; + totals: CommerceInvoiceTotalsJSON; } -export interface __experimental_CommerceSubscriptionJSON extends ClerkResourceJSON { +export interface CommerceSubscriptionJSON extends ClerkResourceJSON { object: 'commerce_subscription'; id: string; payment_source_id: string; - plan: __experimental_CommercePlanJSON; - plan_period: __experimental_CommerceSubscriptionPlanPeriod; - status: __experimental_CommerceSubscriptionStatus; + plan: CommercePlanJSON; + plan_period: CommerceSubscriptionPlanPeriod; + status: CommerceSubscriptionStatus; period_start: number; period_end: number; canceled_at: number | null; } -export interface __experimental_CommerceMoneyJSON { +export interface CommerceMoneyJSON { amount: number; amount_formatted: string; currency: string; currency_symbol: string; } -export interface __experimental_CommerceCheckoutTotalsJSON { - grand_total: __experimental_CommerceMoneyJSON; - subtotal: __experimental_CommerceMoneyJSON; - tax_total: __experimental_CommerceMoneyJSON; - total_due_now: __experimental_CommerceMoneyJSON; +export interface CommerceCheckoutTotalsJSON { + grand_total: CommerceMoneyJSON; + subtotal: CommerceMoneyJSON; + tax_total: CommerceMoneyJSON; + total_due_now: CommerceMoneyJSON; proration?: { days: number; - rate_per_day: __experimental_CommerceMoneyJSON; - total_proration: __experimental_CommerceMoneyJSON; + rate_per_day: CommerceMoneyJSON; + total_proration: CommerceMoneyJSON; }; } // eslint-disable-next-line @typescript-eslint/no-empty-object-type -export interface __experimental_CommerceInvoiceTotalsJSON - extends Omit<__experimental_CommerceCheckoutTotalsJSON, 'total_due_now'> {} +export interface CommerceInvoiceTotalsJSON extends Omit {} -export interface __experimental_CommerceCheckoutJSON extends ClerkResourceJSON { +export interface CommerceCheckoutJSON extends ClerkResourceJSON { object: 'commerce_checkout'; id: string; external_client_secret: string; external_gateway_id: string; invoice_id: string; - payment_source?: __experimental_CommercePaymentSourceJSON; - plan: __experimental_CommercePlanJSON; - plan_period: __experimental_CommerceSubscriptionPlanPeriod; + payment_source?: CommercePaymentSourceJSON; + plan: CommercePlanJSON; + plan_period: CommerceSubscriptionPlanPeriod; status: string; - subscription?: __experimental_CommerceSubscriptionJSON; - totals: __experimental_CommerceCheckoutTotalsJSON; + subscription?: CommerceSubscriptionJSON; + totals: CommerceCheckoutTotalsJSON; } diff --git a/packages/types/src/organization.ts b/packages/types/src/organization.ts index 8f49e47c2e8..b99d70b2eca 100644 --- a/packages/types/src/organization.ts +++ b/packages/types/src/organization.ts @@ -1,4 +1,4 @@ -import type { __experimental_CommerceSubscriptionResource, __experimental_GetSubscriptionsParams } from './commerce'; +import type { CommerceSubscriptionResource, GetSubscriptionsParams } from './commerce'; import type { OrganizationDomainResource, OrganizationEnrollmentMode } from './organizationDomain'; import type { OrganizationInvitationResource, OrganizationInvitationStatus } from './organizationInvitation'; import type { OrganizationCustomRoleKey, OrganizationMembershipResource } from './organizationMembership'; @@ -56,9 +56,7 @@ export interface OrganizationResource extends ClerkResource { getMembershipRequests: ( params?: GetMembershipRequestParams, ) => Promise>; - __experimental_getSubscriptions: ( - params?: __experimental_GetSubscriptionsParams, - ) => Promise>; + getSubscriptions: (params?: GetSubscriptionsParams) => Promise>; addMember: (params: AddMemberParams) => Promise; inviteMember: (params: InviteMemberParams) => Promise; inviteMembers: (params: InviteMembersParams) => Promise; diff --git a/packages/types/src/snapshots.ts b/packages/types/src/snapshots.ts index bc398bb633e..24a575d3b56 100644 --- a/packages/types/src/snapshots.ts +++ b/packages/types/src/snapshots.ts @@ -1,6 +1,6 @@ // this file contains the types returned by the __internal_toSnapshot method of the resources -import type { __experimental_CommerceSettingsJSON } from './commerceSettings'; +import type { CommerceSettingsJSON } from './commerceSettings'; import type { DisplayConfigJSON } from './displayConfig'; import type { AuthConfigJSON, @@ -184,4 +184,4 @@ export type Web3WalletJSONSnapshot = Override< export type PublicUserDataJSONSnapshot = PublicUserDataJSON; -export type __experimental_CommerceSettingsJSONSnapshot = __experimental_CommerceSettingsJSON; +export type CommerceSettingsJSONSnapshot = CommerceSettingsJSON;