From 0a0f4ac4e12038024ea60e0a40512836a73e6567 Mon Sep 17 00:00:00 2001
From: Valerie Pomerleau <vpomerleau@mozilla.com>
Date: Wed, 18 Sep 2024 15:22:51 -0700
Subject: [PATCH] fix(settings): Fix error message if account deletion fails

Because:

* Incorrect password error was shown for all errors with account deletion

This commit:

* Show correct localized error message
* Show in tooltip if incorrect password, otherwise use alertBar

Closes #FXA-10392
---
 .../components/Settings/PageDeleteAccount/index.tsx  | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/fxa-settings/src/components/Settings/PageDeleteAccount/index.tsx b/packages/fxa-settings/src/components/Settings/PageDeleteAccount/index.tsx
index d265b3ca17..c262f3d536 100644
--- a/packages/fxa-settings/src/components/Settings/PageDeleteAccount/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/PageDeleteAccount/index.tsx
@@ -18,8 +18,9 @@ import { Localized } from '@fluent/react';
 import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
 import { hardNavigate } from 'fxa-react/lib/utils';
 import LinkExternal from 'fxa-react/components/LinkExternal';
-import { getErrorFtlId } from '../../../lib/error-utils';
+import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 import GleanMetrics from '../../../lib/glean';
+import { useFtlMsgResolver } from '../../../models/hooks';
 
 type FormData = {
   password: string;
@@ -104,6 +105,7 @@ export const PageDeleteAccount = (_: RouteComponentProps) => {
   );
   const navigate = useNavigate();
   const alertBar = useAlertBar();
+  const ftlMsgResolver = useFtlMsgResolver();
   const goHome = useCallback(() => window.history.back(), []);
 
   const account = useAccount();
@@ -143,11 +145,7 @@ export const PageDeleteAccount = (_: RouteComponentProps) => {
         );
         hardNavigate('/', { delete_account_success: true }, true);
       } catch (e) {
-        const localizedError = l10n.getString(
-          getErrorFtlId(AuthUiErrors.INCORRECT_PASSWORD),
-          null,
-          AuthUiErrors.INCORRECT_PASSWORD.message
-        );
+        const localizedError = getLocalizedErrorMessage(ftlMsgResolver, e);
         if (e.errno === AuthUiErrors.INCORRECT_PASSWORD.errno) {
           setErrorText(localizedError);
           setValue('password', '');
@@ -157,7 +155,7 @@ export const PageDeleteAccount = (_: RouteComponentProps) => {
         }
       }
     },
-    [account, l10n, setErrorText, setValue, alertBar]
+    [account, setErrorText, setValue, alertBar, ftlMsgResolver]
   );
 
   const handleConfirmChange =