refactor(repo): Replace __experimental_PricingTable with PricingTable

.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

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 <PricingTable />;
 }

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",

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,
@@ -175,7 +175,7 @@ const defaultOptions: ClerkOptions = {
   signInForceRedirectUrl: undefined,
   signUpForceRedirectUrl: undefined,
   treatPendingAsSignedOut: true,
-  checkoutContinueUrl: undefined,
+  newSubscriptionRedirectUrl: undefined,
 };
 
 export class Clerk implements ClerkInterface {
@@ -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') {
@@ -1378,12 +1378,12 @@ export class Clerk implements ClerkInterface {
     return this.buildUrlWithAuth(this.#options.afterSignOutUrl);
   }
 
-  public buildCheckoutContinueUrl(): string {
-    if (!this.#options.checkoutContinueUrl) {
+  public buildNewSubscriptionRedirectUrl(): string {
+    if (!this.#options.newSubscriptionRedirectUrl) {
       return this.buildAfterSignInUrl();
     }
 
-    return this.#options.checkoutContinueUrl;
+    return this.#options.newSubscriptionRedirectUrl;
   }
 
   public buildWaitlistUrl(options?: { initialValues?: Record<string, string> }): string {

packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx

@@ -19,11 +19,11 @@ export const CheckoutComplete = ({
 }) => {
   const router = useRouter();
   const { setIsOpen } = useDrawerContext();
-  const { checkoutContinueUrl } = useCheckoutContext();
+  const { newSubscriptionRedirectUrl } = useCheckoutContext();
 
   const handleClose = () => {
-    if (checkoutContinueUrl) {
-      void router.navigate(checkoutContinueUrl);
+    if (newSubscriptionRedirectUrl) {
+      void router.navigate(newSubscriptionRedirectUrl);
     }
     if (setIsOpen) {
       setIsOpen(false);

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 />
                 </Flex>
               ) : (
-                <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
-                  <__experimental_PricingTable />
-                </__experimental_PricingTableContext.Provider>
+                <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
+                  <PricingTable />
+                </PricingTableContext.Provider>
               )}
             </TabPanel>
             <TabPanel sx={{ width: '100%' }}>

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 = () => {
         </Header.BackLink>
       </Header.Root>
 
-      <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
-        <__experimental_PricingTable />
-      </__experimental_PricingTableContext.Provider>
+      <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
+        <PricingTable />
+      </PricingTableContext.Provider>
     </>
   );
 };

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?
     <div>
@@ -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' ? <PricingTableModal {...props} /> : <PricingTableRoot {...props} />;
 };
-
-export const __experimental_PricingTable = PricingTable;

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<HTMLElement>) => void;
   isCompact?: boolean;
-  props: __experimental_PricingTableProps;
+  props: PricingTableProps;
 }
 
 function Card(props: CardProps) {

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 />
                 </Flex>
               ) : (
-                <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
-                  <__experimental_PricingTable />
-                </__experimental_PricingTableContext.Provider>
+                <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
+                  <PricingTable />
+                </PricingTableContext.Provider>
               )}
             </TabPanel>
             <TabPanel sx={{ width: '100%' }}>

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 = () => {
         </Header.BackLink>
       </Header.Root>
 
-      <__experimental_PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
-        <__experimental_PricingTable />
-      </__experimental_PricingTableContext.Provider>
+      <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>
+        <PricingTable />
+      </PricingTableContext.Provider>
     </>
   );
 };

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 (
-        <SubscriberTypeContext.Provider
-          value={(props as __experimental_PricingTableProps).forOrganizations ? 'org' : 'user'}
-        >
+        <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'org' : 'user'}>
           <PlansContextProvider>
-            <__experimental_PricingTableContext.Provider
-              value={{ componentName, ...(props as __experimental_PricingTableProps) }}
-            >
+            <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
               {children}
-            </__experimental_PricingTableContext.Provider>
+            </PricingTableContext.Provider>
           </PlansContextProvider>
         </SubscriberTypeContext.Provider>
       );

packages/clerk-js/src/ui/contexts/components/Checkout.ts

@@ -16,22 +16,22 @@ export const useCheckoutContext = () => {
     throw new Error('Clerk: useCheckoutContext called outside Checkout.');
   }
 
-  const checkoutContinueUrl = useMemo(() => {
+  const newSubscriptionRedirectUrl = useMemo(() => {
     // When we're rendered via the PricingTable with mode = 'modal' we provide a `portalRoot` value
     // we want to keep users within the context of the modal, so we do this to prevent navigating away
     if (context.portalRoot) {
       return undefined;
     }
 
-    const url = context.checkoutContinueUrl || clerk.buildCheckoutContinueUrl?.();
+    const url = context.newSubscriptionRedirectUrl || clerk.buildNewSubscriptionRedirectUrl?.();
     return isAllowedRedirect(options?.allowedRedirectOrigins, window.location.origin)(url) ? url : undefined;
-  }, [context.portalRoot, context.checkoutContinueUrl, clerk, options?.allowedRedirectOrigins]);
+  }, [context.portalRoot, context.newSubscriptionRedirectUrl, clerk, options?.allowedRedirectOrigins]);
 
   const { componentName, ...ctx } = context;
 
   return {
     ...ctx,
     componentName,
-    checkoutContinueUrl,
+    newSubscriptionRedirectUrl,
   };
 };

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<PricingTableCtx | null>(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.');

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(() =>