feat(clerk-js,nextjs,clerk-react,types): Introduce `<Waitlist />` component #4376

nikospapcom · 2024-10-22T11:43:52Z

Description

Show Join waitlist promt from <SignIn /> component when mode is waitlist
Change the text in RestrictedAccess component when mode is waitlist
Introduce <Waitlist /> component to allow users to join in the waitlist via email
Introduce joinWaitlist method in clerk class
Introduce redirectToWaitlist function in clerk class to allow user to redirect to waitlist page

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

`<SignIn />` Component with `sign_up.mode = waitlist`

`<SignUp />` Component with `sign_up.mode = waitlist`

`<Waitlist />` Component

`<Waitlist />` Component success screen

`<Waitlist />` Component success screen with `redirectUrl` presented

changeset-bot · 2024-10-22T11:43:55Z

🦋 Changeset detected

Latest commit: 0b8ba3d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
@clerk/localizations	Minor
@clerk/clerk-js	Minor
@clerk/nextjs	Minor
@clerk/clerk-react	Minor
@clerk/types	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/elements	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/clerk-js/src/core/resources/__tests__/Waitlist.test.ts

panteliselef · 2024-10-29T10:28:01Z

packages/react/src/isomorphicClerk.ts

+  unmountWaitlist = (node: HTMLDivElement): void => {
+    if (this.clerkjs && this.#loaded) {
+      this.clerkjs.unmountWaitlist(node);
+    }
+  };


❓ Are we missing a this.premountWaitlistNodes.delete(node); here ?

Good catch Pantelis 🙏

.changeset/nine-squids-buy.md

packages/localizations/src/en-US.ts

.changeset/nine-squids-buy.md

nikospapcom · 2024-11-01T12:39:02Z

!snapshot

clerk-cookie · 2024-11-01T12:42:47Z

Hey @nikospapcom - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.4.3-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/backend	1.15.3-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/chrome-extension	1.3.25-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/clerk-js	5.31.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/elements	0.18.1-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/clerk-expo	2.2.31-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/expo-passkeys	1.0.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/express	1.3.5-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/fastify	2.0.7-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/localizations	3.5.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/nextjs	6.2.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/clerk-react	5.15.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/remix	4.2.43-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/clerk-sdk-node	5.0.56-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/shared	2.11.1-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/tanstack-start	0.4.19-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/testing	1.3.17-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/themes	2.1.41-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/types	4.30.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c
@clerk/ui	0.1.12-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.4.3-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/backend

npm i @clerk/backend@1.15.3-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.3.25-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.31.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/elements

npm i @clerk/elements@0.18.1-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.31-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/express

npm i @clerk/express@1.3.5-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/fastify

npm i @clerk/fastify@2.0.7-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/localizations

npm i @clerk/localizations@3.5.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.2.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.15.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/remix

npm i @clerk/remix@4.2.43-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.56-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/shared

npm i @clerk/shared@2.11.1-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.4.19-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/testing

npm i @clerk/testing@1.3.17-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/themes

npm i @clerk/themes@2.1.41-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/types

npm i @clerk/types@4.30.0-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

@clerk/ui

npm i @clerk/ui@0.1.12-snapshot.ve498412ac8617eb535cbbeb78d27ded11ad8f45c --save-exact

mlafeldt · 2024-11-23T12:00:06Z

One thing I just noticed about Astro: there's now a waitlistUrl in the Astro integration config and the SignUp and SignIn components. However, you can't really use this new feature when you've disabled the account portal because the Waitlist component is missing. I guess Astro support will be shipped later?

nikospapcom · 2024-11-25T08:59:41Z

One thing I just noticed about Astro: there's now a waitlistUrl in the Astro integration config and the SignUp and SignIn components. However, you can't really use this new feature when you've disabled the account portal because the Waitlist component is missing. I guess Astro support will be shipped later?

Hey @mlafeldt
We're working on it and I'll have an update this week

nikospapcom · 2024-11-27T11:53:25Z

One thing I just noticed about Astro: there's now a waitlistUrl in the Astro integration config and the SignUp and SignIn components. However, you can't really use this new feature when you've disabled the account portal because the Waitlist component is missing. I guess Astro support will be shipped later?

Hey @mlafeldt
We released the support of <Waitlist /> component for astro. You should install version @clerk/astro@1.5.0 :)
Feel free to reach out us if you running any issue
Thanks

mlafeldt · 2024-11-27T13:29:32Z

