Skip to content

Commit

Permalink
feat: new preface onboarding screen (#1010)
Browse files Browse the repository at this point in the history
Signed-off-by: Bryce McMath <[email protected]>
  • Loading branch information
bryce-mcmath authored Oct 31, 2023
1 parent cc133c6 commit 71c84dd
Show file tree
Hide file tree
Showing 25 changed files with 1,702 additions and 27 deletions.
2 changes: 1 addition & 1 deletion packages/legacy/app/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -804,4 +804,4 @@ SPEC CHECKSUMS:

PODFILE CHECKSUM: 702646d9563d22bf09e336926a5fb0e2d3239409

COCOAPODS: 1.12.1
COCOAPODS: 1.13.0
15 changes: 15 additions & 0 deletions packages/legacy/core/App/assets/img/preface.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 16 additions & 5 deletions packages/legacy/core/App/components/inputs/CheckBoxRow.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,42 @@
import React from 'react'
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
import { View, StyleSheet, TouchableOpacity, Text, TextStyle } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'

import { hitSlop } from '../../constants'
import { useTheme } from '../../contexts/theme'

interface Props {
title: string
titleStyle?: TextStyle
accessibilityLabel?: string
testID?: string
checked: boolean
onPress: () => void
reverse?: boolean
}

const CheckBoxRow: React.FC<Props> = ({ title, accessibilityLabel, testID, checked, onPress }) => {
const CheckBoxRow: React.FC<Props> = ({
title,
titleStyle = {},
accessibilityLabel,
testID,
checked,
onPress,
reverse,
}) => {
const { Inputs } = useTheme()
const style = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
flexDirection: reverse ? 'row-reverse' : 'row',
alignItems: 'center',
margin: 10,
},
text: {
...Inputs.checkBoxText,
flexShrink: 1,
marginLeft: 10,
marginLeft: reverse ? 0 : 10,
marginRight: reverse ? 10 : 0,
},
})
const accessible = accessibilityLabel && accessibilityLabel !== '' ? true : false
Expand All @@ -45,7 +56,7 @@ const CheckBoxRow: React.FC<Props> = ({ title, accessibilityLabel, testID, check
<Icon name={'check-box-outline-blank'} size={36} color={Inputs.checkBoxColor.color} />
)}
</TouchableOpacity>
<Text style={[style.text]}>{title}</Text>
<Text style={[style.text, titleStyle]}>{title}</Text>
</View>
)
}
Expand Down
4 changes: 2 additions & 2 deletions packages/legacy/core/App/components/misc/ContentGradient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import React from 'react'
import { View, StyleSheet } from 'react-native'
import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg'

