feat: update shield entry modal status only when user has interacted (#37925)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR updates shield entry modal status only when user has interacted.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37925?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: update shield entry modal status only when user has
interacted

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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]
> Defers Shield Entry modal background/state updates until after user
interaction, adding an interaction flag and updating actions, selectors,
provider flow, and tests.
> 
> - **Shield Entry Modal UX/state**:
> - Add `hasUserInteractedWithModal` to `appState.shieldEntryModal` and
update `getShowShieldEntryModal` to show only when `show` is true and no
interaction has occurred.
> - Modal close/get-started now dispatch `setShowShieldEntryModalOnce({
show: false, hasUserInteractedWithModal: true })`.
>   - Tests updated to assert new payload shape and navigation behavior.
> - **Actions/Reducer/Constants**:
> - Replace `SET_SHOW_SHIELD_ENTRY_MODAL_ONCE` with
`SET_SHIELD_ENTRY_MODAL_STATUS` and update reducer case.
> - Refactor `setShowShieldEntryModalOnce` to accept an options object
`{ show, shouldSubmitEvents, triggeringCohort, modalType,
hasUserInteractedWithModal, shouldUpdateBackgroundState }`; gate
background call on `shouldUpdateBackgroundState`.
> - **Shield subscription flow**
(`ui/contexts/shield/shield-subscription.tsx`):
>   - When active subscription: set `{ show: false }`.
> - When eligible: show modal via `setShowShieldEntryModalOnce({ show:
true, shouldSubmitEvents: true, triggeringCohort, modalType,
shouldUpdateBackgroundState: false })` to postpone background state
update until interaction.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c07dbdb. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: lwin-kyaw

ui/components/app/shield-entry-modal/shield-entry-modal.test.tsx

@@ -67,7 +67,10 @@ describe('Shield Entry Modal', () => {
 
     const closeButton = getByTestId('shield-entry-modal-close-button');
     fireEvent.click(closeButton);
-    expect(setShowShieldEntryModalOnceSpy).toHaveBeenCalledWith(false);
+    expect(setShowShieldEntryModalOnceSpy).toHaveBeenCalledWith({
+      show: false,
+      hasUserInteractedWithModal: true,
+    });
   });
 
   it('should call onGetStarted when the get started button is clicked', async () => {
@@ -78,7 +81,10 @@ describe('Shield Entry Modal', () => {
     );
 
     fireEvent.click(getStartedButton);
-    expect(setShowShieldEntryModalOnceSpy).toHaveBeenCalledWith(false);
+    expect(setShowShieldEntryModalOnceSpy).toHaveBeenCalledWith({
+      show: false,
+      hasUserInteractedWithModal: true,
+    });
     await waitFor(() => {
       expect(mockUseNavigate).toHaveBeenCalledWith({
         pathname: SHIELD_PLAN_ROUTE,
@@ -110,7 +116,10 @@ describe('Shield Entry Modal', () => {
         event: SubscriptionUserEvent.ShieldEntryModalViewed,
         cohort: mockState.appState.shieldEntryModal.triggeringCohort,
       });
-      expect(setShowShieldEntryModalOnceSpy).toHaveBeenCalledWith(false);
+      expect(setShowShieldEntryModalOnceSpy).toHaveBeenCalledWith({
+        show: false,
+        hasUserInteractedWithModal: true,
+      });
     });
   });
 });

ui/components/app/shield-entry-modal/shield-entry-modal.tsx

@@ -131,7 +131,12 @@ const ShieldEntryModal = ({
       );
     }
 
-    dispatch(setShowShieldEntryModalOnce(false));
+    dispatch(
+      setShowShieldEntryModalOnce({
+        show: false,
+        hasUserInteractedWithModal: true,
+      }),
+    );
   };
 
   const handleOnGetStarted = () => {

ui/contexts/shield/shield-subscription.tsx

@@ -150,7 +150,11 @@ export const ShieldSubscriptionProvider: React.FC = ({ children }) => {
         }
 
         if (isShieldSubscriptionActive) {
-          dispatch(setShowShieldEntryModalOnce(false));
+          dispatch(
+            setShowShieldEntryModalOnce({
+              show: false,
+            }),
+          );
           return;
         }
 
@@ -213,14 +217,16 @@ export const ShieldSubscriptionProvider: React.FC = ({ children }) => {
             return;
           }
 
-          const shouldSubmitUserEvents = true; // submits `shield_entry_modal_viewed` event
           dispatch(
-            setShowShieldEntryModalOnce(
-              true,
-              shouldSubmitUserEvents,
-              entrypointCohort,
+            setShowShieldEntryModalOnce({
+              show: true,
+              shouldSubmitEvents: true, // submits `shield_entry_modal_viewed` event
+              triggeringCohort: entrypointCohort,
               modalType,
-            ),
+              // we will show the modal but we won't update the background state yet,
+              // we will only update after the user has interacted with the modal
+              shouldUpdateBackgroundState: false,
+            }),
           );
           return;
         }
