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

Author: panteliselef

.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

@@ -1886,10 +1886,20 @@ export type __experimental_CheckoutButtonProps = {
  * <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 @@ export type __internal_PlanDetailsProps = {
  * <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;