replace drawer object with the name of the component

Author: panteliselef

packages/react/src/components/CheckoutButton.tsx

@@ -46,8 +46,15 @@ import { withClerk } from './withClerk';
  */
 export const CheckoutButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
-    const { planId, planPeriod, subscriberType, onSubscriptionComplete, newSubscriptionRedirectUrl, drawer, ...rest } =
-      props;
+    const {
+      planId,
+      planPeriod,
+      subscriberType,
+      onSubscriptionComplete,
+      newSubscriptionRedirectUrl,
+      checkoutProps,
+      ...rest
+    } = props;
 
     const { userId, orgId } = useAuth();
 
@@ -73,7 +80,7 @@ export const CheckoutButton = withClerk(
         subscriberType,
         onSubscriptionComplete,
         newSubscriptionRedirectUrl,
-        ...drawer,
+        ...checkoutProps,
       });
     };
 

packages/react/src/components/PlanDetailsButton.tsx

@@ -35,7 +35,7 @@ import { withClerk } from './withClerk';
  */
 export const PlanDetailsButton = withClerk(
   ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {
-    const { plan, planId, initialPlanPeriod, drawer, ...rest } = props;
+    const { plan, planId, initialPlanPeriod, planDetailsProps, ...rest } = props;
     children = normalizeWithDefaultValue(children, 'Plan details');
     const child = assertSingleChild(children)('PlanDetailsButton');
 
@@ -48,7 +48,7 @@ export const PlanDetailsButton = withClerk(
         plan,
         planId,
         initialPlanPeriod,
-        ...drawer,
+        ...planDetailsProps,
       });
     };
 

packages/react/src/components/SubscriptionDetailsButton.tsx

