[ES-1995] Clearing signup and reset password store while navigating from landing page in signup.

signup-ui/public/theme/variables.css

@@ -174,7 +174,7 @@
   --brand-only-logo-url: url("/logo.png");
   --brand-logo-url: url("/images/brand_logo.png");
 
-  --signup-background: url("/images/section-bg.png") no-repeat;
+  --signup-background: #f7f9fd;
   --side-section-bg-with: 320px;
   --top-left-bg-logo-url: url("/images/top.png");
   --top-left-bg-logo-display: none;

signup-ui/src/pages/LandingPage/LandingPage.tsx

@@ -5,19 +5,25 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { ReactComponent as SomethingWentWrongSvg } from "~assets/svg/something-went-wrong.svg";
 import { RESET_PASSWORD, SIGNUP_ROUTE } from "~constants/routes";
 import { Button } from "~components/ui/button";
+import { useSignUpStore } from "~pages/SignUpPage/useSignUpStore";
+import { useResetPasswordStore } from "~pages/ResetPasswordPage/useResetPasswordStore";
 
 export const LandingPage = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { hash: fromSignInHash } = useLocation();
+  const resetSignupStore = useSignUpStore.getState().reset;
+  const resetForgotPasswordStore = useResetPasswordStore.getState().reset;
 
   const handleResetPassword = (e: any) => {
     e.preventDefault();
+    resetForgotPasswordStore();
     navigate(`${RESET_PASSWORD}${fromSignInHash}`);
   };
 
   const handleRegister = (e: any) => {
     e.preventDefault();
+    resetSignupStore();
     navigate(`${SIGNUP_ROUTE}${fromSignInHash}`);
   };
 

signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx

@@ -12,6 +12,13 @@ export enum ResetPasswordStep {
   ResetPasswordConfirmation,
 }
 
+const initialState = {
+  step: ResetPasswordStep.UserInfo,
+  criticalError: null as Error | null,
+  resendOtp: false,
+  resendAttempts: null,
+};
+
 export type ResetPasswordStore = {
   step: ResetPasswordStep;
   setStep: (step: ResetPasswordStep) => void;
@@ -21,34 +28,33 @@ export type ResetPasswordStore = {
   setResendOtp: (resendOtp: boolean) => void;
   resendAttempts: any;
   setResendAttempts: (resendAttempts: any) => void;
+  reset: () => void;
 };
 
 export const useResetPasswordStore = create<ResetPasswordStore>()(
   devtools((set, get) => ({
-    step: ResetPasswordStep.UserInfo,
+    ...initialState,
     setStep: (step: ResetPasswordStep) => {
       const current = get();
       if (isEqual(current.step, step)) return;
-      set((state) => ({ step }));
+      set(() => ({ step }));
     },
-    criticalError: null,
     setCriticalError: (criticalError: Error | null) => {
       const current = get();
       if (isEqual(current.criticalError, criticalError)) return;
-      set((state) => ({ criticalError }));
+      set(() => ({ criticalError }));
     },
-    resendOtp: false,
     setResendOtp: (resendOtp: boolean) => {
       const current = get();
       if (isEqual(current.resendOtp, resendOtp)) return;
-      set((state) => ({ resendOtp }));
+      set(() => ({ resendOtp }));
     },
-    resendAttempts: null,
     setResendAttempts: (resendAttempts: any) => {
       const current = get();
       if (isEqual(current.resendAttempts, resendAttempts)) return;
-      set((state) => ({ resendAttempts }));
+      set(() => ({ resendAttempts }));
     },
+    reset: () => set(() => initialState)
   }))
 );
 

signup-ui/src/pages/SignUpPage/useSignUpStore.tsx

@@ -13,6 +13,14 @@ export enum SignUpStep {
   AccountRegistrationStatus,
 }
 
+const initialState = {
+  step: SignUpStep.Phone,
+  criticalError: null as Error | null,
+  resendOtp: false,
+  resendAttempts: null,
+  verificationChallengeError: null as Error | null,
+};
+
 export type SignUpStore = {
   step: SignUpStep;
   setStep: (step: SignUpStep) => void;
@@ -24,35 +32,32 @@ export type SignUpStore = {
   setResendAttempts: (resendAttempts: any) => void;
   verificationChallengeError: Error | null;
   setVerificationChallengeError: (verificationChallengeError: any) => void;
+  reset: () => void;
 };
 
 export const useSignUpStore = create<SignUpStore>()(
   devtools((set, get) => ({
-    step: SignUpStep.Phone,
+    ...initialState,
     setStep: (step: SignUpStep) => {
       const current = get();
       if (isEqual(current.step, step)) return;
-      set((state) => ({ step }));
+      set(() => ({ step }));
     },
-    criticalError: null,
     setCriticalError: (criticalError: Error | null) => {
       const current = get();
       if (isEqual(current.criticalError, criticalError)) return;
-      set((state) => ({ criticalError }));
+      set(() => ({ criticalError }));
     },
-    resendOtp: false,
     setResendOtp: (resendOtp: boolean) => {
       const current = get();
       if (isEqual(current.resendOtp, resendOtp)) return;
-      set((state) => ({ resendOtp }));
+      set(() => ({ resendOtp }));
     },
-    resendAttempts: null,
     setResendAttempts: (resendAttempts: any) => {
       const current = get();
       if (isEqual(current.resendAttempts, resendAttempts)) return;
-      set((state) => ({ resendAttempts }));
+      set(() => ({ resendAttempts }));
     },
-    verificationChallengeError: null,
     setVerificationChallengeError: (
       verificationChallengeError: Error | null
     ) => {
@@ -61,8 +66,9 @@ export const useSignUpStore = create<SignUpStore>()(
         isEqual(current.verificationChallengeError, verificationChallengeError)
       )
         return;
-      set((state) => ({ verificationChallengeError }));
+      set(() => ({ verificationChallengeError }));
     },
+    reset: () => set(() => initialState)
   }))
 );