Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/main' into person-credential-w…
Browse files Browse the repository at this point in the history
…orkflow-fix
  • Loading branch information
amanji committed Mar 13, 2023
2 parents 47628a0 + be8ce1f commit fedc88b
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 79 deletions.
20 changes: 20 additions & 0 deletions app/src/components/AddCredentialSlider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,15 @@ const AddCredentialSlider: React.FC = () => {
startFlow(agent!, store, setWorkflowInProgress, t, (connectionId) => setWorkflowConnectionId(connectionId))
}, [store])

useEffect(() => {
for (const credential of offers) {
if (credential.state == CredentialState.OfferReceived && credential.connectionId === workflowConnectionId) {
goToHomeScreen(credential.id)
deactivateSlider()
}
}
}, [offers, workflowConnectionId])

useEffect(() => {
const credentialDefinitionIDs = credentials.map(
(c) => c.metadata.data[CredentialMetadataKeys.IndyCredential].credentialDefinitionId as string
Expand All @@ -106,6 +115,17 @@ const AddCredentialSlider: React.FC = () => {
}
}, [])

useEffect(() => {
const handle = DeviceEventEmitter.addListener(BCWalletEventTypes.ADD_CREDENTIAL_PRESSED, (value?: boolean) => {
const newVal = value === undefined ? !addCredentialPressed : value
setAddCredentialPressed(newVal)
})

return () => {
handle.remove()
}
}, [])

return (
<>
<Modal animationType="slide" transparent={true} visible={addCredentialPressed} onRequestClose={deactivateSlider}>
Expand Down
2 changes: 2 additions & 0 deletions app/src/localization/en/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const translation = {
"PersonCredential": {
"Issuer": "Service BC",
"Name": "Person",
"GivenName":"Sample Given Name",
"FamilyName":"Sample Family Name",
"Description": "Add your Person credential to your wallet to prove your personal information online and get access to services online.\n\nYou'll need the BC Service Card app set up on this mobile device.",
"LinkDescription": "Get the BC Services Card app",
"GetCredential": "Get your Person credential",
Expand Down
2 changes: 2 additions & 0 deletions app/src/localization/fr/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ const translation = {
"PersonCredential": {
"Issuer": "Service BC (FR)",
"Name": "Person (FR)",
"GivenName":"Sample Given Name (FR)",
"FamilyName":"Sample Family Name (FR)",
"Description": "Add your Person credential to your wallet to prove your personal information online and get access to services online.\n\nYou'll need the BC Service Card app set up on this mobile device. (FR)",
"LinkDescription": "Get the BC Services Card app (FR)",
"GetCredential": "Get your Person credential (FR)",
Expand Down
2 changes: 2 additions & 0 deletions app/src/localization/pt-br/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ const translation = {
"PersonCredential": {
"Issuer": "Service BC (PT-BR)",
"Name": "Person (PT-BR)",
"GivenName":"Sample Given Name (PT-BR)",
"FamilyName":"Sample Family Name (PT-BR)",
"Description": "Add your Person credential to your wallet to prove your personal information online and get access to services online.\n\nYou'll need the BC Service Card app set up on this mobile device. (PT-BR)",
"LinkDescription": "Get the BC Services Card app (PT-BR)",
"GetCredential": "Get your Person credential (PT-BR)",
Expand Down
148 changes: 72 additions & 76 deletions app/src/screens/PersonCredential.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { useAgent } from '@aries-framework/react-hooks'
import { useNavigation } from '@react-navigation/core'
import { Button, ButtonType, Screens, useStore, useTheme } from 'aries-bifold'
import { Button, ButtonType, Screens, useStore, useTheme, CredentialCard } from 'aries-bifold'
import React, { useState, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View, Dimensions, TouchableOpacity, Linking, ScrollView, SafeAreaView } from 'react-native'
import { StyleSheet, Text, View, TouchableOpacity, Linking, FlatList } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'

import CredentialOfferTrigger from '../components/CredentialOfferTrigger'
import LoadingIcon from '../components/LoadingIcon'
Expand All @@ -18,13 +19,6 @@ const PersonCredential: React.FC = () => {
const [workflowInProgress, setWorkflowInProgress] = useState<boolean>(false)
const [workflowConnectionId, setWorkflowConnectionId] = useState<string | undefined>()

const transparent = 'rgba(0,0,0,0)'
const borderRadius = 15
const borderPadding = 8
const { width } = Dimensions.get('window')
const cardHeight = width / 2 // a card height is half of the screen width
const cardHeaderHeight = cardHeight / 4 // a card has a total of 4 rows, and the header occupy 1 row

const { ColorPallet, TextTheme } = useTheme()
const { t } = useTranslation()

Expand All @@ -34,42 +28,15 @@ const PersonCredential: React.FC = () => {
},
pageContent: {
marginHorizontal: 20,
flex: 1,
flexGrow: 1,
justifyContent: 'space-between',
},
pageTextContainer: {
display: 'flex',
flexDirection: 'row',
},
container: {
backgroundColor: ColorPallet.brand.primaryBackground,
height: cardHeight,
paddingTop: 15,
marginBottom: 20,
},
outerHeaderContainer: {
flexDirection: 'column',
backgroundColor: transparent,
height: cardHeaderHeight + borderPadding,
borderTopLeftRadius: borderRadius,
borderTopRightRadius: borderRadius,
},
innerHeaderContainer: {
flexDirection: 'row',
margin: borderPadding,
backgroundColor: transparent,
},
buttonContainer: {
flexGrow: 1,
justifyContent: 'flex-end',
marginBottom: 20,
credentialCardContainer: {
marginVertical: 20,
},
button: {
marginBottom: 15,
},
flexGrow: {
flexGrow: 1,
},
})

const dismissPersonCredentialOffer = useCallback(() => {
Expand All @@ -92,46 +59,75 @@ const PersonCredential: React.FC = () => {
)
}, [])

const personCredentialAttributes = {
credName: 'Person',
credDefId: 'RGjWbW1eycP7FrMf4QJvX8:3:CL:13:Person',
schemaId: 'XUxBrVSALWHLeycAUhrNr9:2:Person:1.0',
attributes: [
{ name: 'given_names', value: t('PersonCredential.GivenName') },
{ name: 'family_name', value: t('PersonCredential.FamilyName') },
],
}

const personPageFooter = () => {
return (
<View>
<View style={styles.button}>
<Button
title={t('PersonCredential.GetCredential')}
accessibilityLabel={t('PersonCredential.GetCredential')}
onPress={onBCIDPress}
disabled={workflowInProgress}
buttonType={ButtonType.Primary}
>
{workflowInProgress && (
<LoadingIcon color={ColorPallet.grayscale.white} size={35} active={workflowInProgress} />
)}
</Button>
</View>
<View style={styles.button}>
<Button
title={t('PersonCredential.Decline')}
accessibilityLabel={t('PersonCredential.Decline')}
onPress={dismissPersonCredentialOffer}
buttonType={ButtonType.Secondary}
></Button>
</View>
</View>
)
}
return (
<>
<SafeAreaView style={styles.pageContainer}>
<ScrollView contentContainerStyle={[styles.pageContent]}>
<View>
<View>
<Text style={TextTheme.normal}>
{t('PersonCredential.Description') + ' '}
<TouchableOpacity onPress={getBCServicesCardApp}>
<Text style={{ ...TextTheme.normal, color: ColorPallet.brand.link }}>
{t('PersonCredential.LinkDescription')}
<SafeAreaView style={styles.pageContainer} edges={['bottom', 'left', 'right']}>
<View style={styles.pageContent}>
<FlatList
data={[personCredentialAttributes]}
ListFooterComponent={personPageFooter}
contentContainerStyle={{ flexGrow: 1 }}
ListFooterComponentStyle={{ flex: 1, justifyContent: 'flex-end' }}
renderItem={({ item }) => {
return (
<View>
<View style={styles.credentialCardContainer}>
<CredentialCard
credDefId={item.credDefId}
schemaId={item.schemaId}
displayItems={item.attributes}
/>
</View>
<Text style={TextTheme.normal}>
{t('PersonCredential.Description') + ' '}
<TouchableOpacity onPress={getBCServicesCardApp}>
<Text style={{ ...TextTheme.normal, color: ColorPallet.brand.link }}>
{t('PersonCredential.LinkDescription')}
</Text>
</TouchableOpacity>
</Text>
</TouchableOpacity>
</Text>
</View>
</View>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<Button
title={t('PersonCredential.GetCredential')}
accessibilityLabel={t('PersonCredential.GetCredential')}
onPress={onBCIDPress}
disabled={workflowInProgress}
buttonType={ButtonType.Primary}
>
{workflowInProgress && (
<LoadingIcon color={ColorPallet.grayscale.white} size={35} active={workflowInProgress} />
)}
</Button>
</View>
<View style={styles.button}>
<Button
title={t('PersonCredential.Decline')}
accessibilityLabel={t('PersonCredential.Decline')}
onPress={dismissPersonCredentialOffer}
buttonType={ButtonType.Secondary}
></Button>
</View>
</View>
</ScrollView>
</View>
)
}}
/>
</View>
</SafeAreaView>
<CredentialOfferTrigger workflowConnectionId={workflowConnectionId} />
</>
Expand Down
4 changes: 2 additions & 2 deletions app/src/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -595,8 +595,8 @@ export const Assets = {
logoSecondary: {
src: require('./assets/img/logo-large.png'),
aspectRatio: 1,
height: '33%',
width: '33%',
height: 120,
width: 120,
resizeMode: 'contain',
},
logoPrimary: {
Expand Down
2 changes: 1 addition & 1 deletion bifold

0 comments on commit fedc88b

Please sign in to comment.