Start using new new RequestCall Onyx-optimized API command instead of Inbox_CallUser

src/languages/en.js

@@ -901,8 +901,8 @@ export default {
     },
     requestCallPage: {
         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.',
+        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)',
         callMe: 'Call me',
         growlMessageOnSave: 'Call requested.',
@@ -922,6 +922,11 @@ export default {
             phoneExtension: 'Please enter a valid phone extension number',
         },
     },
+    requestCallConfirmationScreen: {
+        callRequested: 'Call successfully requested!',
+        allSet: 'You’re all set. You will be receiving a call from us soon.',
+        gotIt: 'Got it',
+    },
     emojiPicker: {
         skinTonePickerLabel: 'Change default skin tone',
         headers: {

src/languages/es.js

@@ -903,8 +903,8 @@ export default {
     },
     requestCallPage: {
         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.',
+        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)',
         callMe: 'Llámame',
         growlMessageOnSave: 'Llamada solicitada.',
@@ -924,6 +924,11 @@ export default {
             phoneExtension: 'Por favor, introduzca una extensión telefónica válida',
         },
     },
+    requestCallConfirmationScreen: {
+        callRequested: '¡Llamada solicitada con éxito!',
+        allSet: 'Todo listo! Pronto recibirás una llamada nuestra.',
+        gotIt: 'Entendido',
+    },
     emojiPicker: {
         skinTonePickerLabel: 'Elige el tono de piel por defecto',
         headers: {

src/libs/Middleware/SaveResponseInOnyx.js

@@ -9,21 +9,29 @@ import _ from 'underscore';
 function SaveResponseInOnyx(response, request) {
     return response
         .then((responseData) => {
-            // We'll only save the onyxData, successData and failureData for the refactored commands
-            if (_.has(responseData, 'onyxData')) {
-                const data = [];
-                if (responseData.jsonCode === 200) {
-                    if (request.successData) {
-                        data.push(...request.successData);
-                    }
-                } else if (request.failureData) {
-                    data.push(...request.failureData);
-                }
-                if (responseData.onyxData) {
-                    data.push(...responseData.onyxData);
-                }
-                Onyx.update(data);
+            const onyxUpdates = [];
+
+            // Make sure we have response data (i.e. response isn't a promise being passed down to us by a failed retry request and responseData undefined)
+            if (!responseData) {
+                return;
+            }
+
+            // Handle the request's success/failure data (client-side data)
+            if (responseData.jsonCode === 200 && request.successData) {
+                onyxUpdates.push(...request.successData);
+            } else if (responseData.jsonCode !== 200 && request.failureData) {
+                onyxUpdates.push(...request.failureData);
+            }
+
+            // Add any onyx updates that are being sent back from the API
+            if (responseData.onyxData) {
+                onyxUpdates.push(...responseData.onyxData);
+            }
+
+            if (!_.isEmpty(onyxUpdates)) {
+                Onyx.update(onyxUpdates);
             }
+
             return responseData;
         });
 }

src/libs/actions/Inbox.js

@@ -1,57 +1,81 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as API from '../API';
-import * as DeprecatedAPI from '../deprecatedAPI';
-import Growl from '../Growl';
-import * as Localize from '../Localize';
-import Navigation from '../Navigation/Navigation';
-import * as User from './User';
 
 /**
+ * Requests a call from Guides
+ *
  * @param {Object} params
- * @param {String} taskID
- * @param {String} policyID
- * @param {String} firstName
- * @param {String} lastName
- * @param {String} phoneNumber
+ * @param {String} params.taskID
+ * @param {String} params.policyID
+ * @param {String} params.firstName
+ * @param {String} params.lastName
+ * @param {String} params.phoneNumber
+ * @param {String} params.phoneNumberExtension
  */
-function requestInboxCall({
+function requestCall({
     taskID, policyID, firstName, lastName, phoneNumber, phoneNumberExtension,
 }) {
-    Onyx.merge(ONYXKEYS.REQUEST_CALL_FORM, {loading: true});
-    DeprecatedAPI.Inbox_CallUser({
-        policyID,
-        firstName,
-        lastName,
-        phoneNumber,
-        phoneNumberExtension,
-        taskID,
-    })
-        .then((result) => {
-            if (result.jsonCode === 200) {
-                Growl.success(Localize.translateLocal('requestCallPage.growlMessageOnSave'));
-                Navigation.goBack();
-                return;
-            }
+    const optimisticData = [{
+        onyxMethod: 'merge',
+        key: ONYXKEYS.REQUEST_CALL_FORM,
+        value: {
+            loading: true,
+        },
+    }];
 
-            if (result.jsonCode === 666) {
-                // The fact that the API is returning this error means the BLOCKED_FROM_CONCIERGE nvp in the user details has changed since the last time we checked, so let's update
-                User.getUserDetails();
-            }
+    const successData = [
+        {
+            onyxMethod: 'merge',
+            key: ONYXKEYS.REQUEST_CALL_FORM,
+            value: {
+                loading: false,
+                error: '',
+                didRequestCallSucceed: true,
+            },
+        },
+    ];
 
-            // Phone number validation is handled by the API
-            Growl.error(result.message, 3000);
-        })
-        .finally(() => {
-            Onyx.merge(ONYXKEYS.REQUEST_CALL_FORM, {loading: false});
-        });
+    const failureData = [{
+        onyxMethod: 'merge',
+        key: ONYXKEYS.REQUEST_CALL_FORM,
+        value: {
+            loading: false,
+        },
+    }];
+
+    API.write(
+        'RequestCall',
+        {
+            policyID,
+            firstName,
+            lastName,
+            phoneNumber,
+            phoneNumberExtension,
+            taskID,
+        },
+        {optimisticData, successData, failureData},
+    );
 }
 
 function openRequestCallPage() {
-    API.read('OpenRequestCallPage');
+    // Reset the error message in case we had one set from a previous failed attempt at requesting a call.
+    const optimisticData = [{
+        onyxMethod: 'merge',
+        key: ONYXKEYS.REQUEST_CALL_FORM,
+        value: {
+            error: '',
+        },
+    }];
+    API.read('OpenRequestCallPage', {}, {optimisticData});
+}
+
+function clearDidRequestCallSucceed() {
+    Onyx.merge(ONYXKEYS.REQUEST_CALL_FORM, {didRequestCallSucceed: false});
 }
 
 export {
-    requestInboxCall,
     openRequestCallPage,
+    requestCall,
+    clearDidRequestCallSucceed,
 };

src/pages/RequestCallConfirmationScreen.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {Image, View} from 'react-native';
+import Text from '../components/Text';
+import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import styles from '../styles/styles';
+import confettiPop from '../../assets/images/confetti-pop.gif';
+import Button from '../components/Button';
+import FixedFooter from '../components/FixedFooter';
+import Navigation from '../libs/Navigation/Navigation';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const RequestCallConfirmationScreen = props => (
+    <>
+        <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
+            <Image
+                source={confettiPop}
+                style={styles.confettiIcon}
+            />
+            <Text
+                style={[
+                    styles.textStrong,
+                    styles.textLarge,
+                    styles.mb2,
+                ]}
+            >
+                {props.translate('requestCallConfirmationScreen.callRequested')}
+            </Text>
+            <Text style={styles.textAlignCenter}>
+                {props.translate('requestCallConfirmationScreen.allSet')}
+            </Text>
+        </View>
+        <FixedFooter>
+            <Button
+                success
+                text={props.translate('requestCallConfirmationScreen.gotIt')}
+                style={styles.mt6}
+                pressOnEnter
+                onPress={() => Navigation.goBack()}
+            />
+        </FixedFooter>
+    </>
+);
+
+RequestCallConfirmationScreen.propTypes = propTypes;
+RequestCallConfirmationScreen.displayName = 'RequestCallConfirmationScreen';
+
+export default withLocalize(RequestCallConfirmationScreen);