Skip to content

Commit

Permalink
feat: alt person flow framing skeleton (#2228)
Browse files Browse the repository at this point in the history
Signed-off-by: Bryce McMath <[email protected]>
  • Loading branch information
bryce-mcmath authored Oct 21, 2024
1 parent faed084 commit 7233111
Show file tree
Hide file tree
Showing 15 changed files with 495 additions and 97 deletions.
93 changes: 93 additions & 0 deletions app/__tests__/screens/__snapshots__/Developer.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1225,6 +1225,99 @@ exports[`Developer Screen screen renders correctly 1`] = `
</View>
</View>
</View>
<View
style={
{
"backgroundColor": "#313132",
"padding": 24,
}
}
>
<View
style={
{
"flexDirection": "row",
}
}
>
<Text
style={
{
"color": "#FFFFFF",
"flex": 1,
"flexWrap": "wrap",
"fontSize": 21,
"fontWeight": "normal",
}
}
>
Developer.EnableAltPersonFlow
</Text>
<View
accessibilityLabel="Developer.EnableAltPersonFlow"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "space-between",
}
}
testID="com.ariesbifold:id/ToggleEnableAltPersonFlow"
>
<RCTSwitch
accessibilityRole="switch"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTintColor="rgba(53, 130, 63, 0.35)"
style={
[
{
"height": 31,
"width": 51,
},
{
"backgroundColor": "#D3D3D3",
"borderRadius": 16,
},
]
}
thumbTintColor="#606060"
tintColor="#D3D3D3"
value={false}
/>
</View>
</View>
</View>
</View>
</RCTScrollView>
</RNCSafeAreaView>
Expand Down
6 changes: 5 additions & 1 deletion app/container-imp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import { AttestationRestrictions, autoDisableRemoteLoggingIntervalInMinutes } fr
import { activate, deactivate, setup, status } from './src/helpers/PushNotificationsHelper'
import { expirationOverrideInMinutes } from './src/helpers/utils'
import { useNotifications } from './src/hooks/notifications'
import VerifiedPersonStack from './src/navigators/VerifiedPersonStack'
import Developer from './src/screens/Developer'
import { pages } from './src/screens/OnboardingPages'
import PersonCredential from './src/screens/PersonCredential'
Expand Down Expand Up @@ -330,6 +331,7 @@ export class AppContainer implements Container {
})

this._container.registerInstance(TOKENS.UTIL_PROOF_TEMPLATE, getProofRequestTemplates)
this._container.registerInstance(TOKENS.CUSTOM_NAV_STACK_1, VerifiedPersonStack)
this._container.registerInstance(TOKENS.LOAD_STATE, async (dispatch: React.Dispatch<ReducerAction<unknown>>) => {
const loadState = async <Type>(key: LocalStorageKeys | BCLocalStorageKeys, updateVal: (val: Type) => void) => {
const data = (await this.storage.getValueForKey(key)) as Type
Expand All @@ -344,7 +346,7 @@ export class AppContainer implements Container {
let tours = initialState.tours
let onboarding = initialState.onboarding
let personCredOfferDissmissed = initialState.dismissPersonCredentialOffer
let { environment, remoteDebugging, enableProxy } = initialState.developer
let { environment, remoteDebugging, enableProxy, enableAltPersonFlow } = initialState.developer

await Promise.all([
loadLoginAttempt().then((data) => {
Expand All @@ -363,6 +365,7 @@ export class AppContainer implements Container {
loadState<IASEnvironment>(BCLocalStorageKeys.Environment, (val) => (environment = val)),
loadState<RemoteDebuggingState>(BCLocalStorageKeys.RemoteDebugging, (val) => (remoteDebugging = val)),
loadState<boolean>(BCLocalStorageKeys.EnableProxy, (val) => (enableProxy = val)),
loadState<boolean>(BCLocalStorageKeys.EnableAltPersonFlow, (val) => (enableAltPersonFlow = val)),
])
const state: BCState = {
...initialState,
Expand All @@ -380,6 +383,7 @@ export class AppContainer implements Container {
sessionId: remoteDebugging.sessionId,
},
enableProxy,
enableAltPersonFlow,
},
}

Expand Down
4 changes: 2 additions & 2 deletions app/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -445,7 +445,7 @@ PODS:
- React-jsinspector (0.72.5)
- React-logger (0.72.5):
- glog
- "react-native-attestation (1.0.0-alpha.342+d7dbeef6)":
- "react-native-attestation (1.0.0-alpha.346+6366eb31)":
- RCT-Folly (= 2021.07.22.00)
- React-Core
- react-native-config (1.5.0):
Expand Down Expand Up @@ -931,7 +931,7 @@ SPEC CHECKSUMS:
React-jsiexecutor: ff70a72027dea5cc7d71cfcc6fad7f599f63987a
React-jsinspector: aef73cbd43b70675f572214d10fa438c89bf11ba
React-logger: 2e4aee3e11b3ec4fa6cfd8004610bbb3b8d6cca4
react-native-attestation: 2fce2f60bd1eaa80040509b63b941a16e44e4e2d
react-native-attestation: 9a66b5137d7d56d58c28efef378b1f579eec87e7
react-native-config: 5330c8258265c1e5fdb8c009d2cabd6badd96727
react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
react-native-get-random-values: a6ea6a8a65dc93e96e24a11105b1a9c8cfe1d72a
Expand Down
10 changes: 5 additions & 5 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@
"@formatjs/intl-relativetimeformat": "9.3.1",
"@hyperledger/anoncreds-react-native": "0.2.4",
"@hyperledger/aries-askar-react-native": "0.2.3",
"@hyperledger/aries-bifold-core": "1.0.0-alpha.342",
"@hyperledger/aries-bifold-remote-logs": "1.0.0-alpha.342",
"@hyperledger/aries-bifold-verifier": "1.0.0-alpha.342",
"@hyperledger/aries-oca": "1.0.0-alpha.342",
"@hyperledger/aries-react-native-attestation": "1.0.0-alpha.342",
"@hyperledger/aries-bifold-core": "1.0.0-alpha.346",
"@hyperledger/aries-bifold-remote-logs": "1.0.0-alpha.346",
"@hyperledger/aries-bifold-verifier": "1.0.0-alpha.346",
"@hyperledger/aries-oca": "1.0.0-alpha.346",
"@hyperledger/aries-react-native-attestation": "1.0.0-alpha.346",
"@hyperledger/indy-vdr-react-native": "0.2.2",
"@hyperledger/indy-vdr-shared": "0.2.2",
"@react-native-async-storage/async-storage": "1.15.11",
Expand Down
4 changes: 4 additions & 0 deletions app/src/localization/en/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ const translation = {
"Terms": "Terms of Use",
"Settings": "Menu",
"Preface": "BC Wallet",
"VerificationSteps": "Setup steps",
"ChooseID": "Choose your identification",
},
"PersonCredentialNotification": {
"Title": "Get your Person credential",
Expand All @@ -83,6 +85,7 @@ const translation = {
"WhatIsPersonCredentialLink": "What is a Person credential",
"WhereToUseLink": "Where to use",
"HelpLink": "Help",
"ScanOrTakePhotos": "Scan or take photos of your ID."
},
"NetInfo": {
"NoInternetConnectionTitle": "No internet connection",
Expand Down Expand Up @@ -132,6 +135,7 @@ const translation = {
"Toggle": "Toggle Developer Mode",
"AttestationSupport": "Attestation support",
"EnableProxy": "Enable proxy",
"EnableAltPersonFlow": "Alt Person flow",
},
"Tips": {
"Header": "Tips",
Expand Down
4 changes: 4 additions & 0 deletions app/src/localization/fr/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ const translation = {
"Terms": "Conditions générales d'utilisation",
"Settings": "Menu",
"Preface": "BC Wallet",
"VerificationSteps": "Setup steps (FR)",
"ChooseID": "Choose your identification (FR)",
},
"PersonCredentialNotification": {
"Title": "Obtener votre carte d'identité",
Expand All @@ -82,6 +84,7 @@ const translation = {
"WhatIsPersonCredentialLink": "Qu'est-ce qu'un justificatif personnel",
"WhereToUseLink": "Où l'utiliser",
"HelpLink": "Aide",
"ScanOrTakePhotos": "Scan or take photos of your ID. (FR)"
},
"NetInfo": {
"NoInternetConnectionTitle": "Aucune connection internet",
Expand Down Expand Up @@ -131,6 +134,7 @@ const translation = {
"Toggle": "Activer/Désactiver le mode développeur",
"AttestationSupport": "Soutien d'attestation",
"EnableProxy": "Enable proxy (FR)",
"EnableAltPersonFlow": "Alt Person flow (FR)",
},
"Tips": {
"Header": "Conseils",
Expand Down
4 changes: 4 additions & 0 deletions app/src/localization/pt-br/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ const translation = {
"Terms": "Terms of Use (PT-BR)",
"Settings": "Menu (PT-BR)",
"Preface": "BC Wallet",
"VerificationSteps": "Setup steps (PT-BR)",
"ChooseID": "Choose your identification (PT-BR)",
},
"PersonCredentialNotification": {
"Title": "Get your Person credential (PT-BR)",
Expand All @@ -82,6 +84,7 @@ const translation = {
"WhatIsPersonCredentialLink": "What is a Person credential (PT-BR)",
"WhereToUseLink": "Where to use (PT-BR)",
"HelpLink": "Help (PT-BR)",
"ScanOrTakePhotos": "Scan or take photos of your ID. (PT-BR)",
},
"NetInfo": {
"NoInternetConnectionTitle": "No internet connection (PT-BR)",
Expand Down Expand Up @@ -131,6 +134,7 @@ const translation = {
"Toggle": "Toggle Developer Mode",
"AttestationSupport": "Attestation support (PT-BR)",
"EnableProxy": "Enable proxy (PT-BR)",
"EnableAltPersonFlow": "Alt Person flow (PT-BR)",
},
"Tips": {
"Header": "Tips (PT-BR)",
Expand Down
59 changes: 59 additions & 0 deletions app/src/navigators/VerifiedPersonStack.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import {
ButtonLocation,
IconButton,
testIdWithKey,
useDefaultStackOptions,
useTheme,
} from '@hyperledger/aries-bifold-core'
import { createStackNavigator } from '@react-navigation/stack'
import { useTranslation } from 'react-i18next'
import ChooseID from '../screens/ChooseID'
import VerificationSteps from '../screens/VerificationSteps'

import { BCScreens, BCVerifiedPersonStackParams } from './navigators'

const VerifiedPersonStack: React.FC = () => {
const Stack = createStackNavigator<BCVerifiedPersonStackParams>()
const theme = useTheme()
const defaultStackOptions = useDefaultStackOptions(theme)
const { t } = useTranslation()

return (
<Stack.Navigator screenOptions={{ ...defaultStackOptions }}>
<Stack.Screen
name={BCScreens.VerificationSteps}
component={VerificationSteps}
options={{
title: t('Screens.VerificationSteps'),
headerRight: () => (
<IconButton
buttonLocation={ButtonLocation.Right}
icon={'help-circle'}
accessibilityLabel={t('PersonCredential.HelpLink')}
testID={testIdWithKey('Help')}
onPress={() => null}
/>
),
}}
/>
<Stack.Screen
name={BCScreens.ChooseID}
component={ChooseID}
options={{
title: t('Screens.ChooseID'),
headerRight: () => (
<IconButton
buttonLocation={ButtonLocation.Right}
icon={'help-circle'}
accessibilityLabel={t('PersonCredential.HelpLink')}
testID={testIdWithKey('Help')}
onPress={() => null}
/>
),
}}
/>
</Stack.Navigator>
)
}

export default VerifiedPersonStack
9 changes: 9 additions & 0 deletions app/src/navigators/navigators.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export enum BCScreens {
VerificationSteps = 'VerificationSteps',
ChooseID = 'ChooseID',
}

export type BCVerifiedPersonStackParams = {
[BCScreens.VerificationSteps]: undefined
[BCScreens.ChooseID]: undefined
}
21 changes: 21 additions & 0 deletions app/src/screens/ChooseID.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Text, View, StyleSheet } from 'react-native'

const ChooseID: React.FC = () => {
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
text: {
fontSize: 24,
},
})

return (
<View style={styles.container}>
<Text style={styles.text}>Placeholder</Text>
</View>
)
}

export default ChooseID
23 changes: 23 additions & 0 deletions app/src/screens/Developer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const Settings: React.FC = () => {
const [remoteLoggingEnabled, setRemoteLoggingEnabled] = useState(logger?.remoteLoggingEnabled)
const [enableShareableLink, setEnableShareableLink] = useState(!!store.preferences.enableShareableLink)
const [enableProxy, setEnableProxy] = useState(!!store.developer.enableProxy)
const [enableAltPersonFlow, setEnableAltPersonFlow] = useState(!!store.developer.enableAltPersonFlow)
const navigation = useNavigation()

const styles = StyleSheet.create({
Expand Down Expand Up @@ -260,6 +261,14 @@ const Settings: React.FC = () => {
setEnableProxy((previousState) => !previousState)
}

const toggleEnableAltPersonFlowSwitch = () => {
dispatch({
type: BCDispatchAction.TOGGLE_ALT_PERSON_FLOW,
payload: [!enableAltPersonFlow],
})
setEnableAltPersonFlow((previousState) => !previousState)
}

return (
<SafeAreaView edges={['bottom', 'left', 'right']}>
<Modal
Expand Down Expand Up @@ -450,6 +459,20 @@ const Settings: React.FC = () => {
value={enableProxy}
/>
</SectionRow>

<SectionRow
title={t('Developer.EnableAltPersonFlow')}
accessibilityLabel={t('Developer.EnableAltPersonFlow')}
testID={testIdWithKey('ToggleEnableAltPersonFlow')}
>
<Switch
trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
thumbColor={enableAltPersonFlow ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
ios_backgroundColor={ColorPallet.grayscale.lightGrey}
onValueChange={toggleEnableAltPersonFlowSwitch}
value={enableAltPersonFlow}
/>
</SectionRow>
</ScrollView>
</SafeAreaView>
)
Expand Down
Loading

0 comments on commit 7233111

Please sign in to comment.