feat: handle transactions locking request error.

src/components/Alert/index.js

@@ -47,14 +47,14 @@ const AlertRoot = styled.div`
   `}
 `;
 
-const AlertTitle = styled.h3`
+export const AlertTitle = styled.h3`
   color: rgb(17, 24, 28);
   margin-bottom: 4px;
   font-size: 14px;
   font-weight: 600;
 `;
 
-const AlertDesc = styled.p`
+export const AlertDesc = styled.p`
   color: rgb(104, 112, 118);
   margin: 0;
 `;

src/containers/Dialogs/MoneyInDialog/MoneyInForm.js

@@ -86,7 +86,7 @@ function MoneyInForm({
         });
       })
       .finally(() => {
-        setSubmitting(true);
+        setSubmitting(false);
       });
   };
 

src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js

@@ -86,7 +86,7 @@ function MoneyOutForm({
         });
       })
       .finally(() => {
-        setSubmitting(true);
+        setSubmitting(false);
       });
   };
   return (

src/containers/GlobalErrors/GlobalErrors.js

@@ -53,9 +53,11 @@ function GlobalErrors({
     );
   }
   if (globalErrors.transactionsLocked) {
+    const lockedToDate =
+      globalErrors.transactionsLocked.formatted_locked_to_date;
+
     AppToaster.show({
-      message:
+      message: `Transactions before ${lockedToDate} has been locked. Hence action cannot be performed.`,
-        'Transactions before 13 Dec 2021 has been locked. Hence action cannot be performed.',
       intent: Intent.DANGER,
       onDismiss: () => {
         globalErrorsSet({ transactionsLocked: false });

src/containers/TransactionsLocking/TransactionsLockingList.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
 import * as R from 'ramda';
@@ -11,6 +10,7 @@ import {
   Join,
   Paragraph,
   FormattedMessage as T,
+  AlertDesc
 } from 'components';
 import { TransactionsLockingProvider } from './TransactionsLockingProvider';
 import {
@@ -258,4 +258,8 @@ const LockAllAlert = styled(Alert)`
   margin-bottom: 0;
   margin-top: 20px;
   background: transparent;
+
+  ${AlertDesc} {
+    color: #1f3255;
+  }
 `;

src/containers/TransactionsLocking/components.js

@@ -213,7 +213,7 @@ const TransactionLockingWrapp = styled.div`
   ${(props) =>
     props.isEnabled &&
     `
-    border-color: #fe9f9e; 
+    border-color: #fc8483; 
 
     ${TransLockingIcon} {
       color: #ff8282;

src/hooks/useRequest.js

@@ -12,7 +12,7 @@ export default function useApiRequest() {
   const setGlobalErrors = useSetGlobalErrors();
   const { setLogout } = useAuthActions();
   const currentLocale = getCookie('locale');
-  
+
   // Authentication token.
   const token = useAuthToken();
 
@@ -47,7 +47,7 @@ export default function useApiRequest() {
     instance.interceptors.response.use(
       (response) => response,
       (error) => {
-        const { status } = error.response;
+        const { status, data } = error.response;
 
         if (status >= 500) {
           setGlobalErrors({ something_wrong: true });
@@ -57,7 +57,15 @@ export default function useApiRequest() {
           setLogout();
         }
         if (status === 403) {
-          setGlobalErrors({ access_denied: true })
+          setGlobalErrors({ access_denied: true });
+        }
+        if (status === 400) {
+          const lockedError = data.errors.find(
+            (error) => error.type === 'TRANSACTIONS_DATE_LOCKED',
+          );
+          if (lockedError) {
+            setGlobalErrors({ transactionsLocked: { ...lockedError.data } });
+          }
         }
         return Promise.reject(error);
       },
@@ -65,27 +73,30 @@ export default function useApiRequest() {
     return instance;
   }, [token, organizationId, setGlobalErrors, setLogout]);
 
-  return React.useMemo(() => ({
+  return React.useMemo(
-    http,
+    () => ({
+      http,
 
-    get(resource, params) {
+      get(resource, params) {
-      return http.get(`/api/${resource}`, params);
+        return http.get(`/api/${resource}`, params);
-    },
+      },
 
-    post(resource, params, config) {
+      post(resource, params, config) {
-      return http.post(`/api/${resource}`, params, config);
+        return http.post(`/api/${resource}`, params, config);
-    },
+      },
 
-    update(resource, slug, params) {
+      update(resource, slug, params) {
-      return http.put(`/api/${resource}/${slug}`, params);
+        return http.put(`/api/${resource}/${slug}`, params);
-    },
+      },
 
-    put(resource, params) {
+      put(resource, params) {
-      return http.put(`/api/${resource}`, params);
+        return http.put(`/api/${resource}`, params);
-    },
+      },
 
-    delete(resource, params) {
+      delete(resource, params) {
-      return http.delete(`/api/${resource}`, params);
+        return http.delete(`/api/${resource}`, params);
-    },
+      },
-  }), [http]);
+    }),
+    [http],
+  );
 }

src/lang/en/index.json

@@ -1630,7 +1630,7 @@
   "transactions_locking.paetial_unlock": "Partial Unlock", 
   "transactions_locking.cancel_partial_unlock": "Cancel Partial Unlock", 
   "transactions_locking.of_the_module_locked_to": "Transactions of the module locked to <strong>{value}</strong>.",
-  "transactions_locking.lock_reason": "Lock Reason: <strong>{value}</strong>.",
+  "transactions_locking.lock_reason": "<strong>Lock Reason</strong>: {value}.",
   "transactions_locking.partial_unlocked_from": "Partial unlocked from <strong>{fromDate}</strong> to <strong>{toDate}</strong>.",
   "transactions_locking.unlock_reason":"<strong>Unlock Reason:</strong> {value}.",
   "payment_transactions":"Payment transactions"