feat: ✨ add support for external links in feature announcements

MetaMask · Aug 19, 2024 · eedc979 · eedc979
1 parent 69696bb
commit eedc979
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 3 deletions.
diff --git a/app/scripts/controllers/metamask-notifications/services/feature-announcements.ts b/app/scripts/controllers/metamask-notifications/services/feature-announcements.ts
@@ -10,6 +10,7 @@ import { processFeatureAnnouncement } from '../processors/process-feature-announ
 import { TRIGGER_TYPES } from '../constants/notification-schema';
 import { ImageFields } from '../types/feature-announcement/type-feature-announcement';
 import { TypeExtensionLinkFields } from '../types/feature-announcement/type-extension-link';
+import { TypeExternalLinkFields } from '../types/feature-announcement/type-external-link';
 
 const spaceId = process.env.CONTENTFUL_ACCESS_SPACE_ID || ':space_id';
 const accessToken = process.env.CONTENTFUL_ACCESS_TOKEN || '';
@@ -82,6 +83,11 @@ async function fetchFeatureAnnouncementNotifications(): Promise<
             fields.extensionLink.sys.id,
           ) as TypeExtensionLinkFields['fields'])
         : undefined;
+      const externalLinkFields = fields.externalLink
+        ? (findIncludedItem(
+            fields.externalLink.sys.id,
+          ) as TypeExternalLinkFields['fields'])
+        : undefined;
 
       const notification: FeatureAnnouncementRawNotification = {
         type: TRIGGER_TYPES.FEATURES_ANNOUNCEMENT,
@@ -101,6 +107,10 @@ async function fetchFeatureAnnouncementNotifications(): Promise<
             extensionLinkText: extensionLinkFields?.extensionLinkText,
             extensionLinkRoute: extensionLinkFields?.extensionLinkRoute,
           },
+          externalLink: externalLinkFields && {
+            externalLinkText: externalLinkFields?.externalLinkText,
+            externalLinkUrl: externalLinkFields?.externalLinkUrl,
+          },
         },
       };
 

diff --git a/...pts/controllers/metamask-notifications/types/feature-announcement/feature-announcement.ts b/...pts/controllers/metamask-notifications/types/feature-announcement/feature-announcement.ts
@@ -6,7 +6,7 @@ export type { TypeFeatureAnnouncementFields } from './type-feature-announcement'
 
 export type FeatureAnnouncementRawNotificationData = Omit<
   TypeFeatureAnnouncement['fields'],
-  'image' | 'longDescription' | 'extensionLink'
+  'image' | 'longDescription' | 'extensionLink' | 'externalLink'
 > & {
   longDescription: string;
   image: {
@@ -18,6 +18,10 @@ export type FeatureAnnouncementRawNotificationData = Omit<
     extensionLinkText: string;
     extensionLinkRoute: string;
   };
+  externalLink?: {
+    externalLinkText: string;
+    externalLinkUrl: string;
+  };
 };
 
 export type FeatureAnnouncementRawNotification = {

diff --git a/...ripts/controllers/metamask-notifications/types/feature-announcement/type-external-link.ts b/...ripts/controllers/metamask-notifications/types/feature-announcement/type-external-link.ts
@@ -0,0 +1,14 @@
+import type { Entry } from 'contentful';
+
+export type TypeExternalLinkFields = {
+  fields: {
+    externalLinkText: string;
+    externalLinkUrl: string;
+  };
+  contentTypeId: 'externalLink';
+};
+
+export type TypeExternalLink = Entry<
+  TypeExternalLinkFields,
+  'WITHOUT_UNRESOLVABLE_LINKS'
+>;
diff --git a/...ontrollers/metamask-notifications/types/feature-announcement/type-feature-announcement.ts b/...ontrollers/metamask-notifications/types/feature-announcement/type-feature-announcement.ts
@@ -1,5 +1,6 @@
 import type { Entry, EntryFieldTypes } from 'contentful';
 import type { TypeExtensionLinkFields } from './type-extension-link';
+import type { TypeExternalLinkFields } from './type-external-link';
 
 export type ImageFields = {
   fields: {
@@ -29,6 +30,7 @@ export type TypeFeatureAnnouncementFields = {
     shortDescription: EntryFieldTypes.Text;
     image: EntryFieldTypes.EntryLink<ImageFields>;
     longDescription: EntryFieldTypes.RichText;
+    externalLink?: EntryFieldTypes.EntryLink<TypeExternalLinkFields>;
     extensionLink?: EntryFieldTypes.EntryLink<TypeExtensionLinkFields>;
     clients?: EntryFieldTypes.Text<'extension' | 'mobile' | 'portfolio'>;
   };

diff --git a/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx b/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx
@@ -33,9 +33,15 @@ export const NotificationDetailsFooter = ({
         </>
       )}
       {footer.type === 'footer_feature_announcement' && (
-        <>
+        <Box
+          display={Display.Flex}
+          gap={4}
+          flexDirection={FlexDirection.Row}
+          width={BlockSize.Full}
+        >
+          <footer.ExternalLink notification={notification} />
           <footer.ExtensionLink notification={notification} />
-        </>
+        </Box>
       )}
     </Box>
   );

diff --git a/ui/pages/notifications/notification-components/feature-announcement/feature-announcement.tsx b/ui/pages/notifications/notification-components/feature-announcement/feature-announcement.tsx
@@ -115,5 +115,17 @@ export const components: NotificationComponent<FeatureAnnouncementNotification>
             isExternal={true}
           />
         ) : null,
+      ExternalLink: ({ notification }) =>
+        notification.data.externalLink ? (
+          <NotificationDetailButton
+            notification={notification}
+            variant={ButtonVariant.Secondary}
+            text={notification.data.externalLink.externalLinkText}
+            href={`/${notification.data.externalLink.externalLinkUrl}`}
+            id={notification.id}
+            endIconName={false}
+            isExternal={true}
+          />
+        ) : null,
     },
   };
diff --git a/ui/pages/notifications/notification-components/types/notifications/notifications.ts b/ui/pages/notifications/notification-components/types/notifications/notifications.ts
@@ -37,6 +37,7 @@ type FooterOnChainNotification<N = Notification> = {
 
 type FooterFeatureAnnouncement<N = Notification> = {
   type: 'footer_feature_announcement';
+  ExternalLink: NotificationFC<N>;
   ExtensionLink: NotificationFC<N>;
 };