Merge branch 'improve-registration-flow' into 'develop'

Improve Registration Flow

See merge request soapbox-pub/soapbox!1840

app/soapbox/features/verification/email_passthru.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { confirmEmailVerification } from 'soapbox/actions/verification';
 import { Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import { ChallengeTypes } from './index';
 
 import type { AxiosError } from 'axios';
 
@@ -30,6 +32,14 @@ const messages = defineMessages({
 
 const Success = () => {
   const intl = useIntl();
+  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;
+  }
 
   return (
     <Stack space={4} alignItems='center'>

app/soapbox/features/verification/index.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
-import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 import Registration from './registration';
 import AgeVerification from './steps/age-verification';
 import EmailVerification from './steps/email-verification';
 import SmsVerification from './steps/sms-verification';
 
-enum ChallengeTypes {
+export enum ChallengeTypes {
   EMAIL = 'email',
   SMS = 'sms',
   AGE = 'age',
@@ -23,7 +22,7 @@ const verificationSteps = {
 };
 
 const Verification = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const isInstanceReady = useAppSelector((state) => state.verification.instance.get('isReady') === true);
   const isRegistrationOpen = useAppSelector(state => state.verification.instance.get('registrations') === true);