-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
BaseOnboardingPurpose.tsx
125 lines (113 loc) · 5.97 KB
/
BaseOnboardingPurpose.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import {useIsFocused} from '@react-navigation/native';
import React, {useCallback, useImperativeHandle, useRef} from 'react';
import {View} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {useOnyx} from 'react-native-onyx';
import FormHelpMessage from '@components/FormHelpMessage';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Illustrations from '@components/Icon/Illustrations';
import type {MenuItemProps} from '@components/MenuItem';
import MenuItemList from '@components/MenuItemList';
import OfflineIndicator from '@components/OfflineIndicator';
import SafeAreaConsumer from '@components/SafeAreaConsumer';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import Navigation from '@libs/Navigation/Navigation';
import OnboardingRefManager from '@libs/OnboardingRefManager';
import type {TOnboardingRef} from '@libs/OnboardingRefManager';
import variables from '@styles/variables';
import * as Welcome from '@userActions/Welcome';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
import type {BaseOnboardingPurposeProps} from './types';
const menuIcons = {
[CONST.ONBOARDING_CHOICES.EMPLOYER]: Illustrations.ReceiptUpload,
[CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: Illustrations.Abacus,
[CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: Illustrations.PiggyBank,
[CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: Illustrations.SplitBill,
[CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: Illustrations.Binoculars,
};
function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, route}: BaseOnboardingPurposeProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
const {windowHeight} = useWindowDimensions();
// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only
const {isSmallScreenWidth} = useResponsiveLayout();
const theme = useTheme();
const [onboardingErrorMessage, onboardingErrorMessageResult] = useOnyx(ONYXKEYS.ONBOARDING_ERROR_MESSAGE);
const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
const paddingHorizontal = onboardingIsMediumOrLargerScreenWidth ? styles.ph8 : styles.ph5;
const menuItems: MenuItemProps[] = Object.values(CONST.SELECTABLE_ONBOARDING_CHOICES).map((choice) => {
const translationKey = `onboarding.purpose.${choice}` as const;
return {
key: translationKey,
title: translate(translationKey),
icon: menuIcons[choice],
displayInDefaultIconColor: true,
iconWidth: variables.menuIconSize,
iconHeight: variables.menuIconSize,
iconStyles: [styles.mh3],
wrapperStyle: [styles.purposeMenuItem],
hoverAndPressStyle: [styles.purposeMenuItemSelected],
numberOfLinesTitle: 0,
onPress: () => {
Welcome.setOnboardingPurposeSelected(choice);
Welcome.setOnboardingErrorMessage('');
if (choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) {
Navigation.navigate(ROUTES.ONBOARDING_WORK.getRoute(route.params?.backTo));
return;
}
Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS.getRoute(route.params?.backTo));
},
};
});
const isFocused = useIsFocused();
const handleOuterClick = useCallback(() => {
Welcome.setOnboardingErrorMessage(translate('onboarding.purpose.errorSelection'));
}, [translate]);
const onboardingLocalRef = useRef<TOnboardingRef>(null);
useImperativeHandle(isFocused ? OnboardingRefManager.ref : onboardingLocalRef, () => ({handleOuterClick}), [handleOuterClick]);
if (isLoadingOnyxValue(onboardingErrorMessageResult)) {
return null;
}
return (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<View style={[{maxHeight}, styles.h100, styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8, safeAreaPaddingBottomStyle]}>
<View style={onboardingIsMediumOrLargerScreenWidth && styles.mh3}>
<HeaderWithBackButton
shouldShowBackButton={false}
iconFill={theme.iconColorfulBackground}
progressBarPercentage={25}
/>
</View>
<ScrollView style={[styles.flex1, styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, paddingHorizontal]}>
<View style={styles.flex1}>
<View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
<Text style={styles.textHeadlineH1}>{translate('onboarding.purpose.title')} </Text>
</View>
<MenuItemList
menuItems={menuItems}
shouldUseSingleExecution
/>
</View>
</ScrollView>
<View style={[styles.w100, styles.mb5, styles.mh0, paddingHorizontal]}>
<FormHelpMessage message={onboardingErrorMessage} />
</View>
{isSmallScreenWidth && <OfflineIndicator />}
</View>
)}
</SafeAreaConsumer>
);
}
BaseOnboardingPurpose.displayName = 'BaseOnboardingPurpose';
export default BaseOnboardingPurpose;
export type {BaseOnboardingPurposeProps};