refactor(clerk-js,types): Replace redirectUrl with afterJoinWaitlistUrl in <Waitlist /> component (#4532)

Author: nikospapcom

.changeset/spotty-pans-give.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Replace `redirectUrl` with `afterJoinWaitlistUrl` in `<Waitlist />` component

packages/clerk-js/src/ui/components/Waitlist/WaitlistForm.tsx

@@ -40,8 +40,8 @@ export const WaitlistForm = (props: WaitlistFormProps) => {
         wizard.nextStep();
 
         setTimeout(() => {
-          if (ctx.redirectUrl) {
-            void navigate(ctx.redirectUrl);
+          if (ctx.afterJoinWaitlistUrl) {
+            void navigate(ctx.afterJoinWaitlistUrl);
           }
         }, 2000);
         return;
@@ -91,7 +91,7 @@ export const WaitlistForm = (props: WaitlistFormProps) => {
           <Header.Title localizationKey={localizationKeys('waitlist.success.title')} />
           <Header.Subtitle localizationKey={localizationKeys('waitlist.success.subtitle')} />
         </Header.Root>
-        {ctx.redirectUrl && (
+        {ctx.afterJoinWaitlistUrl && (
           <Flex
             direction='col'
             elementDescriptor={descriptors.main}

packages/clerk-js/src/ui/contexts/components/Waitlist.ts

@@ -6,7 +6,7 @@ import type { WaitlistCtx } from '../../types';
 
 export type WaitlistContextType = WaitlistCtx & {
   signInUrl: string;
-  redirectUrl?: string;
+  afterJoinWaitlistUrl?: string;
 };
 
 export const WaitlistContext = createContext<WaitlistCtx | null>(null);

packages/types/src/clerk.ts

@@ -1308,9 +1308,9 @@ export type OrganizationListProps = {
 
 export type WaitlistProps = {
   /**
-   * Full URL or path to navigate after successful waitlist submission.
+   * Full URL or path to navigate after join waitlist.
    */
-  redirectUrl?: string;
+  afterJoinWaitlistUrl?: string;
   /**
    * Customisation options to fully match the Clerk components to your own brand.
    * These options serve as overrides and will be merged with the global `appearance`