feat(notifications): add icon to stateful notification (#4444)

* feat(notifications): add icon to stateful notification * feat(notifications): add icon to marketing notification grpc * feat(core): add icon to marketing notification * feat(admin-panel): add icon to marketing notification
GaloyMoney · May 13, 2024 · 349a31b · 349a31b
1 parent f1df76b
commit 349a31b
Show file tree

Hide file tree

Showing 28 changed files with 1,204 additions and 7 deletions.
diff --git a/apps/admin-panel/components/notification/builder.tsx b/apps/admin-panel/components/notification/builder.tsx
@@ -2,7 +2,7 @@
 
 import { ChangeEvent, useState } from "react"
 
-import { DeepLinkScreen, DeepLinkAction } from "../../generated"
+import { DeepLinkScreen, DeepLinkAction, NotificationIcon } from "../../generated"
 
 import { LanguageCodes } from "./languages"
 import { NotificationAction } from "./types"
@@ -17,6 +17,7 @@ export type NotificationContent = {
   openExternalUrl?: {
     url: string
   }
+  icon?: NotificationIcon | undefined
   shouldSendPush: boolean
   shouldAddToHistory: boolean
   shouldAddToBulletin: boolean
@@ -77,12 +78,19 @@ const NotificationBuilder = ({
     })
   }
 
+  const onSetIcon = (e: ChangeEvent<HTMLSelectElement>) => {
+    setNotification({
+      ...notification,
+      icon: e.target.value ? (e.target.value as NotificationIcon) : undefined,
+    })
+  }
+
   const onSetDeepLinkScreen = (e: ChangeEvent<HTMLSelectElement>) => {
     setNotification({
       ...notification,
       openDeepLink: {
         ...notification.openDeepLink,
-        screen: e.target.value as DeepLinkScreen,
+        screen: e.target.value ? (e.target.value as DeepLinkScreen) : undefined,
       },
     })
   }
@@ -92,7 +100,7 @@ const NotificationBuilder = ({
       ...notification,
       openDeepLink: {
         ...notification.openDeepLink,
-        action: e.target.value as DeepLinkAction,
+        action: e.target.value ? (e.target.value as DeepLinkAction) : undefined,
       },
     })
   }