@@ -236,14 +242,16 @@ export const ShieldSubscriptionProvider: React.FC = ({ children }) => {
             modalType,
           );
           if (selectedCohort?.cohort === COHORT_NAMES.WALLET_HOME) {
-            const shouldSubmitUserEvents = true; // submits `shield_entry_modal_viewed` event to subscription backend
             dispatch(
-              setShowShieldEntryModalOnce(
-                true,
-                shouldSubmitUserEvents,
-                selectedCohort.cohort,
+              setShowShieldEntryModalOnce({
+                show: true,
+                shouldSubmitEvents: true, // submits `shield_entry_modal_viewed` event to subscription backend
+                triggeringCohort: selectedCohort.cohort,
                 modalType,
-              ),
+                // we will show the modal but we won't update the background state yet,
+                // we will only update after the user has interacted with the modal
+                shouldUpdateBackgroundState: false,
+              }),
             );
           }
         }

ui/ducks/app/app.ts

@@ -139,6 +139,10 @@ type AppState = {
     shouldSubmitEvents: boolean;
     modalType?: ModalType;
     triggeringCohort?: string;
+    /**
+     * Whether the user has interacted with the modal.
+     */
+    hasUserInteractedWithModal?: boolean;
   };
 };
 
@@ -797,7 +801,7 @@ export default function reduceApp(
         showSupportDataConsentModal: action.payload,
       };
 
-    case actionConstants.SET_SHOW_SHIELD_ENTRY_MODAL_ONCE:
+    case actionConstants.SET_SHIELD_ENTRY_MODAL_STATUS:
       return {
         ...appState,
         shieldEntryModal: {

ui/selectors/selectors.js

@@ -290,7 +290,10 @@ export function getKeyringSnapRemovalResult(state) {
 export const getPendingTokens = (state) => state.appState.pendingTokens;
 
 export function getShowShieldEntryModal(state) {
-  return state.appState.shieldEntryModal?.show;
+  const { show, hasUserInteractedWithModal } =
+    state.appState.shieldEntryModal || {};
+  // only show the modal if `show` is true and user has not interacted with the modal
+  return Boolean(show) && !hasUserInteractedWithModal;
 }
 
 export function getPendingShieldCohort(state) {

ui/store/actionConstants.ts

@@ -196,5 +196,4 @@ export const SET_SHOW_CLAIM_SUBMIT_TOAST = 'SET_SHOW_CLAIM_SUBMIT_TOAST';
 export const SET_SHOW_SUPPORT_DATA_CONSENT_MODAL =
   'SET_SHOW_SUPPORT_DATA_CONSENT_MODAL';
 
-export const SET_SHOW_SHIELD_ENTRY_MODAL_ONCE =
-  'SET_SHOW_SHIELD_ENTRY_MODAL_ONCE';
+export const SET_SHIELD_ENTRY_MODAL_STATUS = 'SET_SHIELD_ENTRY_MODAL_STATUS';

ui/store/actions.ts

@@ -654,21 +654,33 @@ export function getSubscriptionBillingPortalUrl(): ThunkAction<
   };
 }
 
-export function setShowShieldEntryModalOnce(
-  show: boolean | null,
-  shouldSubmitEvents: boolean = false,
-  triggeringCohort?: string,
-  modalType?: ModalType,
-): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
+export function setShowShieldEntryModalOnce({
+  show,
+  shouldSubmitEvents = false,
+  triggeringCohort,
+  modalType,
+  hasUserInteractedWithModal = false,
+  shouldUpdateBackgroundState = true,
+}: {
+  show: boolean | null;
+  shouldSubmitEvents?: boolean;
+  triggeringCohort?: string;
+  modalType?: ModalType;
+  hasUserInteractedWithModal?: boolean;
+  shouldUpdateBackgroundState?: boolean;
+}): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
   return async (dispatch: MetaMaskReduxDispatch) => {
     try {
-      await submitRequestToBackground('setShowShieldEntryModalOnce', [show]);
+      if (shouldUpdateBackgroundState) {
+        await submitRequestToBackground('setShowShieldEntryModalOnce', [show]);
+      }
       dispatch(
         setShowShieldEntryModalOnceAction({
           show: Boolean(show),
           shouldSubmitEvents,
           triggeringCohort,
           modalType,
+          hasUserInteractedWithModal,
         }),
       );
     } catch (error) {
@@ -684,9 +696,10 @@ export function setShowShieldEntryModalOnceAction(payload: {
   shouldSubmitEvents: boolean;
   triggeringCohort?: string;
   modalType: ModalType;
+  hasUserInteractedWithModal?: boolean;
 }): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
   return {
-    type: actionConstants.SET_SHOW_SHIELD_ENTRY_MODAL_ONCE,
+    type: actionConstants.SET_SHIELD_ENTRY_MODAL_STATUS,
     payload,
   };
 }