feat: qr scanner optional configuration (openwallet-foundation#1034)

Signed-off-by: Caroline Lucas Calheirani <ccalheirani@gmail.com>
petridishdev · Dec 5, 2023 · eaa07a2 · eaa07a2
1 parent a6ed691
commit eaa07a2
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 68 deletions.
diff --git a/packages/legacy/core/App/components/misc/QRScanner.tsx b/packages/legacy/core/App/components/misc/QRScanner.tsx
@@ -6,6 +6,7 @@ import { BarCodeReadEvent, RNCamera } from 'react-native-camera'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 import { hitSlop } from '../../constants'
+import { useConfiguration } from '../../contexts/configuration'
 import { useTheme } from '../../contexts/theme'
 import { QrCodeScanError } from '../../types/error'
 import { Screens } from '../../types/navigators'
@@ -22,6 +23,7 @@ interface Props {
 
 const QRScanner: React.FC<Props> = ({ handleCodeScan, error, enableCameraOnError }) => {
   const navigation = useNavigation()
+  const { showScanHelp, showScanButton } = useConfiguration()
   const [cameraActive, setCameraActive] = useState(true)
   const [torchActive, setTorchActive] = useState(false)
   const [showInfoBox, setShowInfoBox] = useState(false)
@@ -44,14 +46,23 @@ const QRScanner: React.FC<Props> = ({ handleCodeScan, error, enableCameraOnError
       justifyContent: 'center',
       alignItems: 'center',
     },
-    errorContainer: {
+    messageContainer: {
+      marginHorizontal: 40,
       flexDirection: 'row',
       alignItems: 'center',
+      alignSelf: 'center',
+      paddingTop: 30,
     },
     icon: {
       color: ColorPallet.grayscale.white,
       padding: 4,
     },
+    textStyle: {
+      ...TextTheme.title,
+      color: 'white',
+      marginHorizontal: 10,
+      textAlign: 'center',
+    },
   })
 
   const styleForState = ({ pressed }: { pressed: boolean }) => [{ opacity: pressed ? 0.2 : 1 }]
@@ -111,54 +122,54 @@ const QRScanner: React.FC<Props> = ({ handleCodeScan, error, enableCameraOnError
         }}
       >
         <View style={{ flex: 1 }}>
-          <View style={styles.errorContainer}>
+          <View style={styles.messageContainer}>
             {error ? (
               <>
-                <Icon style={styles.icon} name="cancel" size={30} />
-                <Text
-                  testID={testIdWithKey('ErrorMessage')}
-                  style={[TextTheme.caption, { color: ColorPallet.grayscale.white }]}
-                >
+                <Icon style={styles.icon} name="cancel" size={40} />
+                <Text testID={testIdWithKey('ErrorMessage')} style={styles.textStyle}>
                   {error.message}
                 </Text>
               </>
             ) : (
-              <Text style={[TextTheme.caption, { color: ColorPallet.grayscale.white, height: 30, margin: 4 }]}> </Text>
+              <>
+                <Icon name="qrcode-scan" size={40} style={styles.icon} />
+                <Text style={styles.textStyle}>{t('Scan.WillScanAutomatically')}</Text>
+              </>
             )}
           </View>
-          <View style={{ flexDirection: 'row', marginHorizontal: 40, alignItems: 'center' }}>
-            <Icon name="qrcode-scan" size={46} style={{ color: 'white' }} />
-            <Text style={{ color: 'white', fontSize: 21, marginHorizontal: 10 }}>
-              A valid QR code will scan automatically.
-            </Text>
-          </View>
           <View style={styles.viewFinderContainer}>
             <View style={styles.viewFinder} />
           </View>
-          <View style={{ justifyContent: 'center', alignItems: 'center' }}>
-            <Pressable
-              accessibilityLabel={t('Scan.ScanNow')}
-              accessibilityRole={'button'}
-              testID={testIdWithKey('ScanNow')}
-              onPress={toggleShowInfoBox}
-              style={styleForState}
-              hitSlop={hitSlop}
-            >
-              <Icon name="circle-outline" size={60} style={{ color: 'white', marginBottom: -15 }} />
-            </Pressable>
-          </View>
+          {showScanButton && (
+            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+              <Pressable
+                accessibilityLabel={t('Scan.ScanNow')}
+                accessibilityRole={'button'}
+                testID={testIdWithKey('ScanNow')}
+                onPress={toggleShowInfoBox}
+                style={styleForState}
+                hitSlop={hitSlop}
+              >
+                <Icon name="circle-outline" size={60} style={{ color: 'white', marginBottom: -15 }} />
+              </Pressable>
+            </View>
+          )}
+
           <View style={{ marginHorizontal: 24, height: 24, marginBottom: 60, flexDirection: 'row' }}>
-            <Pressable
-              accessibilityLabel={t('Scan.ScanHelp')}
-              accessibilityRole={'button'}
-              testID={testIdWithKey('ScanHelp')}
-              // @ts-ignore
-              onPress={() => navigation.navigate(Screens.ScanHelp)}
-              style={styleForState}
-              hitSlop={hitSlop}
-            >
-              <Icon name="help-circle" size={24} style={{ color: 'white' }} />
-            </Pressable>
+            {showScanHelp && (
+              <Pressable
+                accessibilityLabel={t('Scan.ScanHelp')}
+                accessibilityRole={'button'}
+                testID={testIdWithKey('ScanHelp')}
+                // @ts-ignore
+                onPress={() => navigation.navigate(Screens.ScanHelp)}
+                style={styleForState}
+                hitSlop={hitSlop}
+              >
+                <Icon name="help-circle" size={24} style={{ color: 'white' }} />
+              </Pressable>
+            )}
+
             <View style={{ width: 10, marginLeft: 'auto' }} />
             <QRScannerTorch active={torchActive} onPress={() => setTorchActive(!torchActive)} />
           </View>

diff --git a/packages/legacy/core/App/components/misc/QRScannerTorch.tsx b/packages/legacy/core/App/components/misc/QRScannerTorch.tsx
@@ -26,8 +26,7 @@ function createStyles({ ColorPallet }: ITheme) {
       marginBottom: 50,
     },
     icon: {
-      marginLeft: 2,
-      marginTop: 2,
+      alignItems: 'center',
     },
   })
 }