@@ -133,6 +141,24 @@ const NotificationBuilder = ({
       <h2>Notification Content</h2>
       <form className="space-y-4">
         <div className="space-y-4">
+          <div>
+            <label htmlFor="icon">Notification Icon</label>
+            <select
+              className="border border-2 rounded block p-1 w-full"
+              id="icon"
+              value={notification.icon}
+              onChange={onSetIcon}
+            >
+              <option value="">None</option>
+              {Object.values(NotificationIcon).map((icon) => {
+                return (
+                  <option key={icon} value={icon}>
+                    {icon}
+                  </option>
+                )
+              })}
+            </select>
+          </div>
           <div>
             <label htmlFor="action">Action</label>
             <select

diff --git a/apps/admin-panel/components/notification/filtered-sender.tsx b/apps/admin-panel/components/notification/filtered-sender.tsx
@@ -66,6 +66,7 @@ const NotificationFilteredSender = ({ notification }: NotificationFilteredSender
     const res = await triggerMarketingNotification({
       openDeepLink: notification.openDeepLink,
       openExternalUrl: notification.openExternalUrl,
+      icon: notification.icon,
       shouldSendPush: notification.shouldSendPush,
       shouldAddToHistory: notification.shouldAddToHistory,
       shouldAddToBulletin: notification.shouldAddToBulletin,

diff --git a/apps/admin-panel/components/notification/notification-actions.tsx b/apps/admin-panel/components/notification/notification-actions.tsx
@@ -14,6 +14,7 @@ import {
   MarketingNotificationTriggerDocument,
   MarketingNotificationTriggerMutation,
   MarketingNotificationTriggerMutationVariables,
+  NotificationIcon,
 } from "../../generated"
 
 export type GetFilteredUserCountArgs = {
@@ -52,6 +53,7 @@ export type TriggerMarketingNotificationArgs = {
         url: string
       }
     | undefined
+  icon?: NotificationIcon | undefined
   shouldSendPush: boolean
   shouldAddToHistory: boolean
   shouldAddToBulletin: boolean
@@ -68,6 +70,7 @@ export const triggerMarketingNotification = async ({
   shouldSendPush,
   shouldAddToBulletin,
   shouldAddToHistory,
+  icon,
   localizedNotificationContents,
   phoneCountryCodesFilter,
   userIdsFilter,
@@ -83,6 +86,7 @@ export const triggerMarketingNotification = async ({
         openExternalUrl,
         shouldSendPush,
         shouldAddToBulletin,
+        icon,
         shouldAddToHistory,
         localizedNotificationContents,
         phoneCountryCodesFilter,

diff --git a/apps/admin-panel/components/notification/test-sender.tsx b/apps/admin-panel/components/notification/test-sender.tsx
@@ -33,6 +33,7 @@ const NotificationTestSender = ({ notification }: NotificationTestSenderArgs) =>
       userIdsFilter: [userIdRes.userId],
       openDeepLink: notification.openDeepLink,
       openExternalUrl: notification.openExternalUrl,
+      icon: notification.icon,
       shouldSendPush: notification.shouldSendPush,
       shouldAddToBulletin: notification.shouldAddToBulletin,
       shouldAddToHistory: notification.shouldAddToHistory,

diff --git a/apps/admin-panel/generated.ts b/apps/admin-panel/generated.ts
@@ -351,6 +351,7 @@ export type LocalizedNotificationContentInput = {
 };
 
 export type MarketingNotificationTriggerInput = {
+  readonly icon?: InputMaybe<NotificationIcon>;
   readonly localizedNotificationContents: ReadonlyArray<LocalizedNotificationContentInput>;
   readonly openDeepLink?: InputMaybe<OpenDeepLinkInput>;
   readonly openExternalUrl?: InputMaybe<OpenExternalUrlInput>;
@@ -428,6 +429,61 @@ export type MutationUserUpdatePhoneArgs = {
   input: UserUpdatePhoneInput;
 };
 
+export const NotificationIcon = {
+  ArrowLeft: 'ARROW_LEFT',
+  ArrowRight: 'ARROW_RIGHT',
+  Backspace: 'BACKSPACE',
+  Bank: 'BANK',
+  Bell: 'BELL',
+  Bitcoin: 'BITCOIN',
+  Book: 'BOOK',
+  BtcBook: 'BTC_BOOK',
+  CaretDown: 'CARET_DOWN',
+  CaretLeft: 'CARET_LEFT',
+  CaretRight: 'CARET_RIGHT',
+  CaretUp: 'CARET_UP',
+  Check: 'CHECK',
+  CheckCircle: 'CHECK_CIRCLE',
+  Close: 'CLOSE',
+  CloseCrossWithBackground: 'CLOSE_CROSS_WITH_BACKGROUND',
+  Coins: 'COINS',
+  CopyPaste: 'COPY_PASTE',
+  Dollar: 'DOLLAR',
+  Eye: 'EYE',
+  EyeSlash: 'EYE_SLASH',
+  Filter: 'FILTER',
+  Globe: 'GLOBE',
+  Graph: 'GRAPH',
+  Image: 'IMAGE',
+  Info: 'INFO',
+  Lightning: 'LIGHTNING',
+  Link: 'LINK',
+  Loading: 'LOADING',
+  MagnifyingGlass: 'MAGNIFYING_GLASS',
+  Map: 'MAP',
+  Menu: 'MENU',
+  Note: 'NOTE',
+  PaymentError: 'PAYMENT_ERROR',
+  PaymentPending: 'PAYMENT_PENDING',
+  PaymentSuccess: 'PAYMENT_SUCCESS',
+  Pencil: 'PENCIL',
+  People: 'PEOPLE',
+  QrCode: 'QR_CODE',
+  Question: 'QUESTION',
+  Rank: 'RANK',
+  Receive: 'RECEIVE',
+  Refresh: 'REFRESH',
+  Send: 'SEND',
+  Settings: 'SETTINGS',
+  Share: 'SHARE',
+  Transfer: 'TRANSFER',
+  User: 'USER',
+  Video: 'VIDEO',
+  Warning: 'WARNING',
+  WarningWithBackground: 'WARNING_WITH_BACKGROUND'
+} as const;
+
+export type NotificationIcon = typeof NotificationIcon[keyof typeof NotificationIcon];
 export type OpenDeepLinkInput = {
   readonly action?: InputMaybe<DeepLinkAction>;
   readonly screen?: InputMaybe<DeepLinkScreen>;

diff --git a/apps/dashboard/services/graphql/generated.ts b/apps/dashboard/services/graphql/generated.ts
@@ -555,6 +555,61 @@ export type GraphQlApplicationError = Error & {
   readonly path?: Maybe<ReadonlyArray<Maybe<Scalars['String']['output']>>>;
 };
 
+export const Icon = {
+  ArrowLeft: 'ARROW_LEFT',
+  ArrowRight: 'ARROW_RIGHT',
+  BackSpace: 'BACK_SPACE',
+  Bank: 'BANK',
+  Bell: 'BELL',
+  Bitcoin: 'BITCOIN',
+  Book: 'BOOK',
+  BtcBook: 'BTC_BOOK',
+  CaretDown: 'CARET_DOWN',
+  CaretLeft: 'CARET_LEFT',
+  CaretRight: 'CARET_RIGHT',
+  CaretUp: 'CARET_UP',
+  Check: 'CHECK',
+  CheckCircle: 'CHECK_CIRCLE',
+  Close: 'CLOSE',
+  CloseCrossWithBackground: 'CLOSE_CROSS_WITH_BACKGROUND',
+  Coins: 'COINS',
+  CopyPaste: 'COPY_PASTE',
+  Dollar: 'DOLLAR',
+  Eye: 'EYE',
+  EyeSlash: 'EYE_SLASH',
+  Filter: 'FILTER',
+  Globe: 'GLOBE',
+  Graph: 'GRAPH',
+  Image: 'IMAGE',
+  Info: 'INFO',
+  Lightning: 'LIGHTNING',
+  Link: 'LINK',
+  Loading: 'LOADING',
+  MagnifyingGlass: 'MAGNIFYING_GLASS',
+  Map: 'MAP',
+  Menu: 'MENU',
+  Note: 'NOTE',
+  PaymentError: 'PAYMENT_ERROR',
+  PaymentPending: 'PAYMENT_PENDING',
+  PaymentSuccess: 'PAYMENT_SUCCESS',
+  Pencil: 'PENCIL',
+  People: 'PEOPLE',
+  QrCode: 'QR_CODE',
+  Question: 'QUESTION',
+  Rank: 'RANK',
+  Receive: 'RECEIVE',
+  Refresh: 'REFRESH',
+  Send: 'SEND',
+  Settings: 'SETTINGS',
+  Share: 'SHARE',
+  Transfer: 'TRANSFER',
+  User: 'USER',
+  Video: 'VIDEO',
+  Warning: 'WARNING',
+  WarningWithBackground: 'WARNING_WITH_BACKGROUND'
+} as const;
+
+export type Icon = typeof Icon[keyof typeof Icon];
 export type InitiationVia = InitiationViaIntraLedger | InitiationViaLn | InitiationViaOnChain;
 
 export type InitiationViaIntraLedger = {
@@ -1751,6 +1806,7 @@ export type StatefulNotification = {
   readonly bulletinEnabled: Scalars['Boolean']['output'];
   readonly createdAt: Scalars['Timestamp']['output'];
   readonly deepLink?: Maybe<Scalars['String']['output']>;
+  readonly icon?: Maybe<Icon>;
   readonly id: Scalars['ID']['output'];
   readonly title: Scalars['String']['output'];
 };
@@ -3502,6 +3558,7 @@ export type ResolversTypes = {
   Globals: ResolverTypeWrapper<Globals>;
   GraphQLApplicationError: ResolverTypeWrapper<GraphQlApplicationError>;
   Hex32Bytes: ResolverTypeWrapper<Scalars['Hex32Bytes']['output']>;
+  Icon: Icon;
   InitiationVia: ResolverTypeWrapper<ResolversUnionTypes<ResolversTypes>['InitiationVia']>;
   InitiationViaIntraLedger: ResolverTypeWrapper<InitiationViaIntraLedger>;
   InitiationViaLn: ResolverTypeWrapper<InitiationViaLn>;
@@ -4729,6 +4786,7 @@ export type StatefulNotificationResolvers<ContextType = any, ParentType extends
   bulletinEnabled?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
   createdAt?: Resolver<ResolversTypes['Timestamp'], ParentType, ContextType>;
   deepLink?: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  icon?: Resolver<Maybe<ResolversTypes['Icon']>, ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   title?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;

diff --git a/core/api/src/app/admin/index.types.d.ts b/core/api/src/app/admin/index.types.d.ts
@@ -15,6 +15,7 @@ type AdminTriggerMarketingNotificationArgs = {
   shouldSendPush: boolean
   shouldAddToHistory: boolean
   shouldAddToBulletin: boolean
+  icon?: Icon
   localizedNotificationContents: {
     title: string
     body: string

diff --git a/core/api/src/app/admin/trigger-marketing-notification.ts b/core/api/src/app/admin/trigger-marketing-notification.ts
@@ -9,6 +9,7 @@ export const triggerMarketingNotification = async ({
   openDeepLink,
   openExternalUrl,
   shouldSendPush,
+  icon,
   shouldAddToHistory,
   shouldAddToBulletin,
   localizedNotificationContents,
@@ -51,6 +52,7 @@ export const triggerMarketingNotification = async ({
     shouldSendPush,
     shouldAddToHistory,
     shouldAddToBulletin,
+    icon,
     localizedContents: localizedNotificationContentsMap,
   })
 }
diff --git a/core/api/src/domain/notifications/index.ts b/core/api/src/domain/notifications/index.ts
@@ -78,6 +78,60 @@ export const DeepLinkAction = {
   UpgradeAccountModal: "UpgradeAccountModal",
 } as const
 
+export const Icon = {
+  ArrowRight: "ArrowRight",
+  ArrowLeft: "ArrowLeft",
+  BackSpace: "BackSpace",
+  Bank: "Bank",
+  Bitcoin: "Bitcoin",
+  Book: "Book",
+  BtcBook: "BtcBook",
+  CaretDown: "CaretDown",
+  CaretLeft: "CaretLeft",
+  CaretRight: "CaretRight",
+  CaretUp: "CaretUp",
+  CheckCircle: "CheckCircle",
+  Check: "Check",
+  Close: "Close",
+  CloseCrossWithBackground: "CloseCrossWithBackground",
+  Coins: "Coins",
+  People: "People",
+  CopyPaste: "CopyPaste",
+  Dollar: "Dollar",
+  EyeSlash: "EyeSlash",
+  Eye: "Eye",
+  Filter: "Filter",
+  Globe: "Globe",
+  Graph: "Graph",
+  Image: "Image",
+  Info: "Info",
+  Lightning: "Lightning",
+  Link: "Link",
+  Loading: "Loading",
+  MagnifyingGlass: "MagnifyingGlass",
+  Map: "Map",
+  Menu: "Menu",
+  Pencil: "Pencil",
+  Note: "Note",
+  Rank: "Rank",
+  QrCode: "QrCode",
+  Question: "Question",
+  Receive: "Receive",
+  Send: "Send",
+  Settings: "Settings",
+  Share: "Share",
+  Transfer: "Transfer",
+  User: "User",
+  Video: "Video",
+  Warning: "Warning",
+  WarningWithBackground: "WarningWithBackground",
+  PaymentSuccess: "PaymentSuccess",
+  PaymentPending: "PaymentPending",
+  PaymentError: "PaymentError",
+  Bell: "Bell",
+  Refresh: "Refresh",
+} as const
+
 export const checkedToLocalizedNotificationTitle = (
   title: string,
 ): LocalizedNotificationTitle | ValidationError => {

diff --git a/core/api/src/domain/notifications/index.types.d.ts b/core/api/src/domain/notifications/index.types.d.ts
@@ -67,6 +67,8 @@ type DeepLinkScreen =
 type DeepLinkAction =
   (typeof import("./index").DeepLinkAction)[keyof typeof import("./index").DeepLinkAction]
 
+type Icon = (typeof import("./index").Icon)[keyof typeof import("./index").Icon]
+
 type LocalizedNotificationTitle = string & { readonly brand: unique symbol }
 
 type LocalizedNotificationBody = string & { readonly brand: unique symbol }
@@ -151,5 +153,6 @@ type TriggerMarketingNotificationArgs = {
   shouldSendPush: boolean
   shouldAddToHistory: boolean
   shouldAddToBulletin: boolean
+  icon?: Icon
   localizedContents: Map<UserLanguage, LocalizedNotificationContent>
 }