feat: work on vertical notifications

.github/workflows/actions/send-rocketchat-notification/action.yml

@@ -28,6 +28,6 @@ runs:
         mention: "jason.leach @cvarjao @wade.king @bryce.mcmath"
         mention_if: always
         channel: "#bc-digital-wallet-core-team"
-        url: ${{ inputs.webhook_url }}
         commit: true
+        url: ${{ inputs.webhook_url }}
         token: ${{ inputs.webhook_token }}

.github/workflows/main.yaml

@@ -314,7 +314,7 @@ jobs:
           job_title: "BC Wallet Android Build - Run number ${{ github.run_number }}"
           job_status: ${{ job.status }}
           webhook_url: ${{ secrets.ROCKETCHAT_WEBHOOK }}
-          webhook_token: ${{ secrets.GITHUB_TOKEN }}
+          webhook_token: ${{ secrets.ROCKETCHAT_TOKEN }}
 
   ship-to-saucelabs:
     if: github.ref_name == 'main' && needs.check-android-secrets.outputs.isReleaseBuild == 'true' && needs.check-ios-secrets.outputs.isReleaseBuild == 'true'

app/src/components/HomeFooterView.tsx

@@ -0,0 +1,58 @@
+import { Button, ButtonType, testIdWithKey, useTheme } from 'aries-bifold'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+import { surveyMonkeyUrl, surveyMonkeyExitUrl } from '../constants'
+import WebDisplay from '../screens/WebDisplay'
+
+interface HomeFooterViewProps {
+  children?: any
+}
+
+const HomeFooterView: React.FC<HomeFooterViewProps> = ({ children }) => {
+  const { ColorPallet } = useTheme()
+  const { t } = useTranslation()
+  const [surveyVisible, setSurveyVisible] = useState(false)
+
+  const styles = StyleSheet.create({
+    feedbackContainer: {
+      marginHorizontal: 20,
+      backgroundColor: ColorPallet.grayscale.white,
+    },
+    feedbackIcon: {
+      paddingRight: 10,
+    },
+  })
+
+  const toggleSurveyVisibility = () => setSurveyVisible(!surveyVisible)
+
+  return (
+    <View style={[styles.feedbackContainer]}>
+      <Button
+        title={t('Feedback.GiveFeedback')}
+        accessibilityLabel={t('Feedback.GiveFeedback')}
+        testID={testIdWithKey('GiveFeedback')}
+        onPress={toggleSurveyVisibility}
+        buttonType={ButtonType.Secondary}
+      >
+        <Icon
+          name="message-draw"
+          style={[styles.feedbackIcon, { color: ColorPallet.brand.primary }]}
+          size={26}
+          color={ColorPallet.grayscale.white}
+        />
+      </Button>
+      <WebDisplay
+        destinationUrl={surveyMonkeyUrl}
+        exitUrl={surveyMonkeyExitUrl}
+        visible={surveyVisible}
+        onClose={toggleSurveyVisibility}
+      />
+      {children}
+    </View>
+  )
+}
+
+export default HomeFooterView

app/src/components/HomeHeaderView.tsx

@@ -0,0 +1,68 @@
+import { AnonCredsCredentialMetadataKey } from '@aries-framework/anoncreds/build/utils/metadata'
+import { CredentialState } from '@aries-framework/core'
+import { useCredentialByState } from '@aries-framework/react-hooks'
+import { useNavigation } from '@react-navigation/native'
+import { Screens, Stacks, InfoBox, InfoBoxType, useStore } from 'aries-bifold'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { View, StyleSheet } from 'react-native'
+
+import { showBCIDSelector } from '../helpers/BCIDHelper'
+import { BCState, BCDispatchAction } from '../store'
+
+interface HomeHeaderViewProps {
+  children?: any
+}
+
+const HomeHeaderView: React.FC<HomeHeaderViewProps> = ({ children }) => {
+  const [store, dispatch] = useStore<BCState>()
+  const navigation = useNavigation()
+  const { t } = useTranslation()
+  const credentials = [
+    ...useCredentialByState(CredentialState.CredentialReceived),
+    ...useCredentialByState(CredentialState.Done),
+  ]
+  const credentialDefinitionIDs = credentials.map(
+    (c) => c.metadata.data[AnonCredsCredentialMetadataKey].credentialDefinitionId as string
+  )
+  const style = StyleSheet.create({
+    container: {
+      marginHorizontal: 20,
+      marginTop: 20,
+      marginBottom: 10,
+    },
+  })
+
+  const onCallToActionPressed = () => {
+    navigation.getParent()?.navigate(Stacks.NotificationStack, {
+      screen: Screens.CustomNotification,
+    })
+  }
+
+  const onClosePressed = () => {
+    dispatch({
+      type: BCDispatchAction.PERSON_CREDENTIAL_OFFER_DISMISSED,
+      payload: [{ personCredentialOfferDismissed: true }],
+    })
+  }
+
+  return (
+    <>
+      {!store.dismissPersonCredentialOffer && showBCIDSelector(credentialDefinitionIDs, true) && (
+        <View style={style.container}>
+          <InfoBox
+            notificationType={InfoBoxType.Info}
+            title={t('BCID.GetDigitalID')}
+            description={t('PersonCredentialNotification.Description')}
+            onCallToActionPressed={onCallToActionPressed}
+            onCallToActionLabel="Start"
+            onClosePressed={onClosePressed}
+          />
+          {children}
+        </View>
+      )}
+    </>
+  )
+}
+
+export default HomeHeaderView

