From 31e0bbc1876dcc98cf9a735e95cff02c5781eb97 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 1 Dec 2021 16:59:37 +0200
Subject: [PATCH] feat: add View detail.
---
src/common/drawers.js | 2 +
src/components/DrawersContainer.js | 4 +
.../CreditNotes/CreditNoteDeleteAlert.js | 1 +
.../VendorCreditDeleteAlert.js | 1 +
.../CreditNoteDetail.js | 26 +++++++
.../CreditNoteDetailActionsBar.js | 76 +++++++++++++++++++
.../CreditNoteDetailDrawerContent.js | 21 +++++
.../CreditNoteDetailDrawerFooter.js | 32 ++++++++
.../CreditNoteDetailDrawerProvider.js | 39 ++++++++++
.../CreditNoteDetailHeader.js | 50 ++++++++++++
.../CreditNoteDetailPanel.js | 24 ++++++
.../CreditNoteDetailTable.js | 31 ++++++++
.../Drawers/CreditNoteDetailDrawer/index.js | 33 ++++++++
.../Drawers/CreditNoteDetailDrawer/utils.js | 47 ++++++++++++
.../VendorCreditDetail.js | 26 +++++++
.../VendorCreditDetailActionsBar.js | 76 +++++++++++++++++++
.../VendorCreditDetailDrawerContent.js | 18 +++++
.../VendorCreditDetailDrawerFooter.js | 34 +++++++++
.../VendorCreditDetailDrawerProvider.js | 37 +++++++++
.../VendorCreditDetailHeader.js | 49 ++++++++++++
.../VendorCreditDetailPanel.js | 24 ++++++
.../VendorCreditDetailTable.js | 31 ++++++++
.../Drawers/VendorCreditDetailDrawer/index.js | 34 +++++++++
.../Drawers/VendorCreditDetailDrawer/utils.js | 51 +++++++++++++
.../VendorsCreditNoteDataTable.js | 23 +++++-
.../CreditNotesDataTable.js | 20 ++++-
.../CreditNotesLanding/CreditNotesList.js | 3 +-
src/lang/en/index.json | 14 +++-
.../Drawers/CreditNoteDetails.module.scss | 68 +++++++++++++++++
.../Drawers/VendorCreditDetail.module.scss | 68 +++++++++++++++++
30 files changed, 956 insertions(+), 7 deletions(-)
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/index.js
create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/utils.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/index.js
create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/utils.js
create mode 100644 src/style/components/Drawers/CreditNoteDetails.module.scss
create mode 100644 src/style/components/Drawers/VendorCreditDetail.module.scss
diff --git a/src/common/drawers.js b/src/common/drawers.js
index 3a1b21032..b42c44b9f 100644
--- a/src/common/drawers.js
+++ b/src/common/drawers.js
@@ -14,4 +14,6 @@ export const DRAWERS = {
QUICK_WRITE_VENDOR: 'quick-write-vendor',
QUICK_CREATE_CUSTOMER: 'quick-create-customer',
QUICK_CREATE_ITEM: 'quick-create-item',
+ CREDIT_NOTE_DETAIL_DRAWER: 'credit-note-detail-drawer',
+ VENDOR_CREDIT_DETAIL_DRAWER: 'vendor-credit-detail-drawer',
};
diff --git a/src/components/DrawersContainer.js b/src/components/DrawersContainer.js
index 135dcb8a3..b7c0e8fe6 100644
--- a/src/components/DrawersContainer.js
+++ b/src/components/DrawersContainer.js
@@ -17,6 +17,8 @@ import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTrans
import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
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 { DRAWERS } from 'common/drawers';
@@ -47,6 +49,8 @@ export default function DrawersContainer() {
+
+
);
}
diff --git a/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js
index f7cc492c9..be664372a 100644
--- a/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js
+++ b/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js
@@ -41,6 +41,7 @@ function CreditNoteDeleteAlert({
message: intl.get('credit_note.alert.success_message'),
intent: Intent.SUCCESS,
});
+ closeDrawer('credit-note-detail-drawer');
})
.catch(
({
diff --git a/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js b/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
index 1067d486e..160905c1d 100644
--- a/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
+++ b/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js
@@ -41,6 +41,7 @@ function VendorCreditDeleteAlert({
message: intl.get('vendor_credits.alert.success_message'),
intent: Intent.SUCCESS,
});
+ closeDrawer('vendor-credit-detail-drawer');
})
.catch(
({
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
new file mode 100644
index 000000000..74f7e760b
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { DrawerMainTabs } from 'components';
+
+import CreditNoteDetailPanel from './CreditNoteDetailPanel';
+import clsx from 'classnames';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit Note view detail.
+ */
+export default function CreditNoteDetail() {
+ return (
+
+
+ }
+ />
+
+
+ );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
new file mode 100644
index 000000000..a7b92ae21
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+ Button,
+ NavbarGroup,
+ Classes,
+ NavbarDivider,
+ Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note detail actions bar.
+ */
+function CreditNoteDetailActionsBar({
+ // #withDialogActions
+ openDialog,
+
+ // #withAlertsActions
+ openAlert,
+
+ // #withDrawerActions
+ closeDrawer,
+}) {
+ const { creditNoteId } = useCreditNoteDetailDrawerContext();
+
+ const history = useHistory();
+
+ // Handle edit credit note.
+ const handleEditCreditNote = () => {
+ history.push(`/credit-notes/${creditNoteId}/edit`);
+ closeDrawer('credit-note-detail-drawer');
+ };
+
+ // Handle delete credit note.
+ const handleDeleteCreditNote = () => {
+ openAlert('credit-note-delete', { creditNoteId });
+ };
+
+ return (
+
+
+ }
+ text={}
+ onClick={handleEditCreditNote}
+ />
+
+ }
+ text={}
+ intent={Intent.DANGER}
+ onClick={handleDeleteCreditNote}
+ />
+
+
+ );
+}
+
+export default compose(
+ withDialogActions,
+ withAlertsActions,
+ withDrawerActions,
+)(CreditNoteDetailActionsBar);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js
new file mode 100644
index 000000000..9e9641a9c
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import CreditNoteDetail from './CreditNoteDetail';
+import { CreditNoteDetailDrawerProvider } from './CreditNoteDetailDrawerProvider';
+
+/**
+ * Credit note detail drawer content.
+ */
+export default function CreditNoteDetailDrawerContent({
+ // #ownProp
+ creditNoteId,
+}) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
new file mode 100644
index 000000000..de8d78e73
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, TotalLine, If } from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+import { FormatNumber } from '../../../components';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit note details panel footer.
+ */
+export default function CreditNoteDetailDrawerFooter() {
+ const { creditNote } = useCreditNoteDetailDrawerContext();
+
+ return (
+
+
+ }
+ value={}
+ className={CreditNoteDetailCls.total_line_subtotal}
+ />
+ }
+ value={creditNote.amount}
+ className={CreditNoteDetailCls.total_line_total}
+ />
+
+
+ );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js
new file mode 100644
index 000000000..1b0673d8c
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useCreditNote } from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const CreditNoteDetailDrawerContext = React.createContext();
+
+/**
+ * Credit note detail drawer provider.
+ */
+function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
+ // Handle fetch vendor credit details.
+ const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
+ creditNoteId,
+ {
+ enabled: !!creditNoteId,
+ },
+ );
+
+ const provider = {
+ creditNote,
+ creditNoteId,
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+const useCreditNoteDetailDrawerContext = () =>
+ React.useContext(CreditNoteDetailDrawerContext);
+
+export { CreditNoteDetailDrawerProvider, useCreditNoteDetailDrawerContext };
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
new file mode 100644
index 000000000..d12ef104a
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit note details drawer header.
+ */
+export default function CreditNoteDetailHeader() {
+ const { creditNote } = useCreditNoteDetailDrawerContext();
+
+ return (
+
+
+
+ {creditNote.amount}
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ children={}
+ />
+
+
+ );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
new file mode 100644
index 000000000..9712a3d7a
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
+import CreditNoteDetailHeader from './CreditNoteDetailHeader';
+import CreditNoteDetailTable from './CreditNoteDetailTable';
+import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+export default function CreditNoteDetailPanel() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js
new file mode 100644
index 000000000..3d3d38dce
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
+
+import { useCreditNoteReadOnlyEntriesColumns } from './utils';
+
+import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
+
+/**
+ * Credit note detail table.
+ */
+export default function CreditNoteDetailTable() {
+ const {
+ creditNote: { entries },
+ } = useCreditNoteDetailDrawerContext();
+
+ // Credit note entries table columns.
+ const columns = useCreditNoteReadOnlyEntriesColumns();
+
+ return (
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/index.js b/src/containers/Drawers/CreditNoteDetailDrawer/index.js
new file mode 100644
index 000000000..abcd19afb
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const CreditNoteDetailDrawerContent = React.lazy(() =>
+ import('./CreditNoteDetailDrawerContent'),
+);
+
+/**
+ * Credit note detail drawer.
+ */
+function CreditNoteDetailDrawer({
+ name,
+ // #withDrawer
+ isOpen,
+ payload: { creditNoteId },
+}) {
+ return (
+
+
+
+
+
+ );
+}
+export default compose(withDrawers())(CreditNoteDetailDrawer);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
new file mode 100644
index 000000000..ea3743197
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatNumberCell } from '../../../components';
+
+export const useCreditNoteReadOnlyEntriesColumns = () =>
+ React.useMemo(
+ () => [
+ {
+ Header: intl.get('product_and_service'),
+ accessor: 'item.name',
+ width: 150,
+ className: 'name',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('description'),
+ accessor: 'description',
+ className: 'description',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('quantity'),
+ accessor: 'quantity',
+ Cell: FormatNumberCell,
+ width: 100,
+ align: 'right',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('rate'),
+ accessor: 'rate',
+ Cell: FormatNumberCell,
+ width: 100,
+ align: 'right',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('amount'),
+ accessor: 'amount',
+ Cell: FormatNumberCell,
+ width: 100,
+ align: 'right',
+ disableSortBy: true,
+ },
+ ],
+ [],
+ );
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
new file mode 100644
index 000000000..e603c667f
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { DrawerMainTabs } from 'components';
+
+import VendorCreditDetailPanel from './VendorCreditDetailPanel';
+import clsx from 'classnames';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor credit view detail.
+ */
+export default function VendorCreditDetail() {
+ return (
+
+
+ }
+ />
+
+
+ );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
new file mode 100644
index 000000000..9c720ea52
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+ Button,
+ NavbarGroup,
+ Classes,
+ NavbarDivider,
+ Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T, Can } from 'components';
+
+import { compose } from 'utils';
+
+/**
+ * Vendor credit detail actions bar.
+ */
+function VendorCreditDetailActionsBar({
+ // #withDialogActions
+ openDialog,
+
+ // #withAlertsActions
+ openAlert,
+
+ // #withDrawerActions
+ closeDrawer,
+}) {
+ const { vendorCreditId } = useVendorCreditDetailDrawerContext();
+
+ const history = useHistory();
+
+ // Handle edit credit note.
+ const handleEditVendorCredit = () => {
+ history.push(`/vendor-credits/${vendorCreditId}/edit`);
+ closeDrawer('vendor-credit-detail-drawer');
+ };
+
+ // Handle delete credit note.
+ const handleDeleteVendorCredit = () => {
+ openAlert('vendor-credit-delete', { vendorCreditId });
+ };
+
+ return (
+
+
+ }
+ text={}
+ onClick={handleEditVendorCredit}
+ />
+
+ }
+ text={}
+ intent={Intent.DANGER}
+ onClick={handleDeleteVendorCredit}
+ />
+
+
+ );
+}
+
+export default compose(
+ withDialogActions,
+ withAlertsActions,
+ withDrawerActions,
+)(VendorCreditDetailActionsBar);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js
new file mode 100644
index 000000000..8ac7786e6
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerContent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import VendorCreditDetail from './VendorCreditDetail';
+import { VendorCreditDetailDrawerProvider } from './VendorCreditDetailDrawerProvider';
+
+/**
+ * Vendor credit detail drawer content.
+ */
+export default function VendorCreditDetailDrawerContent({ vendorCreditId }) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
new file mode 100644
index 000000000..e8d8b05d5
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, TotalLine, If } from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+import { FormatNumber } from '../../../components';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor Credit detail panel footer.
+ */
+export default function VendorCreditDetailDrawerFooter() {
+
+ const { vendorCredit } = useVendorCreditDetailDrawerContext();
+
+ return (
+
+
+ }
+ value={}
+ className={VendorCreditDetailCls.total_line_subtotal}
+ />
+ }
+ value={vendorCredit.amount}
+ className={VendorCreditDetailCls.total_line_total}
+ />
+
+
+
+ )
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
new file mode 100644
index 000000000..74236d87c
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useVendorCredit } from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const VendorCreditDetailDrawerContext = React.createContext();
+
+/**
+ * Vendor credit drawer provider.
+ */
+function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
+ // Handle fetch vendor credit details.
+ const { data: vendorCredit, isLoading: isVendorCreditLoading } =
+ useVendorCredit(vendorCreditId, {
+ enabled: !!vendorCreditId,
+ });
+
+ const provider = {
+ vendorCredit,
+ vendorCreditId,
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+const useVendorCreditDetailDrawerContext = () =>
+ React.useContext(VendorCreditDetailDrawerContext);
+
+export { VendorCreditDetailDrawerProvider, useVendorCreditDetailDrawerContext };
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
new file mode 100644
index 000000000..84f2286de
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor credit detail drawer header.
+ */
+export default function VendorCreditDetailHeader() {
+ const { vendorCredit } = useVendorCreditDetailDrawerContext();
+ return (
+
+
+
+ {vendorCredit.amount}
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ children={}
+ />
+
+
+ );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
new file mode 100644
index 000000000..474284741
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
+import VendorCreditDetailHeader from './VendorCreditDetailHeader';
+import VendorCreditDetailTable from './VendorCreditDetailTable';
+import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+export default function VendorCreditDetailPanel() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js
new file mode 100644
index 000000000..668d076c6
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+import { useVendorCreditReadonlyEntriesTableColumns } from './utils';
+
+import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
+
+/**
+ * Vendor Credit detail table.
+ */
+export default function VendorCreditDetailTable() {
+ const {
+ vendorCredit: { entries },
+ } = useVendorCreditDetailDrawerContext();
+
+ // Vendor Credit entries table columns.
+ const columns = useVendorCreditReadonlyEntriesTableColumns();
+
+ return (
+
+
+
+ );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/index.js b/src/containers/Drawers/VendorCreditDetailDrawer/index.js
new file mode 100644
index 000000000..38b3ea3ed
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/index.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const VendorCreditDetailDrawerContent = React.lazy(() =>
+ import('./VendorCreditDetailDrawerContent'),
+);
+
+/**
+ * Vendor Credit detail drawer.
+ */
+function VendorCreditDetailDrawer({
+ name,
+ // #withDrawer
+ isOpen,
+ payload: { vendorCreditId },
+}) {
+ return (
+
+
+
+
+
+ );
+}
+
+export default compose(withDrawers())(VendorCreditDetailDrawer);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
new file mode 100644
index 000000000..1f0d67df5
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve vendor credit readonly details entries table columns.
+ */
+export const useVendorCreditReadonlyEntriesTableColumns = () =>
+ React.useMemo(
+ () => [
+ {
+ Header: intl.get('product_and_service'),
+ accessor: 'item.name',
+ width: 150,
+ className: 'item',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('description'),
+ accessor: 'description',
+ className: 'description',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('quantity'),
+ accessor: 'quantity',
+ Cell: FormatNumberCell,
+ width: 100,
+ align: 'right',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('rate'),
+ accessor: 'rate',
+ Cell: FormatNumberCell,
+ width: 100,
+ align: 'right',
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('amount'),
+ accessor: 'amount',
+ Cell: FormatNumberCell,
+ width: 100,
+ align: 'right',
+ disableSortBy: true,
+ },
+ ],
+ [],
+ );
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
index 7532610d2..05e4389a7 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
@@ -11,8 +11,9 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
-import withSettings from '../../../Settings/withSettings';
import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
import { useVendorsCreditNoteListContext } from './VendorsCreditNoteListProvider';
@@ -29,6 +30,9 @@ function VendorsCreditNoteDataTable({
// #withAlertsActions
openAlert,
+ // #withDrawerActions
+ openDrawer,
+
// #withSettings
creditNoteTableSize,
}) {
@@ -67,6 +71,10 @@ function VendorsCreditNoteDataTable({
return ;
}
+ const handleViewDetailVendorCredit = ({ id }) => {
+ openDrawer('vendor-credit-detail-drawer', { vendorCreditId: id });
+ };
+
// Handle delete credit note.
const handleDeleteVendorCreditNote = ({ id }) => {
openAlert('vendor-credit-delete', { vendorCreditId: id });
@@ -77,6 +85,13 @@ function VendorsCreditNoteDataTable({
history.push(`/vendor-credits/${vendorCredit.id}/edit`);
};
+ // Handle cell click.
+ const handleCellClick = (cell, event) => {
+ openDrawer('vendor-credit-detail-drawer', {
+ vendorCreditId: cell.row.original.id,
+ });
+ };
+
return (
({
creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
})),
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
index 2c45e0e31..b66541b6f 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
@@ -11,8 +11,9 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withCreditNotesActions from './withCreditNotesActions';
-import withSettings from '../../../Settings/withSettings';
import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
import { useCreditNoteTableColumns, ActionsMenu } from './components';
import { useCreditNoteListContext } from './CreditNotesListProvider';
@@ -29,6 +30,9 @@ function CreditNotesDataTable({
// #withAlertsActions
openAlert,
+ // #withDrawerActions
+ openDrawer,
+
// #withSettings
creditNoteTableSize,
}) {
@@ -67,6 +71,10 @@ function CreditNotesDataTable({
return ;
}
+ const handleViewDetailCreditNote = ({ id }) => {
+ openDrawer('credit-note-detail-drawer', { creditNoteId: id });
+ };
+
// Handle delete credit note.
const handleDeleteCreditNote = ({ id }) => {
openAlert('credit-note-delete', { creditNoteId: id });
@@ -77,6 +85,13 @@ function CreditNotesDataTable({
history.push(`/credit-notes/${creditNote.id}/edit`);
};
+ // Handle cell click.
+ const handleCellClick = (cell, event) => {
+ openDrawer('credit-note-detail-drawer', {
+ creditNoteId: cell.row.original.id,
+ });
+ };
+
return (
({
creditNoteTableSize: creditNoteSettings?.tableSize,
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
index 65358b6c0..43b054e16 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesList.js
@@ -29,8 +29,7 @@ function CreditNotesList({
[resetCreditNotesTableState],
);
- console.log(creditNoteTableState, 'XX');
- console.log(creditNoteTableStateChanged, 'XX');
+
return (