From aa94dbded8c881f21052fe3ad90d9ce33e23fecb Mon Sep 17 00:00:00 2001
From: Papageorgiou Nikos <admin@nikospap.com>
Date: Mon, 25 Nov 2024 18:32:38 +0200
Subject: [PATCH] feat(astro): Introduce `<Waitlist />` component (#4650)

---
 .changeset/empty-roses-peel.md                  |  5 +++++
 packages/astro/src/astro-components/index.ts    |  1 +
 .../InternalUIComponentRenderer.astro           | 17 +++++++++++++----
 .../astro-components/interactive/Waitlist.astro |  8 ++++++++
 .../internal/mount-clerk-astro-js-components.ts |  1 +
 packages/astro/src/react/uiComponents.tsx       | 11 +++++++++++
 6 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/empty-roses-peel.md
 create mode 100644 packages/astro/src/astro-components/interactive/Waitlist.astro

diff --git a/.changeset/empty-roses-peel.md b/.changeset/empty-roses-peel.md
new file mode 100644
index 0000000000..7d7d8dd243
--- /dev/null
+++ b/.changeset/empty-roses-peel.md
@@ -0,0 +1,5 @@
+---
+'@clerk/astro': minor
+---
+
+Introduce `<Waitlist />` component for Astro
diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts
index bd41eafb34..67be6d14e3 100644
--- a/packages/astro/src/astro-components/index.ts
+++ b/packages/astro/src/astro-components/index.ts
@@ -24,3 +24,4 @@ export { OrganizationProfile } from './interactive/OrganizationProfile';
 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';
diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
index d7facd1f9a..51da54a4c5 100644
--- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
@@ -1,13 +1,22 @@
 ---
 interface Props {
-  [key: string]: unknown
-  id?: string
-  component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile' | 'google-one-tap'
+  [key: string]: unknown;
+  id?: string;
+  component:
+    | 'sign-in'
+    | 'sign-up'
+    | 'organization-list'
+    | 'organization-profile'
+    | 'organization-switcher'
+    | 'user-button'
+    | 'user-profile'
+    | 'google-one-tap'
+    | 'waitlist';
 }
 
 import { generateSafeId } from '@clerk/astro/internal';
 
-const { component, id, ...props } = Astro.props
+const { component, id, ...props } = Astro.props;
 
 const safeId = id || generateSafeId();
 ---
diff --git a/packages/astro/src/astro-components/interactive/Waitlist.astro b/packages/astro/src/astro-components/interactive/Waitlist.astro
new file mode 100644
index 0000000000..cfbcbb6bdc
--- /dev/null
+++ b/packages/astro/src/astro-components/interactive/Waitlist.astro
@@ -0,0 +1,8 @@
+---
+import type { WaitlistProps } from "@clerk/types";
+type Props = WaitlistProps
+
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="waitlist" />
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 af8fb87ea7..0a9664450d 100644
--- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts
+++ b/packages/astro/src/internal/mount-clerk-astro-js-components.ts
@@ -13,6 +13,7 @@ const mountAllClerkAstroJSComponents = () => {
     'sign-in': 'mountSignIn',
     'sign-up': 'mountSignUp',
     'google-one-tap': 'openGoogleOneTap',
+    waitlist: 'mountWaitlist',
   } 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 3bedd626e4..9b7ad219cb 100644
--- a/packages/astro/src/react/uiComponents.tsx
+++ b/packages/astro/src/react/uiComponents.tsx
@@ -7,6 +7,7 @@ import type {
   SignUpProps,
   UserButtonProps,
   UserProfileProps,
+  WaitlistProps,
 } from '@clerk/types';
 import React from 'react';
 
@@ -174,3 +175,13 @@ export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<Google
     />
   );
 }, 'GoogleOneTap');
+
+export const Waitlist = withClerk(({ clerk, ...props }: WithClerkProp<WaitlistProps>) => {
+  return (
+    <Portal
+      mount={clerk?.mountWaitlist}
+      unmount={clerk?.unmountWaitlist}
+      props={props}
+    />
+  );
+}, 'Waitlist');