feat(astro): Add <PricingTable /> component (#5774)

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: octoper

.changeset/public-files-throw.md

@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Add `<PricingTable />` component to the SDK. Learn more about it in the [Clerk Billing guide](https://clerk.com/docs/billing/overview).

integration/presets/longRunningApps.ts

@@ -46,6 +46,7 @@ export const createLongRunningApps = () => {
     { id: 'withBilling.next.appRouter', config: next.appRouter, env: envs.withBilling },
     { id: 'withBillingStaging.vue.vite', config: vue.vite, env: envs.withBillingStaging },
     { id: 'withBilling.vue.vite', config: vue.vite, env: envs.withBilling },
+    { id: 'withBilling.astro.node', config: astro.node, env: envs.withBilling },
     // { id: 'withBillingStaging.nuxt.node', config: nuxt.node, env: envs.withBillingStaging },
     // { id: 'withBilling.nuxt.node', config: nuxt.node, env: envs.withBilling },
     {

integration/templates/astro-node/src/pages/pricing-table.astro

@@ -0,0 +1,10 @@
+---
+import { PricingTable } from "@clerk/astro/components";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Pricing Table">
+  <div class="w-full flex justify-center">
+    <PricingTable />
+  </div>
+</Layout>

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

@@ -25,3 +25,4 @@ export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';
 export { default as Waitlist } from './interactive/Waitlist.astro';
+export { default as PricingTable } from './interactive/PricingTable.astro';

packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro

@@ -11,7 +11,8 @@ interface Props {
     | 'user-button'
     | 'user-profile'
     | 'google-one-tap'
-    | 'waitlist';
+    | 'waitlist'
+    | 'pricing-table';
 }
 
 import { generateSafeId } from '@clerk/astro/internal';

packages/astro/src/astro-components/interactive/PricingTable.astro

@@ -0,0 +1,8 @@
+---
+import type { PricingTableProps } from "@clerk/types";
+type Props = PricingTableProps
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="pricing-table" />

packages/astro/src/internal/mount-clerk-astro-js-components.ts

@@ -14,6 +14,7 @@ const mountAllClerkAstroJSComponents = () => {
     'sign-up': 'mountSignUp',
     'google-one-tap': 'openGoogleOneTap',
     waitlist: 'mountWaitlist',
+    'pricing-table': 'mountPricingTable',
   } as const;
 
   Object.entries(mountFns).forEach(([category, mountFn]) => {

packages/astro/src/react/uiComponents.tsx

@@ -3,6 +3,7 @@ import type {
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationSwitcherProps,
+  PricingTableProps,
   SignInProps,
   SignUpProps,
   UserButtonProps,
@@ -185,3 +186,13 @@ export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp<WaitlistPr
     />
   );
 }, 'Waitlist');
+
+export const PricingTable = withClerk(({ clerk, ...props }: WithClerkProp<PricingTableProps>) => {
+  return (
+    <Portal
+      mount={clerk?.mountPricingTable}
+      unmount={clerk?.unmountPricingTable}
+      props={props}
+    />
+  );
+}, 'PricingTable');