feat: rename onboarding stages for clarity

also comment on what changes need to be made within the different stages

ts/components/registration/RegistrationStages.tsx

@@ -11,12 +11,13 @@ import { TaskTimedOutError } from '../../session/utils/Promise';
 import { fromHex } from '../../session/utils/String';
 import { trigger } from '../../shims/events';
 import {
+  Onboarding,
   setGeneratedRecoveryPhrase,
   setHexGeneratedPubKey,
 } from '../../state/onboarding/ducks/registration';
 import {
-  useRegGeneratedRecoveryPhrase,
-  useRegRegistrationPhase,
+  useOnboardGeneratedRecoveryPhrase,
+  useOnboardStep,
 } from '../../state/onboarding/selectors/registration';
 import {
   generateMnemonic,
@@ -171,15 +172,9 @@ export async function signInWithLinking(signInDetails: { userRecoveryPhrase: str
   }
 }
 
-export enum RegistrationPhase {
-  Start,
-  SignIn,
-  SignUp,
-}
-
 export const RegistrationStages = () => {
-  const generatedRecoveryPhrase = useRegGeneratedRecoveryPhrase();
-  const registrationPhase = useRegRegistrationPhase();
+  const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase();
+  const step = useOnboardStep();
 
   const dispatch = useDispatch();
 
@@ -212,10 +207,8 @@ export const RegistrationStages = () => {
     <>
       <ModalContainer />
       <StyledRegistrationContainer container={true} flexDirection="column">
-        {(registrationPhase === RegistrationPhase.Start ||
-          registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
-        {(registrationPhase === RegistrationPhase.Start ||
-          registrationPhase === RegistrationPhase.SignIn) && <SignInTab />}
+        {(step === Onboarding.Start || step === Onboarding.CreateAccount) && <SignUpTab />}
+        {(step === Onboarding.Start || step === Onboarding.RestoreAccount) && <SignInTab />}
       </StyledRegistrationContainer>
     </>
   );

ts/components/registration/components/BackButton.tsx

@@ -1,12 +1,13 @@
 import { useDispatch } from 'react-redux';
 import {
-  setRegistrationPhase,
-  setSignInMode,
-  setSignUpMode,
+  AccountCreation,
+  AccountRestoration,
+  Onboarding,
+  setAccountCreationStep,
+  setAccountRestorationStep,
+  setOnboardingStep,
 } from '../../../state/onboarding/ducks/registration';
 import { SessionIconButton } from '../../icon';
-import { RegistrationPhase } from '../RegistrationStages';
-import { SignInMode, SignUpMode } from '../stages';
 
 export const BackButton = () => {
   const dispatch = useDispatch();
@@ -17,9 +18,9 @@ export const BackButton = () => {
       iconType="arrow"
       iconPadding="5px"
       onClick={() => {
-        dispatch(setRegistrationPhase(RegistrationPhase.Start));
-        dispatch(setSignInMode(SignInMode.Default));
-        dispatch(setSignUpMode(SignUpMode.Default));
+        dispatch(setOnboardingStep(Onboarding.Start));
+        dispatch(setAccountRestorationStep(AccountRestoration.Start));
+        dispatch(setAccountCreationStep(AccountCreation.Start));
       }}
     />
   );

ts/components/registration/stages/SignInTab.tsx

@@ -2,23 +2,22 @@ import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { ToastUtils } from '../../../session/utils';
 import { sanitizeSessionUsername } from '../../../session/utils/String';
-import { setRegistrationPhase, setSignInMode } from '../../../state/onboarding/ducks/registration';
-import { useRegSignInMode } from '../../../state/onboarding/selectors/registration';
+import {
+  AccountRestoration,
+  Onboarding,
+  setAccountRestorationStep,
+  setOnboardingStep,
+} from '../../../state/onboarding/ducks/registration';
+import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration';
 import { Flex } from '../../basic/Flex';
 import { SessionButton } from '../../basic/SessionButton';
 import { SpacerLG } from '../../basic/Text';
 import { SessionSpinner } from '../../loading';
-import { RegistrationPhase, signInWithLinking, signInWithRecovery } from '../RegistrationStages';
+import { signInWithLinking, signInWithRecovery } from '../RegistrationStages';
 import { RegistrationUserDetails } from '../RegistrationUserDetails';
 import { TermsAndConditions } from '../TermsAndConditions';
 import { BackButton } from '../components';
 
-export enum SignInMode {
-  Default,
-  UsingRecoveryPhrase,
-  LinkDevice,
-}
-
 const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
   return (
     <SessionButton
@@ -54,11 +53,11 @@ const ContinueYourSessionButton = (props: {
 };
 
 const SignInContinueButton = (props: {
-  signInMode: SignInMode;
+  accountRestorationStep: AccountRestoration;
   disabled: boolean;
   handleContinueYourSessionClick: () => any;
 }) => {
-  if (props.signInMode === SignInMode.Default) {
+  if (props.accountRestorationStep === AccountRestoration.Start) {
     return null;
   }
   return (
@@ -70,11 +69,11 @@ const SignInContinueButton = (props: {
 };
 
 const SignInButtons = (props: {
-  signInMode: SignInMode;
+  accountRestorationStep: AccountRestoration;
   onRecoveryButtonClicked: () => any;
   onLinkDeviceButtonClicked: () => any;
 }) => {
-  if (props.signInMode !== SignInMode.Default) {
+  if (props.accountRestorationStep !== AccountRestoration.Start) {
     return null;
   }
   return (
@@ -104,7 +103,7 @@ export function sanitizeDisplayNameOrToast(
 }
 
 export const SignInTab = () => {
-  const signInMode = useRegSignInMode();
+  const step = useOnboardAccountRestorationStep();
 
   const dispatch = useDispatch();
 
@@ -114,9 +113,9 @@ export const SignInTab = () => {
   const [displayNameError, setDisplayNameError] = useState<string | undefined>('');
   const [loading, setIsLoading] = useState(false);
 
-  const isRecovery = signInMode === SignInMode.UsingRecoveryPhrase;
-  const isLinking = signInMode === SignInMode.LinkDevice;
-  const showTermsAndConditions = signInMode !== SignInMode.Default;
+  const isRecovery = step === AccountRestoration.RecoveryPassword;
+  const isLinking = step === AccountRestoration.LinkDevice;
+  const showTermsAndConditions = step !== AccountRestoration.Start;
 
   // show display name input only if we are trying to recover from seed.
   // We don't need a display name when we link a device, as the display name
@@ -148,7 +147,7 @@ export const SignInTab = () => {
 
   return (
     <div className="session-registration__content">
-      {signInMode !== SignInMode.Default && (
+      {step !== AccountRestoration.Start && (
         <>
           <BackButton />
           <SpacerLG />
@@ -171,24 +170,24 @@ export const SignInTab = () => {
       )}
 
       <SignInButtons
-        signInMode={signInMode}
+        accountRestorationStep={step}
         onRecoveryButtonClicked={() => {
-          dispatch(setRegistrationPhase(RegistrationPhase.SignIn));
-          dispatch(setSignInMode(SignInMode.UsingRecoveryPhrase));
+          dispatch(setOnboardingStep(Onboarding.RestoreAccount));
+          dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword));
           setRecoveryPhrase('');
           setDisplayName('');
           setIsLoading(false);
         }}
         onLinkDeviceButtonClicked={() => {
-          dispatch(setRegistrationPhase(RegistrationPhase.SignIn));
-          dispatch(setSignInMode(SignInMode.LinkDevice));
+          dispatch(setOnboardingStep(Onboarding.RestoreAccount));
+          dispatch(setAccountRestorationStep(AccountRestoration.LinkDevice));
           setRecoveryPhrase('');
           setDisplayName('');
           setIsLoading(false);
         }}
       />
       <SignInContinueButton
-        signInMode={signInMode}
+        accountRestorationStep={step}
         handleContinueYourSessionClick={continueYourSession}
         disabled={!activateContinueButton}
       />

ts/components/registration/stages/SignUpTab.tsx

@@ -1,17 +1,22 @@
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
-import { setRegistrationPhase, setSignUpMode } from '../../../state/onboarding/ducks/registration';
 import {
-  useRegGeneratedRecoveryPhrase,
-  useRegHexGeneratedPubKey,
-  useRegSignUpMode,
+  AccountCreation,
+  Onboarding,
+  setAccountCreationStep,
+  setOnboardingStep,
+} from '../../../state/onboarding/ducks/registration';
+import {
+  useOnboardAccountCreationStep,
+  useOnboardGeneratedRecoveryPhrase,
+  useOnboardHexGeneratedPubKey,
 } from '../../../state/onboarding/selectors/registration';
 import { Noop } from '../../../types/Util';
 import { Flex } from '../../basic/Flex';
 import { SessionButton } from '../../basic/SessionButton';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
-import { RegistrationPhase, signUp } from '../RegistrationStages';
+import { signUp } from '../RegistrationStages';
 import { RegistrationUserDetails } from '../RegistrationUserDetails';
 import { TermsAndConditions } from '../TermsAndConditions';
 import { BackButton } from '../components';
@@ -22,12 +27,6 @@ const StyledContainer = styled.div`
   padding-top: 20px;
 `;
 
-export enum SignUpMode {
-  Default,
-  SessionIDShown,
-  EnterDetails,
-}
-
 const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => {
   return <SessionButton onClick={createSessionID} text={window.i18n('createSessionID')} />;
 };
@@ -63,9 +62,9 @@ const SignUpSessionIDShown = (props: { continueSignUp: Noop }) => {
 };
 
 export const SignUpTab = () => {
-  const signUpMode = useRegSignUpMode();
-  const generatedRecoveryPhrase = useRegGeneratedRecoveryPhrase();
-  const hexGeneratedPubKey = useRegHexGeneratedPubKey();
+  const step = useOnboardAccountCreationStep();
+  const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase();
+  const hexGeneratedPubKey = useOnboardHexGeneratedPubKey();
 
   const dispatch = useDispatch();
 
@@ -73,27 +72,27 @@ export const SignUpTab = () => {
   const [displayNameError, setDisplayNameError] = useState<undefined | string>('');
 
   useEffect(() => {
-    if (signUpMode === SignUpMode.SessionIDShown) {
+    if (step === AccountCreation.SessionIDShown) {
       window.Session.setNewSessionID(hexGeneratedPubKey);
     }
-  }, [signUpMode, hexGeneratedPubKey]);
+  }, [step, hexGeneratedPubKey]);
 
-  if (signUpMode === SignUpMode.Default) {
+  if (step === AccountCreation.Start) {
     return (
       <SignUpDefault
         createSessionID={() => {
-          dispatch(setSignUpMode(SignUpMode.SessionIDShown));
-          dispatch(setRegistrationPhase(RegistrationPhase.SignUp));
+          dispatch(setAccountCreationStep(AccountCreation.SessionIDShown));
+          dispatch(setOnboardingStep(Onboarding.CreateAccount));
         }}
       />
     );
   }
 
-  if (signUpMode === SignUpMode.SessionIDShown) {
+  if (step === AccountCreation.SessionIDShown) {
     return (
       <SignUpSessionIDShown
         continueSignUp={() => {
-          dispatch(setSignUpMode(SignUpMode.EnterDetails));
+          dispatch(setAccountCreationStep(AccountCreation.DisplayName));
         }}
       />
     );

ts/components/registration/stages/index.tsx

@@ -1,4 +1,4 @@
-import { SignInMode, SignInTab } from './SignInTab';
-import { SignUpMode, SignUpTab } from './SignUpTab';
+import { SignInTab } from './SignInTab';
+import { SignUpTab } from './SignUpTab';
 
-export { SignInMode, SignInTab, SignUpMode, SignUpTab };
+export { SignInTab, SignUpTab };

ts/state/onboarding/ducks/registration.ts

@@ -1,27 +1,54 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { SignInMode } from '../../../components/registration/stages/SignInTab';
-import { SignUpMode } from '../../../components/registration/stages/SignUpTab';
 
-export enum RegistrationPhase {
+export enum Onboarding {
+  /* starting screen */
   Start,
-  SignIn,
-  SignUp,
+  /* uses AccountCreation internally */
+  CreateAccount,
+  /* uses AccountRestoration internally */
+  RestoreAccount,
 }
 
-export type RegistrationState = {
+export enum AccountCreation {
+  /* TODO to be removed - current starting screen */
+  Start,
+  /* TODO to be removed */
+  SessionIDShown,
+  /* starting screen */
+  DisplayName,
+  /* show conversation screen */
+  Complete,
+}
+
+export enum AccountRestoration {
+  /* TODO to be removed - current starting screen */
+  Start,
+  /* starting screen */
+  RecoveryPassword,
+  /* fetching account details */
+  Loading,
+  /* we failed to fetch a display name in time so we choose a new one */
+  DisplayName,
+  /* show conversation screen */
+  Complete,
+  /* TODO to be removed */
+  LinkDevice,
+}
+
+export type OnboardingState = {
   generatedRecoveryPhrase: string;
   hexGeneratedPubKey: string;
-  registrationPhase: RegistrationPhase;
-  signUpMode: SignUpMode;
-  signInMode: SignInMode;
+  step: Onboarding;
+  accountCreationStep: AccountCreation;
+  accountRestorationStep: AccountRestoration;
 };
 
-const initialState: RegistrationState = {
+const initialState: OnboardingState = {
   generatedRecoveryPhrase: '',
   hexGeneratedPubKey: '',
-  registrationPhase: RegistrationPhase.Start,
-  signInMode: SignInMode.Default,
-  signUpMode: SignUpMode.Default,
+  step: Onboarding.Start,
+  accountRestorationStep: AccountRestoration.Start,
+  accountCreationStep: AccountCreation.Start,
 };
 
 export const registrationSlice = createSlice({
@@ -34,14 +61,14 @@ export const registrationSlice = createSlice({
     setHexGeneratedPubKey(state, action: PayloadAction<string>) {
       return { ...state, hexGeneratedPubKey: action.payload };
     },
-    setRegistrationPhase(state, action: PayloadAction<RegistrationPhase>) {
-      return { ...state, registrationPhase: action.payload };
+    setOnboardingStep(state, action: PayloadAction<Onboarding>) {
+      return { ...state, step: action.payload };
     },
-    setSignUpMode(state, action: PayloadAction<SignUpMode>) {
-      return { ...state, signUpMode: action.payload };
+    setAccountCreationStep(state, action: PayloadAction<AccountCreation>) {
+      return { ...state, accountCreationStep: action.payload };
     },
-    setSignInMode(state, action: PayloadAction<SignInMode>) {
-      return { ...state, signInMode: action.payload };
+    setAccountRestorationStep(state, action: PayloadAction<AccountRestoration>) {
+      return { ...state, accountRestorationStep: action.payload };
     },
   },
 });
@@ -49,8 +76,8 @@ export const registrationSlice = createSlice({
 export const {
   setGeneratedRecoveryPhrase,
   setHexGeneratedPubKey,
-  setRegistrationPhase,
-  setSignUpMode,
-  setSignInMode,
+  setOnboardingStep,
+  setAccountCreationStep,
+  setAccountRestorationStep,
 } = registrationSlice.actions;
 export default registrationSlice.reducer;

ts/state/onboarding/selectors/registration.ts

@@ -1,58 +1,62 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useSelector } from 'react-redux';
-import { SignInMode, SignUpMode } from '../../../components/registration/stages';
-import { RegistrationPhase, RegistrationState } from '../ducks/registration';
+import {
+  AccountCreation,
+  AccountRestoration,
+  Onboarding,
+  OnboardingState,
+} from '../ducks/registration';
 import { OnboardingStoreState } from '../store';
 
 // #region Getters
-const getRegistration = (state: OnboardingStoreState): RegistrationState => {
+const getRegistration = (state: OnboardingStoreState): OnboardingState => {
   return state.registration;
 };
 
 const getGeneratedRecoveryPhrase = createSelector(
   getRegistration,
-  (state: RegistrationState): string => state.generatedRecoveryPhrase
+  (state: OnboardingState): string => state.generatedRecoveryPhrase
 );
 
 const getHexGeneratedPubKey = createSelector(
   getRegistration,
-  (state: RegistrationState): string => state.hexGeneratedPubKey
+  (state: OnboardingState): string => state.hexGeneratedPubKey
 );
 
-const getRegistrationPhase = createSelector(
+const getOnboardingStep = createSelector(
   getRegistration,
-  (state: RegistrationState): RegistrationPhase => state.registrationPhase
+  (state: OnboardingState): Onboarding => state.step
 );
 
-const getSignUpMode = createSelector(
+const getAccountCreationStep = createSelector(
   getRegistration,
-  (state: RegistrationState): SignUpMode => state.signUpMode
+  (state: OnboardingState): AccountCreation => state.accountCreationStep
 );
 
-const getSignInMode = createSelector(
+const getAccountRestorationStep = createSelector(
   getRegistration,
-  (state: RegistrationState): SignInMode => state.signInMode
+  (state: OnboardingState): AccountRestoration => state.accountRestorationStep
 );
 // #endregion
 
 // #region Hooks
-export const useRegGeneratedRecoveryPhrase = () => {
+export const useOnboardGeneratedRecoveryPhrase = () => {
   return useSelector(getGeneratedRecoveryPhrase);
 };
 
-export const useRegHexGeneratedPubKey = () => {
+export const useOnboardHexGeneratedPubKey = () => {
   return useSelector(getHexGeneratedPubKey);
 };
 
-export const useRegRegistrationPhase = () => {
-  return useSelector(getRegistrationPhase);
+export const useOnboardStep = () => {
+  return useSelector(getOnboardingStep);
 };
 
-export const useRegSignUpMode = () => {
-  return useSelector(getSignUpMode);
+export const useOnboardAccountCreationStep = () => {
+  return useSelector(getAccountCreationStep);
 };
 
-export const useRegSignInMode = () => {
-  return useSelector(getSignInMode);
+export const useOnboardAccountRestorationStep = () => {
+  return useSelector(getAccountRestorationStep);
 };
 // #endregion