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

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