feat: announcement modal and what's new for myinfo storage-mode (#6892)

* feat: add myinfo storage mode announcement

* feat: add graphic and amend copy

* fix: update copy

frontend/src/constants/localStorage.ts

@@ -17,7 +17,7 @@ export const LOCAL_STORAGE_EVENT = 'local-storage'
  * Key to store whether a user has seen the rollout announcements before.
  */
 export const ROLLOUT_ANNOUNCEMENT_KEY_PREFIX =
-  'has-seen-rollout-announcement-20231026-'
+  'has-seen-rollout-announcement-20231116-'
 
 /**
  * Key to store whether the admin has seen the feature tour in localStorage.

frontend/src/features/rollout-announcement/components/AnnouncementsFeatureList.tsx

@@ -2,6 +2,7 @@ import { GUIDE_PAYMENTS_ENTRY } from '~constants/links'
 
 import { FeatureUpdateImage } from '~features/whats-new/FeatureUpdateList'
 
+import myInfoStorageMode from '../../whats-new/assets/6-myinfo-storage.svg'
 import foldersDashboard from '../../whats-new/assets/folders_dashboard.svg'
 import PaymentsAnnouncementGraphic from '../assets/payments_announcement.svg'
 
@@ -14,6 +15,16 @@ export interface NewFeature {
 // When updating this, remember to update the ROLLOUT_ANNOUNCEMENT_KEY_PREFIX with the new date
 // so admins will see new announcements.
 export const NEW_FEATURES: NewFeature[] = [
+  {
+    // Announcement date: 2023-11-16
+    title: 'Myinfo fields for Storage mode forms',
+    description:
+      'Get verified data from respondents by adding Myinfo fields to your Storage mode form. To enable Myinfo fields, select one of our Myinfo-enabled authentication options in your form’s settings.',
+    image: {
+      url: myInfoStorageMode,
+      alt: 'Myinfo fields for Storage mode forms',
+    },
+  },
   {
     // Announcement date: 2023-10-31
     title: 'Introducing Folders!',

frontend/src/features/whats-new/FeatureUpdateList.ts

@@ -6,6 +6,7 @@ import { GUIDE_PAYMENTS_ENTRY } from '~constants/links'
 import Animation2 from './assets/2-payments.json'
 import Animation3 from './assets/3-search-and-filter.json'
 import Animation4 from './assets/4-dnd.json'
+import MyInfoStorageMode from './assets/6-myinfo-storage.svg'
 import foldersDashboard from './assets/folders_dashboard.svg'
 
 // image can either be a static image (using url) or an animation (using animationData)
@@ -34,6 +35,16 @@ export const FEATURE_UPDATE_LIST: FeatureUpdateList = {
   // Update version whenever a new feature is added.
   version: 4,
   features: [
+    {
+      title: 'Myinfo fields for Storage mode forms',
+      date: new Date('16 Nov 2023 GMT+8'),
+      description:
+        'Get verified data from respondents by adding Myinfo fields to your Storage mode form. To enable Myinfo fields, select one of our Myinfo-enabled authentication options in your form’s settings.',
+      image: {
+        url: MyInfoStorageMode,
+        alt: 'Myinfo fields for Storage mode forms',
+      },
+    },
     {
       title: 'Introducing Folders!',
       date: new Date('31 Oct 2023 GMT+8'),