diff --git a/.changeset/public-files-throw.md b/.changeset/public-files-throw.md new file mode 100644 index 00000000000..346097e247d --- /dev/null +++ b/.changeset/public-files-throw.md @@ -0,0 +1,5 @@ +--- +'@clerk/astro': minor +--- + +Add `` component to the SDK. Learn more about it in the [Clerk Billing guide](https://clerk.com/docs/billing/overview). diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts index 8b48e960265..49ec2d7d480 100644 --- a/integration/presets/longRunningApps.ts +++ b/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 }, { diff --git a/integration/templates/astro-node/src/pages/pricing-table.astro b/integration/templates/astro-node/src/pages/pricing-table.astro new file mode 100644 index 00000000000..8fac1771897 --- /dev/null +++ b/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"; +--- + + +
+ +
+
diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts index 67be6d14e38..1fc085e0f70 100644 --- a/packages/astro/src/astro-components/index.ts +++ b/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'; diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro index 51da54a4c58..ebb01fb09b7 100644 --- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro +++ b/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'; diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro new file mode 100644 index 00000000000..ddb4b7ecdcb --- /dev/null +++ b/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' +--- + + diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts index 19786c45040..117551ad594 100644 --- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts +++ b/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]) => { diff --git a/packages/astro/src/react/uiComponents.tsx b/packages/astro/src/react/uiComponents.tsx index 9b7ad219cbb..731081dbc95 100644 --- a/packages/astro/src/react/uiComponents.tsx +++ b/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 ); }, 'Waitlist'); + +export const PricingTable = withClerk(({ clerk, ...props }: WithClerkProp) => { + return ( + + ); +}, 'PricingTable');