wip

apps/website/components/onboarding/OnboardingWizard.tsx

@@ -257,7 +257,10 @@ export default function OnboardingWizard() {
         generatedAvatars: [],
         selectedAvatarIndex: null,
       });
-      setErrors({ ...errors, facePhoto: undefined });
+      setErrors((prev) => {
+        const { facePhoto, ...rest } = prev;
+        return rest;
+      });
 
       // Validate face
       await validateFacePhoto(base64);
@@ -267,7 +270,10 @@ export default function OnboardingWizard() {
 
   const validateFacePhoto = async (photoData: string) => {
     setAvatarInfo(prev => ({ ...prev, isValidating: true }));
-    setErrors(prev => ({ ...prev, facePhoto: undefined }));
+    setErrors(prev => {
+      const { facePhoto, ...rest } = prev;
+      return rest;
+    });
 
     try {
       const response = await fetch('/api/avatar/validate-face', {
@@ -300,7 +306,10 @@ export default function OnboardingWizard() {
     }
 
     setAvatarInfo(prev => ({ ...prev, isGenerating: true, generatedAvatars: [], selectedAvatarIndex: null }));
-    setErrors(prev => ({ ...prev, avatar: undefined }));
+    setErrors(prev => {
+      const { avatar, ...rest } = prev;
+      return rest;
+    });
 
     try {
       const response = await fetch('/api/avatar/generate', {
@@ -490,7 +499,7 @@ export default function OnboardingWizard() {
                       setPersonalInfo({ ...personalInfo, country: value })
                     }
                     error={!!errors.country}
-                    errorMessage={errors.country}
+                    errorMessage={errors.country ?? ''}
                     disabled={loading}
                   />
                 </div>
@@ -600,17 +609,24 @@ export default function OnboardingWizard() {
                   {/* Preview area */}
                   <div className="w-32 flex flex-col items-center justify-center">
                     <div className="w-24 h-24 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center overflow-hidden">
-                      {avatarInfo.selectedAvatarIndex !== null && avatarInfo.generatedAvatars[avatarInfo.selectedAvatarIndex] ? (
-                        <Image
-                          src={avatarInfo.generatedAvatars[avatarInfo.selectedAvatarIndex]}
-                          alt="Selected avatar"
-                          width={96}
-                          height={96}
-                          className="w-full h-full object-cover"
-                        />
-                      ) : (
-                        <User className="w-8 h-8 text-gray-600" />
-                      )}
+                      {(() => {
+                        const selectedAvatarUrl =
+                          avatarInfo.selectedAvatarIndex !== null
+                            ? avatarInfo.generatedAvatars[avatarInfo.selectedAvatarIndex]
+                            : undefined;
+                        if (!selectedAvatarUrl) {
+                          return <User className="w-8 h-8 text-gray-600" />;
+                        }
+                        return (
+                          <Image
+                            src={selectedAvatarUrl}
+                            alt="Selected avatar"
+                            width={96}
+                            height={96}
+                            className="w-full h-full object-cover"
+                          />
+                        );
+                      })()}
                     </div>
                     <p className="text-xs text-gray-500 mt-2 text-center">Your avatar</p>
                   </div>