website refactor

apps/website/client-wrapper/OnboardingWizardClient.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { OnboardingTemplate } from '@/templates/onboarding/OnboardingTemplate';
+import { routes } from '@/lib/routing/RouteConfig';
+import { completeOnboardingAction } from '@/app/actions/completeOnboardingAction';
+import { generateAvatarsAction } from '@/app/actions/generateAvatarsAction';
+import { useAuth } from '@/components/auth/AuthContext';
+import { useState } from 'react';
+import { PersonalInfo } from '@/components/onboarding/PersonalInfoStep';
+import { AvatarInfo } from '@/components/onboarding/AvatarStep';
+
+type OnboardingStep = 1 | 2;
+
+interface FormErrors {
+  [key: string]: string | undefined;
+  firstName?: string;
+  lastName?: string;
+  displayName?: string;
+  country?: string;
+  facePhoto?: string;
+  avatar?: string;
+  submit?: string;
+}
+
+export function OnboardingWizardClient() {
+  const { session } = useAuth();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [step, setStep] = useState<OnboardingStep>(1);
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  // Form state
+  const [personalInfo, setPersonalInfo] = useState<PersonalInfo>({
+    firstName: '',
+    lastName: '',
+    displayName: '',
+    country: '',
+    timezone: '',
+  });
+
+  const [avatarInfo, setAvatarInfo] = useState<AvatarInfo>({
+    facePhoto: null,
+    suitColor: 'blue',
+    generatedAvatars: [],
+    selectedAvatarIndex: null,
+    isGenerating: false,
+    isValidating: false,
+  });
+
+  const handleCompleteOnboarding = async (input: {
+    firstName: string;
+    lastName: string;
+    displayName: string;
+    country: string;
+    timezone?: string;
+  }) => {
+    setIsProcessing(true);
+    try {
+      const result = await completeOnboardingAction(input);
+
+      if (result.isErr()) {
+        setIsProcessing(false);
+        return { success: false, error: result.getError() };
+      }
+
+      window.location.href = routes.protected.dashboard;
+      return { success: true };
+    } catch (error) {
+      setIsProcessing(false);
+      return { success: false, error: 'Failed to complete onboarding' };
+    }
+  };
+
+  const handleGenerateAvatars = async (params: {
+    facePhotoData: string;
+    suitColor: string;
+  }) => {
+    if (!session?.user?.userId) {
+      return { success: false, error: 'Not authenticated' };
+    }
+
+    setIsProcessing(true);
+    try {
+      const result = await generateAvatarsAction({
+        userId: session.user.userId,
+        facePhotoData: params.facePhotoData,
+        suitColor: params.suitColor,
+      });
+
+      if (result.isErr()) {
+        setIsProcessing(false);
+        return { success: false, error: result.getError() };
+      }
+
+      const data = result.unwrap();
+      setIsProcessing(false);
+      return { success: true, data };
+    } catch (error) {
+      setIsProcessing(false);
+      return { success: false, error: 'Failed to generate avatars' };
+    }
+  };
+
+  return (
+    <OnboardingTemplate
+      viewData={{
+        onCompleted: () => {
+          window.location.href = routes.protected.dashboard;
+        },
+        onCompleteOnboarding: handleCompleteOnboarding,
+        onGenerateAvatars: handleGenerateAvatars,
+        isProcessing: isProcessing,
+        step,
+        setStep,
+        errors,
+        setErrors,
+        personalInfo,
+        setPersonalInfo,
+        avatarInfo,
+        setAvatarInfo,
+      }}
+    />
+  );
+}