feat(clerk-react, nextjs): Introduce commerce buttons

.changeset/curly-jeans-sleep.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': minor
+---
+
+Expose `<CheckoutButton/>`, `<SubscriptionDetailsButton/>`, `<PlanDetailsButton/>` from `@clerk/clerk-react/experimental`.

.changeset/dark-coins-shake.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': minor
+---
+
+Expose `<CheckoutButton/>`, `<SubscriptionDetailsButton/>`, `<PlanDetailsButton/>` from `@clerk/nextjs/experimental`.

packages/nextjs/package.json

@@ -49,6 +49,11 @@
       "types": "./dist/types/webhooks.d.ts",
       "import": "./dist/esm/webhooks.js",
       "require": "./dist/cjs/webhooks.js"
+    },
+    "./experimental": {
+      "types": "./dist/types/experimental.d.ts",
+      "import": "./dist/esm/experimental.js",
+      "require": "./dist/cjs/experimental.js"
     }
   },
   "types": "./dist/types/index.d.ts",

packages/nextjs/src/experimental.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export { CheckoutButton, PlanDetailsButton, SubscriptionDetailsButton } from '@clerk/clerk-react/experimental';

packages/react/package.json

@@ -53,13 +53,24 @@
         "default": "./dist/errors.js"
       }
     },
+    "./experimental": {
+      "import": {
+        "types": "./dist/experimental.d.mts",
+        "default": "./dist/experimental.mjs"
+      },
+      "require": {
+        "types": "./dist/experimental.d.ts",
+        "default": "./dist/experimental.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
   "files": [
     "dist",
     "internal",
-    "errors"
+    "errors",
+    "experimental"
   ],
   "scripts": {
     "build": "tsup",

packages/react/src/components/CheckoutButton.tsx

@@ -0,0 +1,68 @@
+import type { __internal_CheckoutProps } from '@clerk/types';
+import React from 'react';
+
+import { useAuth } from '../hooks';
+import type { WithClerkProp } from '../types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
+import { withClerk } from './withClerk';
+
+export type { __internal_CheckoutProps };
+
+export const CheckoutButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__internal_CheckoutProps>>) => {
+    const {
+      appearance,
+      planId,
+      planPeriod,
+      subscriberType,
+      onSubscriptionComplete,
+      portalId,
+      portalRoot,
+      newSubscriptionRedirectUrl,
+      onClose,
+      ...rest
+    } = props;
+
+    const { userId, orgId } = useAuth();
+
+    if (userId === null) {
+      throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+    }
+
+    if (orgId === null && subscriberType === 'org') {
+      throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+    }
+
+    children = normalizeWithDefaultValue(children, 'Checkout');
+    const child = assertSingleChild(children)('CheckoutButton');
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openCheckout({
+        appearance,
+        planId,
+        planPeriod,
+        subscriberType,
+        onSubscriptionComplete,
+        portalId,
+        portalRoot,
+        newSubscriptionRedirectUrl,
+        onClose,
+      });
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  { component: 'CheckoutButton', renderWhileLoading: true },
+);

packages/react/src/components/PlanDetailsButton.tsx

@@ -0,0 +1,42 @@
+import type { __internal_PlanDetailsProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from '../types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
+import { withClerk } from './withClerk';
+
+export type { __internal_PlanDetailsProps };
+
+export const PlanDetailsButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__internal_PlanDetailsProps>>) => {
+    const { plan, planId, appearance, initialPlanPeriod, portalId, portalRoot, ...rest } = props;
+    children = normalizeWithDefaultValue(children, 'Plan details');
+    const child = assertSingleChild(children)('PlanDetailsButton');
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openPlanDetails({
+        plan,
+        planId,
+        appearance,
+        initialPlanPeriod,
+        portalId,
+        portalRoot,
+      });
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  { component: 'PlanDetailsButton', renderWhileLoading: true },
+);

packages/react/src/components/SubscriptionDetailsButton.tsx

@@ -0,0 +1,54 @@
+import type { __internal_SubscriptionDetailsProps } from '@clerk/types';
+import React from 'react';
+
+import { useAuth } from '../hooks';
+import type { WithClerkProp } from '../types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
+import { withClerk } from './withClerk';
+
+export type { __internal_SubscriptionDetailsProps };
+
+export const SubscriptionDetailsButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__internal_SubscriptionDetailsProps>>) => {
+    const { for: forProp, appearance, onSubscriptionCancel, portalId, portalRoot, ...rest } = props;
+    children = normalizeWithDefaultValue(children, 'Subscription details');
+    const child = assertSingleChild(children)('SubscriptionDetailsButton');
+
+    const { userId, orgId } = useAuth();
+
+    if (userId === null) {
+      throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+    }
+
+    if (orgId === null && forProp === 'org') {
+      throw new Error(
+        'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+      );
+    }
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openSubscriptionDetails({
+        for: forProp,
+        appearance,
+        onSubscriptionCancel,
+        portalId,
+        portalRoot,
+      });
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  { component: 'SubscriptionDetailsButton', renderWhileLoading: true },
+);

packages/react/src/experimental.ts

@@ -0,0 +1,3 @@
+export { CheckoutButton } from './components/CheckoutButton';
+export { PlanDetailsButton } from './components/PlanDetailsButton';
+export { SubscriptionDetailsButton } from './components/SubscriptionDetailsButton';

packages/react/src/utils/childrenUtils.tsx

@@ -5,7 +5,16 @@ import { multipleChildrenInButtonComponent } from '../errors/messages';
 
 export const assertSingleChild =
   (children: React.ReactNode) =>
-  (name: 'SignInButton' | 'SignUpButton' | 'SignOutButton' | 'SignInWithMetamaskButton') => {
+  (
+    name:
+      | 'SignInButton'
+      | 'SignUpButton'
+      | 'SignOutButton'
+      | 'SignInWithMetamaskButton'
+      | 'CheckoutButton'
+      | 'SubscriptionDetailsButton'
+      | 'PlanDetailsButton',
+  ) => {
     try {
       return React.Children.only(children);
     } catch {

packages/react/tsup.config.ts

@@ -12,6 +12,7 @@ export default defineConfig(overrideOptions => {
       index: 'src/index.ts',
       internal: 'src/internal.ts',
       errors: 'src/errors.ts',
+      experimental: 'src/experimental.ts',
     },
     dts: true,
     onSuccess: shouldPublish ? 'pnpm publish:local' : undefined,