type GradientProps = {
type ContentGradientProps = {
backgroundColor: string
height?: number
}

/**
* To be used in a relative position controlsContainer that is below (and not in) scrollview content
*/
const ContentGradient = ({ backgroundColor, height = 30 }: GradientProps) => {
const ContentGradient: React.FC<ContentGradientProps> = ({ backgroundColor, height = 30 }) => {
const id = 'gradient'

const styles = StyleSheet.create({
Expand Down
2 changes: 2 additions & 0 deletions packages/legacy/core/App/contexts/configuration.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export interface ConfigurationContext {
pages: typeof OnboardingPages
splash: React.FC
terms: React.FC
preface: React.FC
homeHeaderView: React.FC
homeFooterView: React.FC
credentialListHeaderRight: React.FC
Expand All @@ -42,6 +43,7 @@ export interface ConfigurationContext {
autoRedirectConnectionToHome?: boolean
proofRequestTemplates?: (useDevTemplates: boolean) => Array<ProofRequestTemplate>
enableTours?: boolean
showPreface?: boolean
}

export const ConfigurationContext = createContext<ConfigurationContext>(null as unknown as ConfigurationContext)
Expand Down
13 changes: 13 additions & 0 deletions packages/legacy/core/App/contexts/reducers/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { generateRandomWalletName } from '../../utils/helpers'

enum OnboardingDispatchAction {
ONBOARDING_UPDATED = 'onboarding/onboardingStateLoaded',
DID_SEE_PREFACE = 'onboarding/didSeePreface',
DID_COMPLETE_TUTORIAL = 'onboarding/didCompleteTutorial',
DID_AGREE_TO_TERMS = 'onboarding/didAgreeToTerms',
DID_CREATE_PIN = 'onboarding/didCreatePIN',
Expand Down Expand Up @@ -431,6 +432,18 @@ export const reducer = <S extends State>(state: S, action: ReducerAction<Dispatc
onboarding,
}
}
case OnboardingDispatchAction.DID_SEE_PREFACE: {
const onboarding = {
...state.onboarding,
didSeePreface: true,
}
const newState = {
...state,
onboarding,
}
AsyncStorage.setItem(LocalStorageKeys.Onboarding, JSON.stringify(newState.onboarding))
return newState
}
case OnboardingDispatchAction.DID_COMPLETE_TUTORIAL: {
const onboarding = {
...state.onboarding,
Expand Down
1 change: 1 addition & 0 deletions packages/legacy/core/App/contexts/store.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface StoreProviderProps extends React.PropsWithChildren {

export const defaultState: State = {
onboarding: {
didSeePreface: false,
didAgreeToTerms: false,
didCompleteTutorial: false,
didCreatePIN: false,
Expand Down
3 changes: 3 additions & 0 deletions packages/legacy/core/App/defaultConfiguration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { ConfigurationContext } from './contexts/configuration'
import { useNotifications } from './hooks/notifications'
import Developer from './screens/Developer'
import OnboardingPages from './screens/OnboardingPages'
import Preface from './screens/Preface'
import Scan from './screens/Scan'
import Splash from './screens/Splash'
import Terms from './screens/Terms'
Expand All @@ -23,6 +24,7 @@ export const defaultConfiguration: ConfigurationContext = {
pages: OnboardingPages,
splash: Splash,
terms: Terms,
preface: Preface,
developer: Developer,
homeHeaderView: HomeHeaderView,
homeFooterView: HomeFooterView,
Expand All @@ -49,4 +51,5 @@ export const defaultConfiguration: ConfigurationContext = {
useCustomNotifications: useNotifications,
proofRequestTemplates: useProofRequestTemplates,
enableTours: false,
showPreface: false,
}
4 changes: 4 additions & 0 deletions packages/legacy/core/App/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import * as components from './components'
import Button, { ButtonType } from './components/buttons/Button'
import HeaderButton, { ButtonLocation } from './components/buttons/HeaderButton'
import CheckBoxRow from './components/inputs/CheckBoxRow'
import ContentGradient from './components/misc/ContentGradient'
import CredentialCard from './components/misc/CredentialCard'
import InfoBox, { InfoBoxType } from './components/misc/InfoBox'
import ErrorModal from './components/modals/ErrorModal'
Expand Down Expand Up @@ -37,6 +38,7 @@ import RootStack from './navigators/RootStack'
import AttemptLockout from './screens/AttemptLockout'
import Developer from './screens/Developer'
import OnboardingPages from './screens/OnboardingPages'
import Preface from './screens/Preface'
import Splash from './screens/Splash'
import Terms from './screens/Terms'
import UseBiometry from './screens/UseBiometry'
Expand Down Expand Up @@ -117,6 +119,7 @@ export {
ButtonLocation,
CheckBoxRow,
CredentialCard,
ContentGradient,
ErrorModal,
InfoTextBox,
InfoBox,
Expand All @@ -130,6 +133,7 @@ export {
Splash,
Developer,
Terms,
Preface,
HomeFooterView as HomeContentView,
UseBiometry,
AttemptLockout,
Expand Down
6 changes: 6 additions & 0 deletions packages/legacy/core/App/localization/en/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,7 @@ const translation = {
"Screens": {
"Splash": "Splash",
"Onboarding": "Onboarding",
"Preface": "Aries Bifold",
"Terms": "Terms & Conditions",
"CreatePIN": "Create a PIN",
"EnterPIN": "Enter PIN",
Expand Down Expand Up @@ -583,6 +584,11 @@ const translation = {
"Onboarding": {
"SkipA11y": "Skip introduction to Aries Bifold",
},
"Preface": {
"PrimaryHeading": "Is this app for you?",
"Paragraph1": "Most people will not have a need for Aries Bifold because very few digital credentials are currently available.",
"Confirmed": "I have confirmed that this app is for me.",
},
"Chat": {
"OpenPresentation": "Open presentation",
"ViewRequest": "View request",
Expand Down
6 changes: 6 additions & 0 deletions packages/legacy/core/App/localization/fr/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -499,6 +499,7 @@ const translation = {
"Screens": {
"Splash": "Page de garde",
"Onboarding": "Inscription",
"Preface": "Aries Bifold",
"Terms": "Conditions d'utilisation",
"CreatePIN": "Créer un NIP à 6 chiffres",
"EnterPIN": "Saisir le NIP",
Expand Down Expand Up @@ -566,6 +567,11 @@ const translation = {
"Onboarding": {
"SkipA11y": "Skip introduction to Aries Bifold (FR)",
},
"Preface": {
"PrimaryHeading": "Is this app for you? (FR)",
"Paragraph1": "Most people will not have a need for Aries Bifold because very few digital credentials are currently available. (FR)",
"Confirmed": "I have confirmed that this app is for me. (FR)",
},
"Chat": {
"OpenPresentation": "Open presentation (FR)",
"ViewRequest": "View request (FR)",
Expand Down
6 changes: 6 additions & 0 deletions packages/legacy/core/App/localization/pt-br/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -482,6 +482,7 @@ const translation = {
"Screens": {
"Splash": "Splash",
"Onboarding": "Onboarding",
"Preface": "Aries Bifold",
"Terms": "Termos & Condições",
"CreatePIN": "Criar um PIN",
"EnterPIN": "Digitar o PIN",
Expand Down Expand Up @@ -542,6 +543,11 @@ const translation = {
"Onboarding": {
"SkipA11y": "Pular introdução a Aries Bifold",
},
"Preface": {
"PrimaryHeading": "Is this app for you? (PT-BR)",
"Paragraph1": "Most people will not have a need for Aries Bifold because very few digital credentials are currently available. (PT-BR)",
"Confirmed": "I have confirmed that this app is for me. (PT-BR)",
},
"Chat": {
"OpenPresentation": "Abrir apresentação",
"ViewRequest": "Ver requisição",
Expand Down
8 changes: 7 additions & 1 deletion packages/legacy/core/App/navigators/RootStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const RootStack: React.FC = () => {
const theme = useTheme()
const defaultStackOptions = createDefaultStackOptions(theme)
const OnboardingTheme = theme.OnboardingTheme
const { pages, terms, splash, useBiometry, developer } = useConfiguration()
const { pages, terms, splash, useBiometry, developer, preface, showPreface } = useConfiguration()
useDeepLinks()

// remove connection on mobile verifier proofs if proof is rejected regardless of if it has been opened
Expand Down Expand Up @@ -274,6 +274,11 @@ const RootStack: React.FC = () => {
return (
<Stack.Navigator initialRouteName={Screens.Splash} screenOptions={{ ...defaultStackOptions, headerShown: false }}>
<Stack.Screen name={Screens.Splash} component={splash} />
<Stack.Screen
name={Screens.Preface}
component={preface}
options={{ title: t('Screens.Preface'), headerShown: true }}
/>
<Stack.Screen
name={Screens.Onboarding}
options={() => ({
Expand Down Expand Up @@ -348,6 +353,7 @@ const RootStack: React.FC = () => {
}

if (
(!showPreface || state.onboarding.didSeePreface) &&
state.onboarding.didAgreeToTerms &&
state.onboarding.didCompleteTutorial &&
state.onboarding.didCreatePIN &&
Expand Down
77 changes: 77 additions & 0 deletions packages/legacy/core/App/screens/Preface.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { useNavigation } from '@react-navigation/core'
import { StackNavigationProp } from '@react-navigation/stack'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { ScrollView, StyleSheet, Text, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'

import Button, { ButtonType } from '../components/buttons/Button'
import CheckBoxRow from '../components/inputs/CheckBoxRow'
import { DispatchAction } from '../contexts/reducers/store'
import { useStore } from '../contexts/store'
import { useTheme } from '../contexts/theme'
import { AuthenticateStackParams, Screens } from '../types/navigators'
import { testIdWithKey } from '../utils/testable'

const Preface: React.FC = () => {
const [, dispatch] = useStore()
const [checked, setChecked] = useState(false)
const { t } = useTranslation()
const navigation = useNavigation<StackNavigationProp<AuthenticateStackParams>>()
const { Assets, OnboardingTheme, TextTheme } = useTheme()
const onSubmitPressed = () => {
dispatch({
type: DispatchAction.DID_SEE_PREFACE,
})
navigation.navigate(Screens.Onboarding)
}
const style = StyleSheet.create({
screenContainer: {
...OnboardingTheme.container,
height: '100%',
padding: 20,
justifyContent: 'space-between',
},

// No properties needed, just helpful labels
contentContainer: {},
controlsContainer: {},
})

return (
<SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={style.screenContainer}>
<View style={style.contentContainer}>
<Assets.svg.preface style={{ alignSelf: 'center', marginBottom: 20 }} height={200} />
<Text style={[TextTheme.headingTwo]}>{t('Preface.PrimaryHeading')}</Text>
<Text style={[TextTheme.normal, { marginTop: 20, marginBottom: 20 }]}>{t('Preface.Paragraph1')}</Text>
</View>
<View style={style.controlsContainer}>
<CheckBoxRow
title={t('Preface.Confirmed')}
accessibilityLabel={t('Terms.IAgree')}
testID={testIdWithKey('IAgree')}
checked={checked}
onPress={() => setChecked(!checked)}
reverse
titleStyle={{ fontWeight: 'bold' }}
/>
<View style={[{ paddingTop: 10 }]}>
<Button
title={t('Global.Continue')}
accessibilityLabel={t('Global.Continue')}
testID={testIdWithKey('Continue')}
disabled={!checked}
onPress={onSubmitPressed}
buttonType={ButtonType.Primary}
/>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

export default Preface
Loading

0 comments on commit 71c84dd

Please sign in to comment.