fix issue 178

Author: Nursoltan Saipolda

src/App.jsx

@@ -9,6 +9,8 @@ import { navigate, Router, useLocation } from "@reach/router";
 import { useSelector } from "react-redux";
 import useMatchSomeRoute from "./hooks/useMatchSomeRoute";
 import NotificationsModal from "./components/NotificationsModal";
+import { checkOnboarding, checkProfileCreationDate } from "./utils";
+import { getOnboardingChecklist } from "./services/auth";
 import "./styles/main.module.scss";
 
 const App = () => {
@@ -53,6 +55,26 @@ const App = () => {
     }
   }, [isSideBarDisabled, location.pathname]);
 
+  useEffect(() => {
+    (async () => {
+      console.log('qq', auth?.profile);
+
+      if (auth?.profile && checkProfileCreationDate(auth?.profile)) {
+        const { profile, tokenV3 } = auth;
+
+        const response = await getOnboardingChecklist(profile?.handle, tokenV3);
+        const onboardingPath = checkOnboarding(response);
+        console.log('qq', onboardingPath);
+        if (onboardingPath) {
+          setHideSwitchTools(true);
+          navigate(onboardingPath);
+        } else {
+          setHideSwitchTools(false);
+        }
+      }
+    })();
+  }, [auth]);
+
   return (
     <>
       <NavBar hideSwitchTools={hideSwitchTools} />

src/components/NavBar/index.jsx

@@ -3,7 +3,7 @@
  *
  * Shows global top navigation bar with all apps menu, logo and user menu.
  */
- import React, {
+import React, {
   useState,
   useCallback,
   Fragment,

src/services/auth.js

@@ -126,3 +126,14 @@ export function authenticate(store) {
     });
 }
 
+/**
+ * Get the onboarding checklist data to know completed steps
+ */
+export function getOnboardingChecklist(username, userTokenV3) {
+  const fetcher = getFetcher(userTokenV3);
+  return fetcher(
+    `${config.API.V5}/members/${username}/traits?traitIds=onboarding_checklist`
+  )
+    .then((res) => res.json())
+    .then((res) => ({ data: res || [] }));
+}

src/utils/index.js

@@ -67,3 +67,69 @@ export const checkProfileCreationDate = (profile) => {
 
   return false;
 };
+
+/**
+ * Check Onboarding API
+ *
+ * @param resp {Object} User trait object
+ *
+ * @returns {boolean | string}
+ */
+export function checkOnboarding(resp) {
+  if (resp?.data.length === 0) {
+    return "/onboard/";
+  }
+
+  const onboardingChecklistTrait = resp?.data.filter(
+    (item) => item.traitId === "onboarding_checklist"
+  )[0].traits;
+
+  // Check if onboarding flow needs to be skipped
+  // 1. if the trait onboarding_wizard has a valid value for status.
+  //    possible values of status are [seeen, completed]. Since we only want to show
+  //    the onboarding wizard to users who haven't at least once seen the wizard
+  //    it is sufficient to check for a non null value.
+  // 2. if the trait onboarding_wizard has a truthy value for skip.
+
+  for (let checklistTrait of onboardingChecklistTrait.data) {
+    if (
+      checklistTrait.onboarding_wizard != null &&
+      (checklistTrait.onboarding_wizard.status != null ||
+        checklistTrait.onboarding_wizard.skip)
+    ) {
+      return false;
+    }
+  }
+
+  const profileCompletedData =
+    onboardingChecklistTrait.data[0].profile_completed;
+
+  if (profileCompletedData.status === "completed") {
+    return false;
+  }
+
+  for (const item in profileCompletedData.metadata) {
+    if (profileCompletedData.metadata[item]) {
+      return false;
+    }
+  }
+
+  const steps = {
+    "/onboard/": ["profile_picture", "skills"],
+    "/onboard/contact-details": ["country"],
+    "/onboard/payments-setup": [],
+    "/onboard/build-my-profile": ["bio", "work", "education", "language"],
+  };
+
+  if (profileCompletedData.status === "pending_at_user") {
+    const flags = Object.keys(profileCompletedData.metadata);
+    for (const step of Object.keys(steps)) {
+      for (const flag of steps[step]) {
+        if (flags.indexOf(flag) >= 0 && !profileCompletedData.metadata[flag]) {
+          return step;
+        }
+      }
+    }
+  }
+  return false;
+}