diff --git a/assets/images/request-call.svg b/assets/images/request-call.svg
new file mode 100644
index 00000000000..ed4b8fd3f53
--- /dev/null
+++ b/assets/images/request-call.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/src/languages/en.js b/src/languages/en.js
index f7e67742ca6..c967db4ee0c 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -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',
diff --git a/src/languages/es.js b/src/languages/es.js
index d72e89eaa80..d5874ea4a59 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -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',
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index dde0b04df73..7462706410b 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -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,
@@ -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() {
@@ -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;
@@ -165,12 +161,22 @@ 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 (
fetchOrCreateChatReport([
this.props.session.email,
@@ -178,19 +184,20 @@ class RequestCallPage extends Component {
], true)}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
-
+
+
+ {this.props.translate('requestCallPage.subtitle')}
+
+
{this.props.translate('requestCallPage.description')}
-
- {this.props.translate('requestCallPage.instructions')}
- this.setState({firstName})}
onChangeLastName={lastName => this.setState({lastName})}
- style={[styles.mt4, styles.mb4]}
+ style={[styles.mv4]}
/>
{
- 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})}
/>
-
- {this.props.translate('requestCallPage.availabilityText')}
-