From 91c197cf20b52eb970c5b0ad4873e50545c1bd0a Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Mon, 5 May 2025 12:55:59 +0300 Subject: [PATCH 1/4] refactor(repo): Replace __experimental_PricingTable with PricingTable --- .changeset/wicked-baboons-pump.md | 13 +++++++++++++ .../next-app-router/src/app/pricing-table/page.tsx | 6 +++--- .../__tests__/__snapshots__/exports.test.ts.snap | 2 +- packages/clerk-js/src/core/clerk.ts | 4 ++-- .../OrganizationBillingPage.tsx | 10 +++++----- .../OrganizationProfile/OrganizationPlansPage.tsx | 10 +++++----- .../ui/components/PricingTable/PricingTable.tsx | 10 ++++------ .../PricingTable/PricingTableDefault.tsx | 6 +++--- .../src/ui/components/UserProfile/BillingPage.tsx | 10 +++++----- .../src/ui/components/UserProfile/PlansPage.tsx | 10 +++++----- .../src/ui/contexts/ClerkUIComponentsContext.tsx | 14 +++++--------- .../src/ui/contexts/components/PricingTable.ts | 6 +++--- packages/clerk-js/src/ui/lazyModules/components.ts | 2 +- packages/clerk-js/src/ui/types.ts | 8 ++++---- packages/expo/src/web/uiComponents.tsx | 4 ++-- .../nextjs/src/client-boundary/uiComponents.tsx | 2 +- packages/nextjs/src/index.ts | 2 +- .../__tests__/__snapshots__/exports.test.ts.snap | 2 +- packages/react/src/components/index.ts | 2 +- packages/react/src/components/uiComponents.tsx | 8 ++++---- packages/react/src/isomorphicClerk.ts | 6 +++--- .../__tests__/__snapshots__/exports.test.ts.snap | 2 +- packages/types/src/clerk.ts | 9 ++++----- .../src/components/ui-components/PricingTable.vue | 4 ++-- 24 files changed, 79 insertions(+), 73 deletions(-) create mode 100644 .changeset/wicked-baboons-pump.md diff --git a/.changeset/wicked-baboons-pump.md b/.changeset/wicked-baboons-pump.md new file mode 100644 index 00000000000..0ef95e12116 --- /dev/null +++ b/.changeset/wicked-baboons-pump.md @@ -0,0 +1,13 @@ +--- +'@clerk/tanstack-react-start': patch +'@clerk/chrome-extension': patch +'@clerk/react-router': patch +'@clerk/clerk-js': patch +'@clerk/nextjs': patch +'@clerk/clerk-react': patch +'@clerk/types': patch +'@clerk/clerk-expo': patch +'@clerk/vue': patch +--- + +Replace \_\_experimental_PricingTable with PricingTable 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/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index ae60a8ec973..b3a2e1c3a1c 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -18,7 +18,6 @@ import type { __experimental_CheckoutProps, __experimental_CommerceNamespace, __experimental_PlanDetailsProps, - __experimental_PricingTableProps, __internal_ComponentNavigationContext, __internal_UserVerificationModalProps, AuthenticateWithCoinbaseWalletParams, @@ -51,6 +50,7 @@ import type { OrganizationResource, OrganizationSwitcherProps, PendingSessionResource, + PricingTableProps, PublicKeyCredentialCreationOptionsWithoutExtensions, PublicKeyCredentialRequestOptionsWithoutExtensions, PublicKeyCredentialWithAuthenticatorAssertionResponse, @@ -1006,7 +1006,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 __experimental_mountPricingTable = (node: HTMLDivElement, props?: PricingTableProps): void => { this.assertComponentsReady(this.#componentControls); if (disabledBillingFeature(this, this.environment)) { if (this.#instanceType === 'development') { diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx index 5af263b62a7..eb4cd34669e 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'; @@ -21,7 +21,7 @@ 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 { PricingTable } from '../PricingTable'; import { SubscriptionsList } from '../Subscriptions'; const orgTabMap = { @@ -94,9 +94,9 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => { <__experimental_PaymentSources /> ) : ( - <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}> - <__experimental_PricingTable /> - + + + )} 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/PricingTable/PricingTable.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx index 532a41a2d88..2729387ed62 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx @@ -2,7 +2,7 @@ import { useClerk, useOrganization, useUser } from '@clerk/shared/react'; import type { __experimental_CommercePlanResource, __experimental_CommerceSubscriptionPlanPeriod, - __experimental_PricingTableProps, + PricingTableProps, } from '@clerk/types'; import { useState } from 'react'; @@ -12,7 +12,7 @@ import { useFetch } from '../../hooks/useFetch'; import { PricingTableDefault } from './PricingTableDefault'; import { PricingTableMatrix } from './PricingTableMatrix'; -const PricingTableRoot = (props: __experimental_PricingTableProps) => { +const PricingTableRoot = (props: PricingTableProps) => { const clerk = useClerk(); const { mode = 'mounted' } = usePricingTableContext(); const subscriberType = useSubscriberTypeContext(); @@ -74,7 +74,7 @@ const PricingTableRoot = (props: __experimental_PricingTableProps) => { // When used in a modal, we need to wrap the root in a div to avoid layout issues // within UserProfile and OrganizationProfile. -const PricingTableModal = (props: __experimental_PricingTableProps) => { +const PricingTableModal = (props: PricingTableProps) => { return ( // TODO: Used by InvisibleRootBox, can we simplify?
@@ -83,10 +83,8 @@ const PricingTableModal = (props: __experimental_PricingTableProps) => { ); }; -const PricingTable = (props: __experimental_PricingTableProps) => { +export const PricingTable = (props: PricingTableProps) => { const { mode = 'mounted' } = usePricingTableContext(); return mode === 'modal' ? : ; }; - -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 7f403eefb44..7cf0dec27b5 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -2,7 +2,7 @@ import { useClerk } from '@clerk/shared/react'; import type { __experimental_CommercePlanResource, __experimental_CommerceSubscriptionPlanPeriod, - __experimental_PricingTableProps, + PricingTableProps, } from '@clerk/types'; import * as React from 'react'; @@ -35,7 +35,7 @@ interface PricingTableDefaultProps { setPlanPeriod: (val: __experimental_CommerceSubscriptionPlanPeriod) => void; onSelect: (plan: __experimental_CommercePlanResource) => void; isCompact?: boolean; - props: __experimental_PricingTableProps; + props: PricingTableProps; } export function PricingTableDefault({ @@ -96,7 +96,7 @@ interface CardProps { setPlanPeriod: (p: __experimental_CommerceSubscriptionPlanPeriod) => void; onSelect: (plan: __experimental_CommercePlanResource, event?: React.MouseEvent) => void; isCompact?: boolean; - props: __experimental_PricingTableProps; + props: PricingTableProps; } function Card(props: CardProps) { diff --git a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx index 2a57351aa80..465ee936d01 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'; @@ -21,7 +21,7 @@ import { useTabState } from '../../hooks/useTabState'; import { useRouter } from '../../router'; import { InvoicesList } from '../Invoices'; import { __experimental_PaymentSources } from '../PaymentSources'; -import { __experimental_PricingTable } from '../PricingTable'; +import { PricingTable } from '../PricingTable'; import { SubscriptionsList } from '../Subscriptions'; const tabMap = { @@ -96,9 +96,9 @@ const BillingPageInternal = withCardStateProvider(() => { <__experimental_PaymentSources /> ) : ( - <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}> - <__experimental_PricingTable /> - + + + )} 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/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/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/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts index 9378632fa35..913c167102c 100644 --- a/packages/clerk-js/src/ui/lazyModules/components.ts +++ b/packages/clerk-js/src/ui/lazyModules/components.ts @@ -93,7 +93,7 @@ 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(() => diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index 45dd9d09543..f988aaedf49 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/packages/clerk-js/src/ui/types.ts @@ -4,7 +4,6 @@ import type { __experimental_CommercePlanResource, __experimental_CommerceSubscriptionResource, __experimental_PlanDetailsProps, - __experimental_PricingTableProps, __internal_UserVerificationProps, CheckoutContinueUrl, CreateOrganizationProps, @@ -12,6 +11,7 @@ import type { OrganizationListProps, OrganizationProfileProps, OrganizationSwitcherProps, + PricingTableProps, SignInFallbackRedirectUrl, SignInForceRedirectUrl, SignInProps, @@ -47,7 +47,7 @@ export type AvailableComponentProps = | CreateOrganizationProps | OrganizationListProps | WaitlistProps - | __experimental_PricingTableProps + | PricingTableProps | __experimental_CheckoutProps | __internal_UserVerificationProps | __experimental_PlanDetailsProps; @@ -112,7 +112,7 @@ export type WaitlistCtx = WaitlistProps & { mode?: ComponentMode; }; -export type __experimental_PricingTableCtx = __experimental_PricingTableProps & { +export type PricingTableCtx = PricingTableProps & { componentName: 'PricingTable'; mode?: ComponentMode; }; @@ -159,6 +159,6 @@ export type AvailableComponentCtx = | OrganizationListCtx | GoogleOneTapCtx | WaitlistCtx - | __experimental_PricingTableCtx + | PricingTableCtx | __experimental_CheckoutCtx; export type AvailableComponentName = AvailableComponentCtx['componentName']; 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..9556050ef29 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; @@ -598,5 +598,5 @@ export const __experimental_PricingTable = withClerk( ); }, - { component: '__experimental_PricingTable', renderWhileLoading: true }, + { component: 'PricingTable', renderWhileLoading: true }, ); diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 5f43be3380d..d2f75bfa104 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -6,7 +6,6 @@ import type { __experimental_CheckoutProps, __experimental_CommerceNamespace, __experimental_PlanDetailsProps, - __experimental_PricingTableProps, __internal_UserVerificationModalProps, __internal_UserVerificationProps, AuthenticateWithCoinbaseWalletParams, @@ -32,6 +31,7 @@ import type { OrganizationProfileProps, OrganizationResource, OrganizationSwitcherProps, + PricingTableProps, RedirectOptions, SetActiveParams, SignInProps, @@ -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, @@ -1034,7 +1034,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } }; - __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps) => { + __experimental_mountPricingTable = (node: HTMLDivElement, props?: PricingTableProps) => { if (this.clerkjs && this.loaded) { this.clerkjs.__experimental_mountPricingTable(node, props); } else { 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 511eeec8b2b..9cbc14a0af4 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -448,7 +448,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; + __experimental_mountPricingTable: (targetNode: HTMLDivElement, props?: PricingTableProps) => void; /** * Unmount a pricing table component from the target element. @@ -1567,13 +1567,13 @@ export type WaitlistProps = { export type WaitlistModalProps = WaitlistProps; -type __experimental_PricingTableDefaultProps = { +type PricingTableDefaultProps = { ctaPosition?: 'top' | 'bottom'; collapseFeatures?: boolean; checkoutContinueUrl?: string; }; -type __experimental_PricingTableBaseProps = { +type PricingTableBaseProps = { forOrganizations?: boolean; appearance?: PricingTableTheme; checkoutProps?: Pick<__experimental_CheckoutProps, 'appearance'>; @@ -1581,8 +1581,7 @@ type __experimental_PricingTableBaseProps = { type PortalRoot = HTMLElement | null | undefined; -export type __experimental_PricingTableProps = __experimental_PricingTableBaseProps & - __experimental_PricingTableDefaultProps; +export type PricingTableProps = PricingTableBaseProps & PricingTableDefaultProps; export type __experimental_CheckoutProps = { appearance?: CheckoutTheme; diff --git a/packages/vue/src/components/ui-components/PricingTable.vue b/packages/vue/src/components/ui-components/PricingTable.vue index 339dc0c2642..9830f9803b6 100644 --- a/packages/vue/src/components/ui-components/PricingTable.vue +++ b/packages/vue/src/components/ui-components/PricingTable.vue @@ -1,10 +1,10 @@