refactor(types): Rename CheckoutProps and PlanDetailsProps to __internal_CheckoutProps and __internal_PlanDetailsProps

.changeset/shiny-impalas-occur.md

@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/clerk-react": patch
+"@clerk/types": patch
+---
+
+Rename CheckoutProps and PlanDetailsProps to __internal_CheckoutProps and __internal_PlanDetailsProps

packages/clerk-js/src/core/clerk.ts

@@ -15,13 +15,14 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+  __internal_CheckoutProps,
   __internal_ComponentNavigationContext,
+  __internal_PlanDetailsProps,
   __internal_UserVerificationModalProps,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
-  CheckoutProps,
   Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
@@ -49,7 +50,6 @@ import type {
   OrganizationResource,
   OrganizationSwitcherProps,
   PendingSessionResource,
-  PlanDetailsProps,
   PricingTableProps,
   PublicKeyCredentialCreationOptionsWithoutExtensions,
   PublicKeyCredentialRequestOptionsWithoutExtensions,
@@ -546,7 +546,7 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('signIn'));
   };
 
-  public __internal_openCheckout = (props?: CheckoutProps): void => {
+  public __internal_openCheckout = (props?: __internal_CheckoutProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (disabledBillingFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
@@ -575,7 +575,7 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeDrawer('checkout'));
   };
 
-  public __internal_openPlanDetails = (props?: PlanDetailsProps): void => {
+  public __internal_openPlanDetails = (props?: __internal_PlanDetailsProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (disabledBillingFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {

packages/clerk-js/src/ui/Components.tsx

@@ -1,15 +1,15 @@
 import { createDeferredPromise } from '@clerk/shared/utils';
 import type {
+  __internal_CheckoutProps,
+  __internal_PlanDetailsProps,
   __internal_UserVerificationProps,
   Appearance,
-  CheckoutProps,
   Clerk,
   ClerkOptions,
   CreateOrganizationProps,
   EnvironmentResource,
   GoogleOneTapProps,
   OrganizationProfileProps,
-  PlanDetailsProps,
   SignInProps,
   SignUpProps,
   UserProfileProps,
@@ -108,7 +108,11 @@ export type ComponentControls = {
   ) => void;
   openDrawer: <T extends 'checkout' | 'planDetails'>(
     drawer: T,
-    props: T extends 'checkout' ? CheckoutProps : T extends 'planDetails' ? PlanDetailsProps : never,
+    props: T extends 'checkout'
+      ? __internal_CheckoutProps
+      : T extends 'planDetails'
+        ? __internal_PlanDetailsProps
+        : never,
   ) => void;
   closeDrawer: (
     drawer: 'checkout' | 'planDetails',
@@ -150,11 +154,11 @@ interface ComponentsState {
   waitlistModal: null | WaitlistProps;
   checkoutDrawer: {
     open: false;
-    props: null | CheckoutProps;
+    props: null | __internal_CheckoutProps;
   };
   planDetailsDrawer: {
     open: false;
-    props: null | PlanDetailsProps;
+    props: null | __internal_PlanDetailsProps;
   };
   nodes: Map<HTMLDivElement, HtmlNodeOptions>;
   impersonationFab: boolean;

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

@@ -1,11 +1,11 @@
-import type { CheckoutProps } from '@clerk/types';
+import type { __internal_CheckoutProps } from '@clerk/types';
 
 import { CheckoutContext, SubscriberTypeContext } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Drawer } from '../../elements';
 import { CheckoutPage } from './CheckoutPage';
 
-export const Checkout = (props: CheckoutProps) => {
+export const Checkout = (props: __internal_CheckoutProps) => {
   return (
     <Flow.Root flow='checkout'>
       <Flow.Part>

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

@@ -1,4 +1,4 @@
-import type { CheckoutProps, ClerkAPIError, CommerceCheckoutResource } from '@clerk/types';
+import type { __internal_CheckoutProps, ClerkAPIError, CommerceCheckoutResource } from '@clerk/types';
 import { useEffect } from 'react';
 
 import { Alert, Box, Flex, localizationKeys, Spinner, useAppearance, useLocalizations } from '../../customizables';
@@ -8,7 +8,7 @@ import { EmailForm } from '../UserProfile/EmailForm';
 import { CheckoutComplete } from './CheckoutComplete';
 import { CheckoutForm } from './CheckoutForm';
 
-export const CheckoutPage = (props: CheckoutProps) => {
+export const CheckoutPage = (props: __internal_CheckoutProps) => {
   const { translateError } = useLocalizations();
   const { planId, planPeriod, subscriberType, onSubscriptionComplete } = props;
   const { setIsOpen, isOpen } = useDrawerContext();

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,11 +1,11 @@
 import { useClerk, useOrganization } from '@clerk/shared/react';
 import type {
+  __internal_PlanDetailsProps,
   ClerkAPIError,
   ClerkRuntimeError,
   CommercePlanResource,
   CommerceSubscriptionPlanPeriod,
   CommerceSubscriptionResource,
-  PlanDetailsProps,
 } from '@clerk/types';
 import * as React from 'react';
 import { useState } from 'react';
@@ -28,7 +28,7 @@ import { Alert, Avatar, Drawer, SegmentedControl, useDrawerContext } from '../..
 import { InformationCircle } from '../../icons';
 import { formatDate, handleError } from '../../utils';
 
-export const PlanDetails = (props: PlanDetailsProps) => {
+export const PlanDetails = (props: __internal_PlanDetailsProps) => {
   return (
     <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
       <PlansContextProvider>
@@ -43,7 +43,7 @@ const PlanDetailsInternal = ({
   onSubscriptionCancel,
   portalRoot,
   planPeriod: _planPeriod = 'month',
-}: PlanDetailsProps) => {
+}: __internal_PlanDetailsProps) => {
   const clerk = useClerk();
   const { organization } = useOrganization();
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -91,11 +91,11 @@ const PlanDetailsInternal = ({
       });
   };
 
-  type OpenCheckoutProps = {
+  type Open__internal_CheckoutProps = {
     planPeriod?: CommerceSubscriptionPlanPeriod;
   };
 
-  const openCheckout = (props?: OpenCheckoutProps) => {
+  const openCheckout = (props?: Open__internal_CheckoutProps) => {
     handleClose();
 
     // if the plan doesn't support annual, use monthly

packages/clerk-js/src/ui/hooks/useCheckout.ts

@@ -1,11 +1,11 @@
 import type { ClerkAPIResponseError } from '@clerk/shared/error';
 import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CheckoutProps, CommerceCheckoutResource } from '@clerk/types';
+import type { __internal_CheckoutProps, CommerceCheckoutResource } from '@clerk/types';
 import { useCallback, useEffect, useState } from 'react';
 
 import { useFetch } from './useFetch';
 
-export const useCheckout = (props: CheckoutProps) => {
+export const useCheckout = (props: __internal_CheckoutProps) => {
   const { planId, planPeriod, subscriberType = 'user' } = props;
   const clerk = useClerk();
   const { organization } = useOrganization();

packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

@@ -1,5 +1,5 @@
 import { useUser } from '@clerk/shared/react';
-import type { Appearance, CheckoutProps } 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 | CheckoutProps;
+    props: null | __internal_CheckoutProps;
   };
 }) {
   const { user } = useUser();

packages/clerk-js/src/ui/lazyModules/MountedPlanDetailDrawer.tsx

@@ -1,5 +1,5 @@
 import { useUser } from '@clerk/shared/react';
-import type { Appearance, PlanDetailsProps } 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 | PlanDetailsProps;
+    props: null | __internal_PlanDetailsProps;
   };
 }) {
   const { user } = useUser();

packages/clerk-js/src/ui/types.ts

@@ -1,6 +1,7 @@
 import type {
+  __internal_CheckoutProps,
+  __internal_PlanDetailsProps,
   __internal_UserVerificationProps,
-  CheckoutProps,
   CommerceInvoiceResource,
   CommercePlanResource,
   CommerceSubscriptionResource,
@@ -10,7 +11,6 @@ import type {
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationSwitcherProps,
-  PlanDetailsProps,
   PricingTableProps,
   SignInFallbackRedirectUrl,
   SignInForceRedirectUrl,
@@ -48,9 +48,9 @@ export type AvailableComponentProps =
   | OrganizationListProps
   | WaitlistProps
   | PricingTableProps
-  | CheckoutProps
+  | __internal_CheckoutProps
   | __internal_UserVerificationProps
-  | PlanDetailsProps;
+  | __internal_PlanDetailsProps;
 
 type ComponentMode = 'modal' | 'mounted';
 
@@ -117,7 +117,7 @@ export type PricingTableCtx = PricingTableProps & {
   mode?: ComponentMode;
 };
 
-export type CheckoutCtx = CheckoutProps & {
+export type CheckoutCtx = __internal_CheckoutProps & {
   componentName: 'Checkout';
 } & NewSubscriptionRedirectUrl;
 

packages/react/src/isomorphicClerk.ts

@@ -3,13 +3,14 @@ import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import { handleValueOrFn } from '@clerk/shared/utils';
 import type {
+  __internal_CheckoutProps,
+  __internal_PlanDetailsProps,
   __internal_UserVerificationModalProps,
   __internal_UserVerificationProps,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
-  CheckoutProps,
   Clerk,
   ClerkAuthenticateWithWeb3Params,
   ClerkOptions,
@@ -30,7 +31,6 @@ import type {
   OrganizationProfileProps,
   OrganizationResource,
   OrganizationSwitcherProps,
-  PlanDetailsProps,
   PricingTableProps,
   RedirectOptions,
   SetActiveParams,
@@ -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 | CheckoutProps = null;
-  private preopenPlanDetails?: null | 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;
@@ -737,7 +737,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __internal_openCheckout = (props?: CheckoutProps) => {
+  __internal_openCheckout = (props?: __internal_CheckoutProps) => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.__internal_openCheckout(props);
     } else {
@@ -753,7 +753,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __internal_openPlanDetails = (props?: PlanDetailsProps) => {
+  __internal_openPlanDetails = (props?: __internal_PlanDetailsProps) => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.__internal_openPlanDetails(props);
     } else {

packages/types/src/clerk.ts

@@ -211,7 +211,7 @@ export interface Clerk {
    * Opens the Clerk Checkout component in a drawer.
    * @param props Optional checkout configuration parameters.
    */
-  __internal_openCheckout: (props?: CheckoutProps) => void;
+  __internal_openCheckout: (props?: __internal_CheckoutProps) => void;
 
   /**
    * Closes the Clerk Checkout drawer.
@@ -222,7 +222,7 @@ export interface Clerk {
    * Opens the Clerk PlanDetails drawer component in a drawer.
    * @param props Optional subscription details drawer configuration parameters.
    */
-  __internal_openPlanDetails: (props?: PlanDetailsProps) => void;
+  __internal_openPlanDetails: (props?: __internal_PlanDetailsProps) => void;
 
   /**
    * Closes the Clerk PlanDetails drawer.
@@ -1576,14 +1576,14 @@ type PricingTableDefaultProps = {
 type PricingTableBaseProps = {
   forOrganizations?: boolean;
   appearance?: PricingTableTheme;
-  checkoutProps?: Pick<CheckoutProps, 'appearance'>;
+  __internal_CheckoutProps?: Pick<__internal_CheckoutProps, 'appearance'>;
 };
 
 type PortalRoot = HTMLElement | null | undefined;
 
 export type PricingTableProps = PricingTableBaseProps & PricingTableDefaultProps;
 
-export type CheckoutProps = {
+export type __internal_CheckoutProps = {
   appearance?: CheckoutTheme;
   planId?: string;
   planPeriod?: CommerceSubscriptionPlanPeriod;
@@ -1598,7 +1598,7 @@ export type CheckoutProps = {
   newSubscriptionRedirectUrl?: string;
 };
 
-export type PlanDetailsProps = {
+export type __internal_PlanDetailsProps = {
   appearance?: PlanDetailTheme;
   plan?: CommercePlanResource;
   subscriberType?: CommerceSubscriberType;