ES-713: fix error message is retained in Khmer language even after language was switch to English

signup-ui/src/components/ui/form.tsx

@@ -9,6 +9,7 @@ import {
   FormProvider,
   useFormContext,
 } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 import { Label } from "~components/ui/label";
 import { cn } from "~utils/cn";
@@ -146,7 +147,10 @@ const FormMessage = React.forwardRef<
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+  const { t } = useTranslation();
+
+  // @ts-ignore
+  const body: React.ReactNode = error ? t(String(error.message)) : children;
 
   if (!body) {
     return null;

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

@@ -59,21 +59,20 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => {
     () => [
       // Step 1 - UserInfo
       yup.object({
-        username: validateUsername(settings, t),
-        fullname: validateFullName(settings, t),
-        captchaToken: validateCaptchaToken(t),
+        username: validateUsername(settings),
+        fullname: validateFullName(settings),
+        captchaToken: validateCaptchaToken(),
       }),
       // Step 2 - Otp
       yup.object({
         otp: validateOtp(settings),
       }),
       // Step 3 - ResetPassword
       yup.object({
-        newPassword: validatePassword(settings, t),
+        newPassword: validatePassword(settings),
         confirmNewPassword: validateConfirmPassword(
           "newPassword",
           settings,
-          t,
           false
         ),
       }),

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

@@ -76,8 +76,8 @@ export const SignUpPage = ({ settings }: SignUpPageProps) => {
     () => [
       // Step 1 - Phone Validation
       yup.object({
-        phone: validateUsername(settings, t),
-        captchaToken: validateCaptchaToken(t),
+        phone: validateUsername(settings),
+        captchaToken: validateCaptchaToken(),
       }),
       // Step 2 - OTP Validation
       yup.object({
@@ -88,9 +88,9 @@ export const SignUpPage = ({ settings }: SignUpPageProps) => {
       // Step 4 - Account Setup Validation
       yup.object({
         username: yup.string(),
-        fullNameInKhmer: validateFullName(settings, t),
-        password: validatePassword(settings, t),
-        confirmPassword: validateConfirmPassword("password", settings, t, true),
+        fullNameInKhmer: validateFullName(settings),
+        password: validatePassword(settings),
+        confirmPassword: validateConfirmPassword("password", settings, true),
         consent: yup.bool().oneOf([true], t("terms_and_conditions_validation")),
       }),
       // Step 5 - Register Status Validation

signup-ui/src/pages/shared/validation.ts

@@ -3,31 +3,31 @@ import * as yup from "yup";
 
 import { SettingsDto } from "~typings/types";
 
-export const validateUsername = (settings: SettingsDto, t: TFunction) =>
+export const validateUsername = (settings: SettingsDto) =>
   yup
     .string()
     .trim()
     .matches(/^[^0].*$/, {
-      message: t("username_lead_zero_validation"),
+      message: "username_lead_zero_validation",
       excludeEmptyString: true,
     })
-    .test("isUsernameValid", t("username_validation"), (value) => {
+    .test("isUsernameValid", "username_validation", (value) => {
       if (value === "") return true;
       return new RegExp(settings.response.configs["identifier.pattern"]).test(
         `${settings.response.configs["identifier.prefix"]}${value}`
       );
     });
 
-export const validateCaptchaToken = (t: TFunction) =>
-  yup.string().required(t("captcha_token_validation"));
+export const validateCaptchaToken = () =>
+  yup.string().required("captcha_token_validation");
 
-export const validateFullName = (settings: SettingsDto, t: TFunction) =>
+export const validateFullName = (settings: SettingsDto) =>
   yup
     .string()
     .strict(true)
-    .trim(t("full_name_all_spaces_validation"))
+    .trim("full_name_all_spaces_validation")
     .matches(new RegExp(settings.response.configs["fullname.pattern"]), {
-      message: t("full_name_in_lng_validation"),
+      message: "full_name_in_lng_validation",
       excludeEmptyString: true,
     });
 
@@ -36,31 +36,30 @@ export const validateOtp = (settings: SettingsDto) =>
     .string()
     .matches(new RegExp(`^\\d{${settings.response.configs["otp.length"]}}$`));
 
-export const validatePassword = (settings: SettingsDto, t: TFunction) =>
+export const validatePassword = (settings: SettingsDto) =>
   yup
     .string()
     .trim()
     .matches(new RegExp(settings.response.configs["password.pattern"]), {
-      message: t("password_validation"),
+      message: "password_validation",
       excludeEmptyString: true,
     });
 
 export const validateConfirmPassword = (
   passwordRef: string,
   settings: SettingsDto,
-  t: TFunction,
   isRegister: boolean
 ) =>
   yup
     .string()
     .trim()
     .matches(new RegExp(settings.response.configs["password.pattern"]), {
-      message: t("password_validation"),
+      message: "password_validation",
       excludeEmptyString: true,
     })
     .oneOf(
       [yup.ref(passwordRef), ""],
       isRegister
-        ? t("register_password_validation_must_match")
-        : t("password_validation_must_match")
+        ? "register_password_validation_must_match"
+        : "password_validation_must_match"
     );