fix: cp-7.60.0 show all blocking alerts if keyboard not visible (#22837)

## **Description**

Ensure all blocking alerts are visible in MetaMask Pay if keyboard is
not visible.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: #22756 

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refactors alert filtering to surface blocking and pending alerts
appropriately (respecting keyboard visibility and input-change rules)
and updates tests accordingly.
> 
> - **Hooks** (`useTransactionCustomAmountAlerts`):
> - Filter confirmation alerts to only blocking, then exclude alerts
based on:
>     - No input change for `ON_CHANGE_ALERTS`.
>     - Keyboard visible for non-`KEYBOARD_ALERTS`.
>     - Keyboard visible for `PENDING_AMOUNT_ALERTS`.
> - Combine `pendingTokenAlerts` with filtered confirmation alerts and
select the first alert for display.
> - **Tests** (`useTransactionCustomAmountAlerts.test.ts`):
>   - Add test ensuring pending alert is returned when applicable.
> - Add test ensuring pending alerts are suppressed when keyboard is
visible.
>   - Adjust test names to clarify keyboard and on-change behaviors.
>   - Verify non-blocking alerts are ignored.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5bb7b96. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: matthewwalsh0

app/components/Views/confirmations/hooks/transactions/useTransactionCustomAmountAlerts.test.ts

@@ -116,7 +116,21 @@ describe('useTransactionCustomAmountAlerts', () => {
     expect(result.current.alertMessage).toBeUndefined();
   });
 
-  it('does not return alert message if on change alert and input not changed', () => {
+  it('returns pending alert', () => {
+    const PENDING_ALERT_MOCK = {
+      ...ALERT_MOCK,
+      key: AlertKeys.SignedOrSubmitted,
+    };
+
+    usePendingAmountAlertsMock.mockReturnValue([PENDING_ALERT_MOCK]);
+
+    const { result } = runHook();
+
+    expect(result.current.alertTitle).toBe(PENDING_ALERT_MOCK.title);
+    expect(result.current.alertMessage).toBe(PENDING_ALERT_MOCK.message);
+  });
+
+  it('does not return alert if on change alert and input not changed', () => {
     useAlertsMock.mockReturnValue({
       alerts: [
         {
@@ -131,7 +145,7 @@ describe('useTransactionCustomAmountAlerts', () => {
     expect(result.current.alertMessage).toBeUndefined();
   });
 
-  it('does not return non-keyboard alert if keyboard visible', () => {
+  it('does not return alert if keyboard visible and not keyboard alert', () => {
     useAlertsMock.mockReturnValue({
       alerts: [
         {
@@ -160,4 +174,22 @@ describe('useTransactionCustomAmountAlerts', () => {
 
     expect(result.current.alertMessage).toBeUndefined();
   });
+
+  it('does not return alert if keyboard visible and pending alert', () => {
+    useAlertsMock.mockReturnValue({
+      alerts: [
+        {
+          ...ALERT_MOCK,
+          key: AlertKeys.InsufficientPayTokenBalance,
+        },
+      ],
+    } as AlertsContextParams);
+
+    const { result } = runHook({
+      isInputChanged: true,
+      isKeyboardVisible: true,
+    });
+
+    expect(result.current.alertMessage).toBeUndefined();
+  });
 });

app/components/Views/confirmations/hooks/transactions/useTransactionCustomAmountAlerts.ts

@@ -38,32 +38,33 @@ export function useTransactionCustomAmountAlerts({
   const { alerts: confirmationAlerts } = useAlerts();
   const pendingTokenAlerts = usePendingAmountAlerts({ pendingTokenAmount });
 
-  const uniqueAlerts = useMemo(
-    () =>
-      confirmationAlerts.filter(
-        (a_) => !PENDING_AMOUNT_ALERTS.includes(a_.key as AlertKeys),
-      ),
-    [confirmationAlerts],
-  );
+  const filteredAlerts = useMemo(() => {
+    const blockingAlerts = confirmationAlerts.filter((a) => a.isBlocking);
 
-  const allAlerts = useMemo(
-    () => [...pendingTokenAlerts, ...uniqueAlerts],
-    [uniqueAlerts, pendingTokenAlerts],
-  );
+    return blockingAlerts.filter((a) => {
+      const isIgnoredAsNoInput =
+        !isInputChanged && ON_CHANGE_ALERTS.includes(a.key as AlertKeys);
+
+      const isIgnoredAsKeyboardVisible =
+        isKeyboardVisible && !KEYBOARD_ALERTS.includes(a.key as AlertKeys);
+
+      const isIgnoredAsPending =
+        isKeyboardVisible && PENDING_AMOUNT_ALERTS.includes(a.key as AlertKeys);
+
+      return (
+        !isIgnoredAsNoInput &&
+        !isIgnoredAsKeyboardVisible &&
+        !isIgnoredAsPending
+      );
+    });
+  }, [confirmationAlerts, isInputChanged, isKeyboardVisible]);
 
-  const filteredAlerts = useMemo(
-    () =>
-      allAlerts.filter(
-        (a) =>
-          a.isBlocking &&
-          (!isKeyboardVisible ||
-            KEYBOARD_ALERTS.includes(a.key as AlertKeys)) &&
-          (isInputChanged || !ON_CHANGE_ALERTS.includes(a.key as AlertKeys)),
-      ),
-    [allAlerts, isInputChanged, isKeyboardVisible],
+  const alerts = useMemo(
+    () => [...pendingTokenAlerts, ...filteredAlerts],
+    [filteredAlerts, pendingTokenAlerts],
   );
 
-  const firstAlert = filteredAlerts?.[0];
+  const firstAlert = alerts?.[0];
 
   if (!firstAlert) {
     return {};