feat: notifications history

app/graphql/generated.gql

@@ -74,6 +74,16 @@ fragment TransactionList on TransactionConnection {
   __typename
 }
 
+mutation StatefulNotificationAcknowledge($input: StatefulNotificationAcknowledgeInput!) {
+  statefulNotificationAcknowledge(input: $input) {
+    notification {
+      acknowledgedAt
+      __typename
+    }
+    __typename
+  }
+}
+
 mutation accountDelete {
   accountDelete {
     errors {
@@ -840,6 +850,31 @@ query SettingsScreen {
   }
 }
 
+query StatefulNotifications($after: String) {
+  me {
+    statefulNotifications(first: 10, after: $after) {
+      nodes {
+        id
+        title
+        body
+        deepLink
+        createdAt
+        acknowledgedAt
+        __typename
+      }
+      pageInfo {
+        endCursor
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        __typename
+      }
+      __typename
+    }
+    __typename
+  }
+}
+
 query accountDefaultWallet($walletCurrency: WalletCurrency, $username: Username!) {
   accountDefaultWallet(walletCurrency: $walletCurrency, username: $username) {
     id

app/i18n/en/index.ts

@@ -2886,6 +2886,10 @@ const en: BaseTranslation = {
     PROCESSING: "Processing",
     REVIEW: "Review",
   },
+  NotificationHistory: {
+    title: "Notifications",
+    noNotifications: "You don't have any notifications right now"
+  }
 }
 
 export default en

app/i18n/i18n-types.ts

@@ -9099,6 +9099,16 @@ type RootTranslation = {
 		 */
 		REVIEW: string
 	}
+	NotificationHistory: {
+		/**
+		 * N​o​t​i​f​i​c​a​t​i​o​n​s
+		 */
+		title: string
+		/**
+		 * Y​o​u​ ​d​o​n​'​t​ ​h​a​v​e​ ​a​n​y​ ​n​o​t​i​f​i​c​a​t​i​o​n​s​ ​r​i​g​h​t​ ​n​o​w
+		 */
+		noNotifications: string
+	}
 }
 
 export type TranslationFunctions = {
@@ -18081,6 +18091,16 @@ export type TranslationFunctions = {
 		 */
 		REVIEW: () => LocalizedString
 	}
+	NotificationHistory: {
+		/**
+		 * Notifications
+		 */
+		title: () => LocalizedString
+		/**
+		 * You don't have any notifications right now
+		 */
+		noNotifications: () => LocalizedString
+	}
 }
 
 export type Formatters = {

app/i18n/raw-i18n/source/en.json

@@ -2766,5 +2766,9 @@
         "ERROR": "Error",
         "PROCESSING": "Processing",
         "REVIEW": "Review"
+    },
+    "NotificationHistory": {
+        "title": "Notifications",
+        "noNotifications": "You don't have any notifications right now"
     }
 }

app/navigation/root-navigator.tsx

@@ -75,6 +75,7 @@ import { LanguageScreen } from "../screens/settings-screen/language-screen"
 import { SecurityScreen } from "../screens/settings-screen/security-screen"
 import { TransactionDetailScreen } from "../screens/transaction-detail-screen"
 import { TransactionHistoryScreen } from "../screens/transaction-history/transaction-history-screen"
+import { NotificationHistoryScreen } from "@app/screens/notification-history-screen/notification-history-screen"
 import {
   PeopleStackParamList,
   PhoneValidationStackParamList,
@@ -417,6 +418,11 @@ export const RootStack = () => {
           title: LL.support.chatbot(),
         }}
       />
+      <RootNavigator.Screen
+        name="notificationHistory"
+        component={NotificationHistoryScreen}
+        options={{ title: LL.NotificationHistory.title() }}
+      />
     </RootNavigator.Navigator>
   )
 }

app/navigation/stack-param-lists.ts

@@ -97,6 +97,7 @@ export type RootStackParamList = {
   webView: { url: string; initialTitle?: string }
   fullOnboardingFlow: undefined
   chatbot: undefined
+  notificationHistory: undefined
 }
 
 export type PeopleStackParamList = {

app/screens/notification-history-screen/notification-history-screen.tsx

@@ -0,0 +1,90 @@
+import { gql } from "@apollo/client"
+import { Screen } from "@app/components/screen"
+import { useStatefulNotificationsQuery } from "@app/graphql/generated"
+import { useIsAuthed } from "@app/graphql/is-authed-context"
+import { useI18nContext } from "@app/i18n/i18n-react"
+import { testProps } from "@app/utils/testProps"
+import { useIsFocused } from "@react-navigation/native"
+import { Text, makeStyles, useTheme } from "@rneui/themed"
+import { FlatList, RefreshControl } from "react-native-gesture-handler"
+import { Notification } from "./notification"
+
+gql`
+  query StatefulNotifications($after: String) {
+    me {
+      statefulNotifications(first: 10, after: $after) {
+        nodes {
+          id
+          title
+          body
+          deepLink
+          createdAt
+          acknowledgedAt
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+          hasPreviousPage
+          startCursor
+        }
+      }
+    }
+  }
+`
+
+export const NotificationHistoryScreen = () => {
+  const styles = useStyles()
+  const {
+    theme: { colors },
+  } = useTheme()
+  const isFocused = useIsFocused()
+
+  const { LL } = useI18nContext()
+
+  const { data, fetchMore, refetch, loading } = useStatefulNotificationsQuery({
+    skip: !useIsAuthed(),
+  })
+  const notifications = data?.me?.statefulNotifications
+
+  const fetchNextNotificationsPage = () => {
+    const pageInfo = notifications?.pageInfo
+
+    if (pageInfo?.hasNextPage) {
+      fetchMore({
+        variables: {
+          after: pageInfo.endCursor,
+        },
+      })
+    }
+  }
+
+  return (
+    <Screen>
+      <FlatList
+        {...testProps("notification-screen")}
+        contentContainerStyle={styles.scrollViewContainer}
+        refreshControl={
+          <RefreshControl
+            refreshing={loading && isFocused}
+            onRefresh={refetch}
+            colors={[colors.primary]} // Android refresh indicator colors
+            tintColor={colors.primary} // iOS refresh indicator color
+          />
+        }
+        data={notifications?.nodes}
+        renderItem={({ item }) => <Notification {...item} />}
+        onEndReached={fetchNextNotificationsPage}
+        onEndReachedThreshold={0.5}
+        onRefresh={refetch}
+        refreshing={loading}
+        ListEmptyComponent={
+          loading ? <></> : <Text>{LL.NotificationHistory.noNotifications()}</Text>
+        }
+      ></FlatList>
+    </Screen>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  scrollViewContainer: {},
+}))

