From be0c53d18ad790d48edb6542ba72177ad617325f Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 6 Mar 2021 20:20:59 +0200 Subject: [PATCH] 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')} +

+ +
+
+);