feat(vue,astro): Add Billing buttons

.changeset/cold-parks-push.md

@@ -0,0 +1,6 @@
+---
+'@clerk/astro': minor
+'@clerk/vue': 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>

integration/templates/vue-vite/src/router.ts

@@ -47,6 +47,22 @@ const routes = [
     path: '/user',
     component: () => import('./views/Profile.vue'),
   },
+  // Billing button routes
+  {
+    name: 'CheckoutBtn',
+    path: '/billing/checkout-btn',
+    component: () => import('./views/billing/CheckoutBtn.vue'),
+  },
+  {
+    name: 'PlanDetailsBtn',
+    path: '/billing/plan-details-btn',
+    component: () => import('./views/billing/PlanDetailsBtn.vue'),
+  },
+  {
+    name: 'SubscriptionDetailsBtn',
+    path: '/billing/subscription-details-btn',
+    component: () => import('./views/billing/SubscriptionDetailsBtn.vue'),
+  },
 ];
 
 const router = createRouter({

integration/templates/vue-vite/src/views/billing/CheckoutBtn.vue

@@ -0,0 +1,17 @@
+<template>
+  <main>
+    <SignedIn>
+      <CheckoutButton
+        planId="cplan_2wMjqdlza0hTJc4HLCoBwAiExhF"
+        planPeriod="month"
+      >
+        Checkout Now
+      </CheckoutButton>
+    </SignedIn>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { SignedIn } from '@clerk/vue';
+import { CheckoutButton } from '@clerk/vue/experimental';
+</script>

integration/templates/vue-vite/src/views/billing/PlanDetailsBtn.vue

@@ -0,0 +1,9 @@
+<template>
+  <main>
+    <PlanDetailsButton planId="cplan_2wMjqdlza0hTJc4HLCoBwAiExhF"> Plan details </PlanDetailsButton>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { PlanDetailsButton } from '@clerk/vue/experimental';
+</script>

integration/templates/vue-vite/src/views/billing/SubscriptionDetailsBtn.vue

@@ -0,0 +1,9 @@
+<template>
+  <main>
+    <SubscriptionDetailsButton> Subscription details </SubscriptionDetailsButton>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { SubscriptionDetailsButton } from '@clerk/vue/experimental';
+</script>

integration/tests/pricing-table.test.ts

@@ -29,9 +29,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
   });
 
   test('renders pricing details of a specific plan', async ({ page, context }) => {
-    if (!app.name.includes('next')) {
-      return;
-    }
+    // test.skip(app.name.includes('astro'), 'Still working on it');
 
     const u = createTestUtils({ app, page, context });
     await u.po.page.goToRelative('/billing/plan-details-btn');
@@ -62,10 +60,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
   });
 
   test('when signed in, clicking get started button opens checkout drawer', async ({ page, context }) => {
-    if (!app.name.includes('next')) {
-      return;
-    }
-
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
@@ -92,9 +86,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
   });
 
   test('when signed in, clicking checkout button open checkout drawer', async ({ page, context }) => {
-    if (!app.name.includes('next')) {
-      return;
-    }
+    test.skip(app.name.includes('astro'), 'Still working on it');
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
@@ -129,9 +121,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
   });
 
   test('Displays subscription details drawer', async ({ page, context }) => {
-    if (!app.name.includes('next')) {
-      return;
-    }
+    test.skip(app.name.includes('astro'), 'Still working on it');
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();
     await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });

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,76 @@
+---
+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>> & __experimental_CheckoutButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+  logAsPropUsageDeprecation();
+}
+
+const {
+  as: Tag = 'button',
+  asChild,
+  planId,
+  planPeriod,
+  for: _for,
+  onSubscriptionComplete,
+  newSubscriptionRedirectUrl,
+  checkoutProps,
+  ...props
+} = Astro.props;
+
+const checkoutOptions = {
+  planId,
+  planPeriod,
+  for: _for,
+  onSubscriptionComplete,
+  newSubscriptionRedirectUrl,
+  ...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.');
+    }
+
+    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,74 @@
+---
+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>> &
+  __experimental_SubscriptionDetailsButtonProps;
+
+import { generateSafeId } from '@clerk/astro/internal';
+
+const safeId = generateSafeId();
+
+if ('as' in Astro.props) {
+  logAsPropUsageDeprecation();
+}
+
+const {
+  as: Tag = 'button',
+  asChild,
+  for: _for,
+  subscriptionDetailsProps,
+  onSubscriptionCancel,
+  ...props
+} = Astro.props;
+
+const subscriptionDetailsOptions = {
+  for: _for,
+  onSubscriptionCancel,
+  ...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.',
+      );
+    }
+
+    return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+  });
+</script>