fix(webapp): use all drawers name from common enum object

fix(webapp): Payment made details drawer does not show up
chore: update CHANGELOG.md
2026-02-23 16:19:49 +00:00 · 2023-06-14 19:48:57 +02:00 · 2023-06-14 13:13:32 +02:00 · 2023-06-14 12:10:35 +02:00 · 2023-06-13 23:45:16 +02:00 · 2023-06-13 20:30:29 +02:00
135 changed files with 769 additions and 751 deletions
--- a/.env.example
+++ b/.env.example
@@ -44,6 +44,6 @@ AGENDASH_AUTH_USER=agendash
 AGENDASH_AUTH_PASSWORD=123123

 # Sign-up restrictions
-SIGNUP_DISABLED=true
+SIGNUP_DISABLED=false
 SIGNUP_ALLOWED_DOMAINS=
 SIGNUP_ALLOWED_EMAILS=
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,46 @@

 All notable changes to Bigcapital server-side will be in this file.

+## [0.9.6] - 12-06-2023
+
+`@bigcapital/webapp`
+
+* fix: remove duplicated form submitting by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/138
+* feat: add monorepo version on the application sidebar by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/136
+
+## [0.9.5] - 11-06-2023
+
+`@bigcapital/server`
+
+* fix: filter ledger entries that effect contact balance to AR/AP accounts only by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/132
+
+`@bigcapital/webapp`
+
+* fix: catch journal error when create a journal with accounts have different currency by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/135
+* fix: add duplicate icon to context menu of customers and vendors table by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/133
+* fix: customer/vendor opening balance with exchange rate by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/134
+
+## [0.9.4] - 08-06-2023
+
+`@bigcapital/monorepo`
+- fixed: docker-compose line-ending issue on Windows by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/130
+
+`@bigcapital/server`
+- fixed: Disable Webpack minification for JS class name reading.
+
+## [0.9.3] -04-06-2023
+
+`@bigcapital/monorepo`
+* Added: Add env variable to customize the proxy public ports by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/125
+* Added: Migrate the server database to MariaDB by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/128
+
+## [0.9.2] - 31-05-2023
+
+`@bigcapital/webapp`
+
+- fixed: move `packaeg-lock.json` inside docker container.
+- fixed: remove Sentry from the web client.
+
 ## [0.9.1] - 28-05-2023

 `@bigcapital/server`
--- a/README.md
+++ b/README.md
@@ -7,6 +7,24 @@
  <p align="center">
    Simple, smart online accounting software for small and medium businesses.
  </p>
+
+  <p align="center">
+    <a href="https://github.com/bigcapitalhq/bigcapital/commits/develop">
+      <img src="https://img.shields.io/github/commit-activity/m/bigcapitalhq/bigcapital/develop" />
+    </a>
+    <a href="https://discord.com/invite/c8nPBJafeb">
+      <img src="https://img.shields.io/discord/1066514716752625725?label=Discord" alt="" />
+    </a>
+    <a href="https://github.com/bigcapitalhq/bigcapital/graphs/contributors">
+      <img src="https://img.shields.io/github/contributors/bigcapitalhq/bigcapital" alt="" />
+    </a>
+    <a href="https://github.com/bigcapitalhq/bigcapital/blob/develop/LICENSE">
+      <img src="https://img.shields.io/github/license/bigcapitalhq/bigcapital" alt="" />
+    </a>
+    <a href="https://twitter.com/bigcapitalhq"> 
+      <img src="https://img.shields.io/twitter/follow/bigcapitalhq?style=social" alt="twitter" />
+    </a>
+  </p>
 </p>

 # What's Bigcapital?
