ES-696: able to refresh the screen after filling some inputs without any popup reminder

signup-ui/src/app/AppRouter.tsx

@@ -16,6 +16,7 @@ import {
   UNDER_CONSTRUCTION,
 } from "~constants/routes";
 import { lazyRetry } from "~utils/lazyRetry";
+import { setupResponseInterceptor } from "~services/api.service";
 
 const SignUpPage = lazy(() => lazyRetry(() => import("~pages/SignUpPage")));
 const ResetPasswordPage = lazy(() =>

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { isEqual } from "lodash";
 import { Resolver, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import * as yup from "yup";
@@ -69,7 +70,12 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => {
       // Step 3 - ResetPassword
       yup.object({
         newPassword: validatePassword(settings, t),
-        confirmNewPassword: validateConfirmPassword("newPassword", settings, t, false),
+        confirmNewPassword: validateConfirmPassword(
+          "newPassword",
+          settings,
+          t,
+          false
+        ),
       }),
       // Step 4 - ResetPasswordStatus
       yup.object({}),
@@ -92,10 +98,13 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => {
   });
 
   const {
+    getValues,
     formState: { isDirty },
   } = methods;
 
   useEffect(() => {
+    if (isEqual(resetPasswordFormDefaultValues, getValues())) return;
+
     if (
       step === ResetPasswordStep.ResetPasswordConfirmation ||
       (criticalError && criticalError.errorCode === "invalid_transaction")
@@ -115,7 +124,7 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => {
     return () => {
       window.removeEventListener("beforeunload", handleTabBeforeUnload);
     };
-  }, [step, criticalError]);
+  }, [step, criticalError, getValues()]);
 
   const getResetPasswordContent = (step: ResetPasswordStep) => {
     switch (step) {
@@ -137,9 +146,9 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => {
   return (
     <>
       {criticalError &&
-        ["invalid_transaction", "knowledgebase_mismatch"].includes(criticalError.errorCode) && (
-          <ResetPasswordPopover />
-        )}
+        ["invalid_transaction", "knowledgebase_mismatch"].includes(
+          criticalError.errorCode
+        ) && <ResetPasswordPopover />}
       <Form {...methods}>
         <form>{getResetPasswordContent(step)}</form>
       </Form>

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

@@ -1,7 +1,7 @@
 import { KeyboardEvent, useCallback, useMemo, useState } from "react";
 import { PopoverTrigger } from "@radix-ui/react-popover";
 import { UseFormReturn } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { Button } from "~components/ui/button";
 import { Checkbox } from "~components/ui/checkbox";
@@ -63,7 +63,7 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
 
   const { registerMutation } = useRegister();
   const [openTermConditionModal, setOpenTermConditionModal] = useState(false);
-  const [modalData, setModalData] = useState({title: "", content: ""});
+  const [modalData, setModalData] = useState({ title: "", content: "" });
 
   const disabledContinue =
     !isValid ||
@@ -121,20 +121,26 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
 
   const onModalToggle = () => {
     setOpenTermConditionModal(false);
-    setModalData({title: "", content: ""});
-  }
+    setModalData({ title: "", content: "" });
+  };
 
   const onOpenTerm = (e: any) => {
     e.preventDefault();
-    setModalData({title: t("terms_and_conditions_title"), content: t("terms_and_conditions_content")});
+    setModalData({
+      title: t("terms_and_conditions_title"),
+      content: t("terms_and_conditions_content"),
+    });
     setOpenTermConditionModal(true);
-  }
+  };
 
   const onOpenPrivacy = (e: any) => {
     e.preventDefault();
-    setModalData({title: t("privacy_and_policy_title"), content: t("privacy_and_policy_content")});
+    setModalData({
+      title: t("privacy_and_policy_title"),
+      content: t("privacy_and_policy_content"),
+    });
     setOpenTermConditionModal(true);
-  }
+  };
 
   const handleFullNameInput = (event: KeyboardEvent<HTMLInputElement>) =>
     handleInputFilter(

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

@@ -1,11 +1,14 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { useMutationState } from "@tanstack/react-query";
+import { isEqual } from "lodash";
 import { Resolver, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import * as yup from "yup";
 
 import { Button } from "~components/ui/button";
 import { Form } from "~components/ui/form";
+import { keys as mutationKeys } from "~pages/shared/mutations";
 import {
   validateCaptchaToken,
   validateConfirmPassword,
@@ -14,7 +17,7 @@ import {
   validatePassword,
   validateUsername,
 } from "~pages/shared/validation";
-import { SettingsDto } from "~typings/types";
+import { SettingsDto, VerifyChallengeResponseDto } from "~typings/types";
 
 import { AccountRegistrationStatus } from "./AccountRegistrationStatus/AccountRegistrationStatus";
 import AccountSetup from "./AccountSetup";
@@ -109,6 +112,43 @@ export const SignUpPage = ({ settings }: SignUpPageProps) => {
     mode: "onBlur",
   });
 
+  const { getValues } = methods;
+
+  const [challengeVerification] = useMutationState<VerifyChallengeResponseDto>({
+    filters: {
+      mutationKey: mutationKeys.challengeVerification,
+      status: "success",
+    },
+    select: (mutation) => mutation.state.data as VerifyChallengeResponseDto,
+  });
+
+  useEffect(() => {
+    if (isEqual(signUpFormDefaultValues, getValues())) return;
+
+    if (
+      (step === SignUpStep.PhoneStatus &&
+        challengeVerification.errors.length > 0 &&
+        ["already-registered", "identifier_already_registered"].includes(
+          challengeVerification.errors[0].errorCode
+        )) ||
+      step === SignUpStep.AccountRegistrationStatus ||
+      (criticalError && criticalError.errorCode === "invalid_transaction")
+    )
+      return;
+
+    const handleTabBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+
+      return (event.returnValue = t("reset_password_discontinue_prompt"));
+    };
+
+    window.addEventListener("beforeunload", handleTabBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleTabBeforeUnload);
+    };
+  }, [step, criticalError, getValues()]);
+
   const getSignUpStepContent = (step: SignUpStep) => {
     switch (step) {
       case SignUpStep.Phone:
@@ -131,9 +171,9 @@ export const SignUpPage = ({ settings }: SignUpPageProps) => {
   return (
     <>
       {criticalError &&
-        ["invalid_transaction", "identifier_already_registered"].includes(criticalError.errorCode) && (
-          <SignUpPopover />
-        )}
+        ["invalid_transaction", "identifier_already_registered"].includes(
+          criticalError.errorCode
+        ) && <SignUpPopover />}
       <Form {...methods}>
         <form>{getSignUpStepContent(step)}</form>
       </Form>