feat: alt person flow framing skeleton

app/__tests__/screens/__snapshots__/Developer.test.tsx.snap

@@ -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>

app/container-imp.ts

@@ -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'
@@ -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
@@ -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) => {
@@ -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,
@@ -380,6 +383,7 @@ export class AppContainer implements Container {
             sessionId: remoteDebugging.sessionId,
           },
           enableProxy,
+          enableAltPersonFlow,
         },
       }
 

app/ios/Podfile.lock

@@ -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):
@@ -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

app/package.json

@@ -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",

app/src/localization/en/index.ts

@@ -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",
@@ -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",
@@ -132,6 +135,7 @@ const translation = {
     "Toggle": "Toggle Developer Mode",
     "AttestationSupport": "Attestation support",
     "EnableProxy": "Enable proxy",
+    "EnableAltPersonFlow": "Alt Person flow",
   },
   "Tips": {
     "Header": "Tips",

app/src/localization/fr/index.ts

@@ -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é",
@@ -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",
@@ -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",

app/src/localization/pt-br/index.ts

@@ -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)",
@@ -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)",
@@ -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)",

app/src/navigators/VerifiedPersonStack.tsx

@@ -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

app/src/navigators/navigators.ts

@@ -0,0 +1,9 @@
+export enum BCScreens {
+  VerificationSteps = 'VerificationSteps',
+  ChooseID = 'ChooseID',
+}
+
+export type BCVerifiedPersonStackParams = {
+  [BCScreens.VerificationSteps]: undefined
+  [BCScreens.ChooseID]: undefined
+}

app/src/screens/ChooseID.tsx

@@ -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

app/src/screens/Developer.tsx

@@ -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({
@@ -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
@@ -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>
   )