Multistep Onboarding Flow

1'use client';
2 
3import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
4import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
5import { useRouter } from 'next/navigation';
6import { useForm } from '@tanstack/react-form';
7import { useSignIn, useSignUp, useOrganizationList, useOrganizationCreationDefaults, useSession } from '@clerk/nextjs';
8import { Button } from '@/components/ui/button';
9import { Checkbox } from '@/components/ui/checkbox';
10import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field';
11import { Input } from '@/components/ui/input';
12import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
13import { REGEXP_ONLY_DIGITS } from 'input-otp';
14import { RefreshCwIcon, ChevronLeftIcon, LoaderIcon, CameraIcon, XIcon } from 'lucide-react';
15import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
16import { Testimonials } from '@/components/ui/testimonials';
17 
18type Step = 'email' | 'welcome' | 'company' | 'account' | 'verify' | 'org';
19type VerifyMode = 'sign_up_email_code' | 'client_trust_email_code' | null;
20 
21function toFieldErrors(errors: unknown[]): { message: string }[] {
22  return errors.map(e => ({
23    message: typeof e === 'string' ? e : String(e),
24  }));
25}
26 
27const SIGNUP_STEPS: Step[] = ['company', 'account', 'verify', 'org'];
28 
29const STEP_FIELDS: Record<Step, string[]> = {
30  email: ['email'],
31  welcome: ['password'],
32  company: ['companySize'],
33  account: ['firstName', 'lastName', 'password', 'agreedToTerms'],
34  verify: ['otpCode'],
35  org: ['orgName'],
36};
37 
38const COMPANY_SIZES = ['1-10', '11-50', '51-200', '201-500', '501-1000', '1000+'] as const;
39 
40const QUOTES = [
41  {
42    quote:
43      'This has completely reshaped how our team thinks about onboarding. The flow is intuitive, the defaults feel right, and our activation numbers jumped within the very first week of rolling it out.',
44    cite: 'Maya Chen, CTO',
45  },
46  {
47    quote:
48      'Adopting it saved our small engineering team months of work. The primitives are flexible enough to fit our brand, secure enough for our enterprise customers, and the team behind it actually listens to feedback and ships fixes fast.',
49    cite: 'Jordan Whitfield, Head of Engineering',
50  },
51  {
52    quote:
53      "We rebuilt our entire signup experience in an afternoon. It's easily the best developer experience we've had all year.",
54    cite: 'Priya Anand, Co-founder',
55  },
56];
57 
58const dotVariants = {
59// … truncated