Skip to content

Commit

Permalink
feat: update onboarding, add in preface scrn (#1573)
Browse files Browse the repository at this point in the history 
Signed-off-by: Bryce McMath <[email protected]>
  • Loading branch information
@bryce-mcmath
bryce-mcmath authored Oct 31, 2023
1 parent 3070120 commit cab32f3
Show file tree
Hide file tree
Showing 8 changed files with 244 additions and 80 deletions.
3 changes: 3 additions & 0 deletions app/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { useProofRequestTemplates } from './request-templates'
import Developer from './screens/Developer'
import { pages } from './screens/OnboardingPages'
import PersonCredential from './screens/PersonCredential'
import Preface from './screens/Preface'
import Splash from './screens/Splash'
import Terms from './screens/Terms'
import { BCDispatchAction } from './store'
Expand All @@ -33,6 +34,7 @@ const configuration: ConfigurationContext = {
pages,
splash: Splash,
terms: Terms,
preface: Preface,
homeFooterView: HomeFooterView,
credentialListHeaderRight: AddCredentialButton,
credentialListOptions: AddCredentialSlider,
Expand Down Expand Up @@ -63,6 +65,7 @@ const configuration: ConfigurationContext = {
useCustomNotifications: useNotifications,
proofRequestTemplates: useProofRequestTemplates,
enableTours: true,
showPreface: true,
}

export default { theme, localization, configuration }
24 changes: 13 additions & 11 deletions app/src/localization/en/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,25 @@ const translation = {
"AddFirstCredential": "Add your first credential"
},
"Onboarding": {
"Welcome": "Welcome",
"WelcomeParagraph1": "BC Wallet lets you receive, store and use digital credentials.",
"WelcomeParagraph2": "It is highly secure, and helps protect your privacy online.",
"WelcomeParagraph3": "BC Wallet is currently in its early stages and the technology is being explored. Most people will not have a use for BC Wallet yet, because very few digital credentials are available.",
"StoredSecurelyTitle": "Digital credentials, stored securely",
"StoredSecurelyBody": "BC Wallet holds digital credentials—the digital versions of things like licenses, identities and permits.\n\nThey are stored securely, only on this device.",
"UsingCredentialsTitle": "Receiving and using credentials",
"UsingCredentialsBody": "To receive and use credentials you use the “Scan” feature in the app to scan a special QR code.\n\nInformation is sent and received over a private, encrypted connection.",
"PrivacyConfidentiality": "Privacy and confidentiality",
"PrivacyParagraph": "You approve every use of information from your BC Wallet. You also only share what is needed for a situation.\n\nThe Government of British Columbia is not told when you use your digital credentials.",
"DifferentWalletHeading": "A different smart wallet",
"DifferentWalletParagraph": "Unlike other digital wallets, BC Wallet helps you prove who you are in-person or online by storing and using digital credentials issued by participating services.\n\nInteract with confidence with individuals and organisations you trust.",
"DigitalCredentialsHeading": "Digital credentials",
"DigitalCredentialsParagraph": "Digital credentials are the electronic equivalent of physical credentials such as certifications and permits offered by participating services.\n\nServices are simplified and expedited as organisations and individuals can confirm who you are with trusted information from digital credentials.",
"PrivateConfidentialHeading": "Private and confidential",
"PrivateConfidentialParagraph": "Your privacy is important.\n\nThe B.C. government doesn't know when you use digital credentials, unless you're interacting with them. No analytics are recorded.\n\nYou approve every use of your digital credentials, and only provide the information that's needed.",
"GetStarted": "Get Started",
"SkipA11y": "Skip introduction to BC Wallet",
},
"Preface": {
"Paragraph1": "Most people will not have a need for BC Wallet because very few digital credentials are currently available.",
"Link1": "See where you can use BC Wallet",
"Paragraph2": "If BC Wallet isn't what you're looking for but you're curious, check out our",
"Link2": "BC Wallet showcase",
},
"Screens": {
"Onboarding": "BC Wallet",
"Terms": "End User License Agreement",
"Settings": "Menu",
"Preface": "BC Wallet",
},
"PersonCredentialNotification": {
"Title": "Get your Person credential",
Expand Down
24 changes: 13 additions & 11 deletions app/src/localization/fr/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,25 @@ const translation = {
"AddFirstCredential": "Add your first credential (FR)"
},
"Onboarding": {
"Welcome": "Welcome (FR)",
"WelcomeParagraph1": "BC Wallet lets you receive, store and use digital credentials. (FR)",
"WelcomeParagraph2": "It is highly secure, and helps protect your privacy online. (FR)",
"WelcomeParagraph3": "BC Wallet is currently in its early stages and the technology is being explored. Most people will not have a use for BC Wallet yet, because very few digital credentials are available. (FR)",
"StoredSecurelyTitle": "Digital credentials, stored securely (FR)",
"StoredSecurelyBody": "BC Wallet holds digital credentials—the digital versions of things like licenses, identities and permits.\n\nThey are stored securely, only on this device. (FR)",
"UsingCredentialsTitle": "Receiving and using credentials (FR)",
"UsingCredentialsBody": "To receive and use credentials you use the “Scan” feature in the app to scan a special QR code.\n\nInformation is sent and received over a private, encrypted connection. (FR)",
"PrivacyConfidentiality": "Privacy and confidentiality (FR)",
"PrivacyParagraph": "You approve every use of information from your BC Wallet. You also only share what is needed for a situation.\n\nThe Government of British Columbia is not told when you use your digital credentials. (FR)",
"DifferentWalletHeading": "A different smart wallet (FR)",
"DifferentWalletParagraph": "Unlike other digital wallets, BC Wallet helps you prove who you are in-person or online by storing and using digital credentials issued by participating services.\n\nInteract with confidence with individuals and organisations you trust. (FR)",
"DigitalCredentialsHeading": "Digital credentials (FR)",
"DigitalCredentialsParagraph": "Digital credentials are the electronic equivalent of physical credentials such as certifications and permits offered by participating services.\n\nServices are simplified and expedited as organisations and individuals can confirm who you are with trusted information from digital credentials. (FR)",
"PrivateConfidentialHeading": "Private and confidential (FR)",
"PrivateConfidentialParagraph": "Your privacy is important.\n\nThe B.C. government doesn't know when you use digital credentials, unless you're interacting with them. No analytics are recorded.\n\nYou approve every use of your digital credentials, and only provide the information that’s needed. (FR)",
"GetStarted": "Get Started (FR)",
"SkipA11y": "Skip introduction to BC Wallet (FR)",
},
"Preface": {
"Paragraph1": "Most people will not have a need for BC Wallet because very few digital credentials are currently available. (FR)",
"Link1": "See where you can use BC Wallet (FR)",
"Paragraph2": "If BC Wallet isn't what you're looking for but you're curious, check out our (FR)",
"Link2": "BC Wallet showcase (FR)",
},
"Screens": {
"Onboarding": "BC Wallet (FR)",
"Terms": "End User License Agreement",
"Settings": "Menu (FR)",
"Preface": "BC Wallet",
},
"PersonCredentialNotification": {
"Title": "Get your Person credential (FR)",
Expand Down
24 changes: 13 additions & 11 deletions app/src/localization/pt-br/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,25 @@ const translation = {
"AddFirstCredential": "Add your first credential (PT-BR)"
},
"Onboarding": {
"Welcome": "Welcome (PT-BR)",
"WelcomeParagraph1": "BC Wallet lets you receive, store and use digital credentials. (PT-BR)",
"WelcomeParagraph2": "It is highly secure, and helps protect your privacy online. (PT-BR)",
"WelcomeParagraph3": "BC Wallet is currently in its early stages and the technology is being explored. Most people will not have a use for BC Wallet yet, because very few digital credentials are available. (PT-BR)",
"StoredSecurelyTitle": "Digital credentials, stored securely (PT-BR)",
"StoredSecurelyBody": "BC Wallet holds digital credentials—the digital versions of things like licenses, identities and permits.\n\nThey are stored securely, only on this device. (PT-BR)",
"UsingCredentialsTitle": "Receiving and using credentials (PT-BR)",
"UsingCredentialsBody": "To receive and use credentials you use the “Scan” feature in the app to scan a special QR code.\n\nInformation is sent and received over a private, encrypted connection. (PT-BR)",
"PrivacyConfidentiality": "Privacy and confidentiality (PT-BR)",
"PrivacyParagraph": "You approve every use of information from your BC Wallet. You also only share what is needed for a situation.\n\nThe Government of British Columbia is not told when you use your digital credentials. (PT-BR)",
"DifferentWalletHeading": "A different smart wallet (PT-BR)",
"DifferentWalletParagraph": "Unlike other digital wallets, BC Wallet helps you prove who you are in-person or online by storing and using digital credentials issued by participating services.\n\nInteract with confidence with individuals and organisations you trust. (PT-BR)",
"DigitalCredentialsHeading": "Digital credentials (PT-BR)",
"DigitalCredentialsParagraph": "Digital credentials are the electronic equivalent of physical credentials such as certifications and permits offered by participating services.\n\nServices are simplified and expedited as organisations and individuals can confirm who you are with trusted information from digital credentials. (PT-BR)",
"PrivateConfidentialHeading": "Private and confidential (PT-BR)",
"PrivateConfidentialParagraph": "Your privacy is important.\n\nThe B.C. government doesn't know when you use digital credentials, unless you're interacting with them. No analytics are recorded.\n\nYou approve every use of your digital credentials, and only provide the information that’s needed. (PT-BR)",
"GetStarted": "Get Started (PT-BR)",
"SkipA11y": "Skip introduction to BC Wallet (PT-BR)",
},
"Preface": {
"Paragraph1": "Most people will not have a need for BC Wallet because very few digital credentials are currently available. (PT-BR)",
"Link1": "See where you can use BC Wallet (PT-BR)",
"Paragraph2": "If BC Wallet isn't what you're looking for but you're curious, check out our (PT-BR)",
"Link2": "BC Wallet showcase (PT-BR)",
},
"Screens": {
"Onboarding": "BC Wallet (PT-BR)",
"Terms": "End User License Agreement (PT-BR)",
"Settings": "Menu (PT-BR)",
"Preface": "BC Wallet",
},
"PersonCredentialNotification": {
"Title": "Get your Person credential (PT-BR)",
Expand Down
103 changes: 69 additions & 34 deletions app/src/screens/OnboardingPages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ import {
DispatchAction,
Screens,
OnboardingStackParams,
ContentGradient,
} from 'aries-bifold'
import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Text, TouchableWithoutFeedback, View } from 'react-native'
import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
import { SvgProps } from 'react-native-svg'

Expand All @@ -31,24 +32,42 @@ const EndPage = (onTutorialCompleted: GenericFn, theme: ITheme['OnboardingTheme'
height: 180,
width: 180,
}

const styles = StyleSheet.create({
scrollView: {
flex: 1,
backgroundColor: theme.container.backgroundColor,
padding: 20,
},
pageContainer: {
height: '100%',
justifyContent: 'space-between',
},
controlsContainer: {
marginBottom: 20,
marginTop: 'auto',
marginHorizontal: 20,
position: 'relative',
},
imageContainer: {
alignItems: 'center',
marginBottom: 10,
},
})
return (
<>
<ScrollView style={{ padding: 20 }}>
<View style={{ alignItems: 'center' }}>
<View style={styles.pageContainer}>
<ScrollView contentContainerStyle={styles.scrollView}>
<View style={styles.imageContainer}>
<SecureImage {...imageDisplayOptions} />
</View>
<View style={{ marginBottom: 20 }}>
<Text style={[defaultStyle.headerText, { fontSize: 18 }]}>{t('Onboarding.PrivacyConfidentiality')}</Text>
<Text style={[defaultStyle.bodyText, { marginTop: 25 }]}>{t('Onboarding.PrivacyParagraph')}</Text>
<Text style={[defaultStyle.headerText, { fontSize: 26 }]}>{t('Onboarding.PrivateConfidentialHeading')}</Text>
<Text style={[defaultStyle.bodyText, { marginTop: 20 }]}>{t('Onboarding.PrivateConfidentialParagraph')}</Text>
</View>
</ScrollView>
{!(store.onboarding.didCompleteTutorial && store.authentication.didAuthenticate) && (
<View
style={{
marginTop: 'auto',
margin: 20,
}}
>
<View style={styles.controlsContainer}>
<ContentGradient backgroundColor={theme.container.backgroundColor} height={30} />
<Button
title={t('Onboarding.GetStarted')}
accessibilityLabel={t('Onboarding.GetStarted')}
Expand All @@ -58,17 +77,23 @@ const EndPage = (onTutorialCompleted: GenericFn, theme: ITheme['OnboardingTheme'
/>
</View>
)}
</>
</View>
)
}

const StartPages = (theme: ITheme) => {
const StartPage = (theme: ITheme['OnboardingTheme']) => {
const { t } = useTranslation()
const defaultStyle = createStyles(theme)
const [store, dispatch] = useStore()
const developerOptionCount = useRef(0)
const touchCountToEnableBiometrics = 9
const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
const styles = StyleSheet.create({
imageContainer: {
alignItems: 'center',
marginBottom: 10,
},
})

const incrementDeveloperMenuCounter = () => {
if (developerOptionCount.current >= touchCountToEnableBiometrics) {
Expand All @@ -84,17 +109,26 @@ const StartPages = (theme: ITheme) => {
developerOptionCount.current = developerOptionCount.current + 1
}

const imageDisplayOptions = {
fill: theme.imageDisplayOptions.fill,
height: 180,
width: 180,
}

return (
<ScrollView style={{ padding: 20, paddingTop: 30 }}>
<TouchableWithoutFeedback
onPress={incrementDeveloperMenuCounter}
disabled={store.preferences.developerModeEnabled}
>
<Text style={[defaultStyle.headerText]}>{t('Onboarding.Welcome')}</Text>
</TouchableWithoutFeedback>
<Text style={[defaultStyle.bodyText, { marginTop: 25 }]}>{t('Onboarding.WelcomeParagraph1')}</Text>
<Text style={[defaultStyle.bodyText, { marginTop: 25 }]}>{t('Onboarding.WelcomeParagraph2')}</Text>
<Text style={[defaultStyle.bodyText, { marginTop: 25 }]}>{t('Onboarding.WelcomeParagraph3')}</Text>
<ScrollView style={{ padding: 20 }}>
<View style={styles.imageContainer}>
<ScanShare {...imageDisplayOptions} />
</View>
<View style={{ marginBottom: 20 }}>
<TouchableWithoutFeedback
onPress={incrementDeveloperMenuCounter}
disabled={store.preferences.developerModeEnabled}
>
<Text style={[defaultStyle.headerText, { fontSize: 26 }]}>{t('Onboarding.DifferentWalletHeading')}</Text>
</TouchableWithoutFeedback>
<Text style={[defaultStyle.bodyText, { marginTop: 20 }]}>{t('Onboarding.DifferentWalletParagraph')}</Text>
</View>
</ScrollView>
)
}
Expand All @@ -106,13 +140,8 @@ const guides: Array<{
}> = [
{
image: CredentialList,
title: 'Onboarding.StoredSecurelyTitle',
body: 'Onboarding.StoredSecurelyBody',
},
{
image: ScanShare,
title: 'Onboarding.UsingCredentialsTitle',
body: 'Onboarding.UsingCredentialsBody',
title: 'Onboarding.DigitalCredentialsHeading',
body: 'Onboarding.DigitalCredentialsParagraph',
},
]

Expand All @@ -124,11 +153,17 @@ const CreatePageWith = (image: React.FC<SvgProps>, title: string, body: string,
height: 180,
width: 180,
}
const styles = StyleSheet.create({
imageContainer: {
alignItems: 'center',
marginBottom: 10,
},
})
return (
<ScrollView style={{ padding: 20 }}>
<View style={{ alignItems: 'center' }}>{image(imageDisplayOptions)}</View>
<View style={styles.imageContainer}>{image(imageDisplayOptions)}</View>
<View style={{ marginBottom: 20 }}>
<Text style={[defaultStyle.headerText, { fontSize: 18 }]}>{t(title)}</Text>
<Text style={[defaultStyle.headerText, { fontSize: 26 }]}>{t(title)}</Text>
<Text style={[defaultStyle.bodyText, { marginTop: 25 }]}>{t(body)}</Text>
</View>
</ScrollView>
Expand All @@ -137,7 +172,7 @@ const CreatePageWith = (image: React.FC<SvgProps>, title: string, body: string,

export const pages = (onTutorialCompleted: GenericFn, theme: ITheme): Array<Element> => {
return [
StartPages(theme),
StartPage(theme),
...guides.map((g) => CreatePageWith(g.image, g.title, g.body, theme)),
EndPage(onTutorialCompleted, theme),
]
Expand Down
Loading

0 comments on commit cab32f3

Please sign in to comment.