refactor(repo): Replace __experimental_PricingTable with PricingTable (#5828)

Author: nikosdouvlis

.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%' }}>