From be0c53d18ad790d48edb6542ba72177ad617325f Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 6 Mar 2021 20:20:59 +0200 Subject: [PATCH 1/7] refactoring(paperTemplate): connect data. --- client/src/components/DrawersContainer.js | 4 +- .../Drawers/PaperTemplate/PaperTemplate.js | 26 +++++- .../PaperTemplate/PaperTemplateFooter.js | 24 ++++-- .../PaperTemplate/PaperTemplateHeader.js | 52 ++++-------- .../PaperTemplate/PaperTemplateTable.js | 84 ++++++++----------- .../PaymentPaperTemplate.js | 36 ++++++-- .../PaymentPaperTemplateHeader.js | 50 ++++------- .../PaymentPaperTemplateTable.js | 79 ++++++++--------- client/src/containers/Drawers/components.js | 56 +++++++++++++ 9 files changed, 221 insertions(+), 190 deletions(-) create mode 100644 client/src/containers/Drawers/components.js diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js index 96d8643cc..e86c659cb 100644 --- a/client/src/components/DrawersContainer.js +++ b/client/src/components/DrawersContainer.js @@ -2,7 +2,7 @@ import React from 'react'; import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer'; import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer'; import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer'; -import PaymentDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer'; +import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer'; export default function DrawersContainer() { return ( @@ -10,7 +10,7 @@ export default function DrawersContainer() { - + ); } diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js index f520dc9e1..1fabbd95f 100644 --- a/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js +++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js @@ -2,9 +2,11 @@ import React from 'react'; import PaperTemplateHeader from './PaperTemplateHeader'; import PaperTemplateTable from './PaperTemplateTable'; import PaperTemplateFooter from './PaperTemplateFooter'; +import { updateItemsEntriesTotal } from 'containers/Entries/utils'; + import 'style/components/Drawer/DrawerTemplate.scss'; -export default function PaperTemplate({ labels: propLabels }) { +function PaperTemplate({ labels: propLabels, paperData, entries }) { const labels = { name: 'Estimate', billedTo: 'Billed to', @@ -15,13 +17,29 @@ export default function PaperTemplate({ labels: propLabels }) { dueDate: 'Due date', ...propLabels, }; + + const defaultValues = { + billedTo: paperData.customer.display_name, + date: paperData.estimate_date, + amount: '', + billedFrom: '', + dueDate: paperData.expiration_date, + referenceNo: paperData.estimate_number, + ...paperData, + }; + return (
- - - + + +
); } + +export default PaperTemplate; diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js index b270005e2..cedf261a2 100644 --- a/client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js +++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js @@ -1,16 +1,22 @@ import React from 'react'; +import { If } from 'components'; -export default function PaperTemplateFooter() { +export default function PaperTemplateFooter({ + footerData: { terms_conditions }, +}) { return (
-
-

Conditions and terms

-
-
    -
  • Est excepteur laboris do sit dolore sit exercitation non.
    • -
  • Lorem duis aliqua minim elit cillum.
    • -
  • Dolor ad quis Lorem ut mollit consectetur.
    • -
+ +
+

Conditions and terms

+
+ +
    + {[terms_conditions].map((terms) => ( +
  • {terms}
    • + ))} +
+
); } diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js index 0413f5397..4518e4cac 100644 --- a/client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js +++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js @@ -1,44 +1,22 @@ import React from 'react'; -import { Icon } from 'components'; +import { TemplateHeader, TemplateContent } from '../components'; -export default function PaperTemplateHeader({ defaultLabels }) { +export default function PaperTemplateHeader({ + defaultLabels, + headerData: { referenceNo, amount, dueDate, date, billedTo }, +}) { return ( <> -
-
-

{defaultLabels.name}

-

info@bigcapital.ly

-
- -
- -
-
- {defaultLabels.billedTo} -

Joe Biden

-
-
- {defaultLabels.date} - -

1/1/2022

-
-
- {defaultLabels.refNo} -

IN-2022

-
-
- {defaultLabels.amount} -

6,000 LYD

-
-
- {defaultLabels.billedFrom} -

Donald Trump

-
-
- {defaultLabels.dueDate} -

25/03/2022

-
-
+ + ); } diff --git a/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js index e54454533..2a88915bc 100644 --- a/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js +++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js @@ -1,55 +1,41 @@ -import React from 'react'; +import React, { useMemo } from 'react'; +import { formatMessage } from 'services/intl'; +import { DataTable, Money } from 'components'; -export default function DrawerTemplateTable() { +export default function DrawerTemplateTable({ tableData }) { + const columns = useMemo( + () => [ + { + Header: formatMessage({ id: 'description' }), + accessor: 'description', + disableSortBy: true, + width: 150, + }, + { + Header: formatMessage({ id: 'rate' }), + accessor: 'rate', + accessor: ({ rate }) => , + disableSortBy: true, + width: 50, + }, + { + Header: formatMessage({ id: 'Qty' }), + accessor: 'quantity', + disableSortBy: true, + width: 50, + }, + { + Header: formatMessage({ id: 'Total' }), + accessor: ({ total }) => , + disableSortBy: true, + width: 50, + }, + ], + [], + ); return (
-
- Description - Rate - Qty - Total -
-
- - Nulla commodo magnanon dolor excepteur nisi aute laborum. - - 1 - 1 - 100 LYD -
- -
- - Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum. - - 1 - 1 - 100 LYD -
-
- - Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum. - - 1 - 1 - 100 LYD -
-
- - Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum. - - 1 - 1 - 100 LYD -
-
- - Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum. - - 1 - 1 - 100 LYD -
+
); } diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js index 9fdf6ba31..5d06d38ef 100644 --- a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js +++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js @@ -1,26 +1,44 @@ import React from 'react'; import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader'; import PaymentPaperTemplateTable from './PaymentPaperTemplateTable'; + import 'style/components/Drawer/DrawerTemplate.scss'; -export default function PaymentPaperTemplate({ labels: propLabels }) { +export default function PaymentPaperTemplate({ + labels: propLabels, + paperData, +}) { const labels = { - title: 'Payment receive', + name: 'Payment receive', billedTo: 'Billed to', - paymentDate: 'Payment date', - paymentNo: 'Payment No.', + date: 'Payment date', + refNo: 'Payment No.', billedFrom: 'Billed from', referenceNo: 'Reference No', - amountReceived: 'Amount received', + amount: 'Amount received', + dueDate: 'Due date', ...propLabels, }; + const defaultValues = { + billedTo: paperData.customer.display_name, + date: paperData.payment_date, + amount: '', + billedFrom: '', + referenceNo: paperData.payment_receive_no, + ...paperData, + }; return (
-
- - -
+ {[defaultValues].map(({ entries, ...defaultValues }) => ( +
+ + +
+ ))}
); } diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js index 7143158c2..0d73ac8ec 100644 --- a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js +++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js @@ -1,43 +1,21 @@ import React from 'react'; -import { Icon } from 'components'; +import { TemplateHeader, TemplateContent } from '../components'; -export default function PaymentPaperTemplateHeader({ defaultLabels }) { +export default function PaymentPaperTemplateHeader({ + defaultLabels, + headerData: { referenceNo, amount, date, billedTo }, +}) { return ( <> -
-
-

{defaultLabels.title}

-

info@bigcapital.ly

-
- -
- -
-
- {defaultLabels.billedTo} -

Step Currency

-
-
- {defaultLabels.paymentDate} -

1/1/2022

-
-
- {defaultLabels.paymentNo} -

IN-2022

-
-
- {defaultLabels.amountReceived} -

60,000 USD

-
-
- {defaultLabels.billedFrom} -

Klay Thompson

-
-
- {defaultLabels.referenceNo} -

-
-
+ + ); } diff --git a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js index 8e189ef22..f799eb72b 100644 --- a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js +++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js @@ -1,51 +1,42 @@ import React from 'react'; +import moment from 'moment'; +import { formatMessage } from 'services/intl'; +import { DataTable, Money } from 'components'; -export default function PaymentPaperTemplateTable() { +export default function PaymentPaperTemplateTable({ tableData }) { + const columns = React.useMemo( + () => [ + { + Header: formatMessage({ id: 'invoice_number' }), + accessor: 'invoice.invoice_no', + disableSortBy: true, + }, + { + Header: formatMessage({ id: 'invoice_date' }), + accessor: ({ invoice_date }) => + moment(invoice_date).format('YYYY MMM DD'), + disableSortBy: true, + }, + { + Header: formatMessage({ id: 'invoice_amount' }), + accessor: ({ invoice }) => ( + + ), + disableSortBy: true, + }, + { + Header: formatMessage({ id: 'payment_amount' }), + accessor: ({ payment_amount }) => ( + + ), + disableSortBy: true, + }, + ], + [], + ); return (
-
- - Invoice number - - - Invoice date - - - Invoice amount - - - Payment amount - -
- -
- - INV-1 - - - 12 Jan 2021 - - - 50,000 USD - - - 1000 USD - -
-
- - INV-2 - - - 12 Jan 2021 - - - 50,000 USD - - - 1000 USD - -
+
); } diff --git a/client/src/containers/Drawers/components.js b/client/src/containers/Drawers/components.js new file mode 100644 index 000000000..83c759a66 --- /dev/null +++ b/client/src/containers/Drawers/components.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Icon, If, Money } from 'components'; +import moment from 'moment'; + +export const TemplateHeader = ({ defaultLabels }) => ( +
+
+

{defaultLabels.name}

+

info@bigcapital.ly

+
+ +
+); + +export const TemplateContent = ({ + defaultLabels, + billedTo, + date, + referenceNo, + amount, + billedFrom, + dueDate, +}) => ( +
+
+ {defaultLabels.billedTo} +

{billedTo}

+
+
+ {defaultLabels.date} +

{moment(date).format('YYYY MMM DD')}

+
+
+ {defaultLabels.refNo} +

{referenceNo}

+
+
+ {defaultLabels.amount} +

+ {} +

+
+
+ {defaultLabels.billedFrom} +

{billedFrom}

+
+
+ + {defaultLabels.dueDate} +

+ {moment(dueDate).format('YYYY MMM DD')} +

+ +
+
+); From fe5fc80ecb433492e9f713beda0d96fa1074f59e Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 6 Mar 2021 20:26:32 +0200 Subject: [PATCH 2/7] refactoring(estimate drawer): estimate drawer. --- .../EstimateDetails/EstimateDrawer.js | 13 ++++---- .../EstimateDetails/EstimateDrawerContent.js | 17 ++++++++++ .../EstimateDetails/EstimateDrawerProvider.js | 33 +++++++++++++++++++ .../EstimateDetails/EstimatePaper.js | 11 +++++++ .../EstimatesLanding/EstimatesDataTable.js | 4 +-- .../Estimates/EstimatesLanding/components.js | 12 +++++-- 6 files changed, 80 insertions(+), 10 deletions(-) create mode 100644 client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js create mode 100644 client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js create mode 100644 client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js index 413e36d44..85831e844 100644 --- a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js +++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js @@ -1,19 +1,20 @@ import React, { lazy } from 'react'; +import { Drawer, DrawerSuspense } from 'components'; import withDrawers from 'containers/Drawer/withDrawers'; import withDrawerActions from 'containers/Drawer/withDrawerActions'; -import { Drawer, DrawerSuspense } from 'components'; import { compose } from 'utils'; -const EstimateDrawerContent = lazy(() => - import('containers/Drawers/PaperTemplate/PaperTemplate'), -); +const EstimateDrawerContent = lazy(() => import('./EstimateDrawerContent')); +/** + * Estimate drawer. + */ function EstimateDrawer({ name, //#withDrawer isOpen, - payload, + payload: { estimateId }, closeDrawer, }) { @@ -24,7 +25,7 @@ function EstimateDrawer({ return ( - + ); diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js new file mode 100644 index 000000000..0c8cb3230 --- /dev/null +++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { EstimateDrawerProvider } from './EstimateDrawerProvider'; +import EstimatePaper from './EstimatePaper'; + +/** + * Estimate drawer content. + */ +export default function EstimateDrawerContent({ + // #ownProp + estimateId, +}) { + return ( + + + + ); +} diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js new file mode 100644 index 000000000..d5bc59e07 --- /dev/null +++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js @@ -0,0 +1,33 @@ +import React, { createContext } from 'react'; +import { useEstimate } from 'hooks/query'; +import DashboardInsider from 'components/Dashboard/DashboardInsider'; + +const EstimateDrawerContext = createContext(); + +/** + * Estimate drawer provider. + */ + +function EstimateDrawerProvider({ estimateId, ...props }) { + const { + data: { entries, ...estimate }, + isLoading: isEstimateLoading, + } = useEstimate(estimateId, { enabled: !!estimateId }); + + // Provider payload. + const provider = { + estimateId, + estimate, + entries, + isEstimateLoading, + }; + + return ( + + + + ); +} +const useEstimateDrawerContext = () => React.useContext(EstimateDrawerContext); + +export { EstimateDrawerProvider, useEstimateDrawerContext }; diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js new file mode 100644 index 000000000..391117be7 --- /dev/null +++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { useEstimateDrawerContext } from './EstimateDrawerProvider'; +import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate'; + +/** + * Estimate paper. + */ +export default function EstimatePaper() { + const { estimate, entries } = useEstimateDrawerContext(); + return ; +} diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js index 0913d4050..ecfd1e5c5 100644 --- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js +++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js @@ -68,8 +68,8 @@ function EstimatesDataTable({ }; // Handle drawer estimate. - const handleDrawerEstimate = () => { - openDrawer('estimate-drawer', {}); + const handleDrawerEstimate = ({ id }) => { + openDrawer('estimate-drawer', { estimateId: id }); }; // Handle convent to invoice. diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js index c11f16b50..21e770c51 100644 --- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js +++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js @@ -49,7 +49,15 @@ export const statusAccessor = (row) => ( */ export function ActionsMenu({ row: { original }, - payload: { onEdit, onDeliver, onReject, onApprove, onDelete, onDrawer ,onConvert }, + payload: { + onEdit, + onDeliver, + onReject, + onApprove, + onDelete, + onDrawer, + onConvert, + }, }) { const { formatMessage } = useIntl(); @@ -108,7 +116,7 @@ export function ActionsMenu({ } text={formatMessage({ id: 'estimate_paper' })} - onClick={() => onDrawer()} + onClick={safeCallback(onDrawer, original)} /> Date: Sat, 6 Mar 2021 20:29:32 +0200 Subject: [PATCH 3/7] refactoring(invoice drawer): invoice drawer. --- .../Invoices/InvoiceDetails/InvoiceDrawer.js | 20 ++-------- .../InvoiceDetails/InvoiceDrawerContent.js | 18 +++++++++ .../InvoiceDetails/InvoiceDrawerProvider.js | 35 ++++++++++++++++++ .../Invoices/InvoiceDetails/InvoicePaper.js | 37 +++++++++++++++++++ .../InvoicesLanding/InvoicesDataTable.js | 6 +-- .../Invoices/InvoicesLanding/components.js | 14 ++++++- 6 files changed, 109 insertions(+), 21 deletions(-) create mode 100644 client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerContent.js create mode 100644 client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js create mode 100644 client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js diff --git a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js index b7369eedc..a33d32379 100644 --- a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js +++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js @@ -5,9 +5,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions'; import { Drawer, DrawerSuspense } from 'components'; import { compose } from 'utils'; -const InvoicesDrawerContent = lazy(() => - import('containers/Drawers/PaperTemplate/PaperTemplate'), -); +const InvoicesDrawerContent = lazy(() => import('./InvoiceDrawerContent')); /** * invoice drawer. @@ -16,7 +14,7 @@ function InvoiceDrawer({ name, //#withDrawer isOpen, - payload, + payload: { invoiceId }, closeDrawer, }) { @@ -25,22 +23,10 @@ function InvoiceDrawer({ closeDrawer(name); }; - const propLabels = { - labels: { - name: 'Invoice', - billedTo: 'Billed to', - date: 'Invoice date', - refNo: 'Invoice No.', - billedFrom: 'Billed from', - amount: 'Invoice amount', - dueDate: 'Due date', - }, - }; - return ( - + ); diff --git a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerContent.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerContent.js new file mode 100644 index 000000000..c7a590539 --- /dev/null +++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerContent.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { InvoiceDrawerProvider } from './InvoiceDrawerProvider'; +import InvoicePaper from './InvoicePaper'; + +/** + * Invoice drawer content. + */ +export default function InvoiceDrawerContent({ + // #ownProp + invoiceId, +}) { + + return ( + + + + ); +} diff --git a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js new file mode 100644 index 000000000..4ae1b4fad --- /dev/null +++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js @@ -0,0 +1,35 @@ +import React, { createContext, useContext } from 'react'; +import { useInvoice } from 'hooks/query'; +import DashboardInsider from 'components/Dashboard/DashboardInsider'; + +const InvoiceDrawerContext = createContext(); + +/** + * Invoice drawer provider. + */ +function InvoiceDrawerProvider({ invoiceId, ...props }) { + // Fetch sale invoice details. + const { + data: { entries, ...invoice }, + isLoading: isInvoiceLoading, + } = useInvoice(invoiceId, { + enabled: !!invoiceId, + }); + // Provider payload. + const provider = { + invoiceId, + invoice, + entries, + + isInvoiceLoading, + }; + + return ( + + + + ); +} +const useInvoiceDrawerContext = () => useContext(InvoiceDrawerContext); + +export { InvoiceDrawerProvider, useInvoiceDrawerContext }; diff --git a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js new file mode 100644 index 000000000..2e0d01757 --- /dev/null +++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { useInvoiceDrawerContext } from './InvoiceDrawerProvider'; +import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate'; + +export default function InvoicePaper() { + const { invoice, entries } = useInvoiceDrawerContext(); + + const propLabels = { + labels: { + name: 'Invoice', + billedTo: 'Billed to', + date: 'Invoice date', + refNo: 'Invoice No.', + billedFrom: 'Billed from', + amount: 'Invoice amount', + dueDate: 'Due date', + }, + }; + + const defaultValues = { + billedTo: invoice.customer.display_name, + date: invoice.invoice_date, + amount: invoice.balance, + billedFrom: '', + dueDate: invoice.due_date, + referenceNo: invoice.invoice_no, + ...invoice, + }; + + return ( + + ); +} diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js index cc500013a..08d8c493a 100644 --- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js +++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js @@ -33,7 +33,7 @@ function InvoicesDataTable({ // #withAlertsActions openAlert, - + // #withDrawerActions openDrawer, }) { @@ -67,8 +67,8 @@ function InvoicesDataTable({ }; // Handle drawer invoice. - const handleDrawerInvoice = () => { - openDrawer('invoice-drawer', {}); + const handleDrawerInvoice = ({ id }) => { + openDrawer('invoice-drawer', { invoiceId: id }); }; // Handles fetch data once the table state change. diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js index 1d1499822..fb880bca0 100644 --- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js +++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js @@ -90,6 +90,18 @@ export const handleDeleteErrors = (errors) => { intent: Intent.DANGER, }); } + if ( + errors.find( + (error) => error.type === 'INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT', + ) + ) { + AppToaster.show({ + message: formatMessage({ + id: 'the_payment_amount_that_received', + }), + intent: Intent.DANGER, + }); + } }; export function ActionsMenu({ @@ -120,7 +132,7 @@ export function ActionsMenu({ } text={formatMessage({ id: 'invoice_paper' })} - onClick={() => onDrawer()} + onClick={safeCallback(onDrawer, original)} /> Date: Sat, 6 Mar 2021 20:36:36 +0200 Subject: [PATCH 4/7] refactoring(receipt drawer): receipt drawer. --- .../Receipts/ReceiptDetails/ReceiptDrawer.js | 20 ++-------- .../ReceiptDetails/ReceiptDrawerContent.js | 17 +++++++++ .../ReceiptDetails/ReceiptDrawerProvider.js | 32 ++++++++++++++++ .../Receipts/ReceiptDetails/ReceiptPaper.js | 37 +++++++++++++++++++ .../Receipts/ReceiptsLanding/ReceiptsTable.js | 10 ++--- .../Receipts/ReceiptsLanding/components.js | 2 +- 6 files changed, 95 insertions(+), 23 deletions(-) create mode 100644 client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerContent.js create mode 100644 client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js create mode 100644 client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js diff --git a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js index e8308f0ea..d23e5773f 100644 --- a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js +++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js @@ -5,9 +5,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions'; import { Drawer, DrawerSuspense } from 'components'; import { compose } from 'utils'; -const ReceiptDrawerContent = lazy(() => - import('containers/Drawers/PaperTemplate/PaperTemplate'), -); +const ReceiptDrawerContent = lazy(() => import('./ReceiptDrawerContent')); /** * receipt drawer. @@ -16,7 +14,7 @@ const ReceiptDrawer = ({ name, //#withDrawer isOpen, - payload, + payload: { receiptId }, closeDrawer, }) => { @@ -25,23 +23,11 @@ const ReceiptDrawer = ({ closeDrawer(name); }; - const propLabels = { - labels: { - name: 'Receipt', - billedTo: 'Billed to', - date: 'Receipt date', - refNo: 'Receipt No.', - billedFrom: 'Billed from', - amount: 'Receipt amount', - dueDate: 'Due date', - }, - }; - return (
- +
diff --git a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerContent.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerContent.js new file mode 100644 index 000000000..d7e176bed --- /dev/null +++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerContent.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { ReceiptDrawerProvider } from './ReceiptDrawerProvider'; +import ReceiptPaper from './ReceiptPaper'; + +/** + * Receipt drawer content. + */ +export default function ReceiptDrawerContent({ + // #ownProp + receiptId, +}) { + return ( + + + + ); +} diff --git a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js new file mode 100644 index 000000000..9139170cd --- /dev/null +++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js @@ -0,0 +1,32 @@ +import React, { createContext, useContext } from 'react'; +import { useReceipt } from 'hooks/query'; +import DashboardInsider from 'components/Dashboard/DashboardInsider'; + +const ReceiptDrawerContext = createContext(); + +function ReceiptDrawerProvider({ receiptId, ...props }) { + // Fetch sale receipt details. + const { + data: { entries, ...receipt }, + isFetching: isReceiptLoading, + } = useReceipt(receiptId, { + enabled: !!receiptId, + }); + // Provider payload. + const provider = { + receiptId, + receipt, + entries, + + isReceiptLoading, + }; + + return ( + + + + ); +} +const useReceiptDrawerContext = () => useContext(ReceiptDrawerContext); + +export { ReceiptDrawerProvider, useReceiptDrawerContext }; diff --git a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js new file mode 100644 index 000000000..80473cd1f --- /dev/null +++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { useReceiptDrawerContext } from './ReceiptDrawerProvider'; +import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate'; + +export default function ReceiptPaper() { + const { receipt, entries } = useReceiptDrawerContext(); + + const propLabels = { + labels: { + name: 'Receipt', + billedTo: 'Billed to', + date: 'Receipt date', + refNo: 'Receipt No.', + billedFrom: 'Billed from', + amount: 'Receipt amount', + dueDate: 'Due date', + }, + }; + + const receipts = { + billedTo: receipt.customer.display_name, + date: receipt.receipt_date, + amount: '', + billedFrom: '', + dueDate: receipt.due_date, + referenceNo: receipt.receipt_number, + ...receipt, + }; + + return ( + + ); +} diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js index a63f8de1b..9b8a55428 100644 --- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js +++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js @@ -65,10 +65,10 @@ function ReceiptsDataTable({ openAlert('receipt-close', { receiptId: receipt.id }); }; - // Handle drawer receipts. - const handleDrawerReceipt = () => { - openDrawer('receipt-drawer', {}); - }; + // Handle drawer receipts. + const handleDrawerReceipt = ({ id }) => { + openDrawer('receipt-drawer', { receiptId: id }); + }; // Handles the datable fetch data once the state changing. const handleDataTableFetchData = useCallback( @@ -111,7 +111,7 @@ function ReceiptsDataTable({ onEdit: handleEditReceipt, onDelete: handleDeleteReceipt, onClose: handleCloseReceipt, - onDrawer:handleDrawerReceipt, + onDrawer: handleDrawerReceipt, baseCurrency, }} /> diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js index 6e547f4f1..7527fd9e5 100644 --- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js +++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js @@ -41,7 +41,7 @@ export function ActionsMenu({ } text={formatMessage({ id: 'receipt_paper' })} - onClick={() => onDrawer()} + onClick={safeCallback(onDrawer, receipt)} /> Date: Sat, 6 Mar 2021 21:07:43 +0200 Subject: [PATCH 5/7] refactoring(payment receive): payment receive. --- ...ymentDrawer.js => PaymentReceiveDrawer.js} | 6 +-- .../PaymentReceiveDrawerContent.js | 17 +++++++ .../PaymentReceiveDrawerProvider.js | 30 ++++++++++++ .../PaymentDetails/PaymentReceivePaper.js | 9 ++++ .../PaymentsLanding/PaymentReceivesTable.js | 4 +- .../PaymentsLanding/components.js | 2 +- client/src/hooks/query/paymentReceives.js | 17 +++---- client/src/lang/en/index.js | 5 ++ .../components/Drawer/DrawerTemplate.scss | 48 ++++++++----------- 9 files changed, 93 insertions(+), 45 deletions(-) rename client/src/containers/Sales/PaymentReceives/PaymentDetails/{PaymentDrawer.js => PaymentReceiveDrawer.js} (82%) create mode 100644 client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js create mode 100644 client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js create mode 100644 client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js similarity index 82% rename from client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js rename to client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js index 747085e55..623445283 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js @@ -6,7 +6,7 @@ import { Drawer, DrawerSuspense } from 'components'; import { compose } from 'utils'; const PaymentReceiveDrawerContent = lazy(() => - import('containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate'), + import('./PaymentReceiveDrawerContent'), ); /** @@ -16,7 +16,7 @@ function PaymentReceiveDrawer({ name, //#withDrawer isOpen, - payload, + payload: { paymentReceiveId }, closeDrawer, }) { @@ -28,7 +28,7 @@ function PaymentReceiveDrawer({ return ( - + ); diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js new file mode 100644 index 000000000..2cbf9c34e --- /dev/null +++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { PaymentReceiveDrawerProvider } from './PaymentReceiveDrawerProvider'; +import PaymentReceivePaper from './PaymentReceivePaper'; +/** + * payment receive drawer content. + */ +export default function PaymentReceiveDrawerContent({ + // #ownProp + paymentReceiveId, +}) { + + return ( + + + + ); +} diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js new file mode 100644 index 000000000..6e6b34b82 --- /dev/null +++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js @@ -0,0 +1,30 @@ +import React, { createContext, useContext } from 'react'; +import { usePaymentReceive } from 'hooks/query'; +import DashboardInsider from 'components/Dashboard/DashboardInsider'; + +const PaymentReceiveDrawerContext = createContext(); + +function PaymentReceiveDrawerProvider({ paymentReceiveId, ...props }) { + const { + data: paymentReceive, + isFetching: isPaymentReceiveLoading, + } = usePaymentReceive(paymentReceiveId, { + enabled: !!paymentReceiveId, + }); + + // Provider payload. + const provider = { + paymentReceiveId, + paymentReceive, + }; + + return ( + + + + ); +} +const usePaymentReceiveDrawerContext = () => + useContext(PaymentReceiveDrawerContext); + +export { PaymentReceiveDrawerProvider, usePaymentReceiveDrawerContext }; diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js new file mode 100644 index 000000000..50cc17622 --- /dev/null +++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js @@ -0,0 +1,9 @@ +import React from 'react'; +import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate'; +import { usePaymentReceiveDrawerContext } from './PaymentReceiveDrawerProvider'; + +export default function PaymentReceivePaper() { + const { paymentReceive } = usePaymentReceiveDrawerContext(); + + return ; +} diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js index 0ef260db0..a3b7ac39b 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js @@ -58,8 +58,8 @@ function PaymentReceivesDataTable({ }; // Handle drawer payment receive. - const handleDrawerPaymentReceive = () => { - openDrawer('payment-receive-drawer', {}); + const handleDrawerPaymentReceive = ({ id }) => { + openDrawer('payment-receive-drawer', { paymentReceiveId: id }); }; // Handle datatable fetch once the table's state changing. diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js index 38878355f..189fb3548 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js @@ -37,7 +37,7 @@ export function ActionsMenu({ } text={formatMessage({ id: 'payment_receive_paper' })} - onClick={() => onDrawer()} + onClick={safeCallback(onDrawer, paymentReceive)} /> ({ paymentReceive: res.data.payment_receive, - receivableEntries: res.data.receivable_entries, }), - ...props + ...props, }, ); return { ...states, - data: defaultTo(states.data, { - paymentReceive: {}, - receivableInvoices: {}, - paymentInvoices: {} - }), - } + data: defaultTo(states.data, {}), + }; } /** @@ -158,6 +153,6 @@ export function usePaymentReceiveEditPage(id, props) { data: defaultTo(states.data, { paymentReceive: {}, entries: [], - }) - } + }), + }; } diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index bdcfb955a..ba3a32915 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -996,4 +996,9 @@ export default { contact_type: 'Contact Type', duplicate_contact: 'Duplicate Contact', contact_type_: 'Contact type', + the_payment_amount_that_received: + 'The payment amount that received from the customer is more than the due amount for this invoice.', + invoice_number: 'Invoice number', + invoice_date: 'Invoice date', + invoice_amount: 'Invoice amount', }; diff --git a/client/src/style/components/Drawer/DrawerTemplate.scss b/client/src/style/components/Drawer/DrawerTemplate.scss index b04724d89..ae2a6d463 100644 --- a/client/src/style/components/Drawer/DrawerTemplate.scss +++ b/client/src/style/components/Drawer/DrawerTemplate.scss @@ -1,15 +1,13 @@ #page-size { margin: 0 auto; - // background-color: #ffffff; background-color: transparent; width: 21cm; - height: 29.7cm; + // height: 29.7cm; padding-bottom: 20px; } .template { background-color: transparent; - // margin: 30px; margin: 20px; &__header { @@ -31,7 +29,6 @@ display: flex; flex-wrap: wrap; border-bottom: 2px solid #1155cc; - // padding-bottom: 40px; padding-bottom: 35px; &__info { @@ -62,30 +59,28 @@ flex-direction: column; padding: 0px 5px; margin: 5px 0px 20px 0px; - font-size: 16px; - &__rows { - display: flex; - margin-bottom: 15px; - color: #1155cc; + .bigcapital-datatable { + .table { + .thead .tr .th .resizer { + display: none; + } - &--cell { - flex: 0 20%; + .thead .th { + font-size: 16px; + font-weight: 400; + border-bottom: none; + background-color: transparent; + margin-bottom: 15px; + color: #1155cc; + } + .tbody .tr .td { + font-size: 15px; + padding: 10px; + margin-bottom: 15px; + border-bottom: 1px solid #cecbcb; + } } - &--cell-payment-receive { - flex: 1; - } - - &--cell:first-child { - flex: 1 0 20%; - padding-left: 5px; - } - } - - &__rows:not(:first-child) { - color: #000; - border-bottom: 1px solid #cecbcb; - padding-bottom: 15px; } } @@ -96,9 +91,6 @@ font-weight: 400; color: #666666; margin-bottom: 5px; - - // font-size: 18px; - // font-weight: 500; } ul { From b6be473745dae69f8cc3691525179db76ee9b84c Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sun, 7 Mar 2021 15:34:28 +0200 Subject: [PATCH 6/7] fix:(drawer template): remove hover table style. --- .../components/Drawer/DrawerTemplate.scss | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/client/src/style/components/Drawer/DrawerTemplate.scss b/client/src/style/components/Drawer/DrawerTemplate.scss index ae2a6d463..7860a45f3 100644 --- a/client/src/style/components/Drawer/DrawerTemplate.scss +++ b/client/src/style/components/Drawer/DrawerTemplate.scss @@ -2,6 +2,7 @@ margin: 0 auto; background-color: transparent; width: 21cm; + // width: 680px; // height: 29.7cm; padding-bottom: 20px; } @@ -14,7 +15,8 @@ display: flex; align-items: center; justify-content: space-between; - margin: 0px 40px 16px 0px; + // margin: 0px 40px 16px 0px; + margin: 0px 5px 15px 5px; &--title h1 { font-weight: 600; color: #1c4587; @@ -32,7 +34,8 @@ padding-bottom: 35px; &__info { - flex: 0 1 25%; + flex: 0 1 24%; + // flex: 0 1 25%; padding-left: 5px; color: #999999; font-size: 16px; @@ -62,22 +65,28 @@ .bigcapital-datatable { .table { + font-size: 15px; + color: #000; + .thead .tr .th .resizer { display: none; } - + .thead .th, + .tbody .tr .td { + margin-bottom: 15px; + background: transparent; + } .thead .th { font-size: 16px; font-weight: 400; border-bottom: none; - background-color: transparent; - margin-bottom: 15px; color: #1155cc; + // padding-left: 1px; } .tbody .tr .td { font-size: 15px; padding: 10px; - margin-bottom: 15px; + // padding-left: 1px; border-bottom: 1px solid #cecbcb; } } From fd5be35d9581c96b9bf7328ebd9e114802ba612e Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sun, 7 Mar 2021 15:35:38 +0200 Subject: [PATCH 7/7] fix:(paymentreceive):payment date. --- .../PaymentReceiveForm/PaymentReceiveHeaderFields.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js index 60d14dc05..38f0c047b 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js @@ -18,6 +18,7 @@ import { safeSumBy, momentFormatter, tansformDateValue, + handleDateChange, inputIntent, } from 'utils'; import { @@ -78,10 +79,9 @@ function PaymentReceiveHeaderFields({ setFieldValue('entries', newEntries); }; - // Handle click open payment receive number dialog. const handleClickOpenDialog = () => { - openDialog('payment-receive-number-form') + openDialog('payment-receive-number-form'); }; return ( @@ -129,7 +129,9 @@ function PaymentReceiveHeaderFields({ { + form.setFieldValue('payment_date', formattedDate); + })} popoverProps={{ position: Position.BOTTOM, minimal: true }} inputProps={{ leftIcon: , @@ -264,5 +266,5 @@ export default compose( withSettings(({ organizationSettings }) => ({ baseCurrency: organizationSettings?.baseCurrency, })), - withDialogActions + withDialogActions, )(PaymentReceiveHeaderFields);