Merge branch 'develop' of https://github.com/bigcapitalhq/client into develop

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

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

src/components/Customers/index.js

@@ -0,0 +1 @@
+export * from './CustomerDrawerLink';

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

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

src/components/Vendors/index.js

@@ -0,0 +1 @@
+export * from './VendorDrawerLink'

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;
 

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

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

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

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

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

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

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

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

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>

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

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}

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

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

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

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}

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}

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}

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}

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}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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}

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

src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js

@@ -63,13 +63,14 @@ 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>
       </Can>
       <Can I={VendorCreditAction.Delete} a={AbilitySubject.VendorCredit}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('vendor_credits.action.delete_vendor_credit')}
           intent={Intent.DANGER}

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

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}

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

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}

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

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}

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

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}

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

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

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}

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

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}

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

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

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

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

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":"الوصف"
 }
 
+

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"
+
 }
 

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 {
+      margin-bottom: 16px;
-        min-width: 140px;
-        font-size: 13px;
-      }
-      .bp3-form-content {
-        width: 250px;
-      }
     }
 
     .form-group {