@@ -22,9 +40,9 @@ Bigcapital is a smart and open-source accounting and inventory software, Bigcapi
 # Resources

 - [Documentation](https://docs.bigcapital.ly/) - Learn how to use.
+- [Contribution](https://github.com/bigcapitalhq/bigcapital/blob/develop/CONTRIBUTING.md) - Welcome to any contributions.
 - [Discord](https://discord.com/invite/c8nPBJafeb) - Ask for help.
 - [Bug Tracker](https://github.com/bigcapitalhq/bigcapital/issues) - Notify us new bugs.
- [Source Code](https://github.com/bigcapitalhq/bigcapital) - Github repo.

 # Changelog

--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "useWorkspaces": true,
-  "version": "0.0.0",
+  "version": "0.9.6",
  "npmClient": "npm"
 }
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bigcapital/server",
-  "version": "1.7.1",
+  "version": "0.9.5",
  "description": "",
  "main": "src/server.ts",
  "scripts": {
--- a/packages/server/src/interfaces/Ledger.ts
+++ b/packages/server/src/interfaces/Ledger.ts
@@ -4,6 +4,8 @@ export interface ILedger {

  getEntries(): ILedgerEntry[];

+  filter(cb: (entry: ILedgerEntry) => boolean): ILedger;
+
  whereAccountId(accountId: number): ILedger;
  whereContactId(contactId: number): ILedger;
  whereFromDate(fromDate: Date | string): ILedger;
--- a/packages/server/src/services/Accounting/LedgerContactStorage.ts
+++ b/packages/server/src/services/Accounting/LedgerContactStorage.ts
@@ -1,9 +1,14 @@
 import { Service, Inject } from 'typedi';
 import async from 'async';
 import { Knex } from 'knex';
-import { ILedger, ISaleContactsBalanceQueuePayload } from '@/interfaces';
+import {
+  ILedger,
+  ILedgerEntry,
+  ISaleContactsBalanceQueuePayload,
+} from '@/interfaces';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { TenantMetadata } from '@/system/models';
+import { ACCOUNT_TYPE } from '@/data/AccountTypes';

@Service()
 export class LedgerContactsBalanceStorage {
@@ -49,6 +54,29 @@ export class LedgerContactsBalanceStorage {
    await this.saveContactBalance(tenantId, ledger, contactId, trx);
  };

+  /**
+   * Filters AP/AR ledger entries.
+   * @param {number} tenantId
+   * @param {Knex.Transaction} trx
+   * @returns {Promise<(entry: ILedgerEntry) => boolean>}
+   */
+  private filterARAPLedgerEntris = async (
+    tenantId: number,
+    trx?: Knex.Transaction
+  ): Promise<(entry: ILedgerEntry) => boolean> => {
+    const { Account } = this.tenancy.models(tenantId);
+
+    const ARAPAcounts = await Account.query(trx).whereIn('accountType', [
+      ACCOUNT_TYPE.ACCOUNTS_RECEIVABLE,
+      ACCOUNT_TYPE.ACCOUNTS_PAYABLE,
+    ]);
+    const ARAPAcountsIds = ARAPAcounts.map((a) => a.id);
+
+    return (entry: ILedgerEntry) => {
+      return ARAPAcountsIds.indexOf(entry.accountId) !== -1;
+    };
+  };
+
  /**
   *
   * @param   {number} tenantId
@@ -63,16 +91,24 @@ export class LedgerContactsBalanceStorage {
    trx?: Knex.Transaction
  ): Promise<void> => {
    const { Contact } = this.tenancy.models(tenantId);
-    const contact = await Contact.query().findById(contactId);
+    const contact = await Contact.query(trx).findById(contactId);

    // Retrieves the given tenant metadata.
    const tenantMeta = await TenantMetadata.query().findOne({ tenantId });
-    
+
    // Detarmines whether the contact has foreign currency.
    const isForeignContact = contact.currencyCode !== tenantMeta.baseCurrency;

    // Filters the ledger base on the given contact id.
-    const contactLedger = ledger.whereContactId(contactId);
+    const filterARAPLedgerEntris = await this.filterARAPLedgerEntris(
+      tenantId,
+      trx
+    );
+    const contactLedger = ledger
+      // Filter entries only that have contact id.
+      .whereContactId(contactId)
+      // Filter entries on AR/AP accounts.
+      .filter(filterARAPLedgerEntris);

    const closingBalance = isForeignContact
      ? contactLedger
--- a/packages/server/src/services/Contacts/Customers/CRUD/CreateCustomer.ts
+++ b/packages/server/src/services/Contacts/Customers/CRUD/CreateCustomer.ts
@@ -55,7 +55,7 @@ export class CreateCustomer {
      } as ICustomerEventCreatingPayload);

      // Creates a new contact as customer.
-      const customer = await Contact.query().insertAndFetch({
+      const customer = await Contact.query(trx).insertAndFetch({
        ...customerObj,
      });
      // Triggers `onCustomerCreated` event.
--- a/packages/webapp/craco.config.js
+++ b/packages/webapp/craco.config.js
@@ -1,7 +1,18 @@
 const path = require('path');
+const webpack = require('webpack');
+const dotenv = require('dotenv-webpack');

 module.exports = {
  webpack: {
+    plugins: [
+      new dotenv(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          MONOREPO_VERSION: JSON.stringify(require('../../lerna.json').version),
+        },
+      }),
+    ],
+
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
--- a/packages/webapp/package-lock.json
+++ b/packages/webapp/package-lock.json
@@ -1929,137 +1929,6 @@
        "reselect": "^4.1.7"
      }
    },
-    "@sentry/browser": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.19.7.tgz",
-      "integrity": "sha512-oDbklp4O3MtAM4mtuwyZLrgO1qDVYIujzNJQzXmi9YzymJCuzMLSRDvhY83NNDCRxf0pds4DShgYeZdbSyKraA==",
-      "requires": {
-        "@sentry/core": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/core": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.19.7.tgz",
-      "integrity": "sha512-tOfZ/umqB2AcHPGbIrsFLcvApdTm9ggpi/kQZFkej7kMphjT+SGBiQfYtjyg9jcRW+ilAR4JXC9BGKsdEQ+8Vw==",
-      "requires": {
-        "@sentry/hub": "6.19.7",
-        "@sentry/minimal": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/hub": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.19.7.tgz",
-      "integrity": "sha512-y3OtbYFAqKHCWezF0EGGr5lcyI2KbaXW2Ik7Xp8Mu9TxbSTuwTe4rTntwg8ngPjUQU3SUHzgjqVB8qjiGqFXCA==",
-      "requires": {
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/minimal": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.19.7.tgz",
-      "integrity": "sha512-wcYmSJOdvk6VAPx8IcmZgN08XTXRwRtB1aOLZm+MVHjIZIhHoBGZJYTVQS/BWjldsamj2cX3YGbGXNunaCfYJQ==",
-      "requires": {
-        "@sentry/hub": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/react": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.19.7.tgz",
-      "integrity": "sha512-VzJeBg/v41jfxUYPkH2WYrKjWc4YiMLzDX0f4Zf6WkJ4v3IlDDSkX6DfmWekjTKBho6wiMkSNy2hJ1dHfGZ9jA==",
-      "requires": {
-        "@sentry/browser": "6.19.7",
-        "@sentry/minimal": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "hoist-non-react-statics": "^3.3.2",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/tracing": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.19.7.tgz",
-      "integrity": "sha512-ol4TupNnv9Zd+bZei7B6Ygnr9N3Gp1PUrNI761QSlHtPC25xXC5ssSD3GMhBgyQrcvpuRcCFHVNNM97tN5cZiA==",
-      "requires": {
-        "@sentry/hub": "6.19.7",
-        "@sentry/minimal": "6.19.7",
-        "@sentry/types": "6.19.7",
-        "@sentry/utils": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "@sentry/types": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.19.7.tgz",
-      "integrity": "sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg=="
-    },
-    "@sentry/utils": {
-      "version": "6.19.7",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.19.7.tgz",
-      "integrity": "sha512-z95ECmE3i9pbWoXQrD/7PgkBAzJYR+iXtPuTkpBjDKs86O3mT+PXOT3BAn79w2wkn7/i3vOGD2xVr1uiMl26dA==",
-      "requires": {
-        "@sentry/types": "6.19.7",
-        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
    "@sheerun/mutationobserver-shim": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@@ -5985,11 +5854,27 @@
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
    },
+    "dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "requires": {
+        "dotenv": "^8.2.0"
+      }
+    },
    "dotenv-expand": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
    },
+    "dotenv-webpack": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.1.tgz",
+      "integrity": "sha512-CdrgfhZOnx4uB18SgaoP9XHRN2v48BbjuXQsZY5ixs5A8579NxQkmMxRtI7aTwSiSQcM2ao12Fdu+L3ZS3bG4w==",
+      "requires": {
+        "dotenv-defaults": "^2.0.2"
+      }
+    },
    "duplexer": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bigcapital/webapp",
-  "version": "1.7.1",
+  "version": "0.9.6",
  "private": true,
  "dependencies": {
    "@blueprintjs-formik/core": "^0.3.3",
@@ -42,6 +42,7 @@
    "deep-map-keys": "^2.0.1",
    "deepdash": "^5.3.9",
    "dependency-graph": "^0.11.0",
+    "dotenv-webpack": "^8.0.1",
    "fast-deep-equal": "^3.1.3",
    "flat": "^5.0.2",
    "formik": "^2.2.5",
--- a/packages/webapp/src/components/Customers/CustomerDrawerLink.tsx
+++ b/packages/webapp/src/components/Customers/CustomerDrawerLink.tsx
@@ -4,6 +4,7 @@ import * as R from 'ramda';

 import { ButtonLink } from '../Button';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';

 function CustomerDrawerLinkComponent({
  // #ownProps
@@ -16,7 +17,7 @@ function CustomerDrawerLinkComponent({
 }) {
  // Handle view customer drawer.
  const handleCustomerDrawer = (event) => {
-    openDrawer('customer-detail-drawer', { customerId });
+    openDrawer(DRAWERS.CUSTOMER_DETAILS, { customerId });
    event.preventDefault();
  };

--- a/packages/webapp/src/components/DrawersContainer.tsx
+++ b/packages/webapp/src/components/DrawersContainer.tsx
@@ -31,28 +31,28 @@ import { DRAWERS } from '@/constants/drawers';
 export default function DrawersContainer() {
  return (
    <div>
-      <AccountDrawer name={DRAWERS.ACCOUNT} />
-      <ManualJournalDrawer name={DRAWERS.JOURNAL} />
-      <ExpenseDrawer name={DRAWERS.EXPENSE} />
-      <BillDrawer name={DRAWERS.BILL} />
-      <InvoiceDetailDrawer name={DRAWERS.INVOICE} />
-      <EstimateDetailDrawer name={DRAWERS.ESTIMATE} />
-      <ReceiptDetailDrawer name={DRAWERS.RECEIPT} />
-      <PaymentReceiveDetailDrawer name={DRAWERS.PAYMENT_RECEIVE} />
-      <PaymentMadeDetailDrawer name={DRAWERS.PAYMENT_MADE} />
-      <ItemDetailDrawer name={DRAWERS.ITEM} />
-      <CustomerDetailsDrawer name={DRAWERS.CUSTOMER} />
-      <VendorDetailsDrawer name={DRAWERS.VENDOR} />
-      <InventoryAdjustmentDetailDrawer name={DRAWERS.INVENTORY_ADJUSTMENT} />
-      <CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION} />
+      <AccountDrawer name={DRAWERS.ACCOUNT_DETAILS} />
+      <ManualJournalDrawer name={DRAWERS.JOURNAL_DETAILS} />
+      <ExpenseDrawer name={DRAWERS.EXPENSE_DETAILS} />
+      <BillDrawer name={DRAWERS.BILL_DETAILS} />
+      <InvoiceDetailDrawer name={DRAWERS.INVOICE_DETAILS} />
+      <EstimateDetailDrawer name={DRAWERS.ESTIMATE_DETAILS} />
+      <ReceiptDetailDrawer name={DRAWERS.RECEIPT_DETAILS} />
+      <PaymentReceiveDetailDrawer name={DRAWERS.PAYMENT_RECEIVE_DETAILS} />
+      <PaymentMadeDetailDrawer name={DRAWERS.PAYMENT_MADE_DETAILS} />
+      <ItemDetailDrawer name={DRAWERS.ITEM_DETAILS} />
+      <CustomerDetailsDrawer name={DRAWERS.CUSTOMER_DETAILS} />
+      <VendorDetailsDrawer name={DRAWERS.VENDOR_DETAILS} />
+      <InventoryAdjustmentDetailDrawer name={DRAWERS.INVENTORY_ADJUSTMENT_DETAILS} />
+      <CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION_DETAILS} />
      <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
      <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
      <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
-      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE} />
-      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT} />
-      <RefundCreditNoteDetailDrawer name={DRAWERS.REFUND_CREDIT_NOTE} />
-      <RefundVendorCreditDetailDrawer name={DRAWERS.REFUND_VENDOR_CREDIT} />
-      <WarehouseTransferDetailDrawer name={DRAWERS.WAREHOUSE_TRANSFER} />
+      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAILS} />
+      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAILS} />
+      <RefundCreditNoteDetailDrawer name={DRAWERS.REFUND_CREDIT_NOTE_DETAILS} />
+      <RefundVendorCreditDetailDrawer name={DRAWERS.REFUND_VENDOR_CREDIT_DETAILS} />
+      <WarehouseTransferDetailDrawer name={DRAWERS.WAREHOUSE_TRANSFER_DETAILS} />
    </div>
  );
 }
--- a/packages/webapp/src/components/Vendors/VendorDrawerLink.tsx
+++ b/packages/webapp/src/components/Vendors/VendorDrawerLink.tsx
@@ -4,6 +4,7 @@ import * as R from 'ramda';

 import { ButtonLink } from '../Button';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';

 function VendorDrawerLinkComponent({
  // #ownProps
@@ -16,7 +17,7 @@ function VendorDrawerLinkComponent({
 }) {
  // Handle view customer drawer.
  const handleVendorDrawer = (event) => {
-    openDrawer('vendor-detail-drawer', { vendorId });
+    openDrawer(DRAWERS.VENDOR_DETAILS, { vendorId });
    event.preventDefault();
  };

--- a/packages/webapp/src/constants/drawers.ts
+++ b/packages/webapp/src/constants/drawers.ts
@@ -1,25 +1,25 @@
 // @ts-nocheck
 export enum DRAWERS {
-  ACCOUNT = 'account-drawer',
-  JOURNAL = 'journal-drawer',
-  EXPENSE = 'expense-drawer',
-  BILL = 'bill-drawer',
-  INVOICE = 'invoice-detail-drawer',
-  RECEIPT = 'receipt-detail-drawer',
-  PAYMENT_RECEIVE = 'payment-receive-detail-drawer',
-  PAYMENT_MADE = 'payment-made-drawer',
-  ESTIMATE = 'estimate-detail-drawer',
-  ITEM = 'item-detail-drawer',
-  CUSTOMER = 'customer-detail-drawer',
-  VENDOR = 'vendor-detail-drawer',
-  INVENTORY_ADJUSTMENT = 'inventory-adjustment-drawer',
-  CASHFLOW_TRNASACTION = 'cashflow-transaction-drawer',
+  ACCOUNT_DETAILS = 'account-drawer',
+  JOURNAL_DETAILS = 'journal-drawer',
+  EXPENSE_DETAILS = 'expense-drawer',
+  BILL_DETAILS = 'bill-drawer',
+  INVOICE_DETAILS = 'invoice-detail-drawer',
+  RECEIPT_DETAILS = 'receipt-detail-drawer',
+  PAYMENT_RECEIVE_DETAILS = 'payment-receive-detail-drawer',
+  PAYMENT_MADE_DETAILS = 'payment-made-drawer',
+  ESTIMATE_DETAILS = 'estimate-detail-drawer',
+  ITEM_DETAILS = 'item-detail-drawer',
+  CUSTOMER_DETAILS = 'customer-detail-drawer',
+  VENDOR_DETAILS = 'vendor-detail-drawer',
+  INVENTORY_ADJUSTMENT_DETAILS = 'inventory-adjustment-drawer',
+  CASHFLOW_TRNASACTION_DETAILS = 'cashflow-transaction-drawer',
  QUICK_CREATE_CUSTOMER = 'quick-create-customer',
  QUICK_CREATE_ITEM = 'quick-create-item',
  QUICK_WRITE_VENDOR = 'quick-write-vendor',
-  CREDIT_NOTE = 'credit-note-detail-drawer',
-  VENDOR_CREDIT = 'vendor-credit-detail-drawer',
-  REFUND_CREDIT_NOTE = 'refund-credit-detail-drawer',
-  REFUND_VENDOR_CREDIT = 'refund-vendor-detail-drawer',
-  WAREHOUSE_TRANSFER = 'warehouse-transfer-detail-drawer',
+  CREDIT_NOTE_DETAILS = 'credit-note-detail-drawer',
+  VENDOR_CREDIT_DETAILS = 'vendor-credit-detail-drawer',
+  REFUND_CREDIT_NOTE_DETAILS = 'refund-credit-detail-drawer',
+  REFUND_VENDOR_CREDIT_DETAILS = 'refund-vendor-detail-drawer',
+  WAREHOUSE_TRANSFER_DETAILS = 'warehouse-transfer-detail-drawer',
 }
--- a/packages/webapp/src/constants/footerLinks.tsx
+++ b/packages/webapp/src/constants/footerLinks.tsx
@@ -4,30 +4,22 @@ import intl from 'react-intl-universal';
 export const getFooterLinks = () => [
  {
    title: intl.get('blog'),
-    link: '#',
+    link: 'https://docs.bigcapital.ly/blog',
+  },
+  {
+    title: intl.get('community'),
+    link: 'https://discord.com/invite/c8nPBJafeb',
  },
  {
    title: intl.get('support'),
-    link: '#',
-  },
-  {
-    title: intl.get('service_status'),
-    link: '#',
-  },
-  {
-    title: intl.get('pricing'),
-    link: '#',
-  },
-  {
-    title: intl.get('reseller_partner'),
-    link: '#',
+    link: 'https://discord.com/invite/c8nPBJafeb',
  },
  {
    title: intl.get('docs'),
-    link: '#',
+    link: 'https://docs.bigcapital.ly',
  },
  {
    title: 'Bigcapital',
    link: 'http://bigcapital.ly',
-  }
-]
+  },
+];
--- a/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.tsx
+++ b/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.tsx
@@ -25,6 +25,7 @@ import { useMemorizedColumnsWidths } from '@/hooks';
 import { useManualJournalsColumns } from './utils';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Manual journals data-table.
@@ -79,14 +80,16 @@ function ManualJournalsDataTable({

  // Handle view detail journal.
  const handleViewDetailJournal = ({ id }) => {
-    openDrawer('journal-drawer', {
+    openDrawer(DRAWERS.JOURNAL_DETAILS, {
      manualJournalId: id,
    });
  };

  // Handle cell click.
  const handleCellClick = (cell, event) => {
-    openDrawer('journal-drawer', { manualJournalId: cell.row.original.id });
+    openDrawer(DRAWERS.JOURNAL_DETAILS, {
+      manualJournalId: cell.row.original.id,
+    });
  };

  // Local storage memorizing columns widths.
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.tsx
@@ -1,193 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import {
-  Intent,
-  Button,
-  ButtonGroup,
-  Popover,
-  PopoverInteractionKind,
-  Position,
-  Menu,
-  MenuItem,
-} from '@blueprintjs/core';
-import classNames from 'classnames';
-import { useFormikContext } from 'formik';
-import { FormattedMessage as T, If, Icon } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import { useMakeJournalFormContext } from './MakeJournalProvider';
-import { useHistory } from 'react-router-dom';
-
-/**
- * Make Journal floating actions bar.
- */
-export default function MakeJournalEntriesFooter() {
-  const history = useHistory();
-
-  // Formik context.
-  const { isSubmitting, submitForm } = useFormikContext();
-
-  // Make journal form context.
-  const {
-    manualJournalId,
-    setSubmitPayload,
-    manualJournalPublished = false,
-  } = useMakeJournalFormContext();
-
-  // Handle `submit & publish` button click.
-  const handleSubmitPublishBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, publish: true });
-    submitForm();
-  };
-
-  // Handle `submit, publish & new` button click.
-  const handleSubmitPublishAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: true, resetForm: true });
-    submitForm();
-  };
-
-  // Handle `submit, publish & continue editing` button click.
-  const handleSubmitPublishContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: true });
-    submitForm();
-  };
-
-  // Handle `submit as draft` button click.
-  const handleSubmitDraftBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, publish: false });
-  };
-
-  // Handle `submit as draft & new` button click.
-  const handleSubmitDraftAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: false, resetForm: true });
-    submitForm();
-  };
-
-  // Handles submit as draft & continue editing button click.
-  const handleSubmitDraftContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, publish: false });
-    submitForm();
-  };
-
-  // Handle cancel button action click.
-  const handleCancelBtnClick = (event) => {
-    history.goBack();
-  };
-
-  const handleClearBtnClick = (event) => {};
-
-  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Publish ----------- */}
-      <If condition={!manualJournalId || !manualJournalPublished}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            intent={Intent.PRIMARY}
-            type="submit"
-            onClick={handleSubmitPublishBtnClick}
-            text={<T id={'save_publish'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'publish_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'publish_continue_editing'} />}
-                  onClick={handleSubmitPublishContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-        {/* ----------- Save As Draft ----------- */}
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            className={'ml1'}
-            type="submit"
-            onClick={handleSubmitDraftBtnClick}
-            text={<T id={'save_as_draft'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitDraftAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'save_continue_editing'} />}
-                  onClick={handleSubmitDraftContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      {/* ----------- Save and New ----------- */}
-      <If condition={manualJournalId && manualJournalPublished}>
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            intent={Intent.PRIMARY}
-            type="submit"
-            onClick={handleSubmitPublishBtnClick}
-            text={<T id={'save'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={manualJournalId ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
-      {/* ----------- Cancel ----------- */}
-      <Button
-        className={'ml1'}
-        onClick={handleCancelBtnClick}
-        text={<T id={'cancel'} />}
-      />
-    </div>
-  );
-}
--- a/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx
@@ -28,6 +28,8 @@ const ERROR = {
  CREDIT_DEBIT_SUMATION_SHOULD_NOT_EQUAL_ZERO:
    'CREDIT.DEBIT.SUMATION.SHOULD.NOT.EQUAL.ZERO',
  ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
+  COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS:
+    'COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS',
 };

 export const MIN_LINES_NUMBER = 1;
@@ -161,6 +163,15 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
      intl.get('journal_number_is_already_used'),
    );
  }
+  if (
+    (error = getError(ERROR.COULD_NOT_ASSIGN_DIFFERENT_CURRENCY_TO_ACCOUNTS))
+  ) {
+    toastMessages.push(
+      intl.get(
+        'make_journal.errors.should_add_accounts_in_same_currency_or_base_currency',
+      ),
+    );
+  }
  setErrors({ ...newErrors });

  if (toastMessages.length > 0) {
--- a/packages/webapp/src/containers/Accounting/ManualJournalUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Accounting/ManualJournalUniversalSearch.tsx
@@ -3,6 +3,7 @@ import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { AbilitySubject, ManualJournalAction } from '@/constants/abilityOption';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Universal search manual journal item select action.
@@ -17,7 +18,7 @@ function JournalUniversalSearchSelectComponent({
  openDrawer,
 }) {
  if (resourceType === RESOURCES_TYPES.MANUAL_JOURNAL) {
-    openDrawer('journal-drawer', { manualJournalId: resourceId });
+    openDrawer(DRAWERS.JOURNAL_DETAILS, { manualJournalId: resourceId });
    onAction && onAction();
  }
  return null;
--- a/packages/webapp/src/containers/Accounts/AccountUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Accounts/AccountUniversalSearch.tsx
@@ -5,6 +5,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { AbilitySubject, AccountAction } from '@/constants/abilityOption';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { DRAWERS } from '@/constants/drawers';

 function AccountUniversalSearchItemSelectComponent({
  // #ownProps
@@ -16,7 +17,7 @@ function AccountUniversalSearchItemSelectComponent({
  openDrawer,
 }) {
  if (resourceType === RESOURCES_TYPES.ACCOUNT) {
-    openDrawer('account-drawer', { accountId: resourceId });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: resourceId });
    onAction && onAction();
  }
  return null;
@@ -28,8 +29,8 @@ export const AccountUniversalSearchItemSelect = withDrawerActions(

 /**
 * Transformes account item to search item.
- * @param {*} account 
- * @returns 
+ * @param {*} account
+ * @returns
 */
 const accountToSearch = (account) => ({
  id: account.id,
--- a/packages/webapp/src/containers/Accounts/AccountsDataTable.tsx
+++ b/packages/webapp/src/containers/Accounts/AccountsDataTable.tsx
@@ -23,6 +23,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Accounts data-table.
@@ -71,7 +72,7 @@ function AccountsDataTable({

  // Handle view detail account.
  const handleViewDetailAccount = ({ id }) => {
-    openDrawer('account-drawer', { accountId: id });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: id });
  };

  // Handle new child button click.
@@ -84,7 +85,7 @@ function AccountsDataTable({
  };
  // Handle cell click.
  const handleCellClick = (cell, event) => {
-    openDrawer('account-drawer', { accountId: cell.row.original.id });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: cell.row.original.id });
  };
  // Local storage memorizing columns widths.
  const [initialColumnsWidths, , handleColumnResizing] =
--- a/packages/webapp/src/containers/Alerts/Accounts/AccountDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Accounts/AccountDeleteAlert.tsx
@@ -16,6 +16,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { useDeleteAccount } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Account delete alerts.
@@ -48,7 +49,7 @@ function AccountDeleteAlert({
          intent: Intent.SUCCESS,
        });
        closeAlert(name);
-        closeDrawer('account-drawer');
+        closeDrawer(DRAWERS.ACCOUNT_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/Bills/BillDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Bills/BillDeleteAlert.tsx
@@ -11,6 +11,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { handleDeleteErrors } from '@/containers/Purchases/Bills/BillForm/utils';
 import { useDeleteBill } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Bill delete alert.
@@ -43,8 +44,7 @@ function BillDeleteAlert({
          message: intl.get('the_bill_has_been_deleted_successfully'),
          intent: Intent.SUCCESS,
        });
-
-        closeDrawer('bill-drawer');
+        closeDrawer(DRAWERS.BILL_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.tsx
@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Account delete transaction alert.
@@ -48,7 +49,7 @@ function AccountDeleteTransactionAlert({
          message: intl.get('cash_flow_transaction.delete.alert_message'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('cashflow-transaction-drawer');
+        closeDrawer(DRAWERS.CASHFLOW_TRNASACTION_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.tsx
@@ -15,6 +15,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useDeleteCreditNote } from '@/hooks/query';
 import { handleDeleteErrors } from '@/containers/Sales/CreditNotes/CreditNotesLanding/utils';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Credit note delete alert.
@@ -46,7 +47,7 @@ function CreditNoteDeleteAlert({
          message: intl.get('credit_note.alert.delete_message'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('credit-note-detail-drawer');
+        closeDrawer(DRAWERS.CREDIT_NOTE_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.tsx
@@ -11,6 +11,7 @@ import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Refund credit transactions delete alert
@@ -42,7 +43,7 @@ function RefundCreditNoteDeleteAlert({
          message: intl.get('refund_credit_transactions.alert.delete_message'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('refund-credit-detail-drawer');
+        closeDrawer(DRAWERS.REFUND_CREDIT_NOTE_DETAILS);
      })
      .catch(() => {})
      .finally(() => {
--- a/packages/webapp/src/containers/Alerts/Customers/CustomerDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Customers/CustomerDeleteAlert.tsx
@@ -15,6 +15,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { useDeleteCustomer } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Customer delete alert.
@@ -47,7 +48,7 @@ function CustomerDeleteAlert({
          message: intl.get('the_customer_has_been_deleted_successfully'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('customer-detail-drawer');
+        closeDrawer(DRAWERS.CUSTOMER_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/Estimates/EstimateDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Estimates/EstimateDeleteAlert.tsx
@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Estimate delete alert.
@@ -47,7 +48,7 @@ function EstimateDeleteAlert({
          message: intl.get('the_estimate_has_been_deleted_successfully'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('estimate-detail-drawer');
+        closeDrawer(DRAWERS.ESTIMATE_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/Expenses/ExpenseDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Expenses/ExpenseDeleteAlert.tsx
@@ -10,6 +10,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { useDeleteExpense } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Expense delete alert.
@@ -42,7 +43,7 @@ function ExpenseDeleteAlert({
          }),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('expense-drawer');
+        closeDrawer(DRAWERS.EXPENSE_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/Invoices/InvoiceDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Invoices/InvoiceDeleteAlert.tsx
@@ -16,6 +16,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Invoice delete alert.
@@ -48,7 +49,7 @@ function InvoiceDeleteAlert({
          message: intl.get('the_invoice_has_been_deleted_successfully'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('invoice-detail-drawer');
+        closeDrawer(DRAWERS.INVOICE_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.tsx
@@ -14,6 +14,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useDeleteInventoryAdjustment } from '@/hooks/query';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Inventory Adjustment delete alerts.
@@ -49,7 +50,7 @@ function InventoryAdjustmentDeleteAlert({
          ),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('inventory-adjustment-drawer');
+        closeDrawer(DRAWERS.INVENTORY_ADJUSTMENT_DETAILS);
      })
      .catch((errors) => {})
      .finally(() => {
--- a/packages/webapp/src/containers/Alerts/Items/ItemDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Items/ItemDeleteAlert.tsx
@@ -17,6 +17,7 @@ import withItemsActions from '@/containers/Items/withItemsActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Item delete alerts.
@@ -54,7 +55,7 @@ function ItemDeleteAlert({
        });
        // Reset to page number one.
        setItemsTableState({ page: 1 });
-        closeDrawer('item-detail-drawer');
+        closeDrawer(DRAWERS.ITEM_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/ManualJournals/JournalDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/ManualJournals/JournalDeleteAlert.tsx
@@ -10,6 +10,7 @@ import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Journal delete alert.
@@ -45,7 +46,7 @@ function JournalDeleteAlert({
          intent: Intent.SUCCESS,
        });
        closeAlert(name);
-        closeDrawer('journal-drawer');
+        closeDrawer(DRAWERS.JOURNAL_DETAILS);
      })
      .catch(() => {
        closeAlert(name);
--- a/packages/webapp/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.tsx
@@ -11,6 +11,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useDeletePaymentMade } from '@/hooks/query';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Payment made delete alert.
@@ -44,7 +45,7 @@ function PaymentMadeDeleteAlert({
          message: intl.get('the_payment_made_has_been_deleted_successfully'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('payment-made-detail-drawer');
+        closeDrawer(DRAWERS.PAYMENT_MADE_DETAILS);
      })
      .finally(() => {
        closeAlert(name);
--- a/packages/webapp/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.tsx
@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Payment receive delete alert.
@@ -50,7 +51,7 @@ function PaymentReceiveDeleteAlert({
          ),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('payment-receive-detail-drawer');
+        closeDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS);
      })
      .catch(() => {})
      .finally(() => {
--- a/packages/webapp/src/containers/Alerts/Receipts/ReceiptDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Receipts/ReceiptDeleteAlert.tsx
@@ -15,6 +15,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Invoice  alert.
@@ -47,7 +48,7 @@ function NameDeleteAlert({
          message: intl.get('the_receipt_has_been_deleted_successfully'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('receipt-detail-drawer');
+        closeDrawer(DRAWERS.RECEIPT_DETAILS);
      })
      .catch(() => {})
      .finally(() => {
--- a/packages/webapp/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.tsx
@@ -10,6 +10,7 @@ import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Refund Vendor transactions delete alert.
@@ -43,7 +44,7 @@ function RefundVendorCreditDeleteAlert({
          ),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('refund-vendor-detail-drawer');
+        closeDrawer(DRAWERS.REFUND_VENDOR_CREDIT_DETAILS);
      })
      .catch(() => {})
      .finally(() => {
--- a/packages/webapp/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.tsx
@@ -14,6 +14,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { handleDeleteErrors } from '@/containers/Purchases/CreditNotes/CreditNotesLanding/utils';
 import { useDeleteVendorCredit } from '@/hooks/query';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Vendor Credit delete alert.
@@ -45,7 +46,7 @@ function VendorCreditDeleteAlert({
          message: intl.get('vendor_credits.alert.delete_message'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('vendor-credit-detail-drawer');
+        closeDrawer(DRAWERS.VENDOR_CREDIT_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/Vendors/VendorDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/Vendors/VendorDeleteAlert.tsx
@@ -16,6 +16,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Vendor delete alert.
@@ -48,7 +49,7 @@ function VendorDeleteAlert({
          message: intl.get('the_vendor_has_been_deleted_successfully'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('vendor-detail-drawer');
+        closeDrawer(DRAWERS.VENDOR_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/Alerts/WarehousesTransfer/WarehouseTransferDeleteAlert.tsx
+++ b/packages/webapp/src/containers/Alerts/WarehousesTransfer/WarehouseTransferDeleteAlert.tsx
@@ -14,6 +14,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Warehouse transfer delete alert
@@ -48,7 +49,7 @@ function WarehouseTransferDeleteAlert({
          message: intl.get('warehouse_transfer.alert.delete_message'),
          intent: Intent.SUCCESS,
        });
-        closeDrawer('warehouse-transfer-detail-drawer');
+        closeDrawer(DRAWERS.WAREHOUSE_TRANSFER_DETAILS);
      })
      .catch(
        ({
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx
@@ -9,6 +9,7 @@ import {

 import { Select } from '@blueprintjs/select';
 import { Icon } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 export const CashFlowMenuItems = ({
  text,
@@ -53,40 +54,40 @@ export const CashFlowMenuItems = ({
 export const handleCashFlowTransactionType = (reference, openDrawer) => {
  switch (reference.reference_type) {
    case 'SaleReceipt':
-      return openDrawer('receipt-detail-drawer', {
+      return openDrawer(DRAWERS.RECEIPT_DETAILS, {
        receiptId: reference.reference_id,
      });
    case 'Journal':
-      return openDrawer('journal-drawer', {
+      return openDrawer(DRAWERS.JOURNAL_DETAILS, {
        manualJournalId: reference.reference_id,
      });
    case 'Expense':
-      return openDrawer('expense-drawer', {
+      return openDrawer(DRAWERS.EXPENSE_DETAILS, {
        expenseId: reference.reference_id,
      });
    case 'PaymentReceive':
-      return openDrawer('payment-receive-detail-drawer', {
+      return openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, {
        paymentReceiveId: reference.reference_id,
      });
    case 'BillPayment':
-      return openDrawer('payment-made-detail-drawer', {
+      return openDrawer(DRAWERS.PAYMENT_MADE_DETAILS, {
        paymentMadeId: reference.reference_id,
      });
    case 'RefundCreditNote':
-      return openDrawer('refund-credit-detail-drawer', {
+      return openDrawer(DRAWERS.REFUND_CREDIT_NOTE_DETAILS, {
        refundTransactionId: reference.reference_id,
      });
    case 'RefundVendorCredit':
-      return openDrawer('refund-vendor-detail-drawer', {
+      return openDrawer(DRAWERS.REFUND_VENDOR_CREDIT_DETAILS, {
        refundTransactionId: reference.reference_id,
      });
    case 'InventoryAdjustment':
-      return openDrawer('inventory-adjustment-drawer', {
+      return openDrawer(DRAWERS.INVENTORY_ADJUSTMENT_DETAILS, {
        inventoryId: reference.reference_id,
      });

    default:
-      return openDrawer('cashflow-transaction-drawer', {
+      return openDrawer(DRAWERS.CASHFLOW_TRNASACTION_DETAILS, {
        referenceId: reference.reference_id,
      });
  }
--- a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx
+++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx
@@ -28,6 +28,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';

 import { AccountDialogAction } from '@/containers/Dialogs/AccountDialog/utils';
 import { safeCallback } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 const CASHFLOW_SKELETON_N = 4;

@@ -63,7 +64,7 @@ function CashflowBankAccount({
 }) {
  // Handle view detail account.
  const handleViewClick = () => {
-    openDrawer('account-drawer', { accountId: account.id });
+    openDrawer(DRAWERS.ACCOUNT_DETAILS, { accountId: account.id });
  };
  // Handle delete action account.
  const handleDeleteClick = () => {
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFloatingActions.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFloatingActions.tsx
@@ -27,13 +27,10 @@ function MoneyInFloatingActions({
    setSubmitPayload({ publish: false });
    submitForm();
  };
-
  // Handle submit  button click.
  const handleSubmittBtnClick = (event) => {
    setSubmitPayload({ publish: true });
-    submitForm();
  };
-
  // Handle close button click.
  const handleCloseBtnClick = (event) => {
    closeDialog(dialogName);
--- a/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFloatingActions.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFloatingActions.tsx
@@ -32,7 +32,6 @@ function MoneyOutFloatingActions({
  // Handle submit  button click.
  const handleSubmittBtnClick = (event) => {
    setSubmitPayload({ publish: true });
-    submitForm();
  };

  // Handle close button click.
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFinancialPanel.tsx
@@ -1,15 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import moment from 'moment';
 import classNames from 'classnames';
 import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { Features } from '@/constants';
 import {
  FFormGroup,
  FormattedMessage as T,
-  MoneyInputGroup,
  InputPrependText,
  CurrencySelectList,
  BranchSelect,
@@ -17,10 +14,17 @@ import {
  FeatureCan,
  Row,
  Col,
+  FMoneyInputGroup,
+  ExchangeRateInputGroup,
+  FDateInput,
 } from '@/components';
 import { useCustomerFormContext } from './CustomerFormProvider';
-import { useSetPrimaryBranchToForm } from './utils';
-import { momentFormatter, tansformDateValue, inputIntent } from '@/utils';
+import {
+  openingBalanceFieldShouldUpdate,
+  useIsCustomerForeignCurrency,
+  useSetPrimaryBranchToForm,
+} from './utils';
+import { useCurrentOrganization } from '@/hooks/state';

 /**
 * Customer financial panel.
@@ -35,76 +39,6 @@ export default function CustomerFinancialPanel() {
    <div className={'tab-panel--financial'}>
      <Row>
        <Col xs={6}>
-          {/*------------ Opening balance at -----------*/}
-          <FastField name={'opening_balance_at'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'opening_balance_at'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="opening_balance_at" />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  onChange={(date) => {
-                    form.setFieldValue(
-                      'opening_balance_at',
-                      moment(date).format('YYYY-MM-DD'),
-                    );
-                  }}
-                  value={tansformDateValue(value)}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  disabled={customerId}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------ Opening balance  -----------*/}
-          <FastField name={'opening_balance'}>
-            {({ form, field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'opening_balance'} />}
-                className={classNames(
-                  'form-group--opening-balance',
-                  Classes.FILL,
-                )}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-              >
-                <ControlGroup>
-                  <InputPrependText text={form.values.currency_code} />
-                  <MoneyInputGroup
-                    value={value}
-                    inputGroupProps={{ fill: true }}
-                    disabled={customerId}
-                    onChange={(balance) => {
-                      form.setFieldValue('opening_balance', balance);
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------ Opening branch  -----------*/}
-          <FeatureCan feature={Features.Branches}>
-            <FFormGroup
-              label={<T id={'customer.label.opening_branch'} />}
-              name={'opening_balance_branch_id'}
-              inline={true}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
-              <BranchSelect
-                name={'opening_balance_branch_id'}
-                branches={branches}
-                input={BranchSelectButton}
-                popoverProps={{ minimal: true }}
-              />
-            </FFormGroup>
-          </FeatureCan>
-
          {/*------------ Currency  -----------*/}
          <FastField name={'currency_code'}>
            {({ form, field: { value }, meta: { error, touched } }) => (
@@ -123,12 +57,130 @@ export default function CustomerFinancialPanel() {
                  onCurrencySelected={(currency) => {
                    form.setFieldValue('currency_code', currency.currency_code);
                  }}
+                  disabled={customerId}
                />
              </FormGroup>
            )}
          </FastField>
+
+          {/*------------ Opening balance  -----------*/}
+          <CustomerOpeningBalanceField />
+
+          {/*------ Opening Balance Exchange Rate  -----*/}
+          <CustomerOpeningBalanceExchangeRateField />
+
+          {/*------------ Opening balance at -----------*/}
+          <CustomerOpeningBalanceAtField />
+
+          {/*------------ Opening branch  -----------*/}
+          <FeatureCan feature={Features.Branches}>
+            <FFormGroup
+              label={<T id={'customer.label.opening_branch'} />}
+              name={'opening_balance_branch_id'}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'opening_balance_branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FFormGroup>
+          </FeatureCan>
        </Col>
      </Row>
    </div>
  );
 }
+
+/**
+ * Customer opening balance at date field.
+ * @returns {JSX.Element}
+ */
+function CustomerOpeningBalanceAtField() {
+  const { customerId } = useCustomerFormContext();
+
+  // Cannot continue if the customer id is defined.
+  if (customerId) return null;
+
+  return (
+    <FormGroup
+      name={'opening_balance_at'}
+      label={<T id={'opening_balance_at'} />}
+      inline={true}
+      helperText={<ErrorMessage name="opening_balance_at" />}
+    >
+      <FDateInput
+        name={'opening_balance_at'}
+        popoverProps={{ position: Position.BOTTOM, minimal: true }}
+        disabled={customerId}
+        formatDate={(date) => date.toLocaleDateString()}
+        parseDate={(str) => new Date(str)}
+        fill={true}
+      />
+    </FormGroup>
+  );
+}
+
+/**
+ * Customer opening balance field.
+ * @returns {JSX.Element}
+ */
+function CustomerOpeningBalanceField() {
+  const { customerId } = useCustomerFormContext();
+  const { values } = useFormikContext();
+
+  // Cannot continue if the customer id is defined.
+  if (customerId) return null;
+
+  return (
+    <FFormGroup
+      label={<T id={'opening_balance'} />}
+      name={'opening_balance'}
+      inline={true}
+      shouldUpdate={openingBalanceFieldShouldUpdate}
+      shouldUpdateDeps={{ currencyCode: values.currency_code }}
+      fastField={true}
+    >
+      <ControlGroup>
+        <InputPrependText text={values.currency_code} />
+        <FMoneyInputGroup
+          name={'opening_balance'}
+          inputGroupProps={{ fill: true }}
+        />
+      </ControlGroup>
+    </FFormGroup>
+  );
+}
+
+/**
+ * Customer opening balance exchange rate field if the customer has foreign
+ * currency.
+ * @returns {JSX.Element}
+ */
+function CustomerOpeningBalanceExchangeRateField() {
+  const { values } = useFormikContext();
+  const { customerId } = useCustomerFormContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignJouranl = useIsCustomerForeignCurrency();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignJouranl || customerId) {
+    return null;
+  }
+  return (
+    <FFormGroup
+      label={' '}
+      name={'opening_balance_exchange_rate'}
+      inline={true}
+    >
+      <ExchangeRateInputGroup
+        fromCurrency={values.currency_code}
+        toCurrency={currentOrganization.base_currency}
+        name={'opening_balance_exchange_rate'}
+      />
+    </FFormGroup>
+  );
+}
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomersTabs.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomersTabs.tsx
@@ -32,11 +32,6 @@ export default function CustomersTabs() {
          title={intl.get('notes')}
          panel={<CustomerNotePanel />}
        />
-        <Tab
-          id={'attachement'}
-          title={intl.get('attachement')}
-          panel={<CustomerAttachmentTabs />}
-        />
      </Tabs>
    </div>
  );
--- a/packages/webapp/src/containers/Customers/CustomerForm/utils.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/utils.tsx
@@ -5,6 +5,7 @@ import { useFormikContext } from 'formik';
 import { first } from 'lodash';

 import { useCustomerFormContext } from './CustomerFormProvider';
+import { useCurrentOrganization } from '@/hooks/state';

 export const defaultInitialValues = {
  customer_type: 'business',
@@ -37,9 +38,11 @@ export const defaultInitialValues = {
  shipping_address_postcode: '',
  shipping_address_phone: '',

-  opening_balance: '',
  currency_code: '',
+
+  opening_balance: '',
  opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+  opening_balance_exchange_rate: '',
  opening_balance_branch_id: '',
 };

@@ -57,3 +60,25 @@ export const useSetPrimaryBranchToForm = () => {
    }
  }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+/**
+ * Detarmines whether the current customer has foreign currency. 
+ * @returns {boolean}
+ */
+export const useIsCustomerForeignCurrency = () => {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  return currentOrganization.base_currency !== values.currency_code;
+};
+
+/**
+ * Detarmines the exchange opening balance field when should update.
+ */
+export const openingBalanceFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.shouldUpdateDeps.currencyCode !==
+      oldProps.shouldUpdateDeps.currencyCode ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
--- a/packages/webapp/src/containers/Customers/CustomersLanding/CustomersTable.tsx
+++ b/packages/webapp/src/containers/Customers/CustomersLanding/CustomersTable.tsx
@@ -24,6 +24,7 @@ import { useCustomersListContext } from './CustomersListProvider';
 import { useMemorizedColumnsWidths } from '@/hooks';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Customers table.
@@ -108,12 +109,12 @@ function CustomersTable({

  // Handle view detail contact.
  const handleViewDetailCustomer = ({ id }) => {
-    openDrawer('customer-detail-drawer', { customerId: id });
+    openDrawer(DRAWERS.CUSTOMER_DETAILS, { customerId: id });
  };

  // Handle cell click.
  const handleCellClick = (cell, event) => {
-    openDrawer('customer-detail-drawer', { customerId: cell.row.original.id });
+    openDrawer(DRAWERS.CUSTOMER_DETAILS, { customerId: cell.row.original.id });
  };

  if (isEmptyStatus) {
--- a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
+++ b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
@@ -38,7 +38,6 @@ export function ActionsMenu({
      />
      <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
        <MenuDivider />
-
        <MenuItem
          icon={<Icon icon="pen-18" />}
          text={intl.get('edit_customer')}
@@ -47,7 +46,7 @@ export function ActionsMenu({
      </Can>
      <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
        <MenuItem
-          icon={<Icon icon="duplicate-16" />}
+          icon={<Icon icon="content-copy" iconSize={16} />}
          text={intl.get('duplicate')}
          onClick={safeCallback(onDuplicate, original)}
        />
--- a/packages/webapp/src/containers/Customers/CustomersUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Customers/CustomersUniversalSearch.tsx
@@ -2,9 +2,11 @@
 import intl from 'react-intl-universal';
 import { AbilitySubject, CustomerAction } from '@/constants/abilityOption';

-import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { DRAWERS } from '@/constants/drawers';
+
 function CustomerUniversalSearchSelectComponent({
  resourceType,
  resourceId,
@@ -14,7 +16,7 @@ function CustomerUniversalSearchSelectComponent({
  openDrawer,
 }) {
  if (resourceType === RESOURCES_TYPES.CUSTOMER) {
-    openDrawer('customer-detail-drawer', { customerId: resourceId });
+    openDrawer(DRAWERS.CUSTOMER_DETAILS, { customerId: resourceId });
    onAction && onAction();
  }
  return null;
--- a/packages/webapp/src/containers/Dashboard/Sidebar/Sidebar.tsx
+++ b/packages/webapp/src/containers/Dashboard/Sidebar/Sidebar.tsx
@@ -34,10 +34,10 @@ export function Sidebar() {
 * @returns {React.JSX}
 */
 function SidebarFooterVersion() {
-  const { VERSION } = process.env;
+  const { MONOREPO_VERSION } = process.env;

-  if (!VERSION) {
+  if (!MONOREPO_VERSION) {
    return null;
  }
-  return <div class="sidebar__version">v{VERSION}</div>;
+  return <div class="sidebar__version">v{MONOREPO_VERSION}</div>;
 }
--- a/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFormFloatingActions.tsx
@@ -8,7 +8,6 @@ import { useCustomerOpeningBalanceContext } from './CustomerOpeningBalanceFormPr
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';

-
 /**
 * Customer Opening balance floating actions.
 * @returns
@@ -31,6 +30,9 @@ function CustomerOpeningBalanceFormFloatingActions({
  return (
    <div className={Classes.DIALOG_FOOTER}>
      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
        <Button
          intent={Intent.PRIMARY}
          loading={isSubmitting}
@@ -39,9 +41,6 @@ function CustomerOpeningBalanceFormFloatingActions({
        >
          {<T id={'edit'} />}
        </Button>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
-          <T id={'cancel'} />
-        </Button>
      </div>
    </div>
  );
--- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.tsx
+++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.tsx
@@ -31,7 +31,6 @@ function InventoryAdjustmentFloatingActions({
  // Handle submit make adjustment button click.
  const handleSubmitMakeAdjustmentBtnClick = (event) => {
    setSubmitPayload({ publish: true });
-    submitForm();
  };

  // Handle close button click.
@@ -53,7 +52,6 @@ function InventoryAdjustmentFloatingActions({
        <Button
          loading={isSubmitting && !submitPayload.publish}
          style={{ minWidth: '75px' }}
-          type="submit"
          onClick={handleSubmitDraftBtnClick}
        >
          {<T id={'save_as_draft'} />}
--- a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { useAccount, useAccountTransactions } from '@/hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 const AccountDrawerContext = React.createContext();

@@ -33,7 +34,7 @@ function AccountDrawerProvider({ accountId, name, ...props }) {

  return (
    <DrawerLoading loading={isAccountLoading || isAccountsLoading}>
-      <DrawerHeaderContent name={'account-drawer'} title={drawerTitle} />
+      <DrawerHeaderContent name={DRAWERS.ACCOUNT_DETAILS} title={drawerTitle} />
      <AccountDrawerContext.Provider value={provider} {...props} />
    </DrawerLoading>
  );
--- a/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailActionsBar.tsx
@@ -31,6 +31,7 @@ import {
 import { BillMenuItem } from './utils';

 import { safeCallback, compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 function BillDetailActionsBar({
  // #withDialogActions
@@ -49,7 +50,7 @@ function BillDetailActionsBar({
  // Handle edit bill.
  const onEditBill = () => {
    history.push(`/bills/${billId}/edit`);
-    closeDrawer('bill-drawer');
+    closeDrawer(DRAWERS.BILL_DETAILS);
  };

  // Handle convert to vendor credit.
@@ -57,7 +58,7 @@ function BillDetailActionsBar({
    history.push(`/vendor-credits/new?from_bill_id=${billId}`, {
      billId: billId,
    });
-    closeDrawer('bill-drawer');
+    closeDrawer(DRAWERS.BILL_DETAILS);
  };

  // Handle delete bill.
--- a/packages/webapp/src/containers/Drawers/BillDrawer/BillDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/BillDrawerProvider.tsx
@@ -5,6 +5,7 @@ import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { useBill, useBillLocatedLandedCost } from '@/hooks/query';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
+import { DRAWERS } from '@/constants/drawers';

 const BillDrawerContext = React.createContext();

@@ -38,7 +39,7 @@ function BillDrawerProvider({ billId, ...props }) {
  return (
    <DrawerLoading loading={loading}>
      <DrawerHeaderContent
-        name="bill-drawer"
+        name={DRAWERS.BILL_DETAILS}
        title={intl.get('bill.drawer.title', {
          number: bill.bill_number ? `(${bill.bill_number})` : null,
        })}
--- a/packages/webapp/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.tsx
@@ -12,6 +12,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Bill payment transactions datatable.
@@ -48,7 +49,7 @@ function BillPaymentTransactionTable({
  // Handles edit  bill payment transactions.
  const handleEditBillPaymentTransactions = ({ bill_payment_id }) => {
    history.push(`/payment-mades/${bill_payment_id}/edit`);
-    closeDrawer('bill-drawer');
+    closeDrawer(DRAWERS.BILL_DETAILS);
  };

  return (
--- a/packages/webapp/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.tsx
@@ -11,12 +11,12 @@ import { useLocatedLandedCostColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from './BillDrawerProvider';

 import withAlertsActions from '@/containers/Alert/withAlertActions';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { TableStyle } from '@/constants';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Located landed cost table.
@@ -25,9 +25,6 @@ function LocatedLandedCostTable({
  // #withAlertsActions
  openAlert,

-  // #withDialogActions
-  openDialog,
-
  // #withDrawerActions
  openDrawer,
 }) {
@@ -48,12 +45,12 @@ function LocatedLandedCostTable({

    switch (from_transaction_type) {
      case 'Expense':
-        openDrawer('expense-drawer', { expenseId: from_transaction_id });
+        openDrawer(DRAWERS.EXPENSE_DETAILS, { expenseId: from_transaction_id });
        break;

      case 'Bill':
      default:
-        openDrawer('bill-drawer', { billId: from_transaction_id });
+        openDrawer(DRAWERS.BILL_DETAILS, { billId: from_transaction_id });
        break;
    }
  };
@@ -79,6 +76,5 @@ function LocatedLandedCostTable({

 export default compose(
  withAlertsActions,
-  withDialogActions,
  withDrawerActions,
 )(LocatedLandedCostTable);
--- a/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.tsx
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { useCashflowTransaction } from '@/hooks/query';

 import { DrawerLoading, DrawerHeaderContent } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 const CashflowTransactionDrawerContext = React.createContext();

@@ -32,7 +33,7 @@ function CashflowTransactionDrawerProvider({ referenceId, ...props }) {
  return (
    <DrawerLoading loading={isCashflowTransactionLoading}>
      <DrawerHeaderContent
-        name={'cashflow-transaction-drawer'}
+        name={DRAWERS.CASHFLOW_TRNASACTION_DETAILS}
        title={intl.get('cash_flow.drawer.label_transaction', {
          number: cashflowTransaction?.transaction_number,
        })}
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.tsx
@@ -26,6 +26,7 @@ import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';

 import { compose } from '@/utils';
 import { CreditNoteMenuItem } from './utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Credit note detail actions bar.
@@ -47,7 +48,7 @@ function CreditNoteDetailActionsBar({
  // Handle edit credit note.
  const handleEditCreditNote = () => {
    history.push(`/credit-notes/${creditNoteId}/edit`);
-    closeDrawer('credit-note-detail-drawer');
+    closeDrawer(DRAWERS.CREDIT_NOTE_DETAILS);
  };

  const handleRefundCreditNote = () => {
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.tsx
@@ -10,6 +10,7 @@ import {
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 const CreditNoteDetailDrawerContext = React.createContext();

@@ -72,7 +73,7 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
      }
    >
      <DrawerHeaderContent
-        name="credit-note-detail-drawer"
+        name={DRAWERS.CREDIT_NOTE_DETAILS}
        title={intl.get('credit_note.drawer.title', {
          number: creditNote.credit_note_number,
        })}
--- a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx
@@ -38,6 +38,7 @@ import {
  CustomerAction,
 } from '@/constants/abilityOption';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Customer details actions bar.
@@ -58,22 +59,22 @@ function CustomerDetailsActionsBar({
  // Handle new invoice button click.
  const handleNewInvoiceClick = () => {
    history.push('/invoices/new');
-    closeDrawer('customer-detail-drawer');
+    closeDrawer(DRAWERS.CUSTOMER_DETAILS);
  };
  // Handle new receipt button click.
  const handleNewReceiptClick = () => {
    history.push('/receipts/new');
-    closeDrawer('customer-detail-drawer');
+    closeDrawer(DRAWERS.CUSTOMER_DETAILS);
  };
  // Handle new payment receive button click.
  const handleNewPaymentClick = () => {
    history.push('/payment-receives/new');
-    closeDrawer('customer-detail-drawer');
+    closeDrawer(DRAWERS.CUSTOMER_DETAILS);
  };
  // Handle new estimate button click.
  const handleNewEstimateClick = () => {
    history.push('/estimates/new');
-    closeDrawer('customer-detail-drawer');
+    closeDrawer(DRAWERS.CUSTOMER_DETAILS);
  };
  // Handles delete customer click.
  const handleDeleteCustomer = () => {
@@ -82,7 +83,7 @@ function CustomerDetailsActionsBar({
  // Handles edit customer click.
  const handleEditContact = () => {
    history.push(`/customers/${customerId}/edit`);
-    closeDrawer('customer-details-drawer');
+    closeDrawer(DRAWERS.CUSTOMER_DETAILS);
  };
  // Handle edit opening balance click.
  const handleEditOpeningBalance = () => {
--- a/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { useCustomer } from '@/hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 const ContactDetailDrawerContext = React.createContext();

@@ -26,7 +27,7 @@ function CustomerDetailsDrawerProvider({ customerId, ...props }) {
  return (
    <DrawerLoading loading={isCustomerLoading}>
      <DrawerHeaderContent
-        name="customer-detail-drawer"
+        name={DRAWERS.CUSTOMER_DETAILS}
        title={customer?.display_name}
      />
      <ContactDetailDrawerContext.Provider value={provider} {...props} />
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
@@ -25,6 +25,7 @@ import {
 } from '@/components';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Estimate read-only details actions bar of the drawer.
@@ -48,7 +49,7 @@ function EstimateDetailActionsBar({
  // Handle edit sale estimate.
  const handleEditEstimate = () => {
    history.push(`/estimates/${estimateId}/edit`);
-    closeDrawer('estimate-detail-drawer');
+    closeDrawer(DRAWERS.ESTIMATE_DETAILS);
  };

  // Handle delete sale estimate.
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.tsx
@@ -5,6 +5,7 @@ import { Features } from '@/constants';
 import { useEstimate } from '@/hooks/query';
 import { useFeatureCan } from '@/hooks/state';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 const EstimateDetailDrawerContext = React.createContext();

@@ -29,7 +30,7 @@ function EstimateDetailDrawerProvider({ estimateId, ...props }) {
  return (
    <DrawerLoading loading={isEstimateLoading}>
      <DrawerHeaderContent
-        name="estimate-detail-drawer"
+        name={DRAWERS.ESTIMATE_DETAILS}
        title={intl.get('estimate.drawer.title', {
          number: estimate.estimate_number,
        })}
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.tsx
@@ -21,6 +21,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Expense drawer action bar.
@@ -40,7 +41,7 @@ function ExpenseDrawerActionBar({
  // Handle the expense edit action.
  const handleEditExpense = () => {
    history.push(`/expenses/${expense.id}/edit`);
-    closeDrawer('expense-drawer');
+    closeDrawer(DRAWERS.EXPENSE_DETAILS);
  };

  // Handle the expense delete action.
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.tsx
@@ -5,6 +5,7 @@ import { useExpense } from '@/hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
+import { DRAWERS } from '@/constants/drawers';

 const ExpenseDrawerDrawerContext = React.createContext();

@@ -36,7 +37,7 @@ function ExpenseDrawerProvider({ expenseId, ...props }) {
  return (
    <DrawerLoading loading={isExpenseLoading}>
      <DrawerHeaderContent
-        name="expense-drawer"
+        name={DRAWERS.EXPENSE_DETAILS}
        title={intl.get('expense.drawer.title')}
        subTitle={
          featureCan(Features.Branches)
--- a/packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { useInventoryAdjustment } from '@/hooks/query';
+import { DRAWERS } from '@/constants/drawers';

 const InventoryAdjustmentDrawerContext = React.createContext();

@@ -25,7 +26,7 @@ function InventoryAdjustmentDrawerProvider({ inventoryId, ...props }) {
  return (
    <DrawerLoading loading={isAdjustmentsLoading}>
      <DrawerHeaderContent
-        name="inventory-adjustment-drawer"
+        name={DRAWERS.INVENTORY_ADJUSTMENT_DETAILS}
        title={intl.get('inventory_adjustment.details_drawer.title')}
      />
      <InventoryAdjustmentDrawerContext.Provider value={provider} {...props} />
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
@@ -30,6 +30,7 @@ import {

 import { compose } from '@/utils';
 import { BadDebtMenuItem } from './utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Invoice details action bar.
@@ -52,7 +53,7 @@ function InvoiceDetailActionsBar({
  // Handle edit sale invoice.
  const handleEditInvoice = () => {
    history.push(`/invoices/${invoiceId}/edit`);
-    closeDrawer('invoice-detail-drawer');
+    closeDrawer(DRAWERS.INVOICE_DETAILS);
  };

  // Handle convert to invoice.
@@ -60,7 +61,7 @@ function InvoiceDetailActionsBar({
    history.push(`/credit-notes/new?from_invoice_id=${invoiceId}`, {
      invoiceId: invoiceId,
    });
-    closeDrawer('invoice-detail-drawer');
+    closeDrawer(DRAWERS.INVOICE_DETAILS);
  };

  // Handle delete sale invoice.
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.tsx
@@ -5,6 +5,7 @@ import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { Features } from '@/constants';
 import { useInvoice } from '@/hooks/query';
 import { useFeatureCan } from '@/hooks/state';
+import { DRAWERS } from '@/constants/drawers';

 const InvoiceDetailDrawerContext = React.createContext();
 /**
@@ -28,7 +29,7 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
  return (
    <DrawerLoading loading={isInvoiceLoading}>
      <DrawerHeaderContent
-        name="invoice-detail-drawer"
+        name={DRAWERS.INVOICE_DETAILS}
        title={intl.get('invoice_details.drawer.title', {
          invoiceNumber: invoice.invoice_no,
        })}
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.tsx
@@ -16,6 +16,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Invoice payment transactions datatable.
@@ -54,7 +55,7 @@ function InvoicePaymentTransactionsTable({
  // Handles edit payment transactions.
  const handleEditPaymentTransactions = ({ payment_receive_id }) => {
    history.push(`/payment-receives/${payment_receive_id}/edit`);
-    closeDrawer('invoice-detail-drawer');
+    closeDrawer(DRAWERS.INVOICE_DETAILS);
  };
  return (
    <Card>
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx
@@ -23,6 +23,7 @@ import {
 } from '@/components';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Item action-bar of readonly details drawer.
@@ -42,7 +43,7 @@ function ItemDetailActionsBar({
  // Handle edit item.
  const handleEditItem = () => {
    history.push(`/items/${itemId}/edit`);
-    closeDrawer('item-detail-drawer');
+    closeDrawer(DRAWERS.ITEM_DETAILS);
  };

  // Handle delete item.
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { useItem } from '@/hooks/query';
 import { inactiveStatus } from './utlis';
+import { DRAWERS } from '@/constants/drawers';

 const ItemDetailDrawerContext = React.createContext();

@@ -30,7 +31,7 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
  return (
    <DrawerLoading loading={isItemLoading}>
      <DrawerHeaderContent
-        name="item-detail-drawer"
+        name={DRAWERS.ITEM_DETAILS}
        title={inactiveStatus(item)}
      />
      <ItemDetailDrawerContext.Provider value={provider} {...props} />
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.tsx
@@ -12,6 +12,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Bill payment transactions data table.
@@ -48,7 +49,7 @@ function BillPaymentTransactions({
  // Handles edit payment transactions.
  const handleEditPaymentTransactions = ({ bill_id }) => {
    history.push(`/bills/${bill_id}/edit`);
-    closeDrawer('item-detail-drawer');
+    closeDrawer(DRAWERS.ITEM_DETAILS);
  };
  return (
    <DataTable
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.tsx
@@ -13,6 +13,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Esimtate payment transactions.
@@ -26,6 +27,7 @@ function EstimatePaymentTransactions({
 }) {
  const history = useHistory();

+  // Estimate transactions table columns.
  const columns = useEstimateTransactionsColumns();

  const { itemId } = useItemDetailDrawerContext();
@@ -49,7 +51,7 @@ function EstimatePaymentTransactions({
  // Handles edit payment transactions.
  const handleEditPaymentTransactions = ({ estimate_id }) => {
    history.push(`/estimates/${estimate_id}/edit`);
-    closeDrawer('item-detail-drawer');
+    closeDrawer(DRAWERS.ITEM_DETAILS);
  };

  return (
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.tsx
@@ -16,6 +16,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Invoice payment transactions.
@@ -52,7 +53,7 @@ function InvoicePaymentTransactions({
  // Handles edit payment transactions.
  const handleEditPaymentTransactions = ({ invoice_id }) => {
    history.push(`/invoices/${invoice_id}/edit`);
-    closeDrawer('item-detail-drawer');
+    closeDrawer(DRAWERS.ITEM_DETAILS);
  };
  return (
    <DataTable
--- a/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.tsx
+++ b/packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.tsx
@@ -12,6 +12,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Receipt payment transactions.
@@ -48,7 +49,7 @@ function ReceiptPaymentTransactions({
  // Handles edit payment transactions.
  const handleEditPaymentTransactions = ({ receipt_id }) => {
    history.push(`/receipts/${receipt_id}/edit`);
-    closeDrawer('item-detail-drawer');
+    closeDrawer(DRAWERS.ITEM_DETAILS);
  };

  return (
--- a/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.tsx
@@ -22,6 +22,7 @@ import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 import { ManualJournalAction, AbilitySubject } from '@/constants/abilityOption';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Manual journal action bar.
@@ -39,7 +40,7 @@ function ManualJournalDrawerActionBar({
  // Handle edit manual journal action.
  const handleEditManualJournal = () => {
    history.push(`/manual-journals/${manualJournalId}/edit`);
-    closeDrawer('journal-drawer');
+    closeDrawer(DRAWERS.JOURNAL_DETAILS);
  };

  // Handle manual journal delete action.
--- a/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { useJournal } from '@/hooks/query';
 import { DrawerLoading, DrawerHeaderContent } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 const ManualJournalDrawerContext = React.createContext();

@@ -31,7 +32,7 @@ function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
  return (
    <DrawerLoading loading={isJournalLoading}>
      <DrawerHeaderContent
-        name={'journal-drawer'}
+        name={DRAWERS.JOURNAL_DETAILS}
        title={intl.get('manual_journal.drawer.title', {
          number: manualJournal?.journal_number,
        })}
--- a/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/components';
 import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Payment made - Details panel - actions bar.
@@ -42,7 +43,7 @@ function PaymentMadeDetailActionsBar({
  // Handle edit payment made.
  const handleEditPaymentMade = () => {
    history.push(`/payment-mades/${paymentMadeId}/edit`);
-    closeDrawer('payment-made-detail-drawer');
+    closeDrawer(DRAWERS.PAYMENT_MADE_DETAILS);
  };

  // Handle delete payment made.
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
@@ -21,9 +21,13 @@ import {
  FormattedMessage as T,
  DrawerActionsBar,
 } from '@/components';
-import { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '@/constants/abilityOption';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Payment receive actions bar.
@@ -46,7 +50,7 @@ function PaymentReceiveActionsBar({
  // Handle edit payment receive.
  const handleEditPaymentReceive = () => {
    history.push(`/payment-receives/${paymentReceiveId}/edit`);
-    closeDrawer('payment-receive-detail-drawer');
+    closeDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS);
  };

  // Handle delete payment receive.
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.tsx
@@ -5,6 +5,7 @@ import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { usePaymentReceive } from '@/hooks/query';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
+import { DRAWERS } from '@/constants/drawers';

 const PaymentReceiveDetailContext = React.createContext();

@@ -34,7 +35,7 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
  return (
    <DrawerLoading loading={isPaymentLoading}>
      <DrawerHeaderContent
-        name="payment-receive-detail-drawer"
+        name={DRAWERS.PAYMENT_RECEIVE_DETAILS}
        title={intl.get('payment_receive.drawer.title', {
          number: paymentReceive.payment_receive_no,
        })}
--- a/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.tsx
@@ -7,6 +7,7 @@ import {
 } from '@/components';

 import QuickCustomerFormDrawer from './QuickCustomerFormDrawer';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Quick create/edit customer drawer.
@@ -15,7 +16,7 @@ export default function QuickCreateCustomerDrawerContent({ displayName }) {
  return (
    <React.Fragment>
      <DrawerHeaderContent
-        name="quick-create-customer"
+        name={DRAWERS.QUICK_CREATE_CUSTOMER}
        title={<T id={'create_a_new_customer'} />}
      />
      <DrawerBody>
--- a/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.tsx
@@ -13,6 +13,7 @@ import CustomerFormFormik, {
 } from '@/containers/Customers/CustomerForm/CustomerFormFormik';

 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Drawer customer form loading wrapper.
@@ -30,11 +31,11 @@ function DrawerCustomerFormLoading({ children }) {
 function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
  // Handle the form submit request success.
  const handleSubmitSuccess = () => {
-    closeDrawer('quick-create-customer');
+    closeDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
  };
  // Handle the form cancel action.
  const handleCancelForm = () => {
-    closeDrawer('quick-create-customer');
+    closeDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
  };

  return (
--- a/packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.tsx
@@ -4,6 +4,7 @@ import {
  DrawerHeaderContent,
  DrawerBody,
  FormattedMessage as T,
+  Drawer,
 } from '@/components';

 import QuickCreateItemDrawerForm from './QuickCreateItemDrawerForm';
@@ -15,7 +16,7 @@ export default function QuickCreateItemDrawerContent({ itemName }) {
  return (
    <React.Fragment>
      <DrawerHeaderContent
-        name="quick-create-item"
+        name={DRAWER.QUICK_CREATE_ITEM}
        title={<T id={'create_a_new_item'} />}
      />
      <DrawerBody>
--- a/packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx
@@ -15,6 +15,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';

 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Drawer item form loading.
@@ -43,7 +44,7 @@ function QuickCreateItemDrawerForm({
  // Handle the form submit request success.
  const handleSubmitSuccess = (values, form, submitPayload, response) => {
    if (submitPayload.redirect) {
-      closeDrawer('quick-create-item');
+      closeDrawer(DRAWERS.QUICK_CREATE_ITEM);
    }
    if (payload.quickActionEvent) {
      addQuickActionEvent(payload.quickActionEvent, {
@@ -53,7 +54,7 @@ function QuickCreateItemDrawerForm({
  };
  // Handle the form cancel.
  const handleFormCancel = () => {
-    closeDrawer('quick-create-item');
+    closeDrawer(DRAWERS.QUICK_CREATE_ITEM);
  };

  return (
--- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx
@@ -16,6 +16,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';

 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Drawer vendor form loading wrapper.
@@ -41,7 +42,7 @@ function QuickVendorFormDrawer({
  // Handle the form submit request success.
  const handleSubmitSuccess = (values, form, submitPayload, response) => {
    if (!submitPayload.noRedirect) {
-      closeDrawer('quick-write-vendor');
+      closeDrawer(DRAWERS.QUICK_WRITE_VENDOR);
    }
    if (payload.quickActionEvent) {
      addQuickActionEvent(payload.quickActionEvent, {
@@ -51,7 +52,7 @@ function QuickVendorFormDrawer({
  };
  // Handle the form cancel action.
  const handleCancelForm = () => {
-    closeDrawer('quick-write-vendor');
+    closeDrawer(DRAWERS.QUICK_WRITE_VENDOR);
  };

  return (
--- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx
@@ -7,6 +7,7 @@ import {
 } from '@/components';

 import QuickVendorFormDrawer from './QuickVendorFormDrawer';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Quick create/edit vendor drawer.
@@ -15,7 +16,7 @@ export default function QuickWriteVendorDrawerContent({ displayName }) {
  return (
    <React.Fragment>
      <DrawerHeaderContent
-        name="quick-create-customer"
+        name={DRAWERS.QUICK_CREATE_CUSTOMER}
        title={<T id={'create_a_new_vendor'} />}

      />
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
@@ -23,6 +23,7 @@ import { ReceiptMoreMenuItems } from './components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
 import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
 import { safeCallback, compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Receipt details actions bar.
@@ -44,7 +45,7 @@ function ReceiptDetailActionBar({
  // Handle edit sale receipt.
  const onEditReceipt = () => {
    history.push(`/receipts/${receiptId}/edit`);
-    closeDrawer('receipt-detail-drawer');
+    closeDrawer(DRAWERS.RECEIPT_DETAILS);
  };

  // Handle delete sale receipt.
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.tsx
@@ -5,6 +5,7 @@ import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { useReceipt } from '@/hooks/query';
+import { DRAWERS } from '@/constants/drawers';

 // useTransactionsByReference
 const ReceiptDetailDrawerContext = React.createContext();
@@ -33,7 +34,7 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
  return (
    <DrawerLoading loading={isReceiptLoading}>
      <DrawerHeaderContent
-        name="receipt-detail-drawer"
+        name={DRAWERS.RECEIPT_DETAILS}
        title={intl.get('receipt.drawer.title', {
          number: receipt.receipt_number,
        })}
--- a/packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { useRefundCreditTransaction } from '@/hooks/query';
+import { DRAWERS } from '@/constants/drawers';

 const RefundCreditNoteDrawerContext = React.createContext();

@@ -27,7 +28,7 @@ function RefundCreditNoteDrawerProvider({ refundTransactionId, ...props }) {
  return (
    <DrawerLoading loading={isRefundCreditTransaction}>
      <DrawerHeaderContent
-        name="refund-credit-detail-drawer"
+        name={DRAWERS.REFUND_CREDIT_NOTE_DETAILS}
        title={intl.get('refund_credit.drawer.title')}
      />
      <RefundCreditNoteDrawerContext.Provider value={provider} {...props} />
--- a/packages/webapp/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { useRefundVendorCreditTransaction } from '@/hooks/query';
+import { DRAWERS } from '@/constants/drawers';

 const RefundVendorCreditDrawerContent = React.createContext();

@@ -27,7 +28,7 @@ function RefundVendorCreditDrawerProvider({ refundTransactionId, ...props }) {
  return (
    <DrawerLoading loading={isRefundVendorTransaction}>
      <DrawerHeaderContent
-        name="refund-vendor-detail-drawer"
+        name={DRAWERS.REFUND_VENDOR_CREDIT_DETAILS}
        title={intl.get('refund_vendor_credit.drawer.title')}
      />
      <RefundVendorCreditDrawerContent.Provider value={provider} {...props} />
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.tsx
@@ -25,6 +25,7 @@ import {
 } from '@/components';

 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Vendor credit detail actions bar.
@@ -39,14 +40,13 @@ function VendorCreditDetailActionsBar({
  // #withDrawerActions
  closeDrawer,
 }) {
-  const { vendorCreditId, vendorCredit } = useVendorCreditDetailDrawerContext();
-
  const history = useHistory();
+  const { vendorCreditId, vendorCredit } = useVendorCreditDetailDrawerContext();

  // Handle edit credit note.
  const handleEditVendorCredit = () => {
    history.push(`/vendor-credits/${vendorCreditId}/edit`);
-    closeDrawer('vendor-credit-detail-drawer');
+    closeDrawer(DRAWERS.VENDOR_CREDIT_DETAILS);
  };

  // Handle delete credit note.
--- a/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.tsx
@@ -9,6 +9,7 @@ import {
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
+import { DRAWERS } from '@/constants/drawers';

 const VendorCreditDetailDrawerContext = React.createContext();

@@ -61,7 +62,7 @@ function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
      }
    >
      <DrawerHeaderContent
-        name="vendor-credit-detail-drawer"
+        name={DRAWERS.VENDOR_CREDIT_DETAILS}
        title={intl.get('vendor_credit.drawer_vendor_credit_detail', {
          vendorNumber: vendorCredit.vendor_credit_number,
        })}
--- a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.tsx
@@ -35,6 +35,7 @@ import {
  VendorAction,
 } from '../../../constants/abilityOption';
 import { safeCallback, compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';

 /**
 * Vendor details actions bar.
@@ -55,7 +56,7 @@ function VendorDetailsActionsBar({
  // Handle edit vendor.
  const onEditContact = () => {
    history.push(`/vendors/${vendorId}/edit`);
-    closeDrawer('vendor-detail-drawer');
+    closeDrawer(DRAWERS.VENDOR_DETAILS);
  };

  // Handle delete vendor.
@@ -63,14 +64,15 @@ function VendorDetailsActionsBar({
    openAlert(`vendor-delete`, { contactId: vendorId });
  };

+  // Handles clicking on new invoice button.
  const handleNewInvoiceClick = () => {
    history.push('/bills/new');
-    closeDrawer('vendor-detail-drawer');
+    closeDrawer(DRAWERS.VENDOR_DETAILS);
  };

  const handleNewPaymentClick = () => {
    history.push('/payment-mades/new');
-    closeDrawer('vendor-detail-drawer');
+    closeDrawer(DRAWERS.VENDOR_DETAILS);
  };

  const handleEditOpeningBalance = () => {
--- a/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsDrawerProvider.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
 import { useVendor } from '@/hooks/query';
+import { DRAWERS } from '@/constants/drawers';

 const VendorDetailDrawerContext = React.createContext();

@@ -23,7 +24,7 @@ function VendorDetailsDrawerProvider({ vendorId, ...props }) {
  return (
    <DrawerLoading loading={isVendorLoading}>
      <DrawerHeaderContent
-        name="vendor-detail-drawer"
+        name={DRAWERS.VENDOR_DETAILS}
        title={vendor?.display_name}
      />
      <VendorDetailDrawerContext.Provider value={provider} {...props} />
--- a/packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailActionsBar.tsx
@@ -11,10 +11,12 @@ import {

 import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
 import { DrawerActionsBar, Icon, FormattedMessage as T } from '@/components';
+
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

+import { DRAWERS } from '@/constants/drawers';
 import { compose } from '@/utils';

 /**
@@ -34,7 +36,7 @@ function WarehouseTransferDetailActionsBar({
  // Handle edit warehosue transfer.
  const handleEditWarehosueTransfer = () => {
    history.push(`/warehouses-transfers/${warehouseTransferId}/edit`);
-    closeDrawer('warehouse-transfer-detail-drawer');
+    closeDrawer(DRAWERS.WAREHOUSE_TRANSFER_DETAILS);
  };

  // Handle delete warehouse transfer.
--- a/packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.tsx
+++ b/packages/webapp/src/containers/Drawers/WarehouseTransferDetailDrawer/WarehouseTransferDetailDrawerProvider.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { useWarehouseTransfer } from '@/hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { DRAWERS } from '@/constants/drawers';

 const WarehouseTransferDetailDrawerContext = React.createContext();

@@ -27,7 +28,7 @@ function WarehouseTransferDetailDrawerProvider({
  return (
    <DrawerLoading loading={isWarehouseTransferLoading}>
      <DrawerHeaderContent
-        name="warehouse-transfer-detail-drawer"
+        name={DRAWERS.WAREHOUSE_TRANSFER_DETAILS}
        title={intl.get('warehouse_transfer.drawer.title', {
          number: warehouseTransfer.transaction_number
            ? `(${warehouseTransfer.transaction_number})`
--- a/packages/webapp/src/containers/Expenses/ExpenseUniversalSearch.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseUniversalSearch.tsx
@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { DRAWERS } from '@/constants/drawers';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';

@@ -14,7 +15,7 @@ function ExpenseUniversalSearchItemSelectComponent({
  openDrawer,
 }) {
  if (resourceType === RESOURCES_TYPES.EXPENSE) {
-    openDrawer('expense-drawer', { expenseId: resourceId });
+    openDrawer(DRAWERS.EXPENSE_DETAILS, { expenseId: resourceId });
  }
  return null;
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ahmed Bouhuolia	c7871c6ed0	fix(webapp): use all drawers name from common enum object	2023-06-14 19:48:57 +02:00
Ahmed Bouhuolia	7ad1d3677c	fix(webapp): Payment made details drawer does not show up	2023-06-14 13:13:32 +02:00
Ahmed Bouhuolia	6562e3ab8c	chore: update CHANGELOG.md	2023-06-14 12:10:35 +02:00
Ahmed Bouhuolia	c93650ffd3	Merge pull request #139 from bigcapitalhq/change-onboarding-footer-links chore(webapp): change the footer links of onboarding pages	2023-06-13 23:45:16 +02:00
Ahmed Bouhuolia	e6a2825065	chore(webapp): change the footer links of onboarding pages	2023-06-13 20:30:29 +02:00
Ahmed Bouhuolia	0c2a0b0010	Update README.md	2023-06-12 22:55:57 +02:00
Ahmed Bouhuolia	a332c51249	chore: change the default SIGNUP_DISABLED env variable	2023-06-12 21:15:27 +02:00
Ahmed Bouhuolia	0b6d0bc016	dump version 0.9.6	2023-06-12 19:43:36 +02:00
Ahmed Bouhuolia	e6336b1451	Merge pull request #136 from bigcapitalhq/add-monorepo-version-on-sidebar feat(webapp): add monorepo version on the sidebar	2023-06-12 19:42:37 +02:00
Ahmed Bouhuolia	46290c4d37	Merge pull request #138 from bigcapitalhq/remove-duplicated-form-submitting fix(webapp): remove duplicated form submitting	2023-06-12 18:55:18 +02:00
Ahmed Bouhuolia	ff2b7563c8	fix(webapp): remove duplicated form submitting	2023-06-12 18:47:28 +02:00
Ahmed Bouhuolia	b9572420ed	feat(webapp): add monorepo version on the sidebar	2023-06-12 02:44:12 +02:00
Ahmed Bouhuolia	35ebb9c2aa	Merge pull request #134 from bigcapitalhq/contacts-opening-balance-exchange-rate fix(webapp): customer/vendor opening balance with exchange rate	2023-06-11 20:12:44 +02:00
Ahmed Bouhuolia	3ebeb29dc0	chore(webapp): vendor tabs	2023-06-11 20:12:26 +02:00
Ahmed Bouhuolia	8e98068538	fix(webapp): vendor form fastField of opening balance field	2023-06-11 20:11:30 +02:00
Ahmed Bouhuolia	6a72594faf	fix(webapp): update condition of customer opening balance	2023-06-11 20:09:51 +02:00
Ahmed Bouhuolia	728729094a	Merge branch 'develop' into contacts-opening-balance-exchange-rate	2023-06-11 19:56:54 +02:00
Ahmed Bouhuolia	93d540fbd2	fix(webapp): style tweaks on customer/vendor tabs	2023-06-11 19:53:15 +02:00
Ahmed Bouhuolia	eb9b6ce717	Merge pull request #133 from bigcapitalhq/add-duplicate-icon-to-list fix(webapp): add duplicate icon to customers and vendors table	2023-06-11 19:36:52 +02:00
Ahmed Bouhuolia	f716d42d26	Merge pull request #135 from bigcapitalhq/fix-make-journal-with-different-accounts fix(webapp): make journal error when create journal with accounts have different currency	2023-06-11 19:36:37 +02:00
Ahmed Bouhuolia	1c4c364f06	Merge pull request #132 from bigcapitalhq/filter-ledger-entries-ar-ap fix(server): filter ledger entries that effect contact balance to AR/AP accounts only	2023-06-11 19:35:53 +02:00
Ahmed Bouhuolia	162ad91547	fix(webapp): handle make journal error when create journal with accounts have different currency	2023-06-11 19:34:24 +02:00
Ahmed Bouhuolia	2950e5ede4	fix(webapp): customer/vendor opening balnace with exchange rate	2023-06-11 19:29:26 +02:00
Ahmed Bouhuolia	73b041d8d2	fix(webapp): add deuplicate icon to customers and vendors table	2023-06-11 19:25:39 +02:00
Ahmed Bouhuolia	7bf008a9cb	fix(server): filter ledger entries that effect contact balance to AR/AP accounts only	2023-06-11 19:23:31 +02:00