fix(clerk-js, shared, clerk-react): Make props of PlanDetails stricter

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;

.changeset/shaky-sloths-unite.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+---
+
+[Billing Beta] Update `PlanDetailsProps` to reflect that either `planId` or `plan` is allowed.

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

@@ -45,6 +45,7 @@ describe('PlanDetails', () => {
  currency: 'USD',
  isDefault: false,
  payerType: ['user'],
+ forPayerType: 'user' as const,
  publiclyVisible: true,
  slug: 'test-plan',
  avatarUrl: 'https://example.com/avatar.png',

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

@@ -5,6 +5,7 @@ import React, { lazy, Suspense } from 'react';
 import type { FlowMetadata } from '../elements/contexts';
 import type { Drawer } from '../elements/Drawer';
 import type { ThemableCssProp } from '../styledSystem';
+import type { AvailableComponentCtx } from '../types';
 import type { ClerkComponentName } from './components';
 import { ClerkComponents } from './components';
 
@@ -76,7 +77,11 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
  >
  <Portal
  node={props.node}
- component={ClerkComponents[props.componentName as ClerkComponentName]}
+ component={
+ ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+ Omit<AvailableComponentCtx, 'componentName'>
+ >
+ }
  props={props.componentProps}
  componentName={props.componentName}
  />

packages/react/src/components/PlanDetailsButton.tsx

@@ -36,6 +36,7 @@ import { withClerk } from './withClerk';
 export const PlanDetailsButton = withClerk(
  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
  const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
+
  children = normalizeWithDefaultValue(children, 'Plan details');
  const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -49,7 +50,7 @@ export const PlanDetailsButton = withClerk(
  planId,
  initialPlanPeriod,
  ...planDetailsProps,
- });
+ } as __experimental_PlanDetailsButtonProps);
  };
 
  const wrappedChildClickHandler: React.MouseEventHandler = async e => {

packages/types/src/clerk.ts

@@ -1138,7 +1138,7 @@
  */
  windowNavigate: (to: URL | string) => void;
  },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1886,10 +1886,20 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __internal_PlanDetailsProps = {
+export type __internal_PlanDetailsProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  appearance?: PlanDetailTheme;
- plan?: CommercePlanResource;
- planId?: string;
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  portalId?: string;
  portalRoot?: PortalRoot;
@@ -1905,9 +1915,19 @@
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type __experimental_PlanDetailsButtonProps = {
- plan?: CommercePlanResource;
- planId?: string;
+export type __experimental_PlanDetailsButtonProps = (
+ | {
+ planId: string;
+ plan?: never;
+ }
+ | {
+ /**
+ * The plan object will be used as initial data until the plan is fetched from the server.
+ */
+ plan: CommercePlanResource;
+ planId?: never;
+ }
+) & {
  initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
  planDetailsProps?: {
  appearance?: PlanDetailTheme;