feat: enable preview token (#27809)

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

This PR introduces the ability for the user to utilize a preview token
generated by Contentful to view unpublished content. The PR is
particularly useful for the marketing team, allowing them to test
product announcements before they are published.

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

## **Related issues**

N/A

## **Manual testing steps**

1. knowing the preview token
2. view the page
`chrome-extension://ehkbeholfhcimjldhdaffdhalaalmdkp/home.html?previewToken=000`
3. go to the notifications section
4. also view the content still in draft in Contentful

## **Screenshots/Recordings**

N/A

### **Before**

N/A

### **After**

N/A

## **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/develop/.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/develop/.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.

ui/hooks/metamask-notifications/useNotifications.ts

@@ -54,8 +54,13 @@ export function useListNotifications(): {
     setLoading(true);
     setError(null);
 
+    const urlParams = new URLSearchParams(window.location.search);
+    const previewToken = urlParams.get('previewToken');
+
     try {
-      const data = await dispatch(fetchAndUpdateMetamaskNotifications());
+      const data = await dispatch(
+        fetchAndUpdateMetamaskNotifications(previewToken ?? undefined),
+      );
       setNotificationsData(data as unknown as Notification[]);
       return data as unknown as Notification[];
     } catch (e) {

ui/store/actions.test.js

@@ -2258,7 +2258,7 @@ describe('Actions', () => {
 
       const fetchAndUpdateMetamaskNotificationsStub = sinon
         .stub()
-        .callsFake((cb) => cb());
+        .callsFake((_, cb) => cb());
       const forceUpdateMetamaskStateStub = sinon.stub().callsFake((cb) => cb());
 
       background.getApi.returns({
@@ -2280,7 +2280,7 @@ describe('Actions', () => {
 
       const fetchAndUpdateMetamaskNotificationsStub = sinon
         .stub()
-        .callsFake((cb) => cb(error));
+        .callsFake((_, cb) => cb(error));
       const forceUpdateMetamaskStateStub = sinon
         .stub()
         .callsFake((cb) => cb(error));

ui/store/actions.ts

@@ -5423,22 +5423,20 @@ export function updateOnChainTriggersByAccount(
 /**
  * Fetches and updates MetaMask notifications.
  *
- * This function sends a request to the background script to fetch the latest notifications and update the state accordingly.
- * Upon success, it dispatches an action with type `FETCH_AND_UPDATE_METAMASK_NOTIFICATIONS` to update the Redux state.
+ * This function sends a request to the background script to fetch the latest notifications.
  * If the operation encounters an error, it logs the error message and rethrows the error to ensure it is handled appropriately.
  *
+ * @param previewToken - Optional preview token for fetching draft feature announcements.
  * @returns A thunk action that, when dispatched, attempts to fetch and update MetaMask notifications.
  */
-export function fetchAndUpdateMetamaskNotifications(): ThunkAction<
-  void,
-  MetaMaskReduxState,
-  unknown,
-  AnyAction
-> {
+export function fetchAndUpdateMetamaskNotifications(
+  previewToken?: string,
+): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
   return async () => {
     try {
       const response = await submitRequestToBackground(
         'fetchAndUpdateMetamaskNotifications',
+        [previewToken],
       );
       return response;
     } catch (error) {