Skip to content

Commit 56374e8

Browse files
author
Joel Bettner
authored
Merge pull request #5544 from Expensify/Rory-RequestCallModalStyle
Shiny up the request call page
2 parents e3e02c9 + 19a24bc commit 56374e8

File tree

5 files changed

+57
-33
lines changed

5 files changed

+57
-33
lines changed

‎assets/images/request-call.svg

Lines changed: 26 additions & 0 deletions
Loading

‎src/languages/en.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -637,10 +637,9 @@ export default {
637637
},
638638
},
639639
requestCallPage: {
640-
requestACall: 'Request a call',
641-
description: 'Need help with your account configuration? Our team of guides are on hand to help you each step of the way.',
642-
instructions: 'Type in your name and phone number, and we’ll give you a call back.',
643-
availabilityText: '*Our guides are available from Sunday at 5pm CT to Friday at 5pm CT. Any requests outside this window will be returned 9am - 5pm, Monday - Friday in your local time. Call time is based on the order the call was received.',
640+
title: 'Request a call',
641+
subtitle: 'Have questions, or need help?',
642+
description: 'Our team of guides are on hand to help you each step of the way. Type in your name and phone number, and we’ll give you a call back.',
644643
callMe: 'Call me',
645644
growlMessageOnSave: 'Call requested.',
646645
errorMessageInvalidPhone: 'That doesn’t look like a valid phone number. Try again with the country code. e.g. +15005550006',

‎src/languages/es.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -639,10 +639,9 @@ export default {
639639
},
640640
},
641641
requestCallPage: {
642-
requestACall: 'Llámame por teléfono',
643-
description: '¿Necesitas ayuda configurando tu cuenta? Nuestro equipo de guías puede ayudarte.',
644-
instructions: 'Escribe tu nombre y número de teléfono y te llamaremos.',
645-
availabilityText: '*Nuestros guías están disponibles de domingo desde las 17.00 CT a viernes hasta las 17.00 CT. Si solicitas una llamada fuera de este horario, te llamaremos de lunes a viernes de 9.00 a 17.00 en tu hora local. El orden de llamada corresponde con el orden de solicitud.',
642+
title: 'Llámame por teléfono',
643+
subtitle: '¿Tienes preguntas o necesitas ayuda?',
644+
description: '¿Necesitas ayuda configurando tu cuenta? Nuestro equipo de guías puede ayudarte. Escribe tu nombre y número de teléfono y te llamaremos.',
646645
callMe: 'Llámame',
647646
growlMessageOnSave: 'Llamada solicitada.',
648647
errorMessageInvalidPhone: 'El teléfono no es valido. Inténtalo de nuevo agregando el código de país. P. ej.: +15005550006',

‎src/pages/RequestCallPage.js

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import personalDetailsPropType from './personalDetailsPropType';
2222
import ExpensiTextInput from '../components/ExpensiTextInput';
2323
import Text from '../components/Text';
2424
import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
25+
import RequestCallIcon from '../../assets/images/request-call.svg';
2526

2627
const propTypes = {
2728
...withLocalizePropTypes,
@@ -77,6 +78,7 @@ class RequestCallPage extends Component {
7778
this.onSubmit = this.onSubmit.bind(this);
7879
this.getPhoneNumber = this.getPhoneNumber.bind(this);
7980
this.getFirstAndLastName = this.getFirstAndLastName.bind(this);
81+
this.validatePhoneInput = this.validatePhoneInput.bind(this);
8082
}
8183

8284
onSubmit() {
@@ -90,13 +92,7 @@ class RequestCallPage extends Component {
9092
return;
9193
}
9294

93-
if (_.isEmpty(this.state.phoneNumber.trim())) {
94-
this.setState({phoneNumberError: this.props.translate('messages.noPhoneNumber')});
95-
} else if (!Str.isValidPhone(this.state.phoneNumber)) {
96-
this.setState({phoneNumberError: this.props.translate('requestCallPage.errorMessageInvalidPhone')});
97-
} else {
98-
this.setState({phoneNumberError: ''});
99-
}
95+
this.validatePhoneInput();
10096

10197
if (shouldNotSubmit) {
10298
return;
@@ -165,32 +161,43 @@ class RequestCallPage extends Component {
165161
return {firstName, lastName};
166162
}
167163

164+
validatePhoneInput() {
165+
if (_.isEmpty(this.state.phoneNumber.trim())) {
166+
this.setState({phoneNumberError: this.props.translate('messages.noPhoneNumber')});
167+
} else if (!Str.isValidPhone(this.state.phoneNumber)) {
168+
this.setState({phoneNumberError: this.props.translate('requestCallPage.errorMessageInvalidPhone')});
169+
} else {
170+
this.setState({phoneNumberError: ''});
171+
}
172+
}
173+
168174
render() {
169175
return (
170176
<ScreenWrapper>
171177
<KeyboardAvoidingView>
172178
<HeaderWithCloseButton
173-
title={this.props.translate('requestCallPage.requestACall')}
179+
title={this.props.translate('requestCallPage.title')}
174180
shouldShowBackButton
175181
onBackButtonPress={() => fetchOrCreateChatReport([
176182
this.props.session.email,
177183
CONST.EMAIL.CONCIERGE,
178184
], true)}
179185
onCloseButtonPress={() => Navigation.dismissModal(true)}
180186
/>
181-
<ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
187+
<ScrollView style={styles.flex1} contentContainerStyle={[styles.p5, styles.pt0]}>
188+
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
189+
<Text style={[styles.h1, styles.flex1]}>{this.props.translate('requestCallPage.subtitle')}</Text>
190+
<RequestCallIcon width={160} height={100} style={styles.flex1} />
191+
</View>
182192
<Text style={[styles.mb4]}>
183193
{this.props.translate('requestCallPage.description')}
184194
</Text>
185-
<Text style={[styles.mt4, styles.mb4]}>
186-
{this.props.translate('requestCallPage.instructions')}
187-
</Text>
188195
<FullNameInputRow
189196
firstName={this.state.firstName}
190197
lastName={this.state.lastName}
191198
onChangeFirstName={firstName => this.setState({firstName})}
192199
onChangeLastName={lastName => this.setState({lastName})}
193-
style={[styles.mt4, styles.mb4]}
200+
style={[styles.mv4]}
194201
/>
195202
<View style={styles.mt4}>
196203
<ExpensiTextInput
@@ -200,21 +207,10 @@ class RequestCallPage extends Component {
200207
value={this.state.phoneNumber}
201208
placeholder="+14158675309"
202209
errorText={this.state.phoneNumberError}
203-
onBlur={() => {
204-
if (_.isEmpty(this.state.phoneNumber.trim())) {
205-
this.setState({phoneNumberError: this.props.translate('messages.noPhoneNumber')});
206-
} else if (!Str.isValidPhone(this.state.phoneNumber)) {
207-
this.setState({phoneNumberError: this.props.translate('requestCallPage.errorMessageInvalidPhone')});
208-
} else {
209-
this.setState({phoneNumberError: ''});
210-
}
211-
}}
210+
onBlur={this.validatePhoneInput}
212211
onChangeText={phoneNumber => this.setState({phoneNumber})}
213212
/>
214213
</View>
215-
<Text style={[styles.mt4, styles.textLabel, styles.colorMuted, styles.mb6]}>
216-
{this.props.translate('requestCallPage.availabilityText')}
217-
</Text>
218214
</ScrollView>
219215
<FixedFooter>
220216
<Button

‎src/styles/utilities/spacing.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,10 @@ export default {
264264
paddingLeft: 20,
265265
},
266266

267+
pt0: {
268+
paddingTop: 0,
269+
},
270+
267271
pt2: {
268272
paddingTop: 8,
269273
},

0 commit comments

Comments
 (0)