From ee6f4028ebe7878034aacd55a2086acf97e03f20 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 30 Dec 2021 21:33:18 +0200
Subject: [PATCH 1/5] BIG-232 customer and vendor drawer link.

---
 .../Customers/CustomerDrawerLink.js           | 25 +++++++++++++++++++
 src/components/Customers/index.js             |  1 +
 src/components/Vendors/VendorDrawerLink.js    | 23 +++++++++++++++++
 src/components/Vendors/index.js               |  1 +
 src/components/index.js                       |  2 ++
 .../Drawers/BillDrawer/BillDetailHeader.js    |  5 +++-
 .../CreditNoteDetailHeader.js                 |  5 +++-
 .../EstimateDetailHeader.js                   |  5 +++-
 .../InvoiceDetailHeader.js                    |  5 ++--
 .../PaymentMadeDetailHeader.js                |  5 +++-
 .../PaymentReceiveDetailHeader.js             |  5 +++-
 .../ReceiptDetailHeader.js                    |  5 +++-
 .../VendorCreditDetailHeader.js               |  5 +++-
 13 files changed, 83 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Customers/CustomerDrawerLink.js
 create mode 100644 src/components/Customers/index.js
 create mode 100644 src/components/Vendors/VendorDrawerLink.js
 create mode 100644 src/components/Vendors/index.js

