Improve error handling when adding bank connections

1 files changed, 31 insertions, 11 deletions

diff --git a/frontend/src/components/bank-accounts/AddBankConnectionDrawer.tsx b/frontend/src/components/bank-accounts/AddBankConnectionDrawer.tsx
index 57b85cca..6978192c 100644
--- a/frontend/src/components/bank-accounts/AddBankConnectionDrawer.tsx
+++ b/frontend/src/components/bank-accounts/AddBankConnectionDrawer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Drawer, Input, Form, Steps } from 'antd';
+import { message, Button, Drawer, Input, Form, Steps } from 'antd';
 const { Step } = Steps;
 
 const layout = {
@@ -20,6 +20,10 @@ const AddBankConnectionDrawer = (props) => {
 
   const steps = [{ title: 'Fill up details' }, { title: 'Print document' }];
 
+  const showError = (err) => {
+    message.error(String(err));
+  };
+
   const createBankConnection = async () => {
     const authHeader = await window.localStorage.getItem('authHeader');
     await fetch(`/bank-connections`, {
@@ -109,17 +113,33 @@ const AddBankConnectionDrawer = (props) => {
   };
 
   const next = async () => {
-    await createBankConnection();
-    await connectBankConnection();
-    await fetchKeyLetter();
-    await updateBankAccounts();
+    let isError = true;
+    await createBankConnection()
+      .then(async () => {
+        await connectBankConnection()
+          .then(async () => {
+            await fetchKeyLetter()
+              .then(async () => {
+                await updateBankAccounts()
+                  .then(() => {
+                    isError = false;
+                  })
+                  .catch((err) => showError(err));
+              })
+              .catch((err) => showError(err));
+          })
+          .catch((err) => showError(err));
+      })
+      .catch((err) => showError(err));
 
-    setServerURL('');
-    setHostID('');
-    setPartnerID('');
-    setUserID('');
-    setSystemID('');
-    setCurrentStep(currentStep + 1);
+    if (!isError) {
+      setServerURL('');
+      setHostID('');
+      setPartnerID('');
+      setUserID('');
+      setSystemID('');
+      setCurrentStep(currentStep + 1);
+    }
   };
 
   const closeDrawer = () => {