Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Nov 4, 2024
Merged

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

merged 1 commit into from
Nov 4, 2024
+2,060 −62

Conversation

nikospapcom
Copy link
Member

@nikospapcom nikospapcom commented Oct 22, 2024 •
edited
Loading

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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

<SignIn /> Component with sign_up.mode = waitlist

Screenshot 2024-10-23 at 5 07 42 PM

<SignUp /> Component with sign_up.mode = waitlist

Screenshot 2024-10-23 at 5 07 35 PM

<Waitlist /> Component

Screenshot 2024-10-23 at 5 07 48 PM

<Waitlist /> Component success screen

Screenshot 2024-10-23 at 5 08 19 PM

<Waitlist /> Component success screen with redirectUrl presented

Screenshot 2024-10-23 at 5 08 07 PM

Sorry, something went wrong.

@nikospapcom nikospapcom self-assigned this Oct 22, 2024
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Oct 22, 2024 •
edited
Loading

🦋 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

@nikospapcom 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 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
@nikospapcom nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch from 73186ec to 40923a6 Compare October 23, 2024 13:17
@nikospapcom nikospapcom requested review from panteliselef, octoper and anagstef and removed request for octoper, anagstef and panteliselef October 23, 2024 13:58
@nikospapcom 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 nikospapcom marked this pull request as ready for review October 24, 2024 07:09
panteliselef
panteliselef approved these changes Oct 29, 2024
View reviewed changes
packages/react/src/isomorphicClerk.ts Outdated
Comment on lines 939 to 945
unmountWaitlist = (node: HTMLDivElement): void => {
if (this.clerkjs && this.#loaded) {
this.clerkjs.unmountWaitlist(node);
}
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch Pantelis 🙏

@nikospapcom 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 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
Copy link
Member Author

!snapshot

@clerk-cookie
Copy link
Collaborator

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

@nikospapcom 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
@nikospapcom nikospapcom force-pushed the nikospap/user-596-create-waitlist-component branch from 06fd2b2 to 0b8ba3d Compare November 4, 2024 12:46
@nikospapcom nikospapcom merged commit d74a6a7 into main Nov 4, 2024
22 checks passed
@nikospapcom nikospapcom deleted the nikospap/user-596-create-waitlist-component branch November 4, 2024 13:10
@clerk-cookie clerk-cookie mentioned this pull request Nov 4, 2024
Merged
@mlafeldt
Copy link
Contributor

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
Copy link
Member Author

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
Copy link
Member Author

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
Copy link
Contributor

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

@mlafeldt
Copy link
Contributor

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

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
@nikospapcom @wobsoriano
feat(clerk-js,nextjs,clerk-react,types): Introduce <Waitlist /> com…
77a0369 
…ponent (#4376)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alexcarpenter alexcarpenter

@jacekradko jacekradko

@panteliselef panteliselef

@octoper octoper

@anagstef anagstef

Assignees

@nikospapcom nikospapcom

Labels
chrome-extension clerk-js localizations nextjs playground react types
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@nikospapcom @clerk-cookie @mlafeldt @alexcarpenter @jacekradko @panteliselef