Skip to content

Commit

Permalink
Shiny up the request call page
Browse files Browse the repository at this point in the history
  • Loading branch information
@roryabraham
roryabraham committed Sep 27, 2021
1 parent 8df9d2d commit 19a24bc
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 33 deletions.
26 changes: 26 additions & 0 deletions assets/images/request-call.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions src/languages/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -636,10 +636,9 @@ export default {
},
},
requestCallPage: {
requestACall: 'Request a call',
description: 'Need help with your account configuration? Our team of guides are on hand to help you each step of the way.',
instructions: 'Type in your name and phone number, and we’ll give you a call back.',
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.',
title: 'Request a call',
subtitle: 'Have questions, or need help?',
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.',
callMe: 'Call me',
growlMessageOnSave: 'Call requested.',
errorMessageInvalidPhone: 'That doesn’t look like a valid phone number. Try again with the country code. e.g. +15005550006',
Expand Down
7 changes: 3 additions & 4 deletions src/languages/es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -638,10 +638,9 @@ export default {
},
},
requestCallPage: {
requestACall: 'Llámame por teléfono',
description: '¿Necesitas ayuda configurando tu cuenta? Nuestro equipo de guías puede ayudarte.',
instructions: 'Escribe tu nombre y número de teléfono y te llamaremos.',
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.',
title: 'Llámame por teléfono',
subtitle: '¿Tienes preguntas o necesitas ayuda?',
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.',
callMe: 'Llámame',
growlMessageOnSave: 'Llamada solicitada.',
errorMessageInvalidPhone: 'El teléfono no es valido. Inténtalo de nuevo agregando el código de país. P. ej.: +15005550006',
Expand Down
46 changes: 21 additions & 25 deletions src/pages/RequestCallPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import personalDetailsPropType from './personalDetailsPropType';
import ExpensiTextInput from '../components/ExpensiTextInput';
import Text from '../components/Text';
import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
import RequestCallIcon from '../../assets/images/request-call.svg';

const propTypes = {
...withLocalizePropTypes,
Expand Down Expand Up @@ -77,6 +78,7 @@ class RequestCallPage extends Component {
this.onSubmit = this.onSubmit.bind(this);
this.getPhoneNumber = this.getPhoneNumber.bind(this);
this.getFirstAndLastName = this.getFirstAndLastName.bind(this);
this.validatePhoneInput = this.validatePhoneInput.bind(this);
}

onSubmit() {
Expand All @@ -90,13 +92,7 @@ class RequestCallPage extends Component {
return;
}

if (_.isEmpty(this.state.phoneNumber.trim())) {
this.setState({phoneNumberError: this.props.translate('messages.noPhoneNumber')});
} else if (!Str.isValidPhone(this.state.phoneNumber)) {
this.setState({phoneNumberError: this.props.translate('requestCallPage.errorMessageInvalidPhone')});
} else {
this.setState({phoneNumberError: ''});
}
this.validatePhoneInput();

if (shouldNotSubmit) {
return;
Expand Down Expand Up @@ -165,32 +161,43 @@ class RequestCallPage extends Component {
return {firstName, lastName};
}

validatePhoneInput() {
if (_.isEmpty(this.state.phoneNumber.trim())) {
this.setState({phoneNumberError: this.props.translate('messages.noPhoneNumber')});
} else if (!Str.isValidPhone(this.state.phoneNumber)) {
this.setState({phoneNumberError: this.props.translate('requestCallPage.errorMessageInvalidPhone')});
} else {
this.setState({phoneNumberError: ''});
}
}

render() {
return (
<ScreenWrapper>
<KeyboardAvoidingView>
<HeaderWithCloseButton
title={this.props.translate('requestCallPage.requestACall')}
title={this.props.translate('requestCallPage.title')}
shouldShowBackButton
onBackButtonPress={() => fetchOrCreateChatReport([
this.props.session.email,
CONST.EMAIL.CONCIERGE,
], true)}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
<ScrollView style={styles.flex1} contentContainerStyle={[styles.p5, styles.pt0]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text style={[styles.h1, styles.flex1]}>{this.props.translate('requestCallPage.subtitle')}</Text>
<RequestCallIcon width={160} height={100} style={styles.flex1} />
</View>
<Text style={[styles.mb4]}>
{this.props.translate('requestCallPage.description')}
</Text>
<Text style={[styles.mt4, styles.mb4]}>
{this.props.translate('requestCallPage.instructions')}
</Text>
<FullNameInputRow
firstName={this.state.firstName}
lastName={this.state.lastName}
onChangeFirstName={firstName => this.setState({firstName})}
onChangeLastName={lastName => this.setState({lastName})}
style={[styles.mt4, styles.mb4]}
style={[styles.mv4]}
/>
<View style={styles.mt4}>
<ExpensiTextInput
Expand All @@ -200,21 +207,10 @@ class RequestCallPage extends Component {
value={this.state.phoneNumber}
placeholder="+14158675309"
errorText={this.state.phoneNumberError}
onBlur={() => {
if (_.isEmpty(this.state.phoneNumber.trim())) {
this.setState({phoneNumberError: this.props.translate('messages.noPhoneNumber')});
} else if (!Str.isValidPhone(this.state.phoneNumber)) {
this.setState({phoneNumberError: this.props.translate('requestCallPage.errorMessageInvalidPhone')});
} else {
this.setState({phoneNumberError: ''});
}
}}
onBlur={this.validatePhoneInput}
onChangeText={phoneNumber => this.setState({phoneNumber})}
/>
</View>
<Text style={[styles.mt4, styles.textLabel, styles.colorMuted, styles.mb6]}>
{this.props.translate('requestCallPage.availabilityText')}
</Text>
</ScrollView>
<FixedFooter>
<Button
Expand Down
4 changes: 4 additions & 0 deletions src/styles/utilities/spacing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,10 @@ export default {
paddingLeft: 20,
},

pt0: {
paddingTop: 0,
},

pt2: {
paddingTop: 8,
},
Expand Down

0 comments on commit 19a24bc

Please sign in to comment.