chore:modified notificatiopn ui on home page

Signed-off-by: Poonam Ghewande <[email protected]>
credebl · Dec 18, 2023 · c2a0a32 · c2a0a32
1 parent f43ae6c
commit c2a0a32
Show file tree

Hide file tree

Showing 11 changed files with 1,217 additions and 103 deletions.
diff --git a/app/assets/img/amico.svg b/app/assets/img/amico.svg
diff --git a/app/assets/img/cuate.svg b/app/assets/img/cuate.svg
diff --git a/app/assets/img/rafiki.svg b/app/assets/img/rafiki.svg
diff --git a/app/components/listItems/ContactListItem.tsx b/app/components/listItems/ContactListItem.tsx
@@ -41,7 +41,6 @@ const ContactListItem: React.FC<Props> = ({ contact, navigation }) => {
   const credentials = useCredentialsByConnectionId(contact.id)
   const proofs = useProofsByConnectionId(contact.id)
   const [message, setMessage] = useState<CondensedMessage>({ text: '', createdAt: contact.createdAt })
-
   const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',

diff --git a/app/components/listItems/NotificationListItem.tsx b/app/components/listItems/NotificationListItem.tsx
@@ -6,12 +6,15 @@ import {
   declineCredentialOffer as declineCredential,
   declineProofRequest as declineProof,
   getProofRequestAgentMessage,
+  ConnectionRecord,
+  getConnectionById,
 } from '@adeya/ssi'
 import { useNavigation } from '@react-navigation/core'
 import { StackNavigationProp } from '@react-navigation/stack'
 import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, View, ViewStyle, Text, TextStyle, DeviceEventEmitter, TouchableOpacity } from 'react-native'
+import { StyleSheet, View, ViewStyle, Text, TextStyle, DeviceEventEmitter, TouchableOpacity, Image } from 'react-native'
+import { LinearGradient } from 'react-native-linear-gradient'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 
 import { markProofAsViewed } from '../../../verifier'
@@ -26,7 +29,6 @@ import { ModalUsage } from '../../types/remove'
 import { useAppAgent } from '../../utils/agent'
 import { parsedSchema } from '../../utils/helpers'
 import { testIdWithKey } from '../../utils/testable'
-import Button, { ButtonType } from '../buttons/Button'
 import { InfoBoxType } from '../misc/InfoBox'
 import CommonRemoveModal from '../modals/CommonRemoveModal'
 
