BIG-210 Refund credit & vendor drawer detail.

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