Merge pull request #10402 from Expensify/cmartins-refactorRequestCallPage

Refactor request call page to use Form

Author: luacmartins

src/ONYXKEYS.js

@@ -150,9 +150,6 @@ export default {
     // Set when we are loading payment methods
     IS_LOADING_PAYMENT_METHODS: 'isLoadingPaymentMethods',
 
-    // Stores values for the request call form
-    REQUEST_CALL_FORM: 'requestCallForm',
-
     // The number of minutes a user has to wait for a call.
     INBOX_CALL_USER_WAIT_TIME: 'inboxCallUserWaitTime',
 
@@ -180,5 +177,6 @@ export default {
     // List of Form ids
     FORMS: {
         ADD_DEBIT_CARD_FORM: 'addDebitCardForm',
+        REQUEST_CALL_FORM: 'requestCallForm',
     },
 };

src/components/Form.js

@@ -91,8 +91,7 @@ class Form extends React.Component {
             return;
         }
 
-        // Set loading state and call submit handler
-        FormActions.setIsLoading(this.props.formID, true);
+        // Call submit handler
         this.props.onSubmit(this.inputValues);
     }
 

src/components/Section.js

@@ -22,20 +22,24 @@ const propTypes = {
 
     /** Contents to display inside the section */
     children: PropTypes.node,
+
+    /** Customize the Section container */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
 const defaultProps = {
     menuItems: null,
     children: null,
     icon: null,
     IconComponent: null,
+    containerStyles: [],
 };
 
 const Section = (props) => {
     const IconComponent = props.IconComponent;
     return (
         <>
-            <View style={styles.pageWrapper}>
+            <View style={[styles.pageWrapper, ...props.containerStyles]}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100]}>
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.h1]}>{props.title}</Text>

src/languages/en.js

@@ -909,10 +909,9 @@ export default {
         title: 'Request a call',
         subtitle: 'Need help?',
         description: 'Our team is ready to help each step of the way. Enter your name and phone number, and we\'ll give you a call back asap.',
-        extension: 'Extension (Optional)',
+        phoneNumberExtension: 'Extension (Optional)',
         callMe: 'Call me',
         growlMessageOnSave: 'Call requested.',
-        growlMessageEmptyName: 'Please provide both a first and last name so our guides know how to address you!',
         callButton: 'Call',
         callButtonTooltip: 'Get live help from our team',
         blockedFromConcierge: 'Due to previous interactions with our staff, a call cannot be scheduled at this time.',
@@ -925,7 +924,11 @@ export default {
             guides: 'Please note that our Guides are typically available from Sunday at 5pm CT to Friday at 5pm CT.',
         },
         error: {
-            phoneExtension: 'Please enter a valid phone extension number',
+            phoneNumberExtension: 'Please enter a valid phone extension number',
+            firstName: 'Please provide your first name so our guides know how to address you!',
+            lastName: 'Please provide your last name so our guides know how to address you!',
+            firstNameLength: 'First name shouldn\'t be longer than 50 characters',
+            lastNameLength: 'Last name shouldn\'t be longer than 50 characters',
         },
     },
     requestCallConfirmationScreen: {

src/languages/es.js

@@ -911,10 +911,9 @@ export default {
         title: 'Llámame por teléfono',
         subtitle: '¿Necesitas ayuda?',
         description: 'Nuestro equipo está listo para ayudarte en cada paso. Ingresa tu nombre y número de teléfono y te llamaremos lo antes posible.',
-        extension: 'Extensión (Opcional)',
+        phoneNumberExtension: 'Extensión (Opcional)',
         callMe: 'Llámame',
         growlMessageOnSave: 'Llamada solicitada.',
-        growlMessageEmptyName: 'Por favor ingresa tu nombre completo',
         callButton: 'Llamar',
         callButtonTooltip: 'Recibe ayuda telefónica de nuestro equipo',
         blockedFromConcierge: 'Debido a sus interacciones pasadas con nuestro equipo, la llamada no puede ser agendada en este momento.',
@@ -927,7 +926,11 @@ export default {
             guides: 'Tenga en cuenta que nuestras guías suelen estar disponibles desde el domingo a las 5pm CT hasta el viernes a las 5pm CT.',
         },
         error: {
-            phoneExtension: 'Por favor, introduzca una extensión telefónica válida',
+            phoneNumberExtension: 'Por favor, introduzca una extensión telefónica válida',
+            firstName: 'Por favor ingresa tu nombre!',
+            lastName: 'Por favor ingresa tu apellido!',
+            firstNameLength: 'El nombre no debe tener más de 50 caracteres',
+            lastNameLength: 'El apellido no debe tener más de 50 caracteres',
         },
     },
     requestCallConfirmationScreen: {

src/libs/actions/Inbox.js

@@ -19,18 +19,18 @@ function requestCall({
 }) {
     const optimisticData = [{
         onyxMethod: CONST.ONYX.METHOD.MERGE,
-        key: ONYXKEYS.REQUEST_CALL_FORM,
+        key: ONYXKEYS.FORMS.REQUEST_CALL_FORM,
         value: {
-            loading: true,
+            isLoading: true,
         },
     }];
 
     const successData = [
         {
             onyxMethod: CONST.ONYX.METHOD.MERGE,
-            key: ONYXKEYS.REQUEST_CALL_FORM,
+            key: ONYXKEYS.FORMS.REQUEST_CALL_FORM,
             value: {
-                loading: false,
+                isLoading: false,
                 error: '',
                 didRequestCallSucceed: true,
             },
@@ -39,9 +39,9 @@ function requestCall({
 
     const failureData = [{
         onyxMethod: CONST.ONYX.METHOD.MERGE,
-        key: ONYXKEYS.REQUEST_CALL_FORM,
+        key: ONYXKEYS.FORMS.REQUEST_CALL_FORM,
         value: {
-            loading: false,
+            isLoading: false,
         },
     }];
 
@@ -63,7 +63,7 @@ function openRequestCallPage() {
     // Reset the error message in case we had one set from a previous failed attempt at requesting a call.
     const optimisticData = [{
         onyxMethod: CONST.ONYX.METHOD.MERGE,
-        key: ONYXKEYS.REQUEST_CALL_FORM,
+        key: ONYXKEYS.FORMS.REQUEST_CALL_FORM,
         value: {
             error: '',
         },
@@ -72,7 +72,7 @@ function openRequestCallPage() {
 }
 
 function clearDidRequestCallSucceed() {
-    Onyx.merge(ONYXKEYS.REQUEST_CALL_FORM, {didRequestCallSucceed: false});
+    Onyx.merge(ONYXKEYS.FORMS.REQUEST_CALL_FORM, {didRequestCallSucceed: false});
 }
 
 export {