Squad 404 Gladiators - Kai Onboarding Expedition

[ademiltonnunes]

Description

This PR enhances the onboarding process for Marvel AI by implementing a persistent progress bar and a real-time updating checklist. These features guide users through key steps such as:

• Welcome Screen
• Profile Setup
• System Configuration
• Final Steps
• Result Page

The progress bar and checklist visually represent the user's progress, ensuring smooth navigation. This change also introduces database modifications to store onboarding information and sync it with the UI.

Motivation and Context

The purpose of this change is to improve the user onboarding experience, giving users a clear sense of their progress through the process. This will contribute to higher satisfaction and better user retention.

Type of Change

• [x] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

The following tests were performed to ensure that all functionality works as intended:

• [x] Test A: Manually tested onboarding flow by creating a new user, verifying that each onboarding step correctly updates the checklist and progress bar.
• [x] Test B: Tested profile photo uploads to Firebase Storage, confirming correct saving and retrieval of images.
• [x] Test C: Verified that system configurations saved in the System Configuration step were correctly stored in the database and synced to the user's profile.
• [x] Test D: Verified that Redux state was updated in real-time as Firebase data changed (e.g., when onboarding steps were completed).

Implementation Details

Database Changes

• User Collection: The existing users collection was modified to store onboarding progress. This enables tracking of each user's onboarding completion status. Example structure:

      {
       "users": {
         "123": {
           "fullName": "John Doe",
           "email": "john.doe@example.com",
           "uid": "123",
           "onboarding": {
             "1": true,
             "2": true,
             "3": false,
             "4": false,
             "5": false
           },
           "occupation": "Software Developer",
           "socialLinks": {
             "facebook": "https://facebook.com/johndoe",
             "linkedin": "https://linkedin.com/in/johndoe",
             "twitter": "https://twitter.com/johndoe"
           },
           "profilePhotoUrl": "https://example.com/photos/johndoe.jpg",
           "bio": "Passionate developer with 5 years of experience",
           "systemConfig": {
             "email": true,
             "push": false,
             "reminders": true,
             "theme": false
           }
         }
       }
      }
  

Modifications

• Modified signUpUser function: Default values were added to the user’s onboarding progress when a new user is created.

  • File: functions/userControllers.js

• Firebase Listener: Added a listener to watch for Firebase data changes, updating the Redux store accordingly, to ensure that the user is redirected after onboarding completion.

  • File: frontend/providers/GlobalProvider.jsx

• Created withLayoutRedirect HOC: This Higher-Order Component (HOC) manages the layout and retrieve it accordingly:

  • File: frontend/hoc/withLayoutRedirect.jsx

• Onboarding Layout: A new OnboardingLayout was created to incorporate a unified style for onboarding screens, with a persistent progress menu. Icons were added to show the status of each step (in progress, completed, not started).

  • File: frontend/layouts/OnboardingLayout.jsx
  • Icons:
  • frontend/assets/svg/IconProcessDoing
  • frontend/assets/svg/IconProcessDone
  • frontend/assets/svg/IconProcessUndo
  • CustomCheckCircle Component: Displays progress status icons.
  • File: frontend/component/CustomCheckCircle.jsx

Onboarding Pages

• Onboarding Page: Created a page to render the appropriate onboarding step based on the user's progress.
  • Folder: frontend/pages/onboarding

Welcome Screen

• Welcome Screen: Renders the first step of the onboarding process.
  • Folder: frontend/template/WelcomeScreen

Profile Setup

• Profile Setup Screen: Renders when the onboarding step is 2. This screen includes a form for users to fill out profile information, including uploading a profile picture and adding social links.

  • Folder: frontend/template/ProfileSetup
  • Profile Setup Form: Collects user data.
  • Folder: frontend/template/ProfileSetup/ProfileSetupForm
  • Social Link Input Component: Captures the user’s social media links.
  • File: frontend/template/ProfileSetup/SocialLinkInput.jsx
  • Image Upload Component: Handles the image upload process using Firebase Storage.
  • File: frontend/components/ImageUpload.jsx
  • Firebase Storage Hook: Manages file uploads to Firebase Storage.
  • File: frontend/hook/useUploadFile.jsx
  • Image Cropping Utility: Processes the user’s profile photo to display a cropped version.
  • File: frontend/utils/getCroppedImg.js

• Firebase Rules: Adjusted Firebase Storage rules to accommodate the new profile picture upload functionality.

  • File: storage/rules

• Firebase Function: Created a backend function to save profile setup data, including image and social links, to Firestore.

  • File: functions/controllers/onboardingController.js (function: setupUserProfile)
  • Service: Created a service to call the new function.
  • File: frontend/services/onboarding/setupUserProfile.js

System Configuration

• System Configuration Screen: Renders when the onboarding step is 3. Allows users to configure preferences such as email notifications, push notifications, and theme settings.

  • Folder: frontend/template/SystemConfig
  • Theme Management: The theme configuration was modularized and split into three files.
  • Files: frontend/theme/palette.js, componentsTheme.js, theme.js
  • Global Theme Integration: Integrated the theme across the entire project.
  • File: frontend/pages/_app.js
  • Redux Modifications: Updated the userSlice to include user theme settings from Firestore.
  • File: frontend/redux/slices/userSlice.js
  • Theme Sync Hook: Created a hook to sync theme preferences from Firebase to the UI.
  • File: frontend/hook/useThemeSync.jsx

• Firebase Function: Created a backend function to save system configuration preferences.

  • File: functions/controllers/onboardingController.js (function: setupUserSystemConfig)
  • Service: Created a service to call the new function.
  • File: frontend/services/onboarding/setupUserSystemConfig.js

Final Steps

• Final Steps Screen: Renders when the onboarding step is 4, indicating that onboarding is nearly complete.
  • Folder: frontend/template/FinalSteps

Result Page

• Result Page: The final screen that announces the user has completed the onboarding process.

  • Folder: frontend/template/ResultPage

• Firebase Function: Created a function to update the user’s onboarding status when they reach the final step.

  • File: functions/controllers/onboardingController.js (function: advanceOnboardingStatus)
  • Service: Created a service to call the function.
  • File: frontend/services/onboarding/advanceOnboardingStatus.js