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

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();
   };
 

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>
   );
 }

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();
   };
 

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',
 }

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.

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;

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,

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] =

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(
         ({

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(
         ({

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(
         ({

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(
         ({

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(() => {

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(
         ({

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(
         ({

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(
         ({

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(
         ({

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(() => {

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(
         ({

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);

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);

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(() => {

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(() => {

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(() => {

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(
         ({

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(
         ({

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(
         ({

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,
       });
   }

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 = () => {

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) {

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;

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>
   );

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.

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,
         })}

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 (

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);

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,
         })}

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 = () => {

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,
         })}

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 = () => {

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} />

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.

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,
         })}

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.

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)

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} />

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.

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,
         })}

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>

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.

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} />

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

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 (

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

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 (

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.

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,
         })}

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.

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.

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,
         })}

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>

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 (

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>

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 (

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 (

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'} />}
 
       />

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.

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,
         })}

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} />

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} />

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.

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,
         })}

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 = () => {

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} />

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.

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})`

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;
 }

packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.tsx

@@ -22,6 +22,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withSettings from '@/containers/Settings/withSettings';
 
 import { ActionsMenu, useExpensesTableColumns } from './components';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Expenses datatable.
@@ -87,14 +88,14 @@ function ExpensesDataTable({
 
   // Handle view detail expense.
   const handleViewDetailExpense = ({ id }) => {
-    openDrawer('expense-drawer', {
+    openDrawer(DRAWERS.EXPENSE_DETAILS, {
       expenseId: id,
     });
   };
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('expense-drawer', { expenseId: cell.row.original.id });
+    openDrawer(DRAWERS.EXPENSE_DETAILS, { expenseId: cell.row.original.id });
   };
 
   // Display empty status instead of the table.

packages/webapp/src/containers/InventoryAdjustments/InventoryAdjustmentTable.tsx

@@ -14,6 +14,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Inventory adjustments datatable.
@@ -53,7 +54,7 @@ function InventoryAdjustmentDataTable({
   };
   // Handle view detail inventory adjustment.
   const handleViewDetailInventoryAdjustment = ({ id }) => {
-    openDrawer('inventory-adjustment-drawer', { inventoryId: id });
+    openDrawer(DRAWERS.INVENTORY_ADJUSTMENT_DETAILS, { inventoryId: id });
   };
 
   // Inventory adjustments columns.
@@ -75,7 +76,7 @@ function InventoryAdjustmentDataTable({
   );
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('inventory-adjustment-drawer', {
+    openDrawer(DRAWERS.INVENTORY_ADJUSTMENT_DETAILS, {
       inventoryId: cell.row.original.id,
     });
   };

packages/webapp/src/containers/Items/ItemsDataTable.tsx

@@ -22,6 +22,7 @@ import { useItemsListContext } from './ItemsListProvider';
 import { useItemsTableColumns, ItemsActionMenuList } from './components';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Items datatable.
@@ -108,7 +109,7 @@ function ItemsDataTable({
 
   // Handle view detail item.
   const handleViewDetailItem = ({ id }) => {
-    openDrawer('item-detail-drawer', { itemId: id });
+    openDrawer(DRAWERS.ITEM_DETAILS, { itemId: id });
   };
 
   // Cannot continue in case the items has empty status.
@@ -118,7 +119,7 @@ function ItemsDataTable({
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('item-detail-drawer', { itemId: cell.row.original.id });
+    openDrawer(DRAWERS.ITEM_DETAILS, { itemId: cell.row.original.id });
   };
 
   return (

packages/webapp/src/containers/Items/ItemsUniversalSearch.tsx

@@ -4,6 +4,8 @@ import intl from 'react-intl-universal';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { DRAWERS } from '@/constants/drawers';
+
 import { AbilitySubject, ItemAction } from '@/constants/abilityOption';
 
 /**
@@ -19,7 +21,7 @@ function ItemUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.ITEM) {
-    openDrawer('item-detail-drawer', { itemId: resourceId });
+    openDrawer(DRAWERS.ITEM_DETAILS, { itemId: resourceId });
     onAction && onAction();
   }
   return null;

packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx

@@ -9,6 +9,7 @@ import { T, Icon, Choose, If } from '@/components';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { AbilitySubject, BillAction } from '@/constants/abilityOption';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Universal search bill item select action.
@@ -23,7 +24,7 @@ function BillUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.BILL) {
-    openDrawer('bill-drawer', { billId: resourceId });
+    openDrawer(DRAWERS.BILL_DETAILS, { billId: resourceId });
     onAction && onAction();
   }
   return null;

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx

@@ -24,6 +24,7 @@ import { useBillsListContext } from './BillsListProvider';
 import { useMemorizedColumnsWidths } from '@/hooks';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Bills transactions datatable.
@@ -99,12 +100,12 @@ function BillsDataTable({
 
   // Handle view detail bill.
   const handleViewDetailBill = ({ id }) => {
-    openDrawer('bill-drawer', { billId: id });
+    openDrawer(DRAWERS.BILL_DETAILS, { billId: id });
   };
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('bill-drawer', { billId: cell.row.original.id });
+    openDrawer(DRAWERS.BILL_DETAILS, { billId: cell.row.original.id });
   };
 
   // Local storage memorizing columns widths.

packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.tsx

@@ -23,6 +23,7 @@ import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
 import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Vendors Credit note data table.
@@ -78,8 +79,9 @@ function VendorsCreditNoteDataTable({
     return <VendorsCreditNoteEmptyStatus />;
   }
 
+  // Handle view vendor credit details.
   const handleViewDetailVendorCredit = ({ id }) => {
-    openDrawer('vendor-credit-detail-drawer', { vendorCreditId: id });
+    openDrawer(DRAWERS.VENDOR_CREDIT_DETAILS, { vendorCreditId: id });
   };
 
   // Handle delete credit note.
@@ -94,7 +96,7 @@ function VendorsCreditNoteDataTable({
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('vendor-credit-detail-drawer', {
+    openDrawer(DRAWERS.VENDOR_CREDIT_DETAILS, {
       vendorCreditId: cell.row.original.id,
     });
   };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx

@@ -9,7 +9,6 @@ import { highlightText } from '@/utils';
 import { AbilitySubject, PaymentMadeAction } from '@/constants/abilityOption';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-
 /**
  * Universal search bill item select action.
  */
@@ -22,7 +21,7 @@ function PaymentMadeUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.PAYMENT_MADE) {
-    openDrawer('payment-made-detail-drawer', { paymentMadeId: resourceId });
+    openDrawer(DRAWERS.PAYMENT_MADE_DETAILS, { paymentMadeId: resourceId });
   }
   return null;
 }

packages/webapp/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.tsx

@@ -13,7 +13,6 @@ import {
 
 import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
 
-import withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
@@ -24,6 +23,7 @@ import withSettings from '@/containers/Settings/withSettings';
 import { usePaymentMadesTableColumns, ActionsMenu } from './components';
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useMemorizedColumnsWidths } from '@/hooks';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Payment made datatable transactions.
@@ -32,9 +32,6 @@ function PaymentMadesTable({
   // #withPaymentMadeActions
   setPaymentMadesTableState,
 
-  // #withPaymentMade
-  paymentMadesTableState,
-
   // #withAlerts
   openAlert,
 
@@ -71,12 +68,12 @@ function PaymentMadesTable({
 
   // Handle view detail  payment made.
   const handleViewDetailPaymentMade = ({ id }) => {
-    openDrawer('payment-made-detail-drawer', { paymentMadeId: id });
+    openDrawer(DRAWERS.PAYMENT_MADE_DETAILS, { paymentMadeId: id });
   };
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('payment-made-detail-drawer', {
+    openDrawer(DRAWERS.PAYMENT_MADE_DETAILS, {
       paymentMadeId: cell.row.original.id,
     });
   };
@@ -134,7 +131,6 @@ function PaymentMadesTable({
 
 export default compose(
   withPaymentMadeActions,
-  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
   withAlertsActions,
   withDrawerActions,
   withCurrentOrganization(),

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx

@@ -23,7 +23,7 @@ function CreditNoteUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.CREDIT_NOTE) {
-    openDrawer(DRAWERS.CREDIT_NOTE_DETAIL_DRAWER, { creditNoteId: resourceId });
+    openDrawer(DRAWERS.CREDIT_NOTE_DETAILS, { creditNoteId: resourceId });
     onAction && onAction();
   }
   return null;

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.tsx

@@ -24,6 +24,7 @@ import { useCreditNoteTableColumns, ActionsMenu } from './components';
 import { useCreditNoteListContext } from './CreditNotesListProvider';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Credit note data table.
@@ -80,7 +81,7 @@ function CreditNotesDataTable({
   }
 
   const handleViewDetailCreditNote = ({ id }) => {
-    openDrawer('credit-note-detail-drawer', { creditNoteId: id });
+    openDrawer(DRAWERS.CREDIT_NOTE_DETAILS, { creditNoteId: id });
   };
 
   // Handle delete credit note.
@@ -95,7 +96,7 @@ function CreditNotesDataTable({
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('credit-note-detail-drawer', {
+    openDrawer(DRAWERS.CREDIT_NOTE_DETAILS, {
       creditNoteId: cell.row.original.id,
     });
   };

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx

@@ -8,6 +8,7 @@ import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { AbilitySubject, SaleEstimateAction } from '@/constants/abilityOption';
 
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Estimate universal search item select action.
@@ -21,7 +22,7 @@ function EstimateUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.ESTIMATE) {
-    openDrawer('estimate-detail-drawer', { estimateId: resourceId });
+    openDrawer(DRAWERS.ESTIMATE_DETAILS, { estimateId: resourceId });
   }
   return null;
 }

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx

@@ -21,6 +21,7 @@ import { ActionsMenu, useEstiamtesTableColumns } from './components';
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Estimates datatable.
@@ -86,7 +87,7 @@ function EstimatesDataTable({
 
   // Handle view detail estimate.
   const handleViewDetailEstimate = ({ id }) => {
-    openDrawer('estimate-detail-drawer', { estimateId: id });
+    openDrawer(DRAWERS.ESTIMATE_DETAILS, { estimateId: id });
   };
 
   // Handle print estimate.
@@ -96,7 +97,7 @@ function EstimatesDataTable({
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('estimate-detail-drawer', { estimateId: cell.row.original.id });
+    openDrawer(DRAWERS.ESTIMATE_DETAILS, { estimateId: cell.row.original.id });
   };
 
   // Local storage memorizing columns widths.

packages/webapp/src/containers/Sales/Invoices/InvoiceUniversalSearch.tsx

@@ -9,6 +9,7 @@ import { highlightText } from '@/utils';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { AbilitySubject, SaleInvoiceAction } from '@/constants/abilityOption';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Universal search invoice item select action.
@@ -22,7 +23,7 @@ function InvoiceUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.INVOICE) {
-    openDrawer('invoice-detail-drawer', { invoiceId: resourceId });
+    openDrawer(DRAWERS.INVOICE_DETAILS, { invoiceId: resourceId });
   }
   return null;
 }

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx

@@ -25,6 +25,7 @@ import { useInvoicesTableColumns, ActionsMenu } from './components';
 import { useInvoicesListContext } from './InvoicesListProvider';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Invoices datatable.
@@ -89,7 +90,7 @@ function InvoicesDataTable({
 
   // Handle view detail invoice.
   const handleViewDetailInvoice = ({ id }) => {
-    openDrawer('invoice-detail-drawer', { invoiceId: id });
+    openDrawer(DRAWERS.INVOICE_DETAILS, { invoiceId: id });
   };
 
   // Handle print invoices.
@@ -99,7 +100,7 @@ function InvoicesDataTable({
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id });
+    openDrawer(DRAWERS.INVOICE_DETAILS, { invoiceId: cell.row.original.id });
   };
 
   // Local storage memorizing columns widths.

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.tsx

@@ -4,10 +4,14 @@ import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
-import { AbilitySubject, PaymentReceiveAction } from '@/constants/abilityOption';
+import {
+  AbilitySubject,
+  PaymentReceiveAction,
+} from '@/constants/abilityOption';
 import { highlightText } from '@/utils';
 import { Icon } from '@/components';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Payment receive universal search item select action.
@@ -21,7 +25,7 @@ function PaymentReceiveUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.PAYMENT_RECEIVE) {
-    openDrawer('payment-receive-detail-drawer', {
+    openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, {
       paymentReceiveId: resourceId,
     });
   }

packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.tsx

@@ -22,6 +22,7 @@ import withSettings from '@/containers/Settings/withSettings';
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useMemorizedColumnsWidths } from '@/hooks';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Payment receives datatable.
@@ -69,12 +70,12 @@ function PaymentReceivesDataTable({
 
   // Handle view detail  payment receive..
   const handleViewDetailPaymentReceive = ({ id }) => {
-    openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
+    openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, { paymentReceiveId: id });
   };
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('payment-receive-detail-drawer', {
+    openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, {
       paymentReceiveId: cell.row.original.id,
     });
   };

packages/webapp/src/containers/Sales/Receipts/ReceiptUniversalSearch.tsx

@@ -7,6 +7,7 @@ import { Icon, Choose, T } from '@/components';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { AbilitySubject, SaleReceiptAction } from '@/constants/abilityOption';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Receipt universal search item select action.
@@ -21,7 +22,7 @@ function ReceiptUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.RECEIPT) {
-    openDrawer('receipt-detail-drawer', { receiptId: resourceId });
+    openDrawer(DRAWERS.RECEIPT_DETAILS, { receiptId: resourceId });
     onAction && onAction();
   }
   return null;

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx

@@ -23,6 +23,7 @@ import withSettings from '@/containers/Settings/withSettings';
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useReceiptsTableColumns, ActionsMenu } from './components';
 import { useMemorizedColumnsWidths } from '@/hooks';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Sale receipts datatable.
@@ -77,7 +78,7 @@ function ReceiptsDataTable({
 
   // Handle view detail receipt.
   const handleViewDetailReceipt = ({ id }) => {
-    openDrawer('receipt-detail-drawer', { receiptId: id });
+    openDrawer(DRAWERS.RECEIPT_DETAILS, { receiptId: id });
   };
 
   // Handle print receipt.
@@ -106,7 +107,7 @@ function ReceiptsDataTable({
   }
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('receipt-detail-drawer', { receiptId: cell.row.original.id });
+    openDrawer(DRAWERS.RECEIPT_DETAILS, { receiptId: cell.row.original.id });
   };
 
   return (

packages/webapp/src/containers/Vendors/VendorsLanding/VendorsTable.tsx

@@ -23,6 +23,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withSettings from '@/containers/Settings/withSettings';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Vendors table.
@@ -93,12 +94,12 @@ function VendorsTable({
 
   // Handle view detail item.
   const handleViewDetailVendor = ({ id }) => {
-    openDrawer('vendor-detail-drawer', { vendorId: id });
+    openDrawer(DRAWERS.VENDOR_DETAILS, { vendorId: id });
   };
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('vendor-detail-drawer', { vendorId: cell.row.original.id });
+    openDrawer(DRAWERS.VENDOR_DETAILS, { vendorId: cell.row.original.id });
   };
 
   // Local storage memorizing columns widths.

packages/webapp/src/containers/Vendors/VendorsUniversalSearch.tsx

@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
 import { AbilitySubject, VendorAction } from '@/constants/abilityOption';
 import withDrawerActions from '../Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Vendor univesal search item select action.
@@ -17,7 +18,7 @@ function VendorUniversalSearchSelectComponent({
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.VENDOR) {
-    openDrawer('vendor-detail-drawer', { vendorId: resourceId });
+    openDrawer(DRAWERS.VENDOR_DETAILS, { vendorId: resourceId });
     onAction && onAction();
   }
   return null;

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransfersLanding/WarehouseTransfersDataTable.tsx

@@ -21,6 +21,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withSettings from '@/containers/Settings/withSettings';
 
 import { compose } from '@/utils';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Warehouse transfers datatable.
@@ -78,7 +79,7 @@ function WarehouseTransfersDataTable({
 
   // Handle view detail.
   const handleViewDetailWarehouseTransfer = ({ id }) => {
-    openDrawer('warehouse-transfer-detail-drawer', { warehouseTransferId: id });
+    openDrawer(DRAWERS.WAREHOUSE_TRANSFER_DETAILS, { warehouseTransferId: id });
   };
 
   // Handle edit warehouse transfer.
@@ -102,7 +103,7 @@ function WarehouseTransfersDataTable({
 
   // Handle cell click.
   const handleCellClick = (cell, event) => {
-    openDrawer('warehouse-transfer-detail-drawer', {
+    openDrawer(DRAWERS.WAREHOUSE_TRANSFER_DETAILS, {
       warehouseTransferId: cell.row.original.id,
     });
   };