@@ -62,11 +64,12 @@ type StyleConfig = {
 const NotificationListItem: React.FC<NotificationListItemProps> = ({ notificationType, notification }) => {
   const navigation = useNavigation<StackNavigationProp<HomeStackParams>>()
   const { customNotification } = useConfiguration()
-  const [, dispatch] = useStore()
+  const [dispatch] = useStore()
   const { t } = useTranslation()
   const { ColorPallet, TextTheme } = useTheme()
   const { agent } = useAppAgent()
   const [declineModalVisible, setDeclineModalVisible] = useState(false)
+  const [connectionDetail, setConnectionDetail] = useState<ConnectionRecord[]>([])
   const [details, setDetails] = useState<DisplayDetails>({
     type: InfoBoxType.Info,
     title: undefined,
@@ -85,10 +88,17 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({ notificatio
     iconName: 'info',
   })
   const { name, version } = parsedSchema(notification as CredentialExchangeRecord)
+  const getconnection = async () => {
+    const contacts: ConnectionRecord = await getConnectionById(agent, notification.connectionId)
+    setConnectionDetail(contacts)
+  }
+  useEffect(() => {
+    getconnection()
+  }, [])
 
   const styles = StyleSheet.create({
     container: {
-      borderRadius: 5,
+      borderRadius: 10,
       borderWidth: 1,
       padding: 10,
     },
@@ -121,6 +131,39 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({ notificatio
       marginRight: 10,
       alignSelf: 'center',
     },
+
+    connectionLabelContainer: {
+      width: '65%',
+      marginLeft: 10,
+      marginRight: 5,
+      flexDirection: 'column',
+    },
+    contactItemContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    avatarContactPlaceholder: {
+      ...TextTheme.headingFour,
+    },
+    contactContainer: {
+      fontWeight: '600',
+      color: ColorPallet.grayscale.white,
+      fontSize: 17,
+    },
+    avatarContactImage: {
+      width: 50,
+      height: 50,
+    },
+    avatarContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      borderColor: '#000',
+      borderWidth: 1,
+      flexDirection: 'row',
+    },
   })
 
   let onPress: GenericFn = () => {
@@ -378,44 +421,46 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({ notificatio
     }
   }, [details])
 
+  const contactLabel = connectionDetail?.theirLabel
+  const contactLabelAbbr = contactLabel?.charAt(0).toUpperCase()
+
   return (
-    <View style={[styles.container, styleConfig.containerStyle]} testID={testIdWithKey('NotificationListItem')}>
-      <View style={styles.headerContainer}>
-        <View style={styles.icon}>
-          <Icon accessible={false} name={styleConfig.iconName} size={iconSize} color={styleConfig.iconColor} />
-        </View>
-        <Text style={[styles.headerText, styleConfig.textStyle]} testID={testIdWithKey('HeaderText')}>
-          {details.title}
-        </Text>
-        {[NotificationType.Custom, NotificationType.ProofRequest, NotificationType.CredentialOffer].includes(
-          notificationType,
-        ) && (
-          <View>
-            <TouchableOpacity
-              accessibilityLabel={t('Global.Dismiss')}
-              accessibilityRole={'button'}
-              testID={testIdWithKey(`Dismiss${notificationType}`)}
-              onPress={onClose}
-              hitSlop={hitSlop}>
-              <Icon name={'close'} size={iconSize} color={styleConfig.iconColor} />
-            </TouchableOpacity>
+    <TouchableOpacity onPress={onPress}>
+      <LinearGradient
+        colors={[ColorPallet.notification.gradientPrimary, ColorPallet.notification.gradientSecondary]}
+        style={[styles.container, styleConfig.containerStyle]}
+        testID={testIdWithKey('NotificationListItem')}>
+        <View style={styles.headerContainer}>
+          <View style={styles.avatarContainer}>
+            {connectionDetail?.imageUrl ? (
+              <Image style={styles.avatarContactImage} source={{ uri: connectionDetail?.imageUrl }} />
+            ) : (
+              <Text style={styles.avatarContactPlaceholder}>{contactLabelAbbr}</Text>
+            )}
+          </View>
+          <View style={styles.connectionLabelContainer}>
+            <Text style={[styles.contactContainer, { marginTop: 10 }]}>You have {details.title} </Text>
+            <Text style={[styles.contactContainer, { marginTop: 2 }]}>{contactLabel}</Text>
           </View>
-        )}
-      </View>
-      <View style={styles.bodyContainer}>
-        <Text style={[styles.bodyText, styleConfig.textStyle]} testID={testIdWithKey('BodyText')}>
-          {details.body}
-        </Text>
-        <Button
-          title={details.buttonTitle ?? t('Global.View')}
-          accessibilityLabel={details.buttonTitle ?? t('Global.View')}
-          testID={testIdWithKey(`View${notificationType}${isReceivedProof ? 'Received' : ''}`)}
-          buttonType={ButtonType.Primary}
-          onPress={onPress}
-        />
-      </View>
-      {commonRemoveModal()}
-    </View>
+
+          {[NotificationType.Custom, NotificationType.ProofRequest, NotificationType.CredentialOffer].includes(
+            notificationType,
+          ) && (
+            <View>
+              <TouchableOpacity
+                accessibilityLabel={t('Global.Dismiss')}
+                accessibilityRole={'button'}
+                testID={testIdWithKey(`Dismiss${notificationType}`)}
+                onPress={onClose}
+                hitSlop={hitSlop}>
+                <Icon name={'close'} size={iconSize} color={styleConfig.iconColor} />
+              </TouchableOpacity>
+            </View>
+          )}
+        </View>
+        {commonRemoveModal()}
+      </LinearGradient>
+    </TouchableOpacity>
   )
 }
 

diff --git a/app/localization/en/index.ts b/app/localization/en/index.ts
@@ -563,7 +563,7 @@ const translation = {
     "VerifyPhrase"  : 'Verify Phrase',
     "Success"  : 'Success',
     "CredentialDetailsW3C" :'Credential Details W3C',
-    "WalletName" :"Wallet Name",
+    "WalletName" :"Wallet",
     "Explore": "Explore",
     "OrganizationDetails": "Organization Details",
     "ProofChangeCredential": "Choose a credential",

diff --git a/app/screens/Home.tsx b/app/screens/Home.tsx
@@ -1,26 +1,23 @@
 import { StackScreenProps } from '@react-navigation/stack'
 import React, { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
-import { FlatList, StyleSheet, View, Text, Dimensions, TouchableOpacity, Image } from 'react-native'
+import { FlatList, StyleSheet, View, Dimensions, Image } from 'react-native'
 
 import ScanButton from '../components/common/ScanButton'
 import NotificationListItem, { NotificationType } from '../components/listItems/NotificationListItem'
 import NoNewUpdates from '../components/misc/NoNewUpdates'
-import { AttachTourStep } from '../components/tour/AttachTourStep'
 import { useConfiguration } from '../contexts/configuration'
 import { useTheme } from '../contexts/theme'
 import { HomeStackParams, Screens } from '../types/navigators'
 
 const { width } = Dimensions.get('window')
-const offset = 25
+const offset = 10
 const offsetPadding = 5
 
 type HomeProps = StackScreenProps<HomeStackParams, Screens.Home>
 
-const Home: React.FC<HomeProps> = ({ navigation }) => {
+const Home: React.FC<HomeProps> = () => {
   const { useCustomNotifications } = useConfiguration()
   const { notifications } = useCustomNotifications()
-  const { t } = useTranslation()
   // This syntax is required for the jest mocks to work
   // eslint-disable-next-line import/no-named-as-default-member
   const { HomeTheme } = useTheme()
@@ -84,62 +81,41 @@ const Home: React.FC<HomeProps> = ({ navigation }) => {
 
   return (
     <View style={styles.container}>
-      <View style={styles.rowContainer}>
-        {notifications?.length > 0 ? (
-          <AttachTourStep index={1} fill>
-            <Text style={[HomeTheme.notificationsHeader, styles.header]}>
-              {t('Home.Notifications')}
-              {notifications?.length ? ` (${notifications.length})` : ''}
-            </Text>
-          </AttachTourStep>
-        ) : (
-          <Text style={[HomeTheme.notificationsHeader, styles.header]}>
-            {t('Home.Notifications')}
-            {notifications?.length ? ` (${notifications.length})` : ''}
-          </Text>
-        )}
-        {notifications?.length > 1 ? (
-          <TouchableOpacity
-            style={styles.linkContainer}
-            activeOpacity={1}
-            onPress={() => navigation.navigate(Screens.Notifications)}>
-            <Text style={styles.link}>{t('Home.SeeAll')}</Text>
-          </TouchableOpacity>
-        ) : null}
-      </View>
-      <FlatList
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        scrollEnabled={notifications?.length > 0 ? true : false}
-        style={{ flexGrow: 0 }}
-        snapToOffsets={[
-          0,
-          ...Array(notifications?.length)
-            .fill(0)
-            .map((n: number, i: number) => i * (width - 2 * (offset - offsetPadding)))
-            .slice(1),
-        ]}
-        decelerationRate="fast"
-        ListEmptyComponent={() => (
-          <View style={{ marginHorizontal: offset, width: width - 2 * offset }}>
-            <View>
-              <NoNewUpdates />
+      <View style={{ marginTop: 20 }}>
+        <FlatList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          scrollEnabled={notifications?.length > 0 ? true : false}
+          style={{ flexGrow: 0 }}
+          snapToOffsets={[
+            0,
+            ...Array(notifications?.length)
+              .fill(0)
+              .map((n: number, i: number) => i * (width - 2 * (offset - offsetPadding)))
+              .slice(1),
+          ]}
+          decelerationRate="fast"
+          ListEmptyComponent={() => (
+            <View style={{ marginHorizontal: offset, width: width - 2 * offset }}>
+              <View>
+                <NoNewUpdates />
+              </View>
+            </View>
+          )}
+          data={notifications}
+          keyExtractor={item => item.id}
+          renderItem={({ item, index }) => (
+            <View
+              style={{
+                width: width - 2 * offset,
+                marginLeft: !index ? offset : offsetPadding,
+                marginRight: index === notifications?.length - 1 ? offset : offsetPadding,
+              }}>
+              {DisplayListItemType(item)}
             </View>
-          </View>
-        )}
-        data={notifications}
-        keyExtractor={item => item.id}
-        renderItem={({ item, index }) => (
-          <View
-            style={{
-              width: width - 2 * offset,
-              marginLeft: !index ? offset : offsetPadding,
-              marginRight: index === notifications?.length - 1 ? offset : offsetPadding,
-            }}>
-            {DisplayListItemType(item)}
-          </View>
-        )}
-      />
+          )}
+        />
+      </View>
       <View style={styles.messageContainer}>
         <Image source={require('../assets/img/homeimage.png')} resizeMode="contain" style={styles.homeImage} />
       </View>

diff --git a/app/screens/Settings.tsx b/app/screens/Settings.tsx
@@ -48,6 +48,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
     container: {
       backgroundColor: ColorPallet.brand.primaryBackground,
       width: '100%',
+      padding: 10,
     },
     section: {
       backgroundColor: SettingsTheme.groupBackground,

diff --git a/app/theme.ts b/app/theme.ts
@@ -6,13 +6,15 @@ import Arrow from './assets/icons/large-arrow.svg'
 import ConnectionIconActive from './assets/img/Connect-active.svg'
 import Connection from './assets/img/Connect.svg'
 import ExploreIconActive from './assets/img/active-explore-icon.svg'
+import WalletVcInfo from './assets/img/amico.svg'
 import AppLockout from './assets/img/app-lockout.svg'
 import BackupSuccess from './assets/img/backup-success.svg'
 import Biometrics from './assets/img/biometrics.svg'
 import ContactBook from './assets/img/contact-book.svg'
 import CredentialIconActive from './assets/img/credential-active.svg'
 import CredentialDeclined from './assets/img/credential-declined.svg'
 import Credential from './assets/img/credential.svg'
+import WalletConnectionInfo from './assets/img/cuate.svg'
 import DeleteNotification from './assets/img/delete-notification.svg'
 import EmptyWallet from './assets/img/empty-wallet.svg'
 import ExploreIcon from './assets/img/explore-icon.svg'
@@ -22,6 +24,8 @@ import IconInfoSentDark from './assets/img/icon-info-sent-dark.svg'
 import IconProofRequestDark from './assets/img/icon-proof-request-dark.svg'
 import Logo from './assets/img/logo-with-text.svg'
 import ProofRequestDeclined from './assets/img/proof-declined.svg'
+import WalletInfo from './assets/img/rafiki.svg'
+
 export interface ISVGAssets {
   appLockout: React.FC<SvgProps>
   biometrics: React.FC<SvgProps>
@@ -43,6 +47,9 @@ export interface ISVGAssets {
   ConnectionIconActive: React.FC<SvgProps>
   Credential: React.FC<SvgProps>
   CredentialIconActive: React.FC<SvgProps>
+  WalletInfo: React.FC<SvgProps>
+  WalletConnectionInfo: React.FC<SvgProps>
+  WalletVcInfo: React.FC<SvgProps>
 }
 
 export interface IFontAttributes {
@@ -147,6 +154,8 @@ export interface INotificationColors {
   errorIcon: string
   errorText: string
   popupOverlay: string
+  gradientPrimary: string
+  gradientSecondary: string
 }
 
 export interface IGrayscaleColors {
@@ -204,6 +213,8 @@ const NotificationColors: INotificationColors = {
   errorIcon: '#A12622',
   errorText: '#A12622',
   popupOverlay: `rgba(0, 0, 0, ${mediumOpacity})`,
+  gradientPrimary: '#1F4EAD',
+  gradientSecondary: '#00D2FF',
 }
 
 const GrayscaleColors: IGrayscaleColors = {
@@ -865,6 +876,9 @@ export const Assets = {
     ConnectionIconActive: ConnectionIconActive,
     Credential: Credential,
     CredentialIconActive: CredentialIconActive,
+    WalletInfo: WalletInfo,
+    WalletConnectionInfo: WalletConnectionInfo,
+    WalletVcInfo: WalletVcInfo,
   },
   img: {
     logoPrimary: {