From 08dcabefc0f996b18927b0bb1f021d6115fb4842 Mon Sep 17 00:00:00 2001 From: "Jason C. Leach" Date: Wed, 9 Aug 2023 15:53:04 -0700 Subject: [PATCH 1/4] feat: work on vertical notifications Signed-off-by: Jason C. Leach --- .../send-rocketchat-notification/action.yml | 2 +- .github/workflows/main.yaml | 2 +- app/src/components/HomeContentView.tsx | 118 ------------------ app/src/components/HomeFooterView.tsx | 71 +++++++++++ app/src/components/HomeHeaderView.tsx | 68 ++++++++++ app/src/components/tours/HomeTourSteps.tsx | 21 +++- app/src/hooks/notifications.ts | 23 +--- app/src/index.ts | 6 +- 8 files changed, 162 insertions(+), 149 deletions(-) delete mode 100644 app/src/components/HomeContentView.tsx create mode 100644 app/src/components/HomeFooterView.tsx create mode 100644 app/src/components/HomeHeaderView.tsx diff --git a/.github/workflows/actions/send-rocketchat-notification/action.yml b/.github/workflows/actions/send-rocketchat-notification/action.yml index 8dbbb2ed..990f5bd8 100644 --- a/.github/workflows/actions/send-rocketchat-notification/action.yml +++ b/.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 }} diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml index 3901e41a..e50c4768 100644 --- a/.github/workflows/main.yaml +++ b/.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' diff --git a/app/src/components/HomeContentView.tsx b/app/src/components/HomeContentView.tsx deleted file mode 100644 index 8bbf2b8e..00000000 --- a/app/src/components/HomeContentView.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { CredentialState } from '@aries-framework/core' -import { useCredentialByState } from '@aries-framework/react-hooks' -import { Button, ButtonType, testIdWithKey, useTheme } from 'aries-bifold' -import React, { useState } from 'react' -import { useTranslation } from 'react-i18next' -import { StyleSheet, View, Text } from 'react-native' -import Icon from 'react-native-vector-icons/MaterialCommunityIcons' - -import { surveyMonkeyUrl, surveyMonkeyExitUrl } from '../constants' -import { useNotifications } from '../hooks/notifications' -import WebDisplay from '../screens/WebDisplay' - -const offset = 25 - -interface HomeContentViewProps { - children?: any -} - -const HomeContentView: React.FC = ({ children }) => { - const credentials = [ - ...useCredentialByState(CredentialState.CredentialReceived), - ...useCredentialByState(CredentialState.Done), - ] - const notifications = useNotifications() - const { HomeTheme, ColorPallet } = useTheme() - const { t } = useTranslation() - const [surveyVisible, setSurveyVisible] = useState(false) - - const styles = StyleSheet.create({ - container: { - paddingHorizontal: offset, - paddingBottom: offset * 3, - }, - messageContainer: { - alignItems: 'center', - justifyContent: 'center', - marginTop: 35, - marginHorizontal: offset, - }, - feedbackContainer: { - paddingTop: 15, - marginHorizontal: offset, - }, - feedbackIcon: { - paddingRight: 10, - }, - }) - - const displayMessage = (credentialCount: number) => { - if (typeof credentialCount === 'undefined' && credentialCount >= 0) { - throw new Error('Credential count cannot be undefined') - } - - let credentialMsg - - if (credentialCount === 1) { - credentialMsg = ( - - {t('Home.YouHave')} {credentialCount} {t('Home.Credential')}{' '} - {t('Home.InYourWallet')} - - ) - } else if (credentialCount > 1) { - credentialMsg = ( - - {t('Home.YouHave')} {credentialCount} {t('Home.Credentials')}{' '} - {t('Home.InYourWallet')} - - ) - } else { - credentialMsg = t('Home.NoCredentials') - } - - return ( - - {credentialMsg} - - ) - } - - const toggleSurveyVisibility = () => setSurveyVisible(!surveyVisible) - - return ( - - - - {notifications.total === 0 && ( - - - {t('Home.Welcome')} - - - )} - {displayMessage(credentials.length)} - {children} - - ) -} - -export default HomeContentView diff --git a/app/src/components/HomeFooterView.tsx b/app/src/components/HomeFooterView.tsx new file mode 100644 index 00000000..bde9941e --- /dev/null +++ b/app/src/components/HomeFooterView.tsx @@ -0,0 +1,71 @@ +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' + +const offset = 25 + +interface HomeFooterViewProps { + children?: any +} + +const HomeFooterView: React.FC = ({ children }) => { + const { ColorPallet } = useTheme() + const { t } = useTranslation() + const [surveyVisible, setSurveyVisible] = useState(false) + + const styles = StyleSheet.create({ + container: { + paddingHorizontal: offset, + paddingBottom: offset * 3, + }, + messageContainer: { + alignItems: 'center', + justifyContent: 'center', + marginTop: 35, + marginHorizontal: offset, + }, + feedbackContainer: { + paddingTop: 15, + marginHorizontal: offset, + backgroundColor: ColorPallet.grayscale.white, + }, + feedbackIcon: { + paddingRight: 10, + }, + }) + + const toggleSurveyVisibility = () => setSurveyVisible(!surveyVisible) + + return ( + + + + {children} + + ) +} + +export default HomeFooterView diff --git a/app/src/components/HomeHeaderView.tsx b/app/src/components/HomeHeaderView.tsx new file mode 100644 index 00000000..d425b218 --- /dev/null +++ b/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 = ({ children }) => { + const [store, dispatch] = useStore() + 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) && ( + + + {children} + + )} + + ) +} + +export default HomeHeaderView diff --git a/app/src/components/tours/HomeTourSteps.tsx b/app/src/components/tours/HomeTourSteps.tsx index b625084c..a04d21d7 100644 --- a/app/src/components/tours/HomeTourSteps.tsx +++ b/app/src/components/tours/HomeTourSteps.tsx @@ -1,12 +1,18 @@ 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 { width } = useWindowDimensions() + +const calculateImageDimensions = () => { + const { width: windowWidth } = useWindowDimensions() + const totalHorizontalImagePadding = 90 + const imageWidth = Math.floor(windowWidth - totalHorizontalImagePadding) + const imageHeight = Math.floor(imageWidth * 0.66) + + return { imageWidth, imageHeight } +} export const homeTourSteps: TourStep[] = [ { @@ -14,6 +20,8 @@ export const homeTourSteps: TourStep[] = [ const { current, next, stop, previous } = props const { t } = useTranslation() const { ColorPallet, TextTheme } = useTheme() + const { imageWidth, imageHeight } = calculateImageDimensions() + return ( { - const [store] = useStore() 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() ) diff --git a/app/src/index.ts b/app/src/index.ts index 62f6f1c5..f3ae0347 100644 --- a/app/src/index.ts +++ b/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, From 1df352facd8622e5c77721be947d947f6248dce3 Mon Sep 17 00:00:00 2001 From: "Jason C. Leach" Date: Thu, 10 Aug 2023 14:30:07 -0700 Subject: [PATCH 2/4] chore: bypass sonar issue Signed-off-by: Jason C. Leach --- app/src/components/tours/HomeTourSteps.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/src/components/tours/HomeTourSteps.tsx b/app/src/components/tours/HomeTourSteps.tsx index a04d21d7..09b30c41 100644 --- a/app/src/components/tours/HomeTourSteps.tsx +++ b/app/src/components/tours/HomeTourSteps.tsx @@ -3,10 +3,8 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { Image, Text, useWindowDimensions } from 'react-native' -// const { width } = useWindowDimensions() - const calculateImageDimensions = () => { - const { width: windowWidth } = useWindowDimensions() + const { width: windowWidth } = useWindowDimensions() // NOSONAR const totalHorizontalImagePadding = 90 const imageWidth = Math.floor(windowWidth - totalHorizontalImagePadding) const imageHeight = Math.floor(imageWidth * 0.66) From 7fa755d23a6e136ad09803984b543c4db43176d3 Mon Sep 17 00:00:00 2001 From: "Jason C. Leach" Date: Thu, 10 Aug 2023 14:53:44 -0700 Subject: [PATCH 3/4] fix: style overflow Signed-off-by: Jason C. Leach --- app/src/components/HomeFooterView.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/app/src/components/HomeFooterView.tsx b/app/src/components/HomeFooterView.tsx index bde9941e..c6e1b8e5 100644 --- a/app/src/components/HomeFooterView.tsx +++ b/app/src/components/HomeFooterView.tsx @@ -7,8 +7,6 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons' import { surveyMonkeyUrl, surveyMonkeyExitUrl } from '../constants' import WebDisplay from '../screens/WebDisplay' -const offset = 25 - interface HomeFooterViewProps { children?: any } @@ -19,19 +17,8 @@ const HomeFooterView: React.FC = ({ children }) => { const [surveyVisible, setSurveyVisible] = useState(false) const styles = StyleSheet.create({ - container: { - paddingHorizontal: offset, - paddingBottom: offset * 3, - }, - messageContainer: { - alignItems: 'center', - justifyContent: 'center', - marginTop: 35, - marginHorizontal: offset, - }, feedbackContainer: { - paddingTop: 15, - marginHorizontal: offset, + marginHorizontal: 20, backgroundColor: ColorPallet.grayscale.white, }, feedbackIcon: { From 6362f4810c6e48af70b7dae8e98d72d0315eb72b Mon Sep 17 00:00:00 2001 From: "Jason C. Leach" Date: Thu, 10 Aug 2023 15:11:31 -0700 Subject: [PATCH 4/4] chore: update submodule Signed-off-by: Jason C. Leach --- bifold | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bifold b/bifold index ecbdf48d..24d5c201 160000 --- a/bifold +++ b/bifold @@ -1 +1 @@ -Subproject commit ecbdf48ddc15ab9c45d42dba30ca68ac33267761 +Subproject commit 24d5c20189a5fd41778d14b39bd2924c1d0b9c4a