feature (296629): Faire la page de notifications

app/src/components/HomeFooter.tsx

@@ -1,14 +1,15 @@
-import { Screens, Stacks, TOKENS, useServices, useTheme } from '@hyperledger/aries-bifold-core'
-import { HistoryStackParams } from '@hyperledger/aries-bifold-core/App/types/navigators'
+import { TOKENS, useServices, useTheme } from '@hyperledger/aries-bifold-core'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
+import { ActivitiesStackParams, Screens, TabStacks } from '../navigators/navigators'
+
 const HomeFooter = () => {
   const { t } = useTranslation()
   const { ColorPallet } = useTheme()
-  const { navigate } = useNavigation<StackNavigationProp<HistoryStackParams>>()
+  const { navigate } = useNavigation<StackNavigationProp<ActivitiesStackParams>>()
   const [{ useNotifications }] = useServices([TOKENS.NOTIFICATIONS])
   const notifications = useNotifications({})
 
@@ -35,7 +36,7 @@ const HomeFooter = () => {
       {notifications?.length > 0 && (
         <TouchableOpacity
           style={styles.footerLinkContainer}
-          onPress={() => navigate(Stacks.HistoryStack as never, { screen: Screens.HistoryPage } as never)}
+          onPress={() => navigate(TabStacks.ActivitiesStack as never, { screen: Screens.Activities } as never)}
         >
           <Text style={styles.footerLink}>{t('Home.SeeAll')}</Text>
         </TouchableOpacity>

app/src/components/NotificationListItem.tsx

@@ -6,6 +6,8 @@ import {
   CredentialExchangeRecord,
   ProofExchangeRecord,
   ProofState,
+  SdJwtVcRecord,
+  W3cCredentialRecord,
 } from '@credo-ts/core'
 import { useAgent, useConnectionById } from '@credo-ts/react-hooks'
 import {
@@ -43,7 +45,7 @@ import { hitSlop } from '../constants'
 
 const iconSize = 20
 
-enum NotificationType {
+export enum NotificationType {
   BasicMessage = 'BasicMessage',
   CredentialOffer = 'Offer',
   ProofRequest = 'ProofRecord',
@@ -54,7 +56,13 @@ enum NotificationType {
 
 interface NotificationListItemProps {
   notificationType: NotificationType
-  notification: BasicMessageRecord | CredentialExchangeRecord | ProofExchangeRecord | CustomNotificationRecord
+  notification:
+    | BasicMessageRecord
+    | CredentialExchangeRecord
+    | ProofExchangeRecord
+    | CustomNotificationRecord
+    | SdJwtVcRecord
+    | W3cCredentialRecord
   customNotification?: CustomNotification
   openSwipeableId: string | null
   onOpenSwipeable: (id: string | null) => void
@@ -330,7 +338,13 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
   }
 
   const getActionForNotificationType = (
-    notification: BasicMessageRecord | CredentialExchangeRecord | ProofExchangeRecord | CustomNotificationRecord,
+    notification:
+      | BasicMessageRecord
+      | CredentialExchangeRecord
+      | ProofExchangeRecord
+      | CustomNotificationRecord
+      | SdJwtVcRecord
+      | W3cCredentialRecord,
     notificationType: NotificationType
   ) => {
     let onPress

app/src/localization/en/index.ts

@@ -194,6 +194,7 @@ const translation = {
     Credentials: 'Credentials',
     CredentialDetails: 'Credential Details',
     Notifications: 'Notifications',
+    History: 'History',
     CredentialOffer: 'Credential Offer',
     ProofChangeCredential: 'Choose a credential',
     ProofRequest: 'Proof Request',
@@ -556,6 +557,15 @@ const translation = {
   Notifications: {
     Dismiss: 'Delete',
   },
+  Activities: {
+    Timing: {
+      Today: 'Today',
+      ThisWeek: 'This week',
+      LastWeek: 'Last week',
+      Older: 'Older',
+    },
+    FooterNothingElse: 'There is nothing else',
+  },
   Scan: {
     SuccessfullyAcceptedConnection: 'Successfully Accepted Connection',
     AcceptingConnection: 'Accepting Connection',

app/src/localization/fr/index.ts

@@ -501,6 +501,15 @@ const translation = {
   Notifications: {
     Dismiss: 'Supprimer',
   },
+  Activities: {
+    Timing: {
+      Today: 'Aujourd’hui',
+      ThisWeek: 'Cette semaine',
+      LastWeek: 'La semaine dernière',
+      Older: 'Plus ancien',
+    },
+    FooterNothingElse: "Il n'y a rien d'autre",
+  },
   PrivacyPolicy: {
     Title: 'Politique de confidentialité',
     CameraDisclosure:
@@ -715,6 +724,7 @@ const translation = {
     OptionsPlus: "Plus d'options",
     CredentialDetails: 'Détails des attestations',
     Notifications: 'Notifications',
+    History: 'Historique',
     CredentialOffer: "Proposition d'attestation",
     ProofRequest: 'Demande de preuve',
     ProofChangeCredential: "Changer l'attestation",

app/src/navigators/ActivitiesStack.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from '@hyperledger/aries-bifold-core'
+import { useDefaultStackOptions } from '@hyperledger/aries-bifold-core/App/navigators/defaultStackOptions'
+import { createStackNavigator } from '@react-navigation/stack'
+import React from 'react'
+
+import ActivityNotifications from '../screens/activities/Activities'
+
+import { ActivitiesStackParams, Screens } from './navigators'
+
+const ActivitiesStack: React.FC = () => {
+  const StackActivities = createStackNavigator<ActivitiesStackParams>()
+  const theme = useTheme()
+  const defaultStackOptions = useDefaultStackOptions(theme)
+
+  return (
+    <StackActivities.Navigator
+      initialRouteName={Screens.Activities}
+      screenOptions={{ ...defaultStackOptions, headerShown: true }}
+    >
+      <StackActivities.Screen name={Screens.Activities} component={ActivityNotifications} />
+    </StackActivities.Navigator>
+  )
+}
+
+export default ActivitiesStack

app/src/navigators/TabStack.tsx

@@ -24,6 +24,7 @@ import PlusTabIcon from '../assets/img/icons/plus.svg'
 import { NotificationReturnType, NotificationsInputProps } from '../hooks/notifications'
 import { notificationsSeenOnHome } from '../utils/notificationsSeenOnHome'
 
+import ActivitiesStack from './ActivitiesStack'
 import PlusStack from './PlusStack'
 import { TabStackParams, TabStacks } from './navigators'
 
@@ -58,7 +59,7 @@ const TabStack: React.FC = () => {
     { name: TabStacks.HomeStack, component: HomeStack, label: t('TabStack.Home'), icon: HomeTabIcon },
     {
       name: TabStacks.ActivitiesStack,
-      component: CredentialStack,
+      component: ActivitiesStack,
       label: t('TabStack.Activities'),
       icon: NotificationTabIcon,
     },

app/src/navigators/navigators.ts

@@ -26,6 +26,7 @@ export enum Stacks {
   SettingsStack = 'Settings Stack',
   HelpCenterStack = 'Help Center Stack',
   AboutStack = 'About Stack',
+  ActivitiesStack = 'Activities Stack',
 }
 
 export enum TabStacks {

app/src/screens/activities/Activities.tsx

@@ -0,0 +1,98 @@
+import { TOKENS, useServices, useTheme } from '@hyperledger/aries-bifold-core'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
+
+import { NotificationReturnType, NotificationsInputProps } from '../../hooks/notifications'
+
+import HistoryList from './HistoryList'
+import NotificationsList from './NotificationsList'
+
+const NotificationTab = 'Notifications'
+const HistoryTab = 'Historique'
+
+const Activities: React.FC = () => {
+  const [openSwipeableId, setOpenSwipeableId] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState(NotificationTab)
+  const { t } = useTranslation()
+  const { ColorPallet, TextTheme } = useTheme()
+
+  const [{ customNotificationConfig: customNotification, useNotifications }] = useServices([TOKENS.NOTIFICATIONS])
+  const notifications = useNotifications({ isHome: false } as NotificationsInputProps)
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 16,
+      backgroundColor: ColorPallet.brand.primaryBackground,
+    },
+    tabHeader: {
+      flexDirection: 'row',
+      borderBottomWidth: 1,
+      gap: 32,
+      borderBottomColor: ColorPallet.brand.secondary,
+      marginBottom: 16,
+      alignItems: 'center',
+    },
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      paddingBottom: 8,
+      paddingHorizontal: 8,
+      borderBottomWidth: 4,
+      borderBottomColor: 'transparent',
+    },
+    activeTab: {
+      borderBottomWidth: 4,
+      borderBottomColor: ColorPallet.brand.primary,
+    },
+    tabText: {
+      ...TextTheme.labelTitle,
+    },
+    activeTabText: {
+      color: ColorPallet.brand.primary,
+    },
+    tabContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+  })
+
+  return (
+    <View style={styles.container}>
+      {/* Tab-like Header */}
+      <View style={styles.tabHeader}>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === NotificationTab && styles.activeTab]}
+          onPress={() => setActiveTab(NotificationTab)}
+        >
+          <View style={styles.tabContent}>
+            <Text style={[styles.tabText, activeTab === NotificationTab && styles.activeTabText]}>
+              {t('Screens.Notifications')}
+            </Text>
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.tab, activeTab === HistoryTab && styles.activeTab]}
+          onPress={() => setActiveTab(HistoryTab)}
+        >
+          <Text style={[styles.tabText, activeTab === HistoryTab && styles.activeTabText]}>{t('Screens.History')}</Text>
+        </TouchableOpacity>
+      </View>
+
+      {activeTab === NotificationTab ? (
+        <NotificationsList
+          notifications={notifications as NotificationReturnType}
+          customNotification={customNotification}
+          openSwipeableId={openSwipeableId}
+          handleOpenSwipeable={setOpenSwipeableId}
+        />
+      ) : (
+        <HistoryList />
+      )}
+    </View>
+  )
+}
+
+export default Activities

app/src/screens/activities/HistoryList.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from '@hyperledger/aries-bifold-core'
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+
+const HistoryList: React.FC = () => {
+  const { TextTheme } = useTheme()
+
+  const styles = StyleSheet.create({
+    historyContent: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 16,
+    },
+    historyText: {
+      fontSize: TextTheme.normal.fontSize,
+      color: TextTheme.normal.color,
+    },
+  })
+  // TODO: Page d'historique
+  return (
+    <View style={styles.historyContent}>
+      <Text style={styles.historyText}>Historique des notifications</Text>
+    </View>
+  )
+}
+
+export default HistoryList