feat: add Contentful version segmentation

app/components/UI/Carousel/fetchCarouselSlidesFromContentful.test.ts

@@ -1,5 +1,6 @@
-// eslint-disable-next-line import/no-namespace
 import { ContentfulClientApi, createClient } from 'contentful';
+// eslint-disable-next-line import/no-namespace
+import * as DeviceInfoModule from 'react-native-device-info';
 import {
   fetchCarouselSlidesFromContentful,
   isActive,
@@ -31,7 +32,7 @@ describe('fetchCarouselSlidesFromContentful', () => {
         linkUrl: 'https://example.com/priority',
         undismissable: true,
         priorityPlacement: true,
-      },
+      } as Record<string, unknown>,
     },
     {
       sys: { id: '2' },
@@ -42,7 +43,7 @@ describe('fetchCarouselSlidesFromContentful', () => {
         linkUrl: 'https://example.com/regular',
         undismissable: false,
         priorityPlacement: false,
-      },
+      } as Record<string, unknown>,
     },
   ];
 
@@ -168,6 +169,54 @@ describe('fetchCarouselSlidesFromContentful', () => {
       undismissable: false,
     });
   });
+
+  describe('minimum version number', () => {
+    const minimumVersionSchema = [
+      {
+        testName: 'shows banner if minimum version number not added',
+        minimumVersion: undefined,
+        length: 1,
+      },
+      {
+        testName: 'shows banner if current version matches > version number',
+        minimumVersion: '7.55.0',
+        length: 1,
+      },
+      {
+        testName: 'shows banner if current version matches === version number',
+        minimumVersion: '7.56.0',
+        length: 1,
+      },
+      {
+        testName:
+          'does not show banner if current version matches < version number ',
+        minimumVersion: '7.57.0',
+        length: 0,
+      },
+      {
+        testName: 'does not show banner if provided a malformed version number',
+        minimumVersion: 'malformed version number',
+        length: 0,
+      },
+    ];
+
+    it.each(minimumVersionSchema)(
+      '$testName',
+      async ({ minimumVersion, length }) => {
+        jest.spyOn(DeviceInfoModule, 'getVersion').mockReturnValue('7.56.0');
+        const response = arrangeContentfulResponse();
+        response.items[0].fields.mobileMinimumVersionNumber = minimumVersion;
+        response.items[1].fields.mobileMinimumVersionNumber = minimumVersion;
+        const { mockContentfulClientGetEntries } = arrangeMocks(response);
+
+        const result = await fetchCarouselSlidesFromContentful();
+
+        expect(mockContentfulClientGetEntries).toHaveBeenCalled();
+        expect(result.prioritySlides).toHaveLength(length);
+        expect(result.regularSlides).toHaveLength(length);
+      },
+    );
+  });
 });
 
 describe('isActive', () => {

app/components/UI/Carousel/fetchCarouselSlidesFromContentful.ts

@@ -2,6 +2,7 @@ import { createClient, type EntrySkeletonType } from 'contentful';
 import { isProduction } from '../../../util/environment';
 import { CarouselSlide } from './types';
 import { ACCESS_TOKEN, SPACE_ID } from './constants';
+import { hasMinimumRequiredVersion } from '../../../util/remoteFeatureFlag';
 
 export interface ContentfulCarouselSlideFields {
   headline: string;
@@ -123,6 +124,7 @@ function mapContentfulEntriesToSlides(
       priorityPlacement,
       cardPlacement,
       variableName,
+      mobileMinimumVersionNumber,
     } = entry.fields;
 
     const slide: CarouselSlide = {
@@ -144,6 +146,10 @@ function mapContentfulEntriesToSlides(
       variableName,
     };
 
+    if (!isValidMinimumVersion(mobileMinimumVersionNumber)) {
+      continue;
+    }
+
     if (priorityPlacement) {
       prioritySlides.push(slide);
     } else {
@@ -154,6 +160,20 @@ function mapContentfulEntriesToSlides(
   return { prioritySlides, regularSlides };
 }
 
+function isValidMinimumVersion(contentfulMinimumVersionNumber?: string) {
+  // Field is not set, show by default
+  if (!contentfulMinimumVersionNumber) {
+    return true;
+  }
+
+  try {
+    return hasMinimumRequiredVersion(contentfulMinimumVersionNumber);
+  } catch {
+    // Invalid mobile version number, not showing banner
+    return false;
+  }
+}
+
 export function isActive(
   slide: { startDate?: string; endDate?: string },
   now = new Date(),

app/selectors/notifications/index.tsx

@@ -13,6 +13,9 @@ import {
 import { createDeepEqualSelector } from '../util';
 import { RootState } from '../../reducers';
 import { selectRemoteFeatureFlags } from '../featureFlagController';
+import featureAnnouncement, {
+  isFilteredFeatureAnnonucementNotification,
+} from '../../util/notifications/notification-states/feature-announcement/feature-announcement';
 
 type NotificationServicesState = NotificationServicesControllerState;
 
@@ -87,30 +90,40 @@ export const getmetamaskNotificationsReadList = createSelector(
 );
 export const getNotificationsList = createDeepEqualSelector(
   selectNotificationServicesControllerState,
-  (notificationServicesControllerState: NotificationServicesState) =>
-    notificationServicesControllerState.metamaskNotificationsList,
+  (notificationServicesControllerState: NotificationServicesState) => {
+    const notificationList =
+      notificationServicesControllerState.metamaskNotificationsList;
+
+    return notificationList.filter((n) => {
+      // Check announcements
+      if (featureAnnouncement.guardFn(n)) {
+        return isFilteredFeatureAnnonucementNotification(n);
+      }
+
+      // Return rest
+      return true;
+    });
+  },
 );
 
 export const getMetamaskNotificationsUnreadCount = createSelector(
-  selectNotificationServicesControllerState,
-  (notificationServicesControllerState: NotificationServicesState) =>
-    (
-      notificationServicesControllerState.metamaskNotificationsList ?? []
-    ).filter((notification: INotification) => !notification.isRead).length,
+  getNotificationsList,
+  (metamaskNotificationsList) =>
+    (metamaskNotificationsList ?? []).filter(
+      (notification: INotification) => !notification.isRead,
+    ).length,
 );
 export const getMetamaskNotificationsReadCount = createSelector(
-  selectNotificationServicesControllerState,
-  (notificationServicesControllerState: NotificationServicesState) =>
-    (
-      notificationServicesControllerState.metamaskNotificationsList ?? []
-    ).filter((notification: INotification) => notification.isRead).length,
+  getNotificationsList,
+  (metamaskNotificationsList) =>
+    (metamaskNotificationsList ?? []).filter(
+      (notification: INotification) => notification.isRead,
+    ).length,
 );
 export const getOnChainMetamaskNotificationsUnreadCount = createSelector(
-  selectNotificationServicesControllerState,
-  (notificationServicesControllerState: NotificationServicesState) =>
-    (
-      notificationServicesControllerState.metamaskNotificationsList ?? []
-    ).filter(
+  getNotificationsList,
+  (metamaskNotificationsList) =>
+    (metamaskNotificationsList ?? []).filter(
       (notification: INotification) =>
         !notification.isRead &&
         notification.type !== TRIGGER_TYPES.FEATURES_ANNOUNCEMENT,

app/util/notifications/notification-states/feature-announcement/feature-announcement.tsx

@@ -4,6 +4,7 @@ import { ExtractedNotification, isOfTypeNodeGuard } from '../node-guard';
 import { NotificationState } from '../types/NotificationState';
 import { getNotificationBadge } from '../../methods/common';
 import METAMASK_FOX from '../../../../images/branding/fox.png';
+import { hasMinimumRequiredVersion } from '../../../remoteFeatureFlag';
 
 type FeatureAnnouncementNotification =
   ExtractedNotification<TRIGGER_TYPES.FEATURES_ANNOUNCEMENT>;
@@ -12,6 +13,26 @@ const isFeatureAnnouncementNotification = isOfTypeNodeGuard([
   TRIGGER_TYPES.FEATURES_ANNOUNCEMENT,
 ]);
 
+export const isFilteredFeatureAnnonucementNotification = (
+  n: FeatureAnnouncementNotification,
+) => {
+  if (!isFeatureAnnouncementNotification(n)) {
+    return false;
+  }
+
+  // Field is not set, so show by default
+  if (!n.data.mobileMinimumVersionNumber) {
+    return true;
+  }
+
+  try {
+    return hasMinimumRequiredVersion(n.data.mobileMinimumVersionNumber);
+  } catch {
+    // Invalid mobile version number, not showing notification
+    return false;
+  }
+};
+
 const state: NotificationState<FeatureAnnouncementNotification> = {
   guardFn: isFeatureAnnouncementNotification,
   createMenuItem: (notification) => ({

package.json

@@ -266,7 +266,7 @@
     "@metamask/multichain-transactions-controller": "^5.0.0",
     "@metamask/network-controller": "^24.1.0",
     "@metamask/network-enablement-controller": "^0.4.0",
-    "@metamask/notification-services-controller": "^16.0.0",
+    "@metamask/notification-services-controller": "^18.1.0",
     "@metamask/permission-controller": "^11.0.6",
     "@metamask/phishing-controller": "^13.1.0",
     "@metamask/post-message-stream": "^10.0.0",

yarn.lock

@@ -5700,14 +5700,14 @@
     "@ethersproject/providers" "^5.7.2"
     async-mutex "^0.3.1"
 
-"@metamask/notification-services-controller@^16.0.0":
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/@metamask/notification-services-controller/-/notification-services-controller-16.0.0.tgz#b22e2cb0dbb62cb5012b375398bf14b71d399ad3"
-  integrity sha512-kdIlerqGxYRViH/dAX2Ka7KQmGWwZ0WhLCIHr3+1jIQqe6h4J8hq5/Kxlch3EJPQBNbbC+4FU5Ue8nqbIywTNQ==
+"@metamask/notification-services-controller@^18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@metamask/notification-services-controller/-/notification-services-controller-18.1.0.tgz#577dd00568696565157c025b83b9554c2d8396e2"
+  integrity sha512-T362ok+ZCqXwCchG0oKJVHOtpWFLqV8xeK6UfBwCVsy3Z8C48EyadV3NljpwF6KxyV9cEUQV4WTgXFGZEGgCDw==
   dependencies:
     "@contentful/rich-text-html-renderer" "^16.5.2"
-    "@metamask/base-controller" "^8.0.1"
-    "@metamask/controller-utils" "^11.11.0"
+    "@metamask/base-controller" "^8.3.0"
+    "@metamask/controller-utils" "^11.12.0"
     "@metamask/utils" "^11.4.2"
     bignumber.js "^9.1.2"
     firebase "^11.2.0"