Merge pull request #673 from mozilla-iam/SE-3121-error-messaging

feature(onboarding): Add error messaging

Author: bkochendorfer

src/assets/js/scope.js

@@ -24,7 +24,7 @@ class Scope {
     this.isLoggedIn = Boolean(username || user?.loggedIn);
     this.firstTime =
       this.isLoggedIn && (username === '' || username.startsWith('r--'));
-    this.isReady = Boolean(username);
+    this.isReady = Boolean(username || user?.profileError);
     this.isStaff = isStaff;
     this.isNdaed =
       'nda' in (mozilliansorgGroups || {}) ||
@@ -34,6 +34,7 @@ class Scope {
     this.isGroupCreator =
       'group_creators' in (mozilliansorgGroups || {}) ||
       'group_admins' in (mozilliansorgGroups || {});
+    this.profileError = user?.profileError
   }
 
   hasTrust(trust) {

src/components/guide/OnboardingModal.vue

@@ -28,7 +28,26 @@
         <p v-else>
           <Fluent :id="`onboarding_modal_username`" attr="paragraph_2" />
         </p>
-        <section v-if="scope.isReady" class="onboarding-modal__username">
+        <section v-if="scope.profileError" class="onboarding-modal__profile_error">
+        <p> 
+          <Fluent :id="`onboarding_modal_profile_error`"
+                  attr="profile_error" 
+                  :tags="{
+                    iam_slack: {
+                      tag: 'a',
+                      target: '_blank',
+                      href: 'https://mozilla.slack.com/archives/CBT3XRZKP',
+                    },
+                    support_email: {
+                      tag: 'a',
+                      target: '_blank',
+                      href: 'mailto:people-mozilla-org-support@mozilla.com',
+                    }
+                  }"
+          /> 
+        </p>
+        </section>
+        <section v-if="scope.isReady && !scope.profileError" class="onboarding-modal__username">
           <label for="field-username">{{ fluent('profile_username') }}</label>
           <TextInput
             class="username__input"
@@ -337,4 +356,9 @@ export default {
   align-items: center;
   flex-direction: row;
 }
+
+.onboarding-modal__profile_error {
+  font-weight: bold;
+  color: red;
+}
 </style>

src/locales/en-US/strings.ftl

@@ -108,6 +108,9 @@ onboarding_modal_username = Getting started
   .username_space = Username must not contain spaces
   .username_chars = Username must only contain latin characters a-z or digits 0-9
 
+onboarding_modal_profile_error =
+  .profile_error = Error in creating profile. Please reach out in <a data-l10n-name="iam_slack">#iam</a> Slack or at <a data-l10n-name="support_email">people-mozilla-org-support@mozilla.com</a>
+
 tooltip_tour = Welcome
   .skip = Skip tour
   .step1_1 = Find Mozillians (staff and volunteers) based on their chosen visibility settings.

src/store/index.js

@@ -9,6 +9,7 @@ import scope from './scope.store';
 import features from './features.store';
 
 let shouldFetch = true;
+let userFound = false;
 
 async function fetchUser(commit) {
   if (shouldFetch === false){
@@ -21,6 +22,7 @@ async function fetchUser(commit) {
       variables: { username: null },
       fetchPolicy,
     });
+    userFound = true;
     commit('setUser', data.profile);
     return true;
   } catch (e) {
@@ -45,6 +47,8 @@ async function fetchUser(commit) {
 async function retryFetchUser(commit, retries = 120) {
   if (!(await fetchUser(commit)) && retries > 0) {
     setTimeout(() => retryFetchUser(commit, retries - 1), 1000);
+  } else if (!userFound) {
+    commit('setUser', {profileError: true});
   }
 }
 
@@ -64,7 +68,6 @@ export default new Vuex.Store({
     onboarding: new Onboarding(),
   },
   actions: {
-    // TODO: Create error handling for this action
     async fetchUser({ commit }) {
       await retryFetchUser(commit);
     },
@@ -113,4 +116,4 @@ export async function resolvePromisesSerially(promises, resolvers) {
     console.error(e.message);
     throw new Error(e.message);
   }
-}
+}