-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
ContactMethodsPage.js
158 lines (140 loc) · 6.29 KB
/
ContactMethodsPage.js
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import Button from '../../../../components/Button';
import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
import ScreenWrapper from '../../../../components/ScreenWrapper';
import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
import CONST from '../../../../CONST';
import compose from '../../../../libs/compose';
import Navigation from '../../../../libs/Navigation/Navigation';
import ONYXKEYS from '../../../../ONYXKEYS';
import ROUTES from '../../../../ROUTES';
import styles from '../../../../styles/styles';
import MenuItem from '../../../../components/MenuItem';
import Text from '../../../../components/Text';
import CopyTextToClipboard from '../../../../components/CopyTextToClipboard';
import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
import FixedFooter from '../../../../components/FixedFooter';
const propTypes = {
/* Onyx Props */
/** Login list for the user that is signed in */
loginList: PropTypes.shape({
/** The partner creating the account. It depends on the source: website, mobile, integrations, ... */
partnerName: PropTypes.string,
/** Phone/Email associated with user */
partnerUserID: PropTypes.string,
/** The date when the login was validated, used to show the brickroad status */
validatedDate: PropTypes.string,
/** Field-specific server side errors keyed by microtime */
errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
/** Field-specific pending states for offline UI status */
pendingFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
}),
/** Current user session */
session: PropTypes.shape({
email: PropTypes.string.isRequired,
}),
...withLocalizePropTypes,
};
const defaultProps = {
loginList: {},
session: {
email: null,
},
};
function ContactMethodsPage(props) {
const loginNames = _.keys(props.loginList);
// Sort the login names by placing the one corresponding to the default contact method as the first item before displaying the contact methods.
// The default contact method is determined by checking against the session email (the current login).
const sortedLoginNames = _.sortBy(loginNames, (loginName) => (props.loginList[loginName].partnerUserID === props.session.email ? 0 : 1));
const loginMenuItems = _.map(sortedLoginNames, (loginName) => {
const login = props.loginList[loginName];
const pendingAction = lodashGet(login, 'pendingFields.deletedLogin') || lodashGet(login, 'pendingFields.addedLogin');
if (!login.partnerUserID && _.isEmpty(pendingAction)) {
return null;
}
let description = '';
if (props.session.email === login.partnerUserID) {
description = props.translate('contacts.getInTouch');
} else if (lodashGet(login, 'errorFields.addedLogin')) {
description = props.translate('contacts.failedNewContact');
} else if (!login.validatedDate) {
description = props.translate('contacts.pleaseVerify');
}
let indicator = null;
if (_.some(lodashGet(login, 'errorFields', {}), (errorField) => !_.isEmpty(errorField))) {
indicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
} else if (!login.validatedDate) {
indicator = CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
}
// Default to using login key if we deleted login.partnerUserID optimistically
// but still need to show the pending login being deleted while offline.
const partnerUserID = login.partnerUserID || loginName;
const menuItemTitle = Str.isSMSLogin(partnerUserID) ? props.formatPhoneNumber(partnerUserID) : partnerUserID;
return (
<OfflineWithFeedback
pendingAction={pendingAction}
key={partnerUserID}
>
<MenuItem
title={menuItemTitle}
description={description}
onPress={() => Navigation.navigate(ROUTES.getEditContactMethodRoute(partnerUserID))}
brickRoadIndicator={indicator}
shouldShowBasicTitle
shouldShowRightIcon
disabled={!_.isEmpty(pendingAction)}
/>
</OfflineWithFeedback>
);
});
return (
<ScreenWrapper shouldEnableKeyboardAvoidingView={false}>
<HeaderWithBackButton
title={props.translate('contacts.contactMethods')}
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
/>
<ScrollView>
<View style={[styles.ph5, styles.mv3, styles.flexRow, styles.flexWrap]}>
<Text numberOfLines={100}>
{props.translate('contacts.helpTextBeforeEmail')}
<CopyTextToClipboard
text="receipts@expensify.com"
textStyles={[styles.textBlue]}
/>
<Text>{props.translate('contacts.helpTextAfterEmail')}</Text>
</Text>
</View>
{loginMenuItems}
</ScrollView>
<FixedFooter style={[styles.flexGrow0, styles.pt5]}>
<Button
success
text={props.translate('contacts.newContactMethod')}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
pressOnEnter
/>
</FixedFooter>
</ScreenWrapper>
);
}
ContactMethodsPage.propTypes = propTypes;
ContactMethodsPage.defaultProps = defaultProps;
ContactMethodsPage.displayName = 'ContactMethodsPage';
export default compose(
withLocalize,
withOnyx({
loginList: {
key: ONYXKEYS.LOGIN_LIST,
},
session: {
key: ONYXKEYS.SESSION,
},
}),
)(ContactMethodsPage);