From 0d924464ea6045b5c5005e6298197f78d3ae2228 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 20 Dec 2021 16:47:48 +0200
Subject: [PATCH 1/4] feat: add style of payment made.
---
.../PaymentMadeDetailContent.js | 4 +-
.../PaymentMadeDetailHeader.js | 94 +++++++++++--------
.../PaymentMadeDetailProvider.js | 14 +--
.../PaymentMadeDetailTab.js | 21 ++---
.../PaymentMadeDetailTable.js | 19 ++--
.../PaymentMadeDetails.js | 54 ++++++-----
.../PaymentMadeGLEntriesPanel.js | 42 +++++++++
7 files changed, 149 insertions(+), 99 deletions(-)
create mode 100644 src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
index c3f804381..3023f8e2c 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
@@ -1,8 +1,6 @@
import React from 'react';
+
import { DrawerBody } from 'components';
-
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
-
import PaymentMadeDetails from './PaymentMadeDetails';
import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
index 84e182164..20af0d818 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -1,13 +1,19 @@
import React from 'react';
import intl from 'react-intl-universal';
-import clsx from 'classnames';
import { defaultTo } from 'lodash';
-import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import {
+ Row,
+ Col,
+ FormatDate,
+ DetailsMenu,
+ DetailItem,
+ CommercialDocHeader,
+ CommercialDocTopHeader,
+ ButtonLink,
+} from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
/**
* Payment made - detail panel - header.
*/
@@ -15,39 +21,53 @@ export default function PaymentMadeDetailHeader() {
const { paymentMade } = usePaymentMadeDetailContext();
return (
-
-
-
-
-
-
-
-
- }
- />
-
+
+
+
+
+ {paymentMade.formatted_amount}
+
+
+
-
-
- }
- />
-
-
+
+
+
+
+
+ {paymentMade.vendor?.display_name}
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ />
+
+
+
+
);
}
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index 478f08ee3..27fa2a5f0 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -20,26 +20,14 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
enabled: !!paymentMadeId,
},
);
- // Handle fetch transaction by reference.
- const {
- data: { transactions },
- isLoading: isTransactionLoading,
- } = useTransactionsByReference(
- {
- reference_id: paymentMadeId,
- reference_type: 'BillPayment',
- },
- { enabled: !!paymentMadeId },
- );
//provider.
const provider = {
- transactions,
paymentMadeId,
paymentMade,
};
- const loading = isTransactionLoading || isPaymentMadeLoading;
+ const loading = isPaymentMadeLoading;
return (
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
index 58902503c..292639a13 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
@@ -1,28 +1,21 @@
import React from 'react';
-import clsx from 'classnames';
-import { Card } from 'components';
+import { CommercialDocBox } from 'components';
-import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
import PaymentMadeDetailTable from './PaymentMadeDetailTable';
import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
-
/**
* Payment made detail tab.
+ * @returns {React.JSX}
*/
export default function PaymentMadeDetailTab() {
return (
-
+
+
+
+
+
);
}
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
index 2c79fc3d0..5d090f10f 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
@@ -1,12 +1,11 @@
import React from 'react';
-import clsx from 'classnames';
+
+import { CommercialDocEntriesTable } from 'components';
import { usePaymentMadeEntriesColumns } from './utils';
-import { DataTable } from 'components';
-
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import { TableStyle } from 'common';
/**
* Payment made read-only details table.
@@ -19,12 +18,10 @@ export default function PaymentMadeDetailTable() {
const { paymentMade } = usePaymentMadeDetailContext();
return (
-
-
-
+
);
}
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
index 32e6e8937..6941263cc 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
@@ -1,35 +1,47 @@
import React from 'react';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
-import clsx from 'classnames';
+import styled from 'styled-components';
import { DrawerMainTabs } from 'components';
-import PaymentMadeDetailTab from './PaymentMadeDetailTab';
-import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
-import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
+import PaymentMadeDetailTab from './PaymentMadeDetailTab';
+import PaymentMadeGLEntriesPanel from './PaymentMadeGLEntriesPanel';
/**
* Payment made - view detail.
+ * @returns {React.JSX}
*/
-export default function PaymentMadeDetails() {
- const { transactions } = usePaymentMadeDetailContext();
+function PaymentMadeDetailsTabs() {
return (
-
-
- }
- />
- }
- />
-
-
+
+ }
+ />
+ }
+ />
+
);
}
+
+/**
+ * Payment made view detail.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeDetail() {
+ return (
+
+
+
+
+ );
+}
+
+const PaymentMadeDetailsRoot = styled.div``;
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js
new file mode 100644
index 000000000..cd667fd9c
--- /dev/null
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from 'components';
+import JournalEntriesTable, {
+ AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+import { useTransactionsByReference } from 'hooks/query';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made GL entries table panel.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeGLEntriesPanel() {
+ const { paymentMadeId } = usePaymentMadeDetailContext();
+
+ // Handle fetch transaction by reference.
+ const {
+ data: { transactions },
+ isLoading: isTransactionLoading,
+ } = useTransactionsByReference(
+ {
+ reference_id: paymentMadeId,
+ reference_type: 'BillPayment',
+ },
+ { enabled: !!paymentMadeId },
+ );
+
+ return (
+
+
+
+
+ );
+}
+
+const PaymentMadeGLEntriesRoot = styled(Card)``;
From da3564d3156027d38e00922b1ad2b4eaffe47db9 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 21 Dec 2021 10:43:04 +0200
Subject: [PATCH 2/4] fix: handle switch button item transaction.
---
.../ItemPaymentTransactions/index.js | 24 +++++--------
.../ItemPaymentTransactions/utils.js | 34 +++++++++++++++----
2 files changed, 36 insertions(+), 22 deletions(-)
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
index f51ba4b56..005ce298d 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -1,30 +1,22 @@
import React from 'react';
-import styled from 'styled-components';
-import { Card, FormattedMessage as T } from 'components';
+import { Card } from 'components';
import { ItemManuTransaction } from './utils';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
export const ItemPaymentTransactions = () => {
- const { value } = useItemDetailDrawerContext();
+ const { value, setValue } = useItemDetailDrawerContext();
+
+ // handle item change.
+ const handleItemChange = (item) => {
+ setValue(item);
+ };
return (
-
-
-
-
+
);
};
-const ItemManuTransactions = styled.div`
- display: flex;
- align-items: center;
- color: #727983;
- .bp3-button {
- padding-left: 6px;
- font-weight: 500;
- }
-`;
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
index 9e93ea4b2..a8efc015f 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
@@ -7,19 +7,20 @@ import {
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
+import styled from 'styled-components';
import { FormattedMessage as T } from 'components';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import transactions from '../../../../common/itemPaymentTranactionsOption';
-export const ItemManuTransaction = () => {
+export const ItemManuTransaction = ({ onChange }) => {
const { value, setValue } = useItemDetailDrawerContext();
- // const handleClickItem = (item) => {
- // onChange && onChange(item);
- // };
+ const handleClickItem = (item) => {
+ onChange && onChange(item);
+ };
const content = transactions.map(({ name, label }) => (
-