feat(astro): Add Billing buttons

.changeset/cold-parks-push.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Expose billing buttons as experimental

integration/templates/astro-node/src/pages/billing/checkout-btn.astro

@@ -0,0 +1,17 @@
+---
+import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Checkout Button">
+  <main>
+    <SignedIn>
+      <CheckoutButton
+        planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+        planPeriod='month'
+      >
+        Checkout Now
+      </CheckoutButton>
+    </SignedIn>
+  </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/plan-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { PlanDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Plan Details Button">
+  <main>
+    <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+      Plan details
+    </PlanDetailsButton>
+  </main>
+</Layout>

integration/templates/astro-node/src/pages/billing/subscription-details-btn.astro

@@ -0,0 +1,12 @@
+---
+import { __experimental_SubscriptionDetailsButton as SubscriptionDetailsButton } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
+---
+
+<Layout title="Subscription Details Button">
+  <main>
+    <SubscriptionDetailsButton>
+      Subscription details
+    </SubscriptionDetailsButton>
+  </main>
+</Layout>

packages/astro/src/astro-components/index.ts

@@ -12,6 +12,9 @@ export { default as AuthenticateWithRedirectCallback } from './control/Authentic
 export { default as SignInButton } from './unstyled/SignInButton.astro';
 export { default as SignUpButton } from './unstyled/SignUpButton.astro';
 export { default as SignOutButton } from './unstyled/SignOutButton.astro';
+export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
+export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
+export { default as PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
 
 /**
  * UI Components

packages/astro/src/astro-components/unstyled/CheckoutButton.astro

@@ -0,0 +1,86 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+  Omit<__experimental_CheckoutButtonProps, 'onSubscriptionComplete'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+  logAsPropUsageDeprecation();
+}
+
+const {
+  as: Tag = 'button',
+  asChild,
+  planId,
+  planPeriod,
+  for: _for,
+  newSubscriptionRedirectUrl,
+  checkoutProps,
+  clickIdentifier,
+  ...props
+} = Astro.props;
+
+const checkoutOptions = {
+  planId,
+  planPeriod,
+  for: _for,
+  newSubscriptionRedirectUrl,
+  clickIdentifier,
+  ...checkoutProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+  htmlElement = await Astro.slots.render('default');
+  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+  asChild ? (
+    <Fragment set:html={htmlElement} />
+  ) : (
+    <Tag
+      {...props}
+      data-clerk-unstyled-id={safeId}
+    >
+      <slot>Checkout</slot>
+    </Tag>
+  )
+}
+
+<script is:inline define:vars={{ props, checkoutOptions, safeId }}>
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+  btn.addEventListener('click', () => {
+    const clerk = window.Clerk;
+
+    // Authentication checks
+    if (!clerk.user) {
+      throw new Error('Ensure that `<CheckoutButton />` is rendered inside a `<SignedIn />` component.');
+    }
+
+    if (!clerk.organization && checkoutOptions.for === 'organization') {
+      throw new Error('Wrap `<CheckoutButton for="organization" />` with a check for an active organization.');
+    }
+
+    console.log('checkoutOptions', checkoutOptions);
+
+    if (checkoutOptions.clickIdentifier) {
+      const clickEvent = new CustomEvent('clerk:subscription-complete', { detail: checkoutOptions.clickIdentifier });
+      checkoutOptions.onSubscriptionComplete = () => {
+        document.dispatchEvent(clickEvent);
+      };
+    }
+
+    return clerk.__internal_openCheckout(checkoutOptions);
+  });
+</script>

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & __experimental_PlanDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+  logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, plan, planId, initialPlanPeriod, planDetailsProps, ...props } = Astro.props;
+
+const planDetailsOptions = {
+  plan,
+  planId,
+  initialPlanPeriod,
+  ...planDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+  htmlElement = await Astro.slots.render('default');
+  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+  asChild ? (
+    <Fragment set:html={htmlElement} />
+  ) : (
+    <Tag
+      {...props}
+      data-clerk-unstyled-id={safeId}
+    >
+      <slot>Plan details</slot>
+    </Tag>
+  )
+}
+
+<script is:inline define:vars={{ props, planDetailsOptions, safeId }}>
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+  btn.addEventListener('click', () => {
+    const clerk = window.Clerk;
+
+    return clerk.__internal_openPlanDetails(planDetailsOptions);
+  });
+</script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro

@@ -0,0 +1,75 @@
+---
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
+
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> &
+  Omit<__experimental_SubscriptionDetailsButtonProps, 'onSubscriptionCancel'> & { clickIdentifier?: string };
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+  logAsPropUsageDeprecation();
+}
+
+const { as: Tag = 'button', asChild, for: _for, clickIdentifier, subscriptionDetailsProps, ...props } = Astro.props;
+
+const subscriptionDetailsOptions = {
+  for: _for,
+  clickIdentifier,
+  ...subscriptionDetailsProps,
+};
+
+let htmlElement = '';
+
+if (asChild) {
+  htmlElement = await Astro.slots.render('default');
+  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+}
+---
+
+{
+  asChild ? (
+    <Fragment set:html={htmlElement} />
+  ) : (
+    <Tag
+      {...props}
+      data-clerk-unstyled-id={safeId}
+    >
+      <slot>Subscription details</slot>
+    </Tag>
+  )
+}
+
+<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+
+  btn.addEventListener('click', () => {
+    const clerk = window.Clerk;
+
+    // Authentication checks
+    if (!clerk.user) {
+      throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
+    }
+
+    if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
+      throw new Error(
+        'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
+      );
+    }
+    if (subscriptionDetailsOptions.clickIdentifier) {
+      const clickEvent = new CustomEvent('clerk:subscription-cancel', {
+        detail: subscriptionDetailsOptions.clickIdentifier,
+      });
+      subscriptionDetailsOptions.onSubscriptionCancel = () => {
+        document.dispatchEvent(clickEvent);
+      };
+    }
+
+    return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+  });
+</script>

packages/astro/src/react/CheckoutButton.tsx

@@ -0,0 +1,53 @@
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_CheckoutButtonProps as CheckoutButtonProps };
+
+export const CheckoutButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {
+    const {
+      planId,
+      planPeriod,
+      for: _for,
+      onSubscriptionComplete,
+      newSubscriptionRedirectUrl,
+      checkoutProps,
+      ...rest
+    } = props;
+
+    // Note: Auth checks are moved to runtime since Astro React components
+    // don't have access to auth context at render time like Vue/React apps do
+
+    children = normalizeWithDefaultValue(children, 'Checkout');
+    const child = assertSingleChild(children)('CheckoutButton');
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openCheckout({
+        planId,
+        planPeriod,
+        for: _for,
+        onSubscriptionComplete,
+        newSubscriptionRedirectUrl,
+        ...checkoutProps,
+      });
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        void safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'CheckoutButton',
+);

packages/astro/src/react/PlanDetailsButton.tsx

@@ -0,0 +1,40 @@
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import React from 'react';
+
+import type { WithClerkProp } from './utils';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+
+export type { __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps };
+
+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');
+
+    const clickHandler = () => {
+      if (!clerk) {
+        return;
+      }
+
+      return clerk.__internal_openPlanDetails({
+        plan,
+        planId,
+        initialPlanPeriod,
+        ...planDetailsProps,
+      } as __experimental_PlanDetailsButtonProps);
+    };
+
+    const wrappedChildClickHandler: React.MouseEventHandler = e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        void safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'PlanDetailsButton',
+);