From d6fd03395eb82372d25e191887daec6df80cdc4c Mon Sep 17 00:00:00 2001 From: Sandipan Date: Tue, 14 May 2024 13:16:37 +0530 Subject: [PATCH] feat: add icons to notifications and bulletin (#3261) --- app/components/notifications/bulletins.tsx | 6 +++ .../notifications/notification-card-ui.tsx | 2 +- app/graphql/generated.gql | 4 +- app/graphql/generated.ts | 8 ++-- app/screens/home-screen/home-screen.tsx | 1 + .../notification-history-screen.tsx | 3 +- .../notification.tsx | 45 ++++++++++++++----- 7 files changed, 53 insertions(+), 16 deletions(-) diff --git a/app/components/notifications/bulletins.tsx b/app/components/notifications/bulletins.tsx index 25f7ec6709..4e39772c23 100644 --- 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 = ({ loading, bulletins }) => { {bulletins.me?.unacknowledgedStatefulNotificationsWithBulletinEnabled?.edges.map( ({ node: bulletin }) => ( = ({ 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 index 1addabc33e..826ac8e18d 100644 --- 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,7 +903,7 @@ query SettingsScreen { query StatefulNotifications($after: String) { me { - statefulNotificationsWithoutBulletinEnabled(first: 10, after: $after) { + statefulNotificationsWithoutBulletinEnabled(first: 20, after: $after) { nodes { id title @@ -910,6 +911,7 @@ query StatefulNotifications($after: String) { createdAt acknowledgedAt bulletinEnabled + icon action { ... on OpenDeepLinkAction { deepLink diff --git a/app/graphql/generated.ts b/app/graphql/generated.ts index daaf976938..f7d1a4da62 100644 --- 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,7 +4896,7 @@ export type BusinessMapMarkersQueryResult = Apollo.QueryResult = ({ 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 = ({ }} > - - {title} - - - {body} - - - {timeAgo(createdAt)} - + {icon ? ( + + ) : ( + + )} + + + {title} + + + {body} + + + {timeAgo(createdAt)} + + ) @@ -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,