Frontend - Connect onboarding flow to backend API and save user data

[phertyameen]

Description:

Integrate the onboarding flow UI with the backend API to save user data. The data should only be saved when the user completes all onboarding steps (reaches the final screen). After successful save, redirect to the dashboard.

Figma Access

Figma Reference:

https://www.figma.com/design/pjgW7smoah7bA9whazorr3/Mind-Block-UI?node-id=190-2443&t=2Hp7E2QCMWI9XOdT-0

Prerequisites:

Issue #208 (Backend onboarding fields) must be completed
Issue #209 (Frontend onboarding UI) must be completed

Current State:

• Onboarding UI screens are implemented with dummy data
• Backend has extended User entity with onboarding fields
• Backend has PATCH endpoint to update user data

Requirements:

Backend Endpoint to Use:

PATCH /users/{userId} - Updates user profile with EditUserDto

Expected Request Body Structure:

{
  "username": "string (optional)",
  "email": "string (optional)", 
  "challengeLevel": "BEGINNER | INTERMEDIATE | ADVANCED | EXPERT",
  "challengeTypes": ["string array"],
  "country": "string (optional)",
  "interests": ["string array"],
  "occupation": "string (optional)",
  "goals": ["string array"],
  "availableHours": ["string array"],
  "bio": "string (optional)"
}

Tasks:

Create or update API service/hook for user profile updates:

• Function to call PATCH /users/{userId} endpoint
• Include proper error handling
• Include loading states

Get current user ID (from authentication context/session/token)
Update onboarding flow to:

• Collect all data from steps 1-4 in state
• Only make API call when user clicks "Continue" on the final step (Onboarding 4)
• Show "Preparing account" loading screen while API call is in progress
• Handle success: redirect to /dashboard
• Handle errors: show error message, allow user to retry

Add form validation before submission:

Ensure required fields are filled (if any)
Validate data formats match backend expectations

Optional: Store onboarding completion status to prevent re-showing

Acceptance Criteria:

• Onboarding data is collected from all four steps
• API call is made only after user completes step 4
• Single PATCH request is made with all onboarding data
• "Preparing account" loading state is shown during API call
• On success, user is redirected to /dashboard
• On error, user sees error message with option to retry
• Form validation prevents invalid data submission
• Loading and error states are handled gracefully
• User cannot skip onboarding flow (if they're new users)

Notes:

• The API call should send all collected data in one request
• Consider storing user ID in authentication context or session storage
• Handle network errors and show user-friendly messages
• After successful onboarding, user should not see these screens again (unless they explicitly want to update their profile)
• Consider adding a "Skip for now" option if onboarding fields are all optional

Error Handling:

• Network errors: "Unable to connect. Please check your internet connection."
• Validation errors: Display specific field errors from backend
• Server errors: "Something went wrong. Please try again."