fix: handle rewards linking failure cp-13.13.0 (#38579)

<!--
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?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38579?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: handle rewards-link errors and allow retry (re-link)

## **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]
> Adds a "Link Rewards" button in Transaction Shield settings to
manually link claimed points to the subscription and logs linking
failures; updates locales.
> 
> - **UI (Transaction Shield settings
`ui/pages/settings/transaction-shield-tab/transaction-shield.tsx`)**:
> - Add conditional "Link Rewards" button to link claimed points to the
current Shield subscription (`linkRewardToShieldSubscription`) when
opted into rewards and no `rewardAccountId` is present.
> - Type tweak for `displayedShieldSubscription` to include optional
`rewardAccountId`.
>   - Log warnings on reward-link failures.
> - **Rewards Hook (`ui/hooks/rewards/useOptIn.ts`)**:
> - Log warnings if `linkRewardToShieldSubscription` fails during opt-in
(previously silent).
> - **Locales (`app/_locales/en/messages.json`,
`app/_locales/en_GB/messages.json`)**:
> - Add `shieldTxDetails3DescriptionLinkReward` message ("Link
Rewards").
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5ac21dc. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: MetaMask Bot <[email protected]>

Author: lwin-kyaw

app/_locales/en/messages.json

@@ -1,6 +1,7 @@
 import { useCallback, useState, useContext, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AccountGroupId, AccountWalletId } from '@metamask/account-api';
+import log from 'loglevel';
 import {
   getMultichainAccountsByWalletId,
   getWalletIdAndNameByAccountAddress,
@@ -173,8 +174,9 @@ export const useOptIn = (options?: UseOptInOptions): UseOptinResult => {
                   options.rewardPoints,
                 ),
               );
-            } catch {
+            } catch (error) {
               // Silently fail - reward linking should not block opt-in
+              log.warn('Failed to link reward to shield subscription', error);
             }
           }
         }

app/_locales/en_GB/messages.json

@@ -4,6 +4,7 @@ import {
   Product,
   PRODUCT_TYPES,
   RECURRING_INTERVALS,
+  Subscription,
   SUBSCRIPTION_STATUSES,
 } from '@metamask/subscription-controller';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
@@ -17,6 +18,7 @@ import {
   IconSize,
 } from '@metamask/design-system-react';
 import { useDispatch, useSelector } from 'react-redux';
+import log from 'loglevel';
 import {
   BannerAlert,
   BannerAlertSeverity,
@@ -83,6 +85,7 @@ import { useHandlePayment } from '../../../hooks/subscription/useHandlePayment';
 import { MetaMaskReduxDispatch } from '../../../store/store';
 import { setOnboardingModalOpen } from '../../../ducks/rewards';
 import { getIntlLocale } from '../../../ducks/locale/locale';
+import { linkRewardToShieldSubscription } from '../../../store/actions';
 import CancelMembershipModal from './cancel-membership-modal';
 import { isCardPaymentMethod, isCryptoPaymentMethod } from './types';
 import ShieldBannerAnimation from './shield-banner-animation';
@@ -126,8 +129,9 @@ const TransactionShield = () => {
     lastSubscription,
   );
   // show current active shield subscription or last subscription if no active subscription
-  const displayedShieldSubscription =
-    currentShieldSubscription ?? lastShieldSubscription;
+  const displayedShieldSubscription:
+    | (Subscription & { rewardAccountId?: string }) // TODO: fix this type once we have controller released.
+    | undefined = currentShieldSubscription ?? lastShieldSubscription;
 
   const [timeoutCancelled, setTimeoutCancelled] = useState(false);
   useEffect(() => {
@@ -280,6 +284,20 @@ const TransactionShield = () => {
     padding: 4,
   };
 
+  const handleLinkRewardToShieldSubscription = useCallback(
+    async (subscriptionId: string, rewardPoints: number) => {
+      // link to shield only coz already opted in to rewards
+      try {
+        await dispatch(
+          linkRewardToShieldSubscription(subscriptionId, rewardPoints),
+        );
+      } catch (error) {
+        log.warn('Failed to link reward to shield subscription', error);
+      }
+    },
+    [dispatch],
+  );
+
   const buttonRow = (label: string, onClick: () => void, id?: string) => {
     return (
       <Box
@@ -682,6 +700,26 @@ const TransactionShield = () => {
                   </Button>
                 </Box>
               )}
+              {hasOptedIntoRewards &&
+                displayedShieldSubscription?.id &&
+                claimedRewardsPoints &&
+                !displayedShieldSubscription?.rewardAccountId && (
+                  <Box className="flex-shrink-0">
+                    <Button
+                      className="px-3"
+                      variant={ButtonVariant.Secondary}
+                      size={ButtonSize.Sm}
+                      onClick={async () =>
+                        handleLinkRewardToShieldSubscription(
+                          displayedShieldSubscription?.id,
+                          claimedRewardsPoints,
+                        )
+                      }
+                    >
+                      {t('shieldTxDetails3DescriptionLinkReward')}
+                    </Button>
+                  </Box>
+                )}
             </Box>
           )}
         </Box>