From 8a68a79ac41128458efa9b9a395f234e08f161dc Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Tue, 22 Apr 2025 08:13:30 +0000
Subject: [PATCH] Merged in fix/LOY-227-password-input-validation-crash (pull
 request #1835)

fix(LOY-227): use new getErrorMessage for PasswordInput

* fix(LOY-227): improve error message handling in PasswordInput component


Approved-by: Christian Andolf
Approved-by: Linus Flood
---
 .../TempDesignSystem/Form/PasswordInput/index.tsx  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
index 125557a97..c912b9a20 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
@@ -12,6 +12,8 @@ import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInp
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { passwordValidators } from "@/utils/zod/passwordValidator"
 
+import { getErrorMessage } from "../Input/errors"
+
 import styles from "./passwordInput.module.css"
 
 import type { PasswordValidatorKey } from "@/types/components/form/newPassword"
@@ -109,25 +111,21 @@ export default function PasswordInput({
               ) : null}
             </div>
 
-            {isNewPassword && (
+            {isNewPassword ? (
               <NewPasswordValidation value={field.value} errors={errors} />
-            )}
+            ) : null}
 
             {isNewPassword ? (
               !field.value && fieldState.error ? (
                 <Caption className={styles.error} fontOnly>
                   <MaterialIcon icon="info" color="Icon/Feedback/Error" />
-                  {fieldState.error.message}
+                  {getErrorMessage(intl, fieldState.error.message)}
                 </Caption>
               ) : null
             ) : fieldState.error ? (
               <Caption className={styles.error} fontOnly>
                 <MaterialIcon icon="info" color="Icon/Feedback/Error" />
-                {fieldState.error &&
-                  intl.formatMessage({
-                    // eslint-disable-next-line formatjs/enforce-default-message
-                    defaultMessage: fieldState.error.message,
-                  })}
+                {getErrorMessage(intl, fieldState.error.message)}
               </Caption>
             ) : null}
           </TextField>