@nikospapcom That's awesome, will give it a try! 🙏🏻

mlafeldt · 2024-11-28T12:15:59Z

@nikospapcom Added a waitlist to my Astro app without a hitch. 💥 Left some feedback here.

…ponent (#4376)

nikospapcom self-assigned this Oct 22, 2024

clerk-cookie added types clerk-js nextjs react localizations playground labels Oct 22, 2024

nikospapcom changed the title ~~feat(clerk-js,nextjs,react,types): Introduce <Waitlist /> component~~ feat(clerk-js,nextjs,react,types): Introduce <Waitlist /> component Oct 22, 2024

nikospapcom changed the title ~~feat(clerk-js,nextjs,react,types): Introduce <Waitlist /> component~~ feat(clerk-js,nextjs,clerk-react,types): Introduce <Waitlist /> component Oct 22, 2024

clerk-cookie added the chrome-extension label Oct 22, 2024

nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch from 73186ec to 40923a6 Compare October 23, 2024 13:17

nikospapcom requested review from anagstef, octoper and panteliselef and removed request for anagstef, octoper and panteliselef October 23, 2024 13:58

nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch 2 times, most recently from 39d608b to fb7aedf Compare October 24, 2024 06:08

nikospapcom requested review from anagstef, octoper and panteliselef October 24, 2024 07:09

nikospapcom marked this pull request as ready for review October 24, 2024 07:09

panteliselef approved these changes Oct 29, 2024

View reviewed changes

alexcarpenter reviewed Oct 29, 2024

View reviewed changes

packages/localizations/src/en-US.ts Show resolved Hide resolved

packages/localizations/src/en-US.ts Outdated Show resolved Hide resolved

jacekradko reviewed Oct 30, 2024

View reviewed changes

.changeset/nine-squids-buy.md Outdated Show resolved Hide resolved

nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch 3 times, most recently from 0937e66 to 1313825 Compare October 31, 2024 10:57

nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch 2 times, most recently from 0e465b3 to e498412 Compare November 1, 2024 12:37

nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch 2 times, most recently from 2b678bd to 06fd2b2 Compare November 4, 2024 10:43

feat(clerk-js,nextjs,react,types): Introduce <Waitlist /> component

0b8ba3d

nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch from 06fd2b2 to 0b8ba3d Compare November 4, 2024 12:46

nikospapcom merged commit d74a6a7 into main Nov 4, 2024
22 checks passed

nikospapcom deleted the nikospap/user-596-create-waitlist-component branch November 4, 2024 13:10

clerk-cookie mentioned this pull request Nov 4, 2024

ci(repo): Version packages #4472

Merged

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025

feat(clerk-js,nextjs,clerk-react,types): Introduce <Waitlist /> com…

77a0369

…ponent (#4376)

feat(clerk-js,nextjs,clerk-react,types): Introduce <Waitlist /> component #4376

feat(clerk-js,nextjs,clerk-react,types): Introduce <Waitlist /> component #4376

Uh oh!

Conversation

nikospapcom commented Oct 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

<SignIn /> Component with sign_up.mode = waitlist

<SignUp /> Component with sign_up.mode = waitlist

<Waitlist /> Component

<Waitlist /> Component success screen

<Waitlist /> Component success screen with redirectUrl presented

Uh oh!

changeset-bot bot commented Oct 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

panteliselef Oct 29, 2024

Choose a reason for hiding this comment

Uh oh!

nikospapcom Oct 31, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nikospapcom commented Nov 1, 2024

Uh oh!

clerk-cookie commented Nov 1, 2024

Uh oh!

Uh oh!

mlafeldt commented Nov 23, 2024

Uh oh!

nikospapcom commented Nov 25, 2024

Uh oh!

nikospapcom commented Nov 27, 2024

Uh oh!

mlafeldt commented Nov 27, 2024

Uh oh!

mlafeldt commented Nov 28, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

feat(clerk-js,nextjs,clerk-react,types): Introduce `<Waitlist />` component #4376

feat(clerk-js,nextjs,clerk-react,types): Introduce `<Waitlist />` component #4376

nikospapcom commented Oct 22, 2024 •

edited

Loading

`<SignIn />` Component with `sign_up.mode = waitlist`

`<SignUp />` Component with `sign_up.mode = waitlist`

`<Waitlist />` Component

`<Waitlist />` Component success screen

`<Waitlist />` Component success screen with `redirectUrl` presented

changeset-bot bot commented Oct 22, 2024 •

edited

Loading