app/screens/notification-history-screen/notification.tsx

@@ -0,0 +1,78 @@
+import {
+  StatefulNotification,
+  StatefulNotificationsDocument,
+  useStatefulNotificationAcknowledgeMutation,
+} from "@app/graphql/generated"
+import { Text, makeStyles } from "@rneui/themed"
+import { View } from "react-native"
+import { timeAgo } from "./utils"
+import { gql } from "@apollo/client"
+import { TouchableWithoutFeedback } from "react-native-gesture-handler"
+import { useLinkTo } from "@react-navigation/native"
+import { useState } from "react"
+
+gql`
+  mutation StatefulNotificationAcknowledge(
+    $input: StatefulNotificationAcknowledgeInput!
+  ) {
+    statefulNotificationAcknowledge(input: $input) {
+      notification {
+        acknowledgedAt
+      }
+    }
+  }
+`
+
+export const Notification: React.FC<StatefulNotification> = ({
+  id,
+  title,
+  body,
+  createdAt,
+  acknowledgedAt,
+  deepLink,
+}) => {
+  const [isAcknowledged, setIsAcknowledged] = useState(Boolean(acknowledgedAt))
+  const styles = useStyles({ isAcknowledged })
+
+  const [ack, _] = useStatefulNotificationAcknowledgeMutation({
+    variables: { input: { notificationId: id } },
+    refetchQueries: [StatefulNotificationsDocument],
+  })
+
+  const linkTo = useLinkTo()
+
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => {
+        setIsAcknowledged(true)
+        !isAcknowledged && ack()
+        deepLink && linkTo(deepLink)
+      }}
+    >
+      <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>
+      </View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+const useStyles = makeStyles(
+  ({ colors }, { isAcknowledged }: { isAcknowledged: boolean }) => ({
+    container: {
+      padding: 10,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.grey5,
+    },
+    text: {
+      color: isAcknowledged ? colors.grey3 : colors.black,
+    },
+  }),
+)

app/screens/notification-history-screen/utils.ts

@@ -0,0 +1,19 @@
+export const timeAgo = (pastDate: number): string => {
+  const now = new Date()
+  const past = new Date(pastDate * 1000)
+  const diff = Number(now) - Number(past)
+
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (seconds < 60) {
+    return `a few seconds ago`
+  } else if (minutes < 60) {
+    return `${minutes} minute${minutes > 1 ? "s" : ""} ago`
+  } else if (hours < 24) {
+    return `${hours} hour${hours > 1 ? "s" : ""} ago`
+  }
+  return `${days} day${days > 1 ? "s" : ""} ago`
+}

app/screens/settings-screen/settings-screen.tsx

@@ -1,11 +1,17 @@
 import { ScrollView } from "react-native-gesture-handler"
+import { useEffect } from "react"
+import { TouchableOpacity } from "react-native"
+
+import { useNavigation } from "@react-navigation/native"
+import { StackNavigationProp } from "@react-navigation/stack"
+import { RootStackParamList } from "@app/navigation/stack-param-lists"
 
 import { gql } from "@apollo/client"
 import { Screen } from "@app/components/screen"
 import { VersionComponent } from "@app/components/version"
 import { AccountLevel, useLevel } from "@app/graphql/level-context"
 import { useI18nContext } from "@app/i18n/i18n-react"
-import { makeStyles } from "@rneui/themed"
+import { Icon, makeStyles } from "@rneui/themed"
 
 import { AccountBanner } from "./account/banner"
 import { EmailSetting } from "./account/settings/email"
@@ -79,6 +85,17 @@ export const SettingsScreen: React.FC = () => {
     community: [NeedHelpSetting, JoinCommunitySetting],
   }
 
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity onPress={() => navigation.navigate("notificationHistory")}>
+          <Icon style={styles.headerRight} name="notifications" type="ionicon" />
+        </TouchableOpacity>
+      ),
+    })
+  })
+
   return (
     <Screen keyboardShouldPersistTaps="handled">
       <ScrollView contentContainerStyle={styles.outer}>
@@ -116,4 +133,7 @@ const useStyles = makeStyles(() => ({
     flexDirection: "column",
     rowGap: 18,
   },
+  headerRight: {
+    marginRight: 12,
+  },
 }))