@@ -46,7 +46,7 @@ export const SubscriptionDetailsButton = withClerk(
     children,
     ...props
   }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {
-    const { for: forProp, drawer, onSubscriptionCancel, ...rest } = props;
+    const { for: forProp, subscriptionDetailsProps, onSubscriptionCancel, ...rest } = props;
     children = normalizeWithDefaultValue(children, 'Subscription details');
     const child = assertSingleChild(children)('SubscriptionDetailsButton');
 
@@ -70,7 +70,7 @@ export const SubscriptionDetailsButton = withClerk(
       return clerk.__internal_openSubscriptionDetails({
         for: forProp,
         onSubscriptionCancel,
-        ...drawer,
+        ...subscriptionDetailsProps,
       });
     };
 

packages/react/src/components/__tests__/CheckoutButton.test.tsx

@@ -101,7 +101,7 @@ describe('CheckoutButton', () => {
         planPeriod: 'month' as const,
         onSubscriptionComplete: vi.fn(),
         newSubscriptionRedirectUrl: '/success',
-        drawer: {
+        planDetailsProps: {
           appearance: {} as Theme,
           onClose: vi.fn(),
         },
@@ -114,7 +114,7 @@ describe('CheckoutButton', () => {
       await waitFor(() => {
         expect(mockOpenCheckout).toHaveBeenCalledWith(
           expect.objectContaining({
-            ...props.drawer,
+            ...props.planDetailsProps,
             planId: props.planId,
             onSubscriptionComplete: props.onSubscriptionComplete,
             newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,
@@ -180,7 +180,7 @@ describe('CheckoutButton', () => {
     it('handles portal configuration correctly', async () => {
       const portalProps = {
         planId: 'test_plan',
-        drawer: {
+        planDetailsProps: {
           portalId: 'custom-portal',
           portalRoot: document.createElement('div'),
         },
@@ -191,7 +191,7 @@ describe('CheckoutButton', () => {
       await userEvent.click(screen.getByText('Checkout'));
       await waitFor(() => {
         expect(mockOpenCheckout).toHaveBeenCalledWith(
-          expect.objectContaining({ ...portalProps.drawer, planId: portalProps.planId }),
+          expect.objectContaining({ ...portalProps.planDetailsProps, planId: portalProps.planId }),
         );
       });
     });

packages/react/src/components/__tests__/PlanDetailsButton.test.tsx

@@ -94,7 +94,7 @@ describe('PlanDetailsButton', () => {
       const props = {
         planId: 'test_plan',
         initialPlanPeriod: 'month' as const,
-        drawer: {
+        planDetailsProps: {
           appearance: {} as Theme,
         },
       };
@@ -105,15 +105,15 @@ describe('PlanDetailsButton', () => {
 
       await waitFor(() => {
         expect(mockOpenPlanDetails).toHaveBeenCalledWith(
-          expect.objectContaining({ ...props.drawer, planId: props.planId }),
+          expect.objectContaining({ ...props.planDetailsProps, planId: props.planId }),
         );
       });
     });
 
     it('calls clerk.__internal_openPlanDetails with plan object when clicked', async () => {
       const props = {
         plan: mockPlanResource,
-        drawer: {
+        planDetailsProps: {
           appearance: {} as Theme,
         },
       };
@@ -124,7 +124,7 @@ describe('PlanDetailsButton', () => {
 
       await waitFor(() => {
         expect(mockOpenPlanDetails).toHaveBeenCalledWith(
-          expect.objectContaining({ ...props.drawer, plan: props.plan }),
+          expect.objectContaining({ ...props.planDetailsProps, plan: props.plan }),
         );
       });
     });
@@ -152,7 +152,7 @@ describe('PlanDetailsButton', () => {
     it('handles portal configuration correctly', async () => {
       const portalProps = {
         planId: 'test_plan',
-        drawer: {
+        planDetailsProps: {
           portalId: 'custom-portal',
           portalRoot: document.createElement('div'),
         },
@@ -164,7 +164,7 @@ describe('PlanDetailsButton', () => {
 
       await waitFor(() => {
         expect(mockOpenPlanDetails).toHaveBeenCalledWith(
-          expect.objectContaining({ ...portalProps.drawer, planId: portalProps.planId }),
+          expect.objectContaining({ ...portalProps.planDetailsProps, planId: portalProps.planId }),
         );
       });
     });

packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx

@@ -121,7 +121,7 @@ describe('SubscriptionDetailsButton', () => {
       const props = {
         for: 'user' as const,
         onSubscriptionCancel,
-        drawer: {
+        planDetailsProps: {
           appearance: {} as Theme,
         },
       };
@@ -133,7 +133,7 @@ describe('SubscriptionDetailsButton', () => {
       await waitFor(() => {
         expect(mockOpenSubscriptionDetails).toHaveBeenCalledWith(
           expect.objectContaining({
-            ...props.drawer,
+            ...props.planDetailsProps,
             for: props.for,
             onSubscriptionCancel: props.onSubscriptionCancel,
           }),
@@ -183,7 +183,7 @@ describe('SubscriptionDetailsButton', () => {
 
     it('handles portal configuration correctly', async () => {
       const portalProps = {
-        drawer: {
+        planDetailsProps: {
           portalId: 'custom-portal',
           portalRoot: document.createElement('div'),
         },
@@ -196,7 +196,7 @@ describe('SubscriptionDetailsButton', () => {
       await waitFor(() => {
         expect(mockOpenSubscriptionDetails).toHaveBeenCalledWith(
           expect.objectContaining({
-            ...portalProps.drawer,
+            ...portalProps.planDetailsProps,
           }),
         );
       });

packages/types/src/clerk.ts

@@ -1847,7 +1847,7 @@ export type __experimental_CheckoutButtonProps = {
   planPeriod?: CommerceSubscriptionPlanPeriod;
   subscriberType?: CommercePayerType;
   onSubscriptionComplete?: () => void;
-  drawer?: {
+  checkoutProps?: {
     appearance?: CheckoutTheme;
     portalId?: string;
     portalRoot?: HTMLElement | null | undefined;
@@ -1893,7 +1893,7 @@ export type __experimental_PlanDetailsButtonProps = {
   plan?: CommercePlanResource;
   planId?: string;
   initialPlanPeriod?: CommerceSubscriptionPlanPeriod;
-  drawer?: {
+  planDetailsProps?: {
     appearance?: PlanDetailTheme;
     portalId?: string;
     portalRoot?: PortalRoot;
@@ -1941,7 +1941,7 @@ export type __experimental_SubscriptionDetailsButtonProps = {
    */
   for?: CommercePayerType;
   onSubscriptionCancel?: () => void;
-  drawer?: {
+  subscriptionDetailsProps?: {
     appearance?: SubscriptionDetailsTheme;
     portalId?: string;
     portalRoot?: PortalRoot;