-
Notifications
You must be signed in to change notification settings - Fork 1
/
BiometricsPreferenceScreen.tsx
66 lines (57 loc) · 2.87 KB
/
BiometricsPreferenceScreen.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import React, { FC } from 'react'
import { Box, ButtonTypesConstants, TextView, VAButton, VAScrollView } from 'components'
import { NAMESPACE } from 'constants/namespaces'
import { getSupportedBiometricA11yLabel, getSupportedBiometricText, getSupportedBiometricTranslationTag, getTranslation } from 'utils/formattingUtils'
import { AuthState, setBiometricsPreference, setDisplayBiometricsPreferenceScreen } from 'store/slices'
import { RootState } from 'store'
import { testIdProps } from 'utils/accessibility'
import { useAppDispatch, useTheme } from 'utils/hooks'
export type SyncScreenProps = Record<string, unknown>
const BiometricsPreferenceScreen: FC<SyncScreenProps> = () => {
const theme = useTheme()
const dispatch = useAppDispatch()
const { t } = useTranslation(NAMESPACE.SETTINGS)
const { supportedBiometric } = useSelector<RootState, AuthState>((state) => state.auth)
const biometricsText = getSupportedBiometricText(supportedBiometric || '', t)
const biometricsA11yLabel = getSupportedBiometricA11yLabel(supportedBiometric || '', t)
const bodyText = getTranslation(`biometricsPreference.bodyText.${getSupportedBiometricTranslationTag(supportedBiometric || '')}`, t)
const onSkip = (): void => {
dispatch(setDisplayBiometricsPreferenceScreen(false))
}
const onUseBiometrics = (): void => {
dispatch(setBiometricsPreference(true))
dispatch(setDisplayBiometricsPreferenceScreen(false))
}
return (
<VAScrollView {...testIdProps('Biometrics-preference-page')}>
<Box mt={60} mb={theme.dimensions.contentMarginBottom} mx={theme.dimensions.gutter}>
<TextView variant="BitterBoldHeading" accessibilityRole="header" {...testIdProps(t('biometricsPreference.doYouWantToAllow.a11yLabel', { biometricsA11yLabel }))}>
{t('biometricsPreference.doYouWantToAllow', { biometricsText })}
</TextView>
<TextView variant="MobileBody" my={theme.dimensions.textAndButtonLargeMargin}>
{bodyText}
{t('biometricsPreference.youCanAlwaysChangeThis')}
</TextView>
<VAButton
onPress={onUseBiometrics}
label={t('biometricsPreference.useBiometric', { biometricsText })}
testID={t('biometricsPreference.useBiometric', { biometricsText })}
buttonType={ButtonTypesConstants.buttonPrimary}
a11yHint={t('biometricsPreference.useBiometricA11yHint')}
/>
<Box mt={theme.dimensions.standardMarginBetween}>
<VAButton
onPress={onSkip}
label={t('biometricsPreference.skip')}
testID={t('biometricsPreference.skip')}
buttonType={ButtonTypesConstants.buttonSecondary}
a11yHint={t('biometricsPreference.skipA11yHint')}
/>
</Box>
</Box>
</VAScrollView>
)
}
export default BiometricsPreferenceScreen