feat: add icons to notifications and bulletin (#3261)

GaloyMoney · May 14, 2024 · d6fd033 · d6fd033
1 parent fe8958a
commit d6fd033
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 16 deletions.
diff --git a/app/components/notifications/bulletins.tsx b/app/components/notifications/bulletins.tsx
@@ -9,6 +9,7 @@ import {
   useStatefulNotificationAcknowledgeMutation,
 } from "@app/graphql/generated"
 import { BLINK_DEEP_LINK_PREFIX } from "@app/config"
+import { IconNamesType } from "../atomic/galoy-icon"
 
 type Props = {
   loading: boolean
@@ -34,6 +35,11 @@ export const BulletinsCard: React.FC<Props> = ({ loading, bulletins }) => {
         {bulletins.me?.unacknowledgedStatefulNotificationsWithBulletinEnabled?.edges.map(
           ({ node: bulletin }) => (
             <NotificationCardUI
+              icon={
+                bulletin.icon
+                  ? (bulletin.icon.toLowerCase().replace("_", "-") as IconNamesType)
+                  : undefined
+              }
               key={bulletin.id}
               title={bulletin.title}
               text={bulletin.body}

diff --git a/app/components/notifications/notification-card-ui.tsx b/app/components/notifications/notification-card-ui.tsx
@@ -23,7 +23,7 @@ export const NotificationCardUI: React.FC<NotificationCardUIProps> = ({
   loading,
   dismissAction,
 }) => {
-  const iconName = icon || "pencil" // TODO add default notification icon
+  const iconName = icon || "pencil"
   const styles = useStyles()
   const {
     theme: { colors },

diff --git a/app/graphql/generated.gql b/app/graphql/generated.gql
@@ -799,6 +799,7 @@ query Bulletins($first: Int!, $after: String) {
           createdAt
           acknowledgedAt
           bulletinEnabled
+          icon
           action {
             ... on OpenDeepLinkAction {
               deepLink
@@ -902,14 +903,15 @@ query SettingsScreen {
 
 query StatefulNotifications($after: String) {
   me {
-    statefulNotificationsWithoutBulletinEnabled(first: 10, after: $after) {
+    statefulNotificationsWithoutBulletinEnabled(first: 20, after: $after) {
       nodes {
         id
         title
         body
         createdAt
         acknowledgedAt
         bulletinEnabled
+        icon
         action {
           ... on OpenDeepLinkAction {
             deepLink

diff --git a/app/graphql/generated.ts b/app/graphql/generated.ts
@@ -2690,7 +2690,7 @@ export type BulletinsQueryVariables = Exact<{
 }>;
 
 
-export type BulletinsQuery = { readonly __typename: 'Query', readonly me?: { readonly __typename: 'User', readonly unacknowledgedStatefulNotificationsWithBulletinEnabled: { readonly __typename: 'StatefulNotificationConnection', readonly pageInfo: { readonly __typename: 'PageInfo', readonly endCursor?: string | null, readonly hasNextPage: boolean, readonly hasPreviousPage: boolean, readonly startCursor?: string | null }, readonly edges: ReadonlyArray<{ readonly __typename: 'StatefulNotificationEdge', readonly cursor: string, readonly node: { readonly __typename: 'StatefulNotification', readonly id: string, readonly title: string, readonly body: string, readonly createdAt: number, readonly acknowledgedAt?: number | null, readonly bulletinEnabled: boolean, readonly action?: { readonly __typename: 'OpenDeepLinkAction', readonly deepLink: string } | { readonly __typename: 'OpenExternalLinkAction', readonly url: string } | null } }> } } | null };
+export type BulletinsQuery = { readonly __typename: 'Query', readonly me?: { readonly __typename: 'User', readonly unacknowledgedStatefulNotificationsWithBulletinEnabled: { readonly __typename: 'StatefulNotificationConnection', readonly pageInfo: { readonly __typename: 'PageInfo', readonly endCursor?: string | null, readonly hasNextPage: boolean, readonly hasPreviousPage: boolean, readonly startCursor?: string | null }, readonly edges: ReadonlyArray<{ readonly __typename: 'StatefulNotificationEdge', readonly cursor: string, readonly node: { readonly __typename: 'StatefulNotification', readonly id: string, readonly title: string, readonly body: string, readonly createdAt: number, readonly acknowledgedAt?: number | null, readonly bulletinEnabled: boolean, readonly icon?: Icon | null, readonly action?: { readonly __typename: 'OpenDeepLinkAction', readonly deepLink: string } | { readonly __typename: 'OpenExternalLinkAction', readonly url: string } | null } }> } } | null };
 
 export type BusinessMapMarkersQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2702,7 +2702,7 @@ export type StatefulNotificationsQueryVariables = Exact<{
 }>;
 
 
-export type StatefulNotificationsQuery = { readonly __typename: 'Query', readonly me?: { readonly __typename: 'User', readonly statefulNotificationsWithoutBulletinEnabled: { readonly __typename: 'StatefulNotificationConnection', readonly nodes: ReadonlyArray<{ readonly __typename: 'StatefulNotification', readonly id: string, readonly title: string, readonly body: string, readonly createdAt: number, readonly acknowledgedAt?: number | null, readonly bulletinEnabled: boolean, readonly action?: { readonly __typename: 'OpenDeepLinkAction', readonly deepLink: string } | { readonly __typename: 'OpenExternalLinkAction', readonly url: string } | null }>, readonly pageInfo: { readonly __typename: 'PageInfo', readonly endCursor?: string | null, readonly hasNextPage: boolean, readonly hasPreviousPage: boolean, readonly startCursor?: string | null } } } | null };
+export type StatefulNotificationsQuery = { readonly __typename: 'Query', readonly me?: { readonly __typename: 'User', readonly statefulNotificationsWithoutBulletinEnabled: { readonly __typename: 'StatefulNotificationConnection', readonly nodes: ReadonlyArray<{ readonly __typename: 'StatefulNotification', readonly id: string, readonly title: string, readonly body: string, readonly createdAt: number, readonly acknowledgedAt?: number | null, readonly bulletinEnabled: boolean, readonly icon?: Icon | null, readonly action?: { readonly __typename: 'OpenDeepLinkAction', readonly deepLink: string } | { readonly __typename: 'OpenExternalLinkAction', readonly url: string } | null }>, readonly pageInfo: { readonly __typename: 'PageInfo', readonly endCursor?: string | null, readonly hasNextPage: boolean, readonly hasPreviousPage: boolean, readonly startCursor?: string | null } } } | null };
 
 export type StatefulNotificationAcknowledgeMutationVariables = Exact<{
   input: StatefulNotificationAcknowledgeInput;
@@ -4797,6 +4797,7 @@ export const BulletinsDocument = gql`
           createdAt
           acknowledgedAt
           bulletinEnabled
+          icon
           action {
             ... on OpenDeepLinkAction {
               deepLink
@@ -4895,14 +4896,15 @@ export type BusinessMapMarkersQueryResult = Apollo.QueryResult<BusinessMapMarker
 export const StatefulNotificationsDocument = gql`
     query StatefulNotifications($after: String) {
   me {
-    statefulNotificationsWithoutBulletinEnabled(first: 10, after: $after) {
+    statefulNotificationsWithoutBulletinEnabled(first: 20, after: $after) {
       nodes {
         id
         title
         body
         createdAt
         acknowledgedAt
         bulletinEnabled
+        icon
         action {
           ... on OpenDeepLinkAction {
             deepLink

diff --git a/app/screens/home-screen/home-screen.tsx b/app/screens/home-screen/home-screen.tsx
@@ -114,6 +114,7 @@ gql`
             createdAt
             acknowledgedAt
             bulletinEnabled
+            icon
             action {
               ... on OpenDeepLinkAction {
                 deepLink

diff --git a/app/screens/notification-history-screen/notification-history-screen.tsx b/app/screens/notification-history-screen/notification-history-screen.tsx
@@ -12,14 +12,15 @@ import { Notification } from "./notification"
 gql`
   query StatefulNotifications($after: String) {
     me {
-      statefulNotificationsWithoutBulletinEnabled(first: 10, after: $after) {
+      statefulNotificationsWithoutBulletinEnabled(first: 20, after: $after) {
         nodes {
           id
           title
           body
           createdAt
           acknowledgedAt
           bulletinEnabled
+          icon
           action {
             ... on OpenDeepLinkAction {
               deepLink

diff --git a/app/screens/notification-history-screen/notification.tsx b/app/screens/notification-history-screen/notification.tsx
@@ -3,13 +3,14 @@ import {
   StatefulNotificationsDocument,
   useStatefulNotificationAcknowledgeMutation,
 } from "@app/graphql/generated"
-import { Text, makeStyles } from "@rneui/themed"
+import { Icon, Text, makeStyles, useTheme } from "@rneui/themed"
 import { View, Linking } from "react-native"
 import { timeAgo } from "./utils"
 import { gql } from "@apollo/client"
 import { TouchableWithoutFeedback } from "react-native-gesture-handler"
 import { useState } from "react"
 import { BLINK_DEEP_LINK_PREFIX } from "@app/config"
+import { GaloyIcon, IconNamesType } from "@app/components/atomic/galoy-icon"
 
 gql`
   mutation StatefulNotificationAcknowledge(
@@ -29,10 +30,14 @@ export const Notification: React.FC<StatefulNotification> = ({
   body,
   createdAt,
   acknowledgedAt,
+  icon,
   action,
 }) => {
   const [isAcknowledged, setIsAcknowledged] = useState(Boolean(acknowledgedAt))
   const styles = useStyles({ isAcknowledged })
+  const {
+    theme: { colors },
+  } = useTheme()
 
   const [ack, _] = useStatefulNotificationAcknowledgeMutation({
     variables: { input: { notificationId: id } },
@@ -51,15 +56,31 @@ export const Notification: React.FC<StatefulNotification> = ({
       }}
     >
       <View style={styles.container}>
-        <Text type="p2" style={styles.text}>
-          {title}
-        </Text>
-        <Text type="p3" style={styles.text}>
-          {body}
-        </Text>
-        <Text type="p4" style={styles.text}>
-          {timeAgo(createdAt)}
-        </Text>
+        {icon ? (
+          <GaloyIcon
+            name={icon?.toLowerCase().replace("_", "-") as IconNamesType}
+            color={isAcknowledged ? colors.grey3 : colors.black}
+            size={26}
+          />
+        ) : (
+          <Icon
+            type="ionicon"
+            name="notifications-outline"
+            color={isAcknowledged ? colors.grey3 : colors.black}
+            size={26}
+          />
+        )}
+        <View>
+          <Text type="p2" style={styles.text}>
+            {title}
+          </Text>
+          <Text type="p3" style={styles.text}>
+            {body}
+          </Text>
+          <Text type="p4" style={styles.text}>
+            {timeAgo(createdAt)}
+          </Text>
+        </View>
       </View>
     </TouchableWithoutFeedback>
   )
@@ -71,6 +92,10 @@ const useStyles = makeStyles(
       padding: 10,
       borderBottomWidth: 1,
       borderBottomColor: colors.grey5,
+      display: "flex",
+      flexDirection: "row",
+      columnGap: 12,
+      alignItems: "center",
     },
     text: {
       color: isAcknowledged ? colors.grey3 : colors.black,