diff --git a/src/components/Customers/CustomerDrawerLink.js b/src/components/Customers/CustomerDrawerLink.js
new file mode 100644
index 000000000..e99c20244
--- /dev/null
+++ b/src/components/Customers/CustomerDrawerLink.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function CustomerDrawerLinkComponent({
+  // #ownProps
+  children,
+  customerId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleCustomerDrawer = () => {
+    openDrawer('customer-details-drawer', { customerId });
+  };
+
+  return <ButtonLink onClick={handleCustomerDrawer}>{children}</ButtonLink>;
+}
+
+export const CustomerDrawerLink = R.compose(withDrawerActions)(
+  CustomerDrawerLinkComponent,
+);
diff --git a/src/components/Customers/index.js b/src/components/Customers/index.js
new file mode 100644
index 000000000..124141b39
--- /dev/null
+++ b/src/components/Customers/index.js
@@ -0,0 +1 @@
+export * from './CustomerDrawerLink';
diff --git a/src/components/Vendors/VendorDrawerLink.js b/src/components/Vendors/VendorDrawerLink.js
new file mode 100644
index 000000000..91b528e6f
--- /dev/null
+++ b/src/components/Vendors/VendorDrawerLink.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function VendorDrawerLinkComponent({
+  // #ownProps
+  children,
+  vendorId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleVendorDrawer = () => {
+    openDrawer('vendor-details-drawer', { vendorId });
+  };
+
+  return <ButtonLink onClick={handleVendorDrawer}>{children}</ButtonLink>;
+}
+
+export const VendorDrawerLink = R.compose(withDrawerActions)(VendorDrawerLinkComponent);
diff --git a/src/components/Vendors/index.js b/src/components/Vendors/index.js
new file mode 100644
index 000000000..8f9cc7544
--- /dev/null
+++ b/src/components/Vendors/index.js
@@ -0,0 +1 @@
+export * from './VendorDrawerLink'
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index feb3f934c..04a2b4138 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -92,6 +92,8 @@ export * from './TextStatus';
 export * from './Tags';
 export * from './CommercialDoc';
 export * from './Card';
+export * from './Customers'
+export * from './Vendors'
 
 const Hint = FieldHint;
 
diff --git a/src/containers/Drawers/BillDrawer/BillDetailHeader.js b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
index f002ac457..0ce3dc3b0 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailHeader.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailHeader.js
@@ -12,6 +12,7 @@ import {
   Col,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  VendorDrawerLink,
 } from 'components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
@@ -45,7 +46,9 @@ export default function BillDetailHeader() {
               <FormatDate value={bill.due_date} />
             </DetailItem>
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{bill.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={bill.vendor_id}>
+                {bill.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
             <DetailItem label={intl.get('bill.details.bill_number')}>
               {defaultTo(bill.bill_number, '-')}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
index 1b630d40b..ead8b8243 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
@@ -13,6 +13,7 @@ import {
   ButtonLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  CustomerDrawerLink,
 } from 'components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
@@ -48,7 +49,9 @@ export default function CreditNoteDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{creditNote.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={creditNote.customer_id}>
+                {creditNote.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem
diff --git a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
index b23e8b5ab..bf0572278 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
@@ -13,6 +13,7 @@ import {
   Row,
   Col,
   ButtonLink,
+  CustomerDrawerLink,
 } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import { EstimateDetailsStatus } from './components';
@@ -46,7 +47,9 @@ export default function EstimateDetailHeader() {
             />
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{estimate.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={estimate.customer_id}>
+                {estimate.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
index 95578c9b2..144dab077 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
@@ -12,6 +12,7 @@ import {
   FormatDate,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  CustomerDrawerLink,
 } from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 import { InvoiceDetailsStatus } from './utils';
@@ -50,9 +51,9 @@ export default function InvoiceDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink onClick={handleCustomerLinkClick}>
+              <CustomerDrawerLink customerId={invoice.customer_id}>
                 {invoice.customer?.display_name}
-              </ButtonLink>
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem label={intl.get('invoice.details.invoice_no')}>
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
index 20af0d818..6e36411f5 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -11,6 +11,7 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
   ButtonLink,
+  VendorDrawerLink,
 } from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
@@ -38,7 +39,9 @@ export default function PaymentMadeDetailHeader() {
               children={defaultTo(paymentMade.payment_number, '-')}
             />
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={paymentMade.vendor_id}>
+                {paymentMade.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
             <DetailItem
               label={intl.get('payment_account')}
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
index c8affc18a..182f9d7dd 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -11,6 +11,7 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
   ButtonLink,
+  CustomerDrawerLink,
 } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -38,7 +39,9 @@ export default function PaymentReceiveDetailHeader() {
               children={defaultTo(paymentReceive.payment_receive_no, '-')}
             />
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{paymentReceive.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={paymentReceive.customer_id}>
+                {paymentReceive.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
index fe56fea4d..ae25c7a73 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import {
   ButtonLink,
+  CustomerDrawerLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
 } from 'components';
@@ -41,7 +42,9 @@ export default function ReceiptDetailHeader() {
               children={defaultTo(receipt.receipt_number, '-')}
             />
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{receipt.customer?.display_name} </ButtonLink>
+              <CustomerDrawerLink customerId={receipt.customer_id}>
+                {receipt.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
             <DetailItem
               label={intl.get('receipt_date')}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
index b4b5ba2c5..c24d95041 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
@@ -13,6 +13,7 @@ import {
   ButtonLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  VendorDrawerLink,
 } from 'components';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 import { VendorCreditDetailsStatus } from './utils';
@@ -44,7 +45,9 @@ export default function VendorCreditDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{vendorCredit.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={vendorCredit.vendor_id}>
+                {vendorCredit.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
 
             <DetailItem

From 40ae1aeb528d0028886ceb56796f52ee6605b471 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 30 Dec 2021 21:54:32 +0200
Subject: [PATCH 2/5] BIG-225 Add menu divider before delete on contextMenu.

---
 src/containers/Accounting/JournalsLanding/components.js    | 1 +
 .../CashFlow/CashFlowAccounts/CashflowAccountsGrid.js      | 1 +
 src/containers/Customers/CustomersLanding/components.js    | 1 +
 .../BillDrawer/BillPaymentTransactions/components.js       | 3 ++-
 .../InvoicePaymentTransactions/components.js               | 3 ++-
 .../BillPaymentTransactions/components.js                  | 3 ++-
 .../EstimatePaymentTransactions/components.js              | 3 ++-
 .../InvoicePaymentTransactions/components.js               | 3 ++-
 .../ReceiptPaymentTransactions/components.js               | 3 ++-
 src/containers/Expenses/ExpensesLanding/components.js      | 1 +
 src/containers/Items/components.js                         | 1 +
 src/containers/Preferences/Currencies/components.js        | 7 +++----
 src/containers/Purchases/Bills/BillsLanding/components.js  | 1 +
 .../Purchases/CreditNotes/CreditNotesLanding/components.js | 1 +
 .../Purchases/PaymentMades/PaymentsLanding/components.js   | 1 +
 .../Sales/CreditNotes/CreditNotesLanding/components.js     | 1 +
 .../Sales/Estimates/EstimatesLanding/components.js         | 1 +
 .../Sales/Invoices/InvoicesLanding/components.js           | 1 +
 .../PaymentReceiveForm/PaymentReceiveForm.js               | 2 +-
 .../Sales/PaymentReceives/PaymentsLanding/components.js    | 1 +
 .../Sales/Receipts/ReceiptsLanding/components.js           | 1 +
 src/containers/Vendors/VendorsLanding/components.js        | 1 +
 22 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/containers/Accounting/JournalsLanding/components.js b/src/containers/Accounting/JournalsLanding/components.js
index 79207ca15..1384e3a87 100644
--- a/src/containers/Accounting/JournalsLanding/components.js
+++ b/src/containers/Accounting/JournalsLanding/components.js
@@ -179,6 +179,7 @@ export const ActionsMenu = ({
         />
       </Can>
       <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_journal')}
           icon={<Icon icon="trash-16" iconSize={16} />}
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
index cf06161b9..dc6104046 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
@@ -271,6 +271,7 @@ function CashflowAccountContextMenu({
         </If>
       </Can>
       <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_account')}
           icon={<Icon icon="trash-16" iconSize={16} />}
diff --git a/src/containers/Customers/CustomersLanding/components.js b/src/containers/Customers/CustomersLanding/components.js
index 9d878bbf4..2eacc0103 100644
--- a/src/containers/Customers/CustomersLanding/components.js
+++ b/src/containers/Customers/CustomersLanding/components.js
@@ -63,6 +63,7 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_customer')}
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
index 62fd6983d..36ed3e7dc 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
 import { Can, FormatDateCell, Icon } from '../../../../components';
@@ -27,6 +27,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('invoice_transactions.action.delete_transaction')}
           intent={Intent.DANGER}
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
index 8862e3e4d..d65038f9e 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
 import { FormatDateCell, Icon, Can } from '../../../../components';
@@ -27,6 +27,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('invoice_transactions.action.delete_transaction')}
           intent={Intent.DANGER}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
index 2ad0f7690..e0755777f 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
@@ -28,6 +28,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('invoice_transactions.action.delete_transaction')}
           intent={Intent.DANGER}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
index bced5a35c..2c8d92524 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
@@ -28,6 +28,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('invoice_transactions.action.delete_transaction')}
           intent={Intent.DANGER}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
index c044d36a9..9f145b381 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
@@ -28,6 +28,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('invoice_transactions.action.delete_transaction')}
           intent={Intent.DANGER}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
index d6e93bedb..393d5c48d 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import clsx from 'classnames';
 import { CLASSES } from '../../../../../common/classes';
@@ -28,6 +28,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('invoice_transactions.action.delete_transaction')}
           intent={Intent.DANGER}
diff --git a/src/containers/Expenses/ExpensesLanding/components.js b/src/containers/Expenses/ExpensesLanding/components.js
index da7bf993f..662b5c091 100644
--- a/src/containers/Expenses/ExpensesLanding/components.js
+++ b/src/containers/Expenses/ExpensesLanding/components.js
@@ -75,6 +75,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
+        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_expense')}
diff --git a/src/containers/Items/components.js b/src/containers/Items/components.js
index e4bf09d98..5de8e29ff 100644
--- a/src/containers/Items/components.js
+++ b/src/containers/Items/components.js
@@ -140,6 +140,7 @@ export function ItemsActionMenuList({
         </If>
       </Can>
       <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_item')}
           icon={<Icon icon="trash-16" iconSize={16} />}
diff --git a/src/containers/Preferences/Currencies/components.js b/src/containers/Preferences/Currencies/components.js
index 431628b27..2c25b607a 100644
--- a/src/containers/Preferences/Currencies/components.js
+++ b/src/containers/Preferences/Currencies/components.js
@@ -5,6 +5,7 @@ import {
   Button,
   Position,
   MenuItem,
+  MenuDivider,
   Intent,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
@@ -18,7 +19,6 @@ export function ActionMenuList({
   row: { original },
   payload: { onEditCurrency, onDeleteCurrency },
 }) {
-  
   return (
     <Menu>
       <MenuItem
@@ -26,6 +26,7 @@ export function ActionMenuList({
         text={intl.get('edit_currency')}
         onClick={safeCallback(onEditCurrency, original)}
       />
+      <MenuDivider />
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
         text={intl.get('delete_currency')}
@@ -51,8 +52,6 @@ export const ActionsCell = (props) => {
 };
 
 export function useCurrenciesTableColumns() {
-  
-
   return useMemo(
     () => [
       {
@@ -69,7 +68,7 @@ export function useCurrenciesTableColumns() {
       {
         Header: intl.get('currency_sign'),
         width: 120,
-        accessor: 'currency_sign'
+        accessor: 'currency_sign',
       },
       {
         id: 'actions',
diff --git a/src/containers/Purchases/Bills/BillsLanding/components.js b/src/containers/Purchases/Bills/BillsLanding/components.js
index ebd1771d0..4da4aa53f 100644
--- a/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -83,6 +83,7 @@ export function ActionsMenu({
         onClick={safeCallback(onAllocateLandedCost, original)}
       />
       <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_bill')}
           intent={Intent.DANGER}
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index b7c7945fd..c7c65ff80 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -70,6 +70,7 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('vendor_credits.action.delete_vendor_credit')}
           intent={Intent.DANGER}
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
index ae5951478..d009e8a2e 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -46,6 +46,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_payment_made')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
index 2e0dca0ff..eb171ae86 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -64,6 +64,7 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('credit_note.action.delete_credit_note')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/components.js b/src/containers/Sales/Estimates/EstimatesLanding/components.js
index 37a237845..65b941d71 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -137,6 +137,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_estimate')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/components.js b/src/containers/Sales/Invoices/InvoicesLanding/components.js
index 1e1d65052..fea2b1dff 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -176,6 +176,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_invoice')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
index 5448dce3d..18a7a6813 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
@@ -65,7 +65,7 @@ function PaymentReceiveForm({
     paymentReceiveNumberPrefix,
     paymentReceiveNextNumber,
   );
-  console.log(preferredDepositAccount, 'XX');
+
   // Form initial values.
   const initialValues = useMemo(
     () => ({
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index de95d270a..c679f95e6 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -41,6 +41,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_payment_receive')}
           intent={Intent.DANGER}
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index 2f5570c46..5f7a09207 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -60,6 +60,7 @@ export function ActionsMenu({
         />
       </Can>
       <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_receipt')}
           intent={Intent.DANGER}
diff --git a/src/containers/Vendors/VendorsLanding/components.js b/src/containers/Vendors/VendorsLanding/components.js
index 76bd69217..19c0cf8b8 100644
--- a/src/containers/Vendors/VendorsLanding/components.js
+++ b/src/containers/Vendors/VendorsLanding/components.js
@@ -67,6 +67,7 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={VendorAction.Delete} a={AbilitySubject.Vendor}>
+        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_vendor')}

From e9797fd9a0cc94ad5db07a8924edc00910492250 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 1 Jan 2022 10:27:32 +0200
Subject: [PATCH 3/5] BIG-214 Min width submit button on edit mode.

---
 .../Accounting/MakeJournal/MakeJournalFormFloatingActions.js   | 1 +
 src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js  | 3 ++-
 src/containers/Purchases/Bills/BillForm/BillFloatingActions.js | 3 ++-
 .../CreditNoteForm/VendorCreditNoteFloatingActions.js          | 1 +
 .../PaymentMades/PaymentForm/PaymentMadeFloatingActions.js     | 1 +
 .../CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js    | 3 ++-
 .../Sales/Estimates/EstimateForm/EstimateFloatingActions.js    | 2 +-
 .../Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js       | 1 +
 .../PaymentReceiveForm/PaymentReceiveFloatingActions.js        | 1 +
 .../Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js   | 1 +
 10 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js b/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js
index a95429551..469f722d1 100644
--- a/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js
+++ b/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js
@@ -151,6 +151,7 @@ export default function MakeJournalFloatingAction() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitPublishBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js b/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js
index c6d30be2f..46107d276 100644
--- a/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js
+++ b/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js
@@ -32,7 +32,7 @@ export default function ExpenseFloatingFooter() {
 
   // Handle submit & publish button click.
   const handleSubmitPublishBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, publish: true});
+    setSubmitPayload({ redirect: true, publish: true });
     submitForm();
   };
 
@@ -152,6 +152,7 @@ export default function ExpenseFloatingFooter() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitPublishBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js b/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
index 52ae12712..ba6a64e81 100644
--- a/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
+++ b/src/containers/Purchases/Bills/BillForm/BillFloatingActions.js
@@ -61,7 +61,7 @@ export default function BillFloatingActions() {
 
   // Handle submit as draft & continue editing button click.
   const handleSubmitDraftContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: false, });
+    setSubmitPayload({ redirect: false, status: false });
     submitForm();
   };
 
@@ -149,6 +149,7 @@ export default function BillFloatingActions() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
index ca41694fb..384afa055 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
@@ -146,6 +146,7 @@ export default function VendorCreditNoteFloatingActions() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
index 147c3c8c4..3fd8f0030 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js
@@ -64,6 +64,7 @@ export default function PaymentMadeFloatingActions() {
           intent={Intent.PRIMARY}
           type="submit"
           onClick={handleSubmitBtnClick}
+          style={{ minWidth: '85px' }}
           text={paymentMadeId ? <T id={'edit'} /> : <T id={'save'} />}
         />
         <Popover
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
index db59adfe5..54caebbf5 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
@@ -47,7 +47,7 @@ export default function CreditNoteFloatingActions() {
   };
   // Handle submit as draft button click.
   const handleSubmitDraftBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, open: false   });
+    setSubmitPayload({ redirect: true, open: false });
     submitForm();
   };
 
@@ -147,6 +147,7 @@ export default function CreditNoteFloatingActions() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitOpenBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
index 248938c74..440ba9be7 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
@@ -65,7 +65,6 @@ export default function EstimateFloatingActions() {
 
   const handleCancelBtnClick = (event) => {
     history.goBack();
-    
   };
 
   const handleClearBtnClick = (event) => {
@@ -149,6 +148,7 @@ export default function EstimateFloatingActions() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitDeliverBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
index d1dd532ca..2f82fefcc 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
@@ -151,6 +151,7 @@ export default function InvoiceFloatingActions() {
             loading={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitDeliverBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
index 1c87421bb..d35186c6f 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
@@ -69,6 +69,7 @@ export default function PaymentReceiveFormFloatingActions() {
           intent={Intent.PRIMARY}
           type="submit"
           onClick={handleSubmitBtnClick}
+          style={{ minWidth: '85px' }}
           text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
         />
         <Popover
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
index 267bb13a1..49d9f8499 100644
--- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
@@ -149,6 +149,7 @@ export default function ReceiptFormFloatingActions() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitCloseBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover

From a4a2d0c88833b53c742a54e669cd34a4d1c29995 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 1 Jan 2022 11:00:08 +0200
Subject: [PATCH 4/5] BIG-225 Optimize style of refund vendor form.

---
 .../RefundVendorCreditFloatingActions.js               |  2 +-
 .../RefundVendorCreditFormFields.js                    |  6 ------
 .../CreditNotes/CreditNotesLanding/components.js       |  2 +-
 .../pages/RefundVendorCredit/RefundVendorCredit.scss   | 10 +++-------
 4 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js
index 02b6a80cd..8ab4496ad 100644
--- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFloatingActions.js
@@ -33,7 +33,7 @@ function RefundVendorCreditFloatingActions({
         <Button
           intent={Intent.PRIMARY}
           loading={isSubmitting}
-          style={{ minWidth: '85px' }}
+          style={{ minWidth: '120px' }}
           type="submit"
         >
           <T id={'refund'} />
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js
index 8f59eb472..3ea3862b7 100644
--- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js
@@ -30,7 +30,6 @@ import {
 import { useAutofocus } from 'hooks';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
 import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
-import withSettings from 'containers/Settings/withSettings';
 
 /**
  * Refund Vendor credit form fields.
@@ -50,7 +49,6 @@ function RefundVendorCreditFormFields() {
             className={classNames('form-group--select-list', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="refund_date" />}
-            inline={true}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
@@ -79,7 +77,6 @@ function RefundVendorCreditFormFields() {
             className={classNames('form-group--amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="amount" />}
-            inline={true}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -104,7 +101,6 @@ function RefundVendorCreditFormFields() {
             className={classNames('form-group--reference', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="reference" />}
-            inline={true}
           >
             <InputGroup
               intent={inputIntent({ error, touched })}
@@ -128,7 +124,6 @@ function RefundVendorCreditFormFields() {
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'deposit_account_id'} />}
-            inline={true}
           >
             <AccountsSuggestField
               selectedAccountId={value}
@@ -154,7 +149,6 @@ function RefundVendorCreditFormFields() {
           <FormGroup
             label={<T id={'refund_vendor_credit.dialog.description'} />}
             className={'form-group--description'}
-            inline={true}
           >
             <TextArea growVertically={true} {...field} />
           </FormGroup>
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index c7c65ff80..8b9fe457e 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -63,8 +63,8 @@ export function ActionsMenu({
           }
         >
           <MenuItem
-            icon={<Icon icon="quick-payment-16" />}
             text={intl.get('vendor_credits.action.reconcile_with_bills')}
+            icon={<Icon icon="receipt-24" iconSize={16} />}
             onClick={safeCallback(onReconcile, original)}
           />
         </If>
diff --git a/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss b/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
index ac74dfa56..033acd0c2 100644
--- a/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
+++ b/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
@@ -1,13 +1,9 @@
 .dialog--refund-vendor-credit {
+  max-width: 450px;
+
   .bp3-dialog-body {
     .bp3-form-group {
-      label.bp3-label {
-        min-width: 140px;
-        font-size: 13px;
-      }
-      .bp3-form-content {
-        width: 250px;
-      }
+      margin-bottom: 16px;
     }
 
     .form-group {

From 3c73540b4e7fd8771b1fa76762b7a6aeef2680d6 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 1 Jan 2022 15:34:04 +0200
Subject: [PATCH 5/5] BIG-210 Refund credit & vendor drawer detail.

---
 src/common/drawers.js                         |  2 +
 src/components/DrawersContainer.js            |  8 ++++
 .../RefundCreditNoteDeleteAlert.js            | 12 ++++-
 .../RefundVendorCreditDeleteAlert.js          | 12 ++++-
 .../CashFlow/AccountTransactions/utils.js     |  8 ++++
 .../RefundCreditNoteDetail.js                 | 39 +++++++++++++++
 .../RefundCreditNoteDetailActionsBar.js       | 46 ++++++++++++++++++
 .../RefundCreditNoteDetailHeader.js           | 47 +++++++++++++++++++
 .../RefundCreditNoteDetailTab.js              | 16 +++++++
 .../RefundCreditNoteDrawerContent.js          | 18 +++++++
 .../RefundCreditNoteDrawerProvider.js         | 40 ++++++++++++++++
 .../RefundCreditNoteDetailDrawer/index.js     | 37 +++++++++++++++
 .../RefundVendorCreditDetail.js               | 39 +++++++++++++++
 .../RefundVendorCreditDetailActionsBar.js     | 45 ++++++++++++++++++
 .../RefundVendorCreditDetailHeader.js         | 47 +++++++++++++++++++
 .../RefundVendorCreditDetailTab.js            | 15 ++++++
 .../RefundVendorCreditDrawerContent.js        | 21 +++++++++
 .../RefundVendorCreditDrawerProvider.js       | 43 +++++++++++++++++
 .../RefundVendorCreditDetailDrawer/index.js   | 38 +++++++++++++++
 src/hooks/query/creditNote.js                 | 21 +++++++++
 src/hooks/query/types.js                      |  2 +
 src/hooks/query/vendorCredit.js               | 25 ++++++++++
 src/lang/ar/index.json                        | 15 +++++-
 src/lang/en/index.json                        |  9 +++-
 24 files changed, 599 insertions(+), 6 deletions(-)
 create mode 100644 src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.js
 create mode 100644 src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.js
 create mode 100644 src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.js
 create mode 100644 src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.js
 create mode 100644 src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.js
 create mode 100644 src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.js
 create mode 100644 src/containers/Drawers/RefundCreditNoteDetailDrawer/index.js
 create mode 100644 src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetail.js
 create mode 100644 src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailActionsBar.js
 create mode 100644 src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailHeader.js
 create mode 100644 src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailTab.js
 create mode 100644 src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerContent.js
 create mode 100644 src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.js
 create mode 100644 src/containers/Drawers/RefundVendorCreditDetailDrawer/index.js

diff --git a/src/common/drawers.js b/src/common/drawers.js
index b42c44b9f..5ec6d05a2 100644
--- a/src/common/drawers.js
+++ b/src/common/drawers.js
@@ -16,4 +16,6 @@ export const DRAWERS = {
   QUICK_CREATE_ITEM: 'quick-create-item',
   CREDIT_NOTE_DETAIL_DRAWER: 'credit-note-detail-drawer',
   VENDOR_CREDIT_DETAIL_DRAWER: 'vendor-credit-detail-drawer',
+  REFUND_CREDIT_NOTE_DETAIL_DRAWER:'refund-credit-detail-drawer',
+  REFUND_VENDOR_CREDIT_DETAIL_DRAWER:'refund-vendor-detail-drawer'
 };
diff --git a/src/components/DrawersContainer.js b/src/components/DrawersContainer.js
index b7c0e8fe6..e508519bd 100644
--- a/src/components/DrawersContainer.js
+++ b/src/components/DrawersContainer.js
@@ -19,6 +19,8 @@ import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
 import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
 import CreditNoteDetailDrawer from '../containers/Drawers/CreditNoteDetailDrawer';
 import VendorCreditDetailDrawer from '../containers/Drawers/VendorCreditDetailDrawer';
+import RefundCreditNoteDetailDrawer from '../containers/Drawers/RefundCreditNoteDetailDrawer';
+import RefundVendorCreditDetailDrawer from '../containers/Drawers/RefundVendorCreditDetailDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -51,6 +53,12 @@ export default function DrawersContainer() {
       <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
       <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAIL_DRAWER} />
       <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER} />
+      <RefundCreditNoteDetailDrawer
+        name={DRAWERS.REFUND_CREDIT_NOTE_DETAIL_DRAWER}
+      />
+      <RefundVendorCreditDetailDrawer
+        name={DRAWERS.REFUND_VENDOR_CREDIT_DETAIL_DRAWER}
+      />
     </div>
   );
 }
diff --git a/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
index 9fe3774ad..da575c2af 100644
--- a/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
+++ b/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
@@ -7,6 +7,7 @@ import { useDeleteRefundCreditNote } from 'hooks/query';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -20,6 +21,9 @@ function RefundCreditNoteDeleteAlert({
   payload: { creditNoteId },
   // #withAlertActions
   closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
 }) {
   const { mutateAsync: deleteRefundCreditMutate, isLoading } =
     useDeleteRefundCreditNote();
@@ -37,9 +41,12 @@ function RefundCreditNoteDeleteAlert({
           message: intl.get('refund_credit_transactions.alert.delete_message'),
           intent: Intent.SUCCESS,
         });
-        closeAlert(name);
+        closeDrawer('refund-credit-detail-drawer');
       })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
   };
 
   return (
@@ -65,4 +72,5 @@ function RefundCreditNoteDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
+  withDrawerActions,
 )(RefundCreditNoteDeleteAlert);
diff --git a/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js b/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
index 526d92bfb..4e17eb2ec 100644
--- a/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
+++ b/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
@@ -7,6 +7,7 @@ import { useDeleteRefundVendorCredit } from 'hooks/query';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -20,6 +21,9 @@ function RefundVendorCreditDeleteAlert({
   payload: { vendorCreditId },
   // #withAlertActions
   closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
 }) {
   const { mutateAsync: deleteRefundVendorCreditMutate, isLoading } =
     useDeleteRefundVendorCredit();
@@ -39,9 +43,12 @@ function RefundVendorCreditDeleteAlert({
           ),
           intent: Intent.SUCCESS,
         });
-        closeAlert(name);
+        closeDrawer('refund-vendor-detail-drawer');
       })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
   };
 
   return (
@@ -67,4 +74,5 @@ function RefundVendorCreditDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
+  withDrawerActions,
 )(RefundVendorCreditDeleteAlert);
diff --git a/src/containers/CashFlow/AccountTransactions/utils.js b/src/containers/CashFlow/AccountTransactions/utils.js
index 59f8b43ea..567422ea6 100644
--- a/src/containers/CashFlow/AccountTransactions/utils.js
+++ b/src/containers/CashFlow/AccountTransactions/utils.js
@@ -71,6 +71,14 @@ export const handleCashFlowTransactionType = (reference, openDrawer) => {
       return openDrawer('payment-made-detail-drawer', {
         paymentMadeId: reference.reference_id,
       });
+    case 'RefundCreditNote':
+      return openDrawer('refund-credit-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
+    case 'RefundVendorCredit':
+      return openDrawer('refund-vendor-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
 
     default:
       return openDrawer('cashflow-transaction-drawer', {
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.js
new file mode 100644
index 000000000..1eef75ad7
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { DrawerMainTabs } from 'components';
+import RefundCreditNoteDetailTab from './RefundCreditNoteDetailTab';
+import RefundCreditNoteDetailActionsBar from './RefundCreditNoteDetailActionsBar';
+
+/**
+ * Refund credit note detail.
+ * @returns {React.JSX}
+ */
+export default function RefundCreditNoteDetail() {
+  return (
+    <RefundCreditNoteDetailRoot>
+      <RefundCreditNoteDetailActionsBar />
+      <RefundCreditNoteDetailTabs />
+    </RefundCreditNoteDetailRoot>
+  );
+}
+
+/**
+ * Refund credit note detail tabs.
+ * @returns {React.JSX}
+ */
+function RefundCreditNoteDetailTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<RefundCreditNoteDetailTab />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const RefundCreditNoteDetailRoot = styled.div``;
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.js
new file mode 100644
index 000000000..8d66d7852
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
+
+import { useRefundCreditNoteDrawerContext } from './RefundCreditNoteDrawerProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
+import {
+  CreditNoteAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit note actions bar.
+ */
+function RefundCreditNoteDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundTransactionId } = useRefundCreditNoteDrawerContext();
+
+  // Handle delete refund credit.
+  const handleDeleteRefundCreditNote = () => {
+    openAlert('refund-credit-delete', { creditNoteId: refundTransactionId });
+  };
+
+  return (
+    <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+      <DrawerActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteRefundCreditNote}
+          />
+        </NavbarGroup>
+      </DrawerActionsBar>
+    </Can>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteDetailActionsBar);
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.js
new file mode 100644
index 000000000..de38a473b
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import {
+  CommercialDocHeader,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
+
+import { useRefundCreditNoteDrawerContext } from './RefundCreditNoteDrawerProvider';
+
+export default function RefundCreditNoteDetailHeader() {
+  const { refundCreditTransaction } = useRefundCreditNoteDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem
+          label={intl.get('date')}
+          children={
+            <FormatDate value={refundCreditTransaction.formatted_date} />
+          }
+        />
+        <DetailItem label={intl.get('refund_credit.drawer.label.amount')}>
+          <strong>{refundCreditTransaction.formtted_amount}</strong>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('refund_credit.drawer.label.credit_note_no')}
+          children={refundCreditTransaction.credit_note?.credit_note_number}
+        />
+
+        <DetailItem
+          label={intl.get('refund_credit.drawer.label.withdrawal_account')}
+          children={refundCreditTransaction.from_account.name}
+        />
+        <DetailItem label={intl.get('refund_credit.drawer.label.reference_no')}>
+          {defaultTo(refundCreditTransaction.reference_no, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('refund_credit.drawer.label.description')}>
+          {defaultTo(refundCreditTransaction.description, '—')}
+        </DetailItem>
+      </DetailsMenu>
+    </CommercialDocHeader>
+  );
+}
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.js
new file mode 100644
index 000000000..808a30fad
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { CommercialDocBox } from 'components';
+import RefundCreditNoteDetailHeader from './RefundCreditNoteDetailHeader';
+
+/**
+ * Refund credit note detail tab.
+ * @returns
+ */
+export default function RefundCreditNoteDetailTab() {
+  return (
+    <CommercialDocBox>
+      <RefundCreditNoteDetailHeader />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.js
new file mode 100644
index 000000000..912385421
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import RefundCreditNoteDetail from './RefundCreditNoteDetail';
+import { RefundCreditNoteDrawerProvider } from './RefundCreditNoteDrawerProvider';
+
+/**
+ * Refund credit note drawer content.
+ */
+export default function RefundCreditNoteDrawerContent({ refundTransactionId }) {
+  return (
+    <RefundCreditNoteDrawerProvider refundTransactionId={refundTransactionId}>
+      <DrawerBody>
+        <RefundCreditNoteDetail />
+      </DrawerBody>
+    </RefundCreditNoteDrawerProvider>
+  );
+}
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.js
new file mode 100644
index 000000000..37f465f61
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useRefundCreditTransaction } from 'hooks/query';
+
+const RefundCreditNoteDrawerContext = React.createContext();
+
+/**
+ * Refund credit note drawer provider.
+ */
+function RefundCreditNoteDrawerProvider({ refundTransactionId, ...props }) {
+  // Handle fetch refund credit note transaction.
+  const {
+    data: refundCreditTransaction,
+    isLoading: isRefundCreditTransaction,
+  } = useRefundCreditTransaction(refundTransactionId, {
+    enabled: !!refundTransactionId,
+  });
+
+  // provider
+  const provider = {
+    refundTransactionId,
+    refundCreditTransaction,
+  };
+
+  return (
+    <DrawerLoading loading={isRefundCreditTransaction}>
+      <DrawerHeaderContent
+        name="refund-credit-detail-drawer"
+        title={intl.get('refund_credit.drawer.title')}
+      />
+      <RefundCreditNoteDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useRefundCreditNoteDrawerContext = () =>
+  React.useContext(RefundCreditNoteDrawerContext);
+
+export { RefundCreditNoteDrawerProvider, useRefundCreditNoteDrawerContext };
diff --git a/src/containers/Drawers/RefundCreditNoteDetailDrawer/index.js b/src/containers/Drawers/RefundCreditNoteDetailDrawer/index.js
new file mode 100644
index 000000000..44defcdb2
--- /dev/null
+++ b/src/containers/Drawers/RefundCreditNoteDetailDrawer/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const RefundCreditNoteDrawerContent = React.lazy(() =>
+  import('./RefundCreditNoteDrawerContent'),
+);
+
+/**
+ * Refund credit note detail.
+ * @returns
+ */
+function RefundCreditNoteDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { refundTransactionId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '750px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <RefundCreditNoteDrawerContent
+          refundTransactionId={refundTransactionId}
+        />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+export default compose(withDrawers())(RefundCreditNoteDetailDrawer);
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetail.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetail.js
new file mode 100644
index 000000000..b9ad02b71
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetail.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { DrawerMainTabs } from 'components';
+import RefundVendorCreditDetailTab from './RefundVendorCreditDetailTab'
+import RefundVendorCreditDetailActionsBar from './RefundVendorCreditDetailActionsBar';
+
+/**
+ * Refund vendor credit detail.
+ * @returns {React.JSX}
+ */
+export default function RefundVendorCreditDetail() {
+  return (
+    <RefundVendorCreditDetailRoot>
+      <RefundVendorCreditDetailActionsBar />
+      <RefundVendorCreditDetailTabs />
+    </RefundVendorCreditDetailRoot>
+  );
+}
+
+/**
+ * Refund vendor credit detail tabs.
+ * @returns {React.JSX}
+ */
+function RefundVendorCreditDetailTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<RefundVendorCreditDetailTab />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const RefundVendorCreditDetailRoot = styled.div``;
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailActionsBar.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailActionsBar.js
new file mode 100644
index 000000000..a31694c51
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailActionsBar.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useRefundVendorCreditNoteDrawerContext } from './RefundVendorCreditDrawerProvider';
+import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
+import {
+  VendorCreditAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
+
+/**
+ * Refund vendor credit actions bar.
+ */
+function RefundVendorCreditDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundTransactionId } = useRefundVendorCreditNoteDrawerContext();
+
+  // Handle delete refund vendor credit.
+  const handleDeleteRefundVendorCredit = () => {
+    openAlert('refund-vendor-delete', { vendorCreditId: refundTransactionId });
+  };
+
+  return (
+    <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+      <DrawerActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteRefundVendorCredit}
+          />
+        </NavbarGroup>
+      </DrawerActionsBar>
+    </Can>
+  );
+}
+
+export default compose(withAlertsActions)(RefundVendorCreditDetailActionsBar);
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailHeader.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailHeader.js
new file mode 100644
index 000000000..4140abe88
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailHeader.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import {
+  CommercialDocHeader,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+} from 'components';
+
+import { useRefundVendorCreditNoteDrawerContext } from './RefundVendorCreditDrawerProvider';
+
+export default function RefundVendorCreditDetailHeader() {
+  const { refundVendorTransaction } = useRefundVendorCreditNoteDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem
+          label={intl.get('date')}
+          children={
+            <FormatDate value={refundVendorTransaction.formatted_date} />
+          }
+        />
+        <DetailItem label={intl.get('refund_vendor_credit.drawer.label.amount')}>
+          <strong>{refundVendorTransaction.formtted_amount}</strong>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('refund_vendor_credit.drawer.label.vendor_credit_no')}
+          children={refundVendorTransaction.vendor_credit?.vendor_credit_number}
+        />
+
+        <DetailItem
+          label={intl.get('refund_vendor_credit.drawer.label.deposit_account')}
+          children={refundVendorTransaction.deposit_account.name}
+        />
+        <DetailItem label={intl.get('refund_vendor_credit.drawer.label.reference_no')}>
+          {defaultTo(refundVendorTransaction.reference_no, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('refund_vendor_credit.drawer.label.description')}>
+          {defaultTo(refundVendorTransaction.description, '—')}
+        </DetailItem>
+      </DetailsMenu>
+    </CommercialDocHeader>
+  );
+}
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailTab.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailTab.js
new file mode 100644
index 000000000..3e01d4a2d
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDetailTab.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { CommercialDocBox } from 'components';
+import RefundVendorCreditDetailHeader from './RefundVendorCreditDetailHeader';
+
+/**
+ * Refund vendor credit detail tab.
+ */
+export default function RefundVendorCreditDetailTab() {
+  return (
+    <CommercialDocBox>
+      <RefundVendorCreditDetailHeader />
+    </CommercialDocBox>
+  );
+}
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerContent.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerContent.js
new file mode 100644
index 000000000..eb2353d05
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import RefundVendorCreditDetail from './RefundVendorCreditDetail';
+import { RefundVendorCreditDrawerProvider } from './RefundVendorCreditDrawerProvider';
+
+/**
+ * Refund vendor credit drawer content.
+ * @returns
+ */
+export default function RefundVendorCreditDrawerContent({
+  refundTransactionId,
+}) {
+  return (
+    <RefundVendorCreditDrawerProvider refundTransactionId={refundTransactionId}>
+      <DrawerBody>
+        <RefundVendorCreditDetail />
+      </DrawerBody>
+    </RefundVendorCreditDrawerProvider>
+  );
+}
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.js
new file mode 100644
index 000000000..dbca85739
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/RefundVendorCreditDrawerProvider.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useRefundVendorCreditTransaction } from 'hooks/query';
+
+const RefundVendorCreditDrawerContent = React.createContext();
+
+/**
+ * Refund vendor credit drawer provider.
+ */
+function RefundVendorCreditDrawerProvider({ refundTransactionId, ...props }) {
+  // Handle fetch refund credit note transaction.
+  const {
+    data: refundVendorTransaction,
+    isLoading: isRefundVendorTransaction,
+  } = useRefundVendorCreditTransaction(refundTransactionId, {
+    enabled: !!refundTransactionId,
+  });
+
+  // provider
+  const provider = {
+    refundTransactionId,
+    refundVendorTransaction,
+  };
+
+  return (
+    <DrawerLoading loading={isRefundVendorTransaction}>
+      <DrawerHeaderContent
+        name="refund-vendor-detail-drawer"
+        title={intl.get('refund_vendor_credit.drawer.title')}
+      />
+      <RefundVendorCreditDrawerContent.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useRefundVendorCreditNoteDrawerContext = () =>
+  React.useContext(RefundVendorCreditDrawerContent);
+
+export {
+  RefundVendorCreditDrawerProvider,
+  useRefundVendorCreditNoteDrawerContext,
+};
diff --git a/src/containers/Drawers/RefundVendorCreditDetailDrawer/index.js b/src/containers/Drawers/RefundVendorCreditDetailDrawer/index.js
new file mode 100644
index 000000000..a99cd279e
--- /dev/null
+++ b/src/containers/Drawers/RefundVendorCreditDetailDrawer/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const RefundVendorCreditDrawerContent = React.lazy(() =>
+  import('./RefundVendorCreditDrawerContent'),
+);
+
+/**
+ * Refund credit note detail.
+ * @returns
+ */
+function RefundCreditNoteDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { refundTransactionId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '750px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <RefundVendorCreditDrawerContent
+          refundTransactionId={refundTransactionId}
+        />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(RefundCreditNoteDetailDrawer);
diff --git a/src/hooks/query/creditNote.js b/src/hooks/query/creditNote.js
index 8bed87936..6e06ce622 100644
--- a/src/hooks/query/creditNote.js
+++ b/src/hooks/query/creditNote.js
@@ -26,6 +26,7 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate refund credit
   queryClient.invalidateQueries(t.REFUND_CREDIT_NOTE);
+  queryClient.invalidateQueries(t.REFUND_CREDIT_NOTE_TRANSACTION);
 
   // Invalidate reconcile.
   queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
@@ -35,6 +36,9 @@ const commonInvalidateQueries = (queryClient) => {
   queryClient.invalidateQueries(t.SALE_INVOICES);
   queryClient.invalidateQueries(t.SALE_INVOICE);
 
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 };
@@ -320,3 +324,20 @@ export function useDeleteReconcileCredit(props) {
     },
   );
 }
+
+/**
+ * Retrieve refund credit transaction detail.
+ * @param {number} id
+ *
+ */
+export function useRefundCreditTransaction(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_CREDIT_NOTE_TRANSACTION, id],
+    { method: 'get', url: `sales/credit_notes/refunds/${id}`, ...requestProps },
+    {
+      select: (res) => res.data.refund_credit,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index e22b8bedf..d98f99db8 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -118,6 +118,7 @@ const CREDIT_NOTES = {
   CREDIT_NOTE: 'CREDIT_NOTE',
   CREDIT_NOTES: 'CREDIT_NOTES',
   REFUND_CREDIT_NOTE: 'REFUND_CREDIT_NOTE',
+  REFUND_CREDIT_NOTE_TRANSACTION: 'REFUND_CREDIT_NOTE_TRANSACTION',
   RECONCILE_CREDIT_NOTE: 'RECONCILE_CREDIT_NOTE',
   RECONCILE_CREDIT_NOTES: 'RECONCILE_CREDIT_NOTES',
 };
@@ -126,6 +127,7 @@ const VENDOR_CREDIT_NOTES = {
   VENDOR_CREDITS: 'VENDOR_CREDITS',
   VENDOR_CREDIT: 'VENDOR_CREDIT',
   REFUND_VENDOR_CREDIT: 'REFUND_VENDOR_CREDIT',
+  REFUND_VENDOR_CREDIT_TRANSACTION: 'REFUND_VENDOR_CREDIT_TRANSACTION',
   RECONCILE_VENDOR_CREDIT: 'RECONCILE_VENDOR_CREDIT',
   RECONCILE_VENDOR_CREDITS: 'RECONCILE_VENDOR_CREDITS',
 };
diff --git a/src/hooks/query/vendorCredit.js b/src/hooks/query/vendorCredit.js
index 8e6af88aa..927456d94 100644
--- a/src/hooks/query/vendorCredit.js
+++ b/src/hooks/query/vendorCredit.js
@@ -26,6 +26,7 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate refund vendor credit
   queryClient.invalidateQueries(t.REFUND_VENDOR_CREDIT);
+  queryClient.invalidateQueries(t.REFUND_VENDOR_CREDIT_TRANSACTION);
 
   // Invalidate reconcile vendor credit.
   queryClient.invalidateQueries(t.RECONCILE_VENDOR_CREDIT);
@@ -35,6 +36,9 @@ const commonInvalidateQueries = (queryClient) => {
   queryClient.invalidateQueries(t.BILL);
   queryClient.invalidateQueries(t.BILLS);
 
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 };
@@ -333,3 +337,24 @@ export function useDeleteReconcileVendorCredit(props) {
     },
   );
 }
+
+/**
+ * Retrieve refund vendor transaction detail.
+ * @param {number} id
+ *
+ */
+export function useRefundVendorCreditTransaction(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_VENDOR_CREDIT_TRANSACTION, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/refunds/${id}`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.refund_credit,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index fdec423dc..a2e774069 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -1735,6 +1735,19 @@
   "permissions.cashflow_account_transactions":"معاملات حسابات التدفقات النقدية",
   "permissions.more_permissions":"عرض المزيد ",
 
-  "estimate.status.expired": "منتهية الصلاحية"
+  "estimate.status.expired": "منتهية الصلاحية",
+  "refund_credit.drawer.title":" تفاصيل استرجاع الأموال لإشعار الدائن ",
+  "refund_credit.drawer.label.amount":"القيمة",
+  "refund_credit.drawer.label.credit_note_no":"رقم الإشعار",
+  "refund_credit.drawer.label.withdrawal_account":"حساب السحب",
+  "refund_credit.drawer.label.reference_no":"رقم المرجع",
+  "refund_credit.drawer.label.description":"الوصف",
+  "refund_vendor_credit.drawer.title":" تفاصيل استرجاع الأموال لإشعار المدين ",
+  "refund_vendor_credit.drawer.label.amount":"القيمة",
+  "refund_vendor_credit.drawer.label.vendor_credit_no":"رقم الإشعار",
+  "refund_vendor_credit.drawer.label.deposit_account":"حساب إيداع",
+  "refund_vendor_credit.drawer.label.reference_no":"رقم المرجع",
+  "refund_vendor_credit.drawer.label.description":"الوصف"
 }
 
+
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 7456ead45..dfd5d5ed9 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1722,6 +1722,13 @@
   "permissions.cashflow_account_transactions":"Cashflow account transactions",
   "permissions.more_permissions":"More Permissions",
 
-  "estimate.status.expired": "Expired"
+  "estimate.status.expired": "Expired",
+  "refund_credit.drawer.title":"Refund credit note",
+  "refund_credit.drawer.label.amount":"Amount",
+  "refund_credit.drawer.label.credit_note_no":"Credit note number",
+  "refund_credit.drawer.label.withdrawal_account":"Withdrawal account",
+  "refund_credit.drawer.label.reference_no":"Reference number",
+  "refund_credit.drawer.label.description":"Description"
+
 }