diff --git a/app/src/index.ts b/app/src/index.ts index b7f973aa..7bf33251 100644 --- a/app/src/index.ts +++ b/app/src/index.ts @@ -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' @@ -33,6 +34,7 @@ const configuration: ConfigurationContext = { pages, splash: Splash, terms: Terms, + preface: Preface, homeFooterView: HomeFooterView, credentialListHeaderRight: AddCredentialButton, credentialListOptions: AddCredentialSlider, @@ -63,6 +65,7 @@ const configuration: ConfigurationContext = { useCustomNotifications: useNotifications, proofRequestTemplates: useProofRequestTemplates, enableTours: true, + showPreface: true, } export default { theme, localization, configuration } diff --git a/app/src/localization/en/index.ts b/app/src/localization/en/index.ts index 4b303a66..9fac0bf6 100644 --- a/app/src/localization/en/index.ts +++ b/app/src/localization/en/index.ts @@ -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", diff --git a/app/src/localization/fr/index.ts b/app/src/localization/fr/index.ts index 86e726d3..73a3f238 100644 --- a/app/src/localization/fr/index.ts +++ b/app/src/localization/fr/index.ts @@ -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)", diff --git a/app/src/localization/pt-br/index.ts b/app/src/localization/pt-br/index.ts index fc3e0560..c76a3a95 100644 --- a/app/src/localization/pt-br/index.ts +++ b/app/src/localization/pt-br/index.ts @@ -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)", diff --git a/app/src/screens/OnboardingPages.tsx b/app/src/screens/OnboardingPages.tsx index 73f84ed7..e389d8aa 100644 --- a/app/src/screens/OnboardingPages.tsx +++ b/app/src/screens/OnboardingPages.tsx @@ -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' @@ -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 ( - <> - - + + + - {t('Onboarding.PrivacyConfidentiality')} - {t('Onboarding.PrivacyParagraph')} + {t('Onboarding.PrivateConfidentialHeading')} + {t('Onboarding.PrivateConfidentialParagraph')} {!(store.onboarding.didCompleteTutorial && store.authentication.didAuthenticate) && ( - + +