diff --git a/packages/legacy/core/App/contexts/configuration.tsx b/packages/legacy/core/App/contexts/configuration.tsx
@@ -1,13 +1,14 @@
 import { IndyVdrPoolConfig } from '@aries-framework/indy-vdr'
 import { ProofRequestTemplate } from '@hyperledger/aries-bifold-verifier'
 import { OCABundleResolverType } from '@hyperledger/aries-oca/build/legacy'
+import { StackScreenProps } from '@react-navigation/stack'
 import { createContext, ReducerAction, useContext } from 'react'
 
 import { EmptyListProps } from '../components/misc/EmptyList'
 import { RecordProps } from '../components/record/Record'
 import { Locales } from '../localization'
 import OnboardingPages from '../screens/OnboardingPages'
-import { ScanProps } from '../screens/Scan'
+import { ConnectStackParams } from '../types/navigators'
 import { PINSecurityParams } from '../types/security'
 import { SettingSection } from '../types/settings'
 
@@ -33,7 +34,7 @@ export interface ConfigurationContext {
   developer: React.FC
   OCABundleResolver: OCABundleResolverType
   proofTemplateBaseUrl?: string
-  scan: React.FC<ScanProps>
+  scan: React.FC<StackScreenProps<ConnectStackParams>>
   record: React.FC<RecordProps>
   PINSecurity: PINSecurityParams
   indyLedgers: IndyVdrPoolConfig[]
@@ -51,6 +52,8 @@ export interface ConfigurationContext {
   useBiometry: React.FC
   useCustomNotifications: () => { total: number; notifications: any }
   whereToUseWalletUrl: string
+  showScanHelp?: boolean
+  showScanButton?: boolean
 }
 
 export const ConfigurationContext = createContext<ConfigurationContext>(null as unknown as ConfigurationContext)

diff --git a/packages/legacy/core/App/defaultConfiguration.ts b/packages/legacy/core/App/defaultConfiguration.ts
@@ -55,4 +55,6 @@ export const defaultConfiguration: ConfigurationContext = {
   useCustomNotifications: useNotifications,
   useBiometry: UseBiometry,
   whereToUseWalletUrl: 'https://example.com',
+  showScanHelp: true,
+  showScanButton: true,
 }
diff --git a/packages/legacy/core/App/screens/ScanHelp.tsx b/packages/legacy/core/App/screens/ScanHelp.tsx
@@ -19,7 +19,7 @@ const ScanHelp: React.FC = () => {
     },
     scrollView: {
       flexGrow: 1,
-      paddingHorizontal: 26,
+      padding: 26,
     },
     text: {
       ...TextTheme.normal,

diff --git a/packages/legacy/core/App/screens/WhatAreContacts.tsx b/packages/legacy/core/App/screens/WhatAreContacts.tsx
@@ -62,8 +62,10 @@ const WhatAreContacts: React.FC<WhatAreContactsProps> = ({ navigation }) => {
         <Text style={styles.title}>{t('WhatAreContacts.Title')}</Text>
         <Text style={TextTheme.normal}>{t('WhatAreContacts.Preamble')}</Text>
         {bulletPoints}
-        <Text style={TextTheme.normal}>{`${t('WhatAreContacts.RemoveContacts')} `}</Text>
-        <Link linkText={t('WhatAreContacts.ContactsLink')} onPress={goToContactList} />
+        <Text style={TextTheme.normal}>
+          {`${t('WhatAreContacts.RemoveContacts')} `}
+          <Link linkText={t('WhatAreContacts.ContactsLink')} onPress={goToContactList} />
+        </Text>
       </ScrollView>
     </SafeAreaView>
   )

diff --git a/packages/legacy/core/__tests__/screens/Scan.test.tsx b/packages/legacy/core/__tests__/screens/Scan.test.tsx
@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/core'
 import { render, waitFor } from '@testing-library/react-native'
 import React from 'react'
-
+import { useConfiguration } from '../../App/contexts/configuration'
 import Scan from '../../App/screens/Scan'
 
 jest.mock('react-native-permissions', () => require('react-native-permissions/mock'))
@@ -15,10 +15,14 @@ jest.mock('@react-navigation/native', () => {
 jest.mock('react-native-camera', () => {
   return require('../../__mocks__/custom/react-native-camera')
 })
-
+jest.mock('../../App/contexts/configuration', () => ({
+  useConfiguration: jest.fn(),
+}))
 
 describe('Scan Screen', () => {
   beforeEach(() => {
+    // @ts-ignore-next-line
+    useConfiguration.mockReturnValue({ showScanHelp: true, showScanButton: true })
     jest.clearAllMocks()
   })
 

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/ScanHelp.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/ScanHelp.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`ScanHelp Screen Renders correctly 1`] = `
     contentContainerStyle={
       Object {
         "flexGrow": 1,
-        "paddingHorizontal": 26,
+        "padding": 26,
       }
     }
   >

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/WhatAreContacts.test.tsx.snap
@@ -204,27 +204,27 @@ exports[`WhatAreContacts Screen Renders correctly 1`] = `
         }
       >
         WhatAreContacts.RemoveContacts 
-      </Text>
-      <Text
-        accessibilityLabel="WhatAreContacts.ContactsLink"
-        accessibilityRole="link"
-        accessible={true}
-        onPress={[Function]}
-        style={
-          Array [
-            Object {
-              "alignSelf": "flex-start",
-              "color": "#FFFFFF",
-              "fontSize": 18,
-              "fontWeight": "normal",
-              "textDecorationLine": "underline",
-            },
-            Object {},
-          ]
-        }
-        testID="com.ariesbifold:id/WhatAreContacts.ContactsLink"
-      >
-        WhatAreContacts.ContactsLink
+        <Text
+          accessibilityLabel="WhatAreContacts.ContactsLink"
+          accessibilityRole="link"
+          accessible={true}
+          onPress={[Function]}
+          style={
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "color": "#FFFFFF",
+                "fontSize": 18,
+                "fontWeight": "normal",
+                "textDecorationLine": "underline",
+              },
+              Object {},
+            ]
+          }
+          testID="com.ariesbifold:id/WhatAreContacts.ContactsLink"
+        >
+          WhatAreContacts.ContactsLink
+        </Text>
       </Text>
     </View>
   </RCTScrollView>