LF-4022 custom sign up

packages/webapp/src/containers/CustomSignUp/index.jsx

@@ -20,7 +20,13 @@ import {
 } from './constants';
 import { isChrome } from '../../util';
 import { getLanguageFromLocalStorage } from '../../util/getLanguageFromLocalStorage';
-import { customSignUpErrorKeySelector, setCustomSignUpErrorKey } from '../customSignUpSlice';
+import {
+  customSignUpComponentSelector,
+  customSignUpErrorKeySelector,
+  customSignUpUserSelector,
+  setCustomSignUpComponent,
+  setCustomSignUpErrorKey,
+} from '../customSignUpSlice';
 
 const ResetPassword = React.lazy(() => import('../ResetPassword'));
 const PureEnterPasswordPage = React.lazy(() => import('../../components/Signup/EnterPasswordPage'));
@@ -43,7 +49,9 @@ function CustomSignUp() {
   } = useForm({
     mode: 'onTouched',
   });
-  const { user, component: componentToShow } = history.location?.state || {};
+  const user = useSelector(customSignUpUserSelector);
+  const { component: componentToShow } = useSelector(customSignUpComponentSelector);
+
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i);
   const EMAIL = 'email';
   const emailRegister = register(EMAIL, { pattern: validEmailRegex });
@@ -94,17 +102,6 @@ function CustomSignUp() {
     });
   }, [customSignUpErrorKey, errors]);
 
-  useEffect(() => {
-    if (!componentToShow) {
-      history.replace(
-        {
-          pathname: '/',
-        },
-        { user: { email }, component: CUSTOM_SIGN_UP },
-      );
-    }
-  }, [componentToShow, email]);
-
   const onSubmit = (data) => {
     const { email } = data;
     setSubmittedEmail(email);
@@ -120,23 +117,10 @@ function CustomSignUp() {
   };
 
   const enterPasswordOnGoBack = () => {
-    history.push(
-      {
-        pathname: '/',
-      },
-      { user: { email }, component: CUSTOM_SIGN_UP },
-    );
+    dispatch(setCustomSignUpComponent(CUSTOM_SIGN_UP));
   };
   const createUserAccountOnGoBack = () => {
-    history.push(
-      {
-        pathname: '/',
-      },
-      {
-        component: CUSTOM_SIGN_UP,
-        user: { email },
-      },
-    );
+    dispatch(setCustomSignUpComponent(CUSTOM_SIGN_UP));
   };
 
   const errorMessage = history.location.state?.error;

packages/webapp/src/containers/CustomSignUp/saga.js

@@ -14,7 +14,7 @@
  */
 
 import { createAction } from '@reduxjs/toolkit';
-import { call, put, takeLeading } from 'redux-saga/effects';
+import { all, call, put, takeLeading } from 'redux-saga/effects';
 import { url } from '../../apiConfig';
 import history from '../../history';
 import { CREATE_USER_ACCOUNT, ENTER_PASSWORD_PAGE, inlineErrors } from './constants';
@@ -24,7 +24,12 @@ import { getFirstNameLastName } from '../../util';
 import { axios } from '../saga';
 import { enqueueErrorSnackbar } from '../Snackbar/snackbarSlice';
 import { getLanguageFromLocalStorage } from '../../util/getLanguageFromLocalStorage';
-import { setCustomSignUpErrorKey, setPasswordResetError } from '../customSignUpSlice';
+import {
+  setCustomSignUpComponent,
+  setCustomSignUpErrorKey,
+  setPasswordResetError,
+  setCustomSignUpUser,
+} from '../customSignUpSlice';
 
 const loginUrl = (email) => `${url}/login/user/${email}`;
 const loginWithPasswordUrl = () => `${url}/login`;
@@ -38,32 +43,28 @@ export function* customSignUpSaga({ payload: { email } }) {
     const result = yield call(axios.get, loginUrl(email));
     if (result.data.exists && !result.data.sso) {
       localStorage.setItem('litefarm_lang', result.data.language);
-      history.push(
-        {
-          pathname: '/',
-        },
-        {
-          component: ENTER_PASSWORD_PAGE,
+      yield put(
+        setCustomSignUpUser({
           user: {
             first_name: result.data.first_name,
             email: result.data.email,
           },
-        },
+        }),
       );
+      yield put(setCustomSignUpComponent({ component: ENTER_PASSWORD_PAGE }));
     } else if (result.data.invited) {
       yield put(setCustomSignUpErrorKey({ key: inlineErrors.invited }));
     } else if (result.data.expired) {
       yield put(setCustomSignUpErrorKey({ key: inlineErrors.expired }));
     } else if (!result.data.exists && !result.data.sso) {
-      history.push(
-        {
-          pathname: '/',
-        },
-        {
-          component: CREATE_USER_ACCOUNT,
-          user: { email },
-        },
+      yield put(
+        setCustomSignUpUser({
+          user: {
+            email,
+          },
+        }),
       );
+      yield put(setCustomSignUpComponent({ component: CREATE_USER_ACCOUNT }));
     } else if (result.data.sso) {
       yield put(setCustomSignUpErrorKey({ key: inlineErrors.sso }));
     }

packages/webapp/src/containers/customSignUpSlice.js

@@ -1,8 +1,11 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { CUSTOM_SIGN_UP } from './CustomSignUp/constants';
 
 const initialState = {
   customSignUpErrorKey: null,
   passwordResetError: null,
+  user: null,
+  component: CUSTOM_SIGN_UP,
 };
 
 const customSignUpSlice = createSlice({
@@ -15,15 +18,32 @@ const customSignUpSlice = createSlice({
     setPasswordResetError: (state, { payload: error }) => {
       state.passwordResetError = error;
     },
+    setCustomSignUpUser: (state, { payload: user }) => {
+      state.user = user;
+    },
+    setCustomSignUpComponent: (state, { payload: component }) => {
+      state.component = component;
+    },
   },
 });
 
-export const { setCustomSignUpErrorKey, setPasswordResetError } = customSignUpSlice.actions;
+export const {
+  setCustomSignUpErrorKey,
+  setPasswordResetError,
+  setCustomSignUpUser,
+  setCustomSignUpComponent,
+} = customSignUpSlice.actions;
 
 export const customSignUpErrorKeySelector = (state) =>
   state.tempStateReducer[customSignUpSlice.name]?.customSignUpErrorKey;
 
 export const passwordResetErrorSelector = (state) =>
   state.tempStateReducer[customSignUpSlice.name]?.passwordResetError;
 
+export const customSignUpUserSelector = (state) =>
+  state.tempStateReducer[customSignUpSlice.name]?.user;
+
+export const customSignUpComponentSelector = (state) =>
+  state.tempStateReducer[customSignUpSlice.name]?.component;
+
 export default customSignUpSlice.reducer;