app/src/components/tours/HomeTourSteps.tsx

@@ -1,19 +1,25 @@
 import { useTheme, TourStep, TourBox } from 'aries-bifold'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Image, Text, Dimensions } from 'react-native'
+import { Image, Text, useWindowDimensions } from 'react-native'
 
-const { width: windowWidth } = Dimensions.get('window')
-const totalHorizontalImagePadding = 90
-const imageWidth = Math.floor(windowWidth - totalHorizontalImagePadding)
-const imageHeight = Math.floor(imageWidth * 0.66)
+const calculateImageDimensions = () => {
+  const { width: windowWidth } = useWindowDimensions() // NOSONAR
+  const totalHorizontalImagePadding = 90
+  const imageWidth = Math.floor(windowWidth - totalHorizontalImagePadding)
+  const imageHeight = Math.floor(imageWidth * 0.66)
+
+  return { imageWidth, imageHeight }
+}
 
 export const homeTourSteps: TourStep[] = [
   {
     render: (props) => {
       const { current, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
+      const { imageWidth, imageHeight } = calculateImageDimensions()
+
       return (
         <TourBox
           title={t('Tour.AddAndShare')}
@@ -55,6 +61,7 @@ export const homeTourSteps: TourStep[] = [
       const { current, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
+
       return (
         <TourBox
           title={t('Tour.Notifications')}
@@ -86,6 +93,8 @@ export const homeTourSteps: TourStep[] = [
       const { current, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
+      const { imageWidth, imageHeight } = calculateImageDimensions()
+
       return (
         <TourBox
           title={t('Tour.YourCredentials')}

app/src/hooks/notifications.ts

@@ -1,18 +1,13 @@
-import { AnonCredsCredentialMetadataKey } from '@aries-framework/anoncreds/build/utils/metadata'
 import {
   CredentialExchangeRecord as CredentialRecord,
   CredentialState,
   ProofExchangeRecord,
   ProofState,
 } from '@aries-framework/core'
 import { useCredentialByState, useProofByState } from '@aries-framework/react-hooks'
-import { useStore } from 'aries-bifold'
 import { CredentialMetadata, customMetadata } from 'aries-bifold/App/types/metadata'
 import { ProofCustomMetadata, ProofMetadata } from 'aries-bifold/verifier'
 
-import { getInvitationCredentialDate, showBCIDSelector } from '../helpers/BCIDHelper'
-import { BCState } from '../store'
-
 interface CustomNotification {
   type: 'CustomNotification'
   createdAt: Date
@@ -25,7 +20,6 @@ interface Notifications {
 }
 
 export const useNotifications = (): Notifications => {
-  const [store] = useStore<BCState>()
   const offers = useCredentialByState(CredentialState.OfferReceived)
   const proofsRequested = useProofByState(ProofState.RequestReceived)
   const proofsDone = useProofByState([ProofState.Done, ProofState.PresentationReceived]).filter(
@@ -44,22 +38,7 @@ export const useNotifications = (): Notifications => {
     }
   })
 
-  const credentials = [
-    ...useCredentialByState(CredentialState.CredentialReceived),
-    ...useCredentialByState(CredentialState.Done),
-  ]
-  const credentialDefinitionIDs = credentials.map(
-    (c) => c.metadata.data[AnonCredsCredentialMetadataKey].credentialDefinitionId as string
-  )
-  const invitationDate = getInvitationCredentialDate(credentials, true)
-  const custom: CustomNotification[] =
-    showBCIDSelector(credentialDefinitionIDs, true) &&
-    invitationDate &&
-    !store.dismissPersonCredentialOffer.personCredentialOfferDismissed
-      ? [{ type: 'CustomNotification', createdAt: invitationDate, id: 'custom' }]
-      : []
-
-  const notifications = [...offers, ...proofsRequested, ...proofsDone, ...revoked, ...custom].sort(
+  const notifications = [...offers, ...proofsRequested, ...proofsDone, ...revoked].sort(
     (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
   )
 

app/src/index.ts

@@ -13,7 +13,8 @@ import bundles from './assets/branding/credential-branding'
 import AddCredentialButton from './components/AddCredentialButton'
 import AddCredentialSlider from './components/AddCredentialSlider'
 import EmptyList from './components/EmptyList'
-import HomeContentView from './components/HomeContentView'
+import HomeFooterView from './components/HomeFooterView'
+import HomeHeaderView from './components/HomeHeaderView'
 import { useNotifications } from './hooks/notifications'
 import en from './localization/en'
 import fr from './localization/fr'
@@ -38,7 +39,8 @@ const configuration: ConfigurationContext = {
   pages,
   splash: Splash,
   terms: Terms,
-  homeContentView: HomeContentView,
+  homeHeaderView: HomeHeaderView,
+  homeFooterView: HomeFooterView,
   credentialListHeaderRight: AddCredentialButton,
   credentialListOptions: AddCredentialSlider,
   credentialEmptyList: EmptyList,