-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
GetAssistancePage.tsx
98 lines (91 loc) · 3.95 KB
/
GetAssistancePage.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
import type {StackScreenProps} from '@react-navigation/stack';
import React from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import type {MenuItemWithLink} from '@components/MenuItemList';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import Section from '@components/Section';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import * as Link from '@userActions/Link';
import * as Report from '@userActions/Report';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type {Account} from '@src/types/onyx';
type GetAssistanceOnyxProps = {
/** The details about the account that the user is signing in with */
account: OnyxEntry<Account>;
};
type GetAssistancePageProps = GetAssistanceOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.GET_ASSISTANCE>;
function GetAssistancePage({route, account}: GetAssistancePageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const navigateBackTo = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS.getRoute();
const menuItems: MenuItemWithLink[] = [
{
title: translate('getAssistancePage.chatWithConcierge'),
onPress: () => Report.navigateToConciergeChat(true),
icon: Expensicons.ChatBubble,
shouldShowRightIcon: true,
wrapperStyle: [styles.cardMenuItem],
},
{
title: translate('getAssistancePage.exploreHelpDocs'),
onPress: () => Link.openExternalLink(CONST.NEWHELP_URL),
icon: Expensicons.QuestionMark,
shouldShowRightIcon: true,
iconRight: Expensicons.NewWindow,
wrapperStyle: [styles.cardMenuItem],
link: CONST.NEWHELP_URL,
},
];
// If the user is eligible for calls with their Guide, add the 'Schedule a setup call' item at the second position in the list
const guideCalendarLink = account?.guideCalendarLink;
if (guideCalendarLink) {
menuItems.splice(1, 0, {
title: translate('getAssistancePage.scheduleSetupCall'),
onPress: () => Link.openExternalLink(guideCalendarLink),
icon: Expensicons.Phone,
shouldShowRightIcon: true,
iconRight: Expensicons.NewWindow,
wrapperStyle: [styles.cardMenuItem],
link: guideCalendarLink,
});
}
return (
<ScreenWrapper testID={GetAssistancePage.displayName}>
<HeaderWithBackButton
title={translate('getAssistancePage.title')}
onBackButtonPress={() => Navigation.goBack(navigateBackTo)}
/>
<ScrollView>
<Section
title={translate('getAssistancePage.subtitle')}
icon={Illustrations.ConciergeNew}
menuItems={menuItems}
>
<View style={styles.mv3}>
<Text>{translate('getAssistancePage.description')}</Text>
</View>
</Section>
</ScrollView>
</ScreenWrapper>
);
}
GetAssistancePage.displayName = 'GetAssistancePage';
export default withOnyx<GetAssistancePageProps, GetAssistanceOnyxProps>({
account: {
key: ONYXKEYS.ACCOUNT,
selector: (account) => account && {guideCalendarLink: account.guideCalendarLink},
},
})(GetAssistancePage);