Document useWaitlist()

docs/_partials/custom-flows/waitlist.mdx

@@ -0,0 +1,306 @@
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/waitlist/page.tsx' }}
+  'use client'
+
+  import { useWaitlist } from '@clerk/nextjs'
+
+  export default function Page() {
+    const { waitlist, errors, fetchStatus } = useWaitlist()
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      const formData = new FormData(e.currentTarget)
+      const emailAddress = formData.get('emailAddress') as string
+
+      const { error } = await waitlist.join({ emailAddress })
+      if (error) {
+        console.error('Failed to join waitlist:', error)
+      }
+    }
+
+    if (waitlist.id) {
+      return (
+        <div>
+          <h1>Successfully joined the waitlist!</h1>
+          <p>We'll notify you when you're approved.</p>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <h1>Join the Waitlist</h1>
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="email">Email address</label>
+          <input id="email" name="emailAddress" type="email" required />
+          {errors.fields.emailAddress && <p>{errors.fields.emailAddress.longMessage}</p>}
+          <button type="submit" disabled={fetchStatus === 'fetching'}>
+            {fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
+          </button>
+        </form>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/waitlist.tsx' }}
+  import { useWaitlist } from '@clerk/react'
+
+  export default function WaitlistPage() {
+    const { waitlist, errors, fetchStatus } = useWaitlist()
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      const formData = new FormData(e.currentTarget)
+      const emailAddress = formData.get('emailAddress') as string
+
+      const { error } = await waitlist.join({ emailAddress })
+      if (error) {
+        console.error('Failed to join waitlist:', error)
+      }
+    }
+
+    if (waitlist.id) {
+      return (
+        <div>
+          <h1>Successfully joined the waitlist!</h1>
+          <p>We'll notify you when you're approved.</p>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <h1>Join the Waitlist</h1>
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="email">Email address</label>
+          <input id="email" name="emailAddress" type="email" required />
+          {errors.fields.emailAddress && <p>{errors.fields.emailAddress.longMessage}</p>}
+          <button type="submit" disabled={fetchStatus === 'fetching'}>
+            {fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
+          </button>
+        </form>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'routes/waitlist.tsx' }}
+  import { useWaitlist } from '@clerk/react-router'
+
+  export default function WaitlistPage() {
+    const { waitlist, errors, fetchStatus } = useWaitlist()
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      const formData = new FormData(e.currentTarget)
+      const emailAddress = formData.get('emailAddress') as string
+
+      const { error } = await waitlist.join({ emailAddress })
+      if (error) {
+        console.error('Failed to join waitlist:', error)
+      }
+    }
+
+    if (waitlist.id) {
+      return (
+        <div>
+          <h1>Successfully joined the waitlist!</h1>
+          <p>We'll notify you when you're approved.</p>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <h1>Join the Waitlist</h1>
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="email">Email address</label>
+          <input id="email" name="emailAddress" type="email" required />
+          {errors.fields.emailAddress && <p>{errors.fields.emailAddress.longMessage}</p>}
+          <button type="submit" disabled={fetchStatus === 'fetching'}>
+            {fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
+          </button>
+        </form>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/waitlist.tsx' }}
+  import { useWaitlist } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/waitlist')({
+    component: WaitlistPage,
+  })
+
+  export default function WaitlistPage() {
+    const { waitlist, errors, fetchStatus } = useWaitlist()
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      const formData = new FormData(e.currentTarget)
+      const emailAddress = formData.get('emailAddress') as string
+
+      const { error } = await waitlist.join({ emailAddress })
+      if (error) {
+        console.error('Failed to join waitlist:', error)
+      }
+    }
+
+    if (waitlist.id) {
+      return (
+        <div>
+          <h1>Successfully joined the waitlist!</h1>
+          <p>We'll notify you when you're approved.</p>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <h1>Join the Waitlist</h1>
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="email">Email address</label>
+          <input id="email" name="emailAddress" type="email" required />
+          {errors.fields.emailAddress && <p>{errors.fields.emailAddress.longMessage}</p>}
+          <button type="submit" disabled={fetchStatus === 'fetching'}>
+            {fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
+          </button>
+        </form>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/(auth)/waitlist.tsx' }}
+  import { useWaitlist } from '@clerk/expo'
+  import { useState } from 'react'
+  import { View, Text, TextInput, Button, StyleSheet } from 'react-native'
+
+  export default function WaitlistScreen() {
+    const { waitlist, errors, fetchStatus } = useWaitlist()
+    const [emailAddress, setEmailAddress] = useState('')
+
+    const handleSubmit = async () => {
+      const { error } = await waitlist.join({ emailAddress })
+      if (error) {
+        console.error('Failed to join waitlist:', error)
+      }
+    }
+
+    if (waitlist.id) {
+      return (
+        <View style={styles.container}>
+          <Text style={styles.title}>Successfully joined the waitlist!</Text>
+          <Text style={styles.message}>We'll notify you when you're approved.</Text>
+        </View>
+      )
+    }
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Join the Waitlist</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Email address"
+          value={emailAddress}
+          onChangeText={setEmailAddress}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoComplete="email"
+        />
+        {errors.fields.emailAddress && (
+          <Text style={styles.error}>{errors.fields.emailAddress.longMessage}</Text>
+        )}
+        <Button
+          title={fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
+          onPress={handleSubmit}
+          disabled={fetchStatus === 'fetching'}
+        />
+      </View>
+    )
+  }
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 20,
+      justifyContent: 'center',
+    },
+    title: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      marginBottom: 20,
+    },
+    message: {
+      fontSize: 16,
+      color: '#666',
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: '#ccc',
+      borderRadius: 5,
+      padding: 10,
+      marginBottom: 10,
+    },
+    error: {
+      color: 'red',
+      marginBottom: 10,
+    },
+  })
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/pages/waitlist.tsx' }}
+  import { useWaitlist } from '@clerk/chrome-extension'
+
+  export default function Waitlist() {
+    const { waitlist, errors, fetchStatus } = useWaitlist()
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      const formData = new FormData(e.currentTarget)
+      const emailAddress = formData.get('emailAddress') as string
+
+      const { error } = await waitlist.join({ emailAddress })
+      if (error) {
+        console.error('Failed to join waitlist:', error)
+      }
+    }
+
+    if (waitlist.id) {
+      return (
+        <div>
+          <h1>Successfully joined the waitlist!</h1>
+          <p>We'll notify you when you're approved.</p>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        <h1>Join the Waitlist</h1>
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="email">Email address</label>
+          <input id="email" name="emailAddress" type="email" required />
+          {errors.fields.emailAddress && <p>{errors.fields.emailAddress.longMessage}</p>}
+          <button type="submit" disabled={fetchStatus === 'fetching'}>
+            {fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
+          </button>
+        </form>
+      </div>
+    )
+  }
+  ```
+</If>