Merge branch 'tab-continuation' into 'develop'

Allow tab continuation on Email confirmation

See merge request soapbox-pub/soapbox!1847

app/soapbox/actions/verification.ts

@@ -32,13 +32,14 @@ export type Challenge = 'age' | 'sms' | 'email'
 
 type Challenges = {
   email?: 0 | 1,
-  sms?: number,
-  age?: number,
+  sms?: 0 | 1,
+  age?: 0 | 1,
 }
 
 type Verification = {
   token?: string,
   challenges?: Challenges,
+  challengeTypes?: Array<'age' | 'sms' | 'email'>
 };
 
 /**
@@ -83,6 +84,18 @@ const fetchStoredChallenges = () => {
   }
 };
 
+/**
+ * Fetch and return the state of the verification challenge types.
+ */
+const fetchStoredChallengeTypes = () => {
+  try {
+    const verification: Verification | null = fetchStoredVerification();
+    return verification!.challengeTypes;
+  } catch {
+    return null;
+  }
+};
+
 /**
  * Update the verification object in local storage.
  *
@@ -131,7 +144,10 @@ function saveChallenges(challenges: Array<'age' | 'sms' | 'email'>) {
     }
   }
 
-  updateStorage({ challenges: currentChallenges });
+  updateStorage({
+    challenges: currentChallenges,
+    challengeTypes: challenges,
+  });
 }
 
 /**
@@ -267,13 +283,29 @@ const confirmEmailVerification = (emailToken: string) =>
     return api(getState).post('/api/v1/pepe/verify_email/confirm', { token: emailToken }, {
       headers: { Authorization: `Bearer ${token}` },
     })
-      .then(() => {
-        finishChallenge(EMAIL);
-        dispatchNextChallenge(dispatch);
+      .then((response) => {
+        updateStorageFromEmailConfirmation(dispatch, response.data.token);
       })
       .finally(() => dispatch({ type: SET_LOADING, value: false }));
   };
 
+const updateStorageFromEmailConfirmation = (dispatch: AppDispatch, token: string) => {
+  const challengeTypes = fetchStoredChallengeTypes();
+  if (!challengeTypes) {
+    return;
+  }
+
+  const indexOfEmail = challengeTypes.indexOf('email');
+  const challenges: Challenges = {};
+  challengeTypes?.forEach((challengeType, idx) => {
+    const value = idx <= indexOfEmail ? 1 : 0;
+    challenges[challengeType] = value;
+  });
+
+  updateStorage({ token, challengeTypes, challenges });
+  dispatchNextChallenge(dispatch);
+};
+
 const postEmailVerification = () =>
   (dispatch: AppDispatch) => {
     finishChallenge(EMAIL);

app/soapbox/features/verification/email-passthru.tsx

@@ -40,11 +40,12 @@ const Success = () => {
   const history = useHistory();
   const currentChallenge = useAppSelector((state) => state.verification.currentChallenge as ChallengeTypes);
 
-  // Bypass the user straight to the next step.
-  if (currentChallenge === ChallengeTypes.SMS) {
-    history.push('/verify');
-    return null;
-  }
+  React.useEffect(() => {
+    // Bypass the user straight to the next step.
+    if (currentChallenge === ChallengeTypes.SMS) {
+      history.push('/verify');
+    }
+  }, [currentChallenge]);
 
   return (
     <Stack space={4} alignItems='center'>