IOU Error Handling, navigated back to Amount Page on error

src/languages/en.js

@@ -167,6 +167,11 @@ export default {
         send: ({amount}) => `Send ${amount}`,
         choosePaymentMethod: 'Choose payment method:',
         noReimbursableExpenses: 'This report has an invalid amount',
+        error: {
+            invalidAmount: 'Invalid Amount',
+            invalidSplit: 'Splits amount does not equal total amount',
+            other: 'Unexpected error, please try again later',
+        },
     },
     reportDetailsPage: {
         notificationPreferencesDescription: 'How often should we notify you when there are new messages to catch up on in this room?',

src/languages/es.js

@@ -167,6 +167,11 @@ export default {
         send: ({amount}) => `Enviar ${amount}`,
         choosePaymentMethod: 'Elige el método de pago:',
         noReimbursableExpenses: 'El monto de este informe es inválido',
+        error: {
+            invalidAmount: 'Monto no válido',
+            invalidSplit: 'La suma de las partes no equivale al monto total',
+            other: 'Error inesperado, por favor inténtalo más tarde',
+        },
     },
     reportDetailsPage: {
         notificationPreferencesDescription: 'Cada cuanto tiempo quieres que te avisemos que hay nuevos mensajes en este canal?',

src/libs/API.js

@@ -160,6 +160,13 @@ Network.registerResponseHandler((queuedRequest, response) => {
         return;
     }
 
+    if (response.jsonCode === 405 || response.jsonCode === 404) {
+        // IOU Split & Request money transactions failed due to invalid amount(405) or unable to split(404)
+        // It's a failure, so reject the queued request
+        queuedRequest.reject(response);
+        return;
+    }
+
     queuedRequest.resolve(response);
 });
 

src/libs/actions/IOU.js

@@ -55,6 +55,22 @@ function getIOUReportsForNewTransaction(requestParams) {
         .finally(() => Onyx.merge(ONYXKEYS.IOU, {loading: false, creatingIOUTransaction: false}));
 }
 
+/**
+ *  Returns IOU Transaction Error Messages
+ * @param {Object} error
+ */
+
+function getIOUErrorMessage(error) {
+    if (error && error.jsonCode) {
+        if (error.jsonCode === 405) {
+            return translateLocal('iou.error.invalidAmount');
+        } if (error.jsonCode === 404) {
+            return translateLocal('iou.error.invalidSplit');
+        }
+    }
+    return translateLocal('iou.error.other');
+}
+
 /**
  * Creates IOUSplit Transaction
  * @param {Object} params
@@ -69,6 +85,13 @@ function createIOUTransaction(params) {
         .then((data) => {
             getIOUReportsForNewTransaction([data]);
             Navigation.navigate(ROUTES.getReportRoute(data.chatReportID));
+        })?.catch((error) => {
+            Onyx.merge(ONYXKEYS.IOU, {
+                loading: false,
+                creatingIOUTransaction: false,
+                error: true,
+            });
+            Growl.error(getIOUErrorMessage(error));
         });
 }
 
@@ -111,6 +134,13 @@ function createIOUSplit(params) {
             }
             getIOUReportsForNewTransaction(reportParams);
             Navigation.navigate(ROUTES.getReportRoute(chatReportID));
+        })?.catch((error) => {
+            Onyx.merge(ONYXKEYS.IOU, {
+                loading: false,
+                creatingIOUTransaction: false,
+                error: true,
+            });
+            Growl.error(getIOUErrorMessage(error));
         });
 }
 

src/pages/iou/IOUModal.js

@@ -101,6 +101,7 @@ class IOUModal extends Component {
         this.addParticipants = this.addParticipants.bind(this);
         this.createTransaction = this.createTransaction.bind(this);
         this.updateComment = this.updateComment.bind(this);
+        this.handleTransactionError = this.handleTransactionError.bind(this);
         const participants = lodashGet(props, 'report.participants', []);
         const participantsWithDetails = getPersonalDetailsForLogins(participants, props.personalDetails)
             .map(personalDetails => ({
@@ -140,6 +141,11 @@ class IOUModal extends Component {
             Navigation.dismissModal();
         }
 
+        // If transaction fails, handling it here
+        if (prevProps.iou.creatingIOUTransaction && this.props.iou.error === true) {
+            this.handleTransactionError();
+        }
+
         if (prevProps.iou.selectedCurrencyCode
             !== this.props.iou.selectedCurrencyCode) {
             setIOUSelectedCurrency(this.props.iou.selectedCurrencyCode);
@@ -248,6 +254,11 @@ class IOUModal extends Component {
         });
     }
 
+    handleTransactionError() {
+        // Navigating to Enter Amount Page
+        this.setState({currentStepIndex: 0});
+    }
+
     render() {
         const currentStep = this.steps[this.state.currentStepIndex];
         const reportID = lodashGet(this.props, 'route.params.reportID', '');