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')} +

+ +
+
+); 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)} /> - 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)} /> - 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/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); 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)} /> - 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)} /> ({ 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..7860a45f3 100644 --- a/client/src/style/components/Drawer/DrawerTemplate.scss +++ b/client/src/style/components/Drawer/DrawerTemplate.scss @@ -1,22 +1,22 @@ #page-size { margin: 0 auto; - // background-color: #ffffff; background-color: transparent; width: 21cm; - height: 29.7cm; + // width: 680px; + // height: 29.7cm; padding-bottom: 20px; } .template { background-color: transparent; - // margin: 30px; margin: 20px; &__header { 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; @@ -31,11 +31,11 @@ display: flex; flex-wrap: wrap; border-bottom: 2px solid #1155cc; - // padding-bottom: 40px; 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,30 +62,34 @@ 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 { + font-size: 15px; + color: #000; - &--cell { - flex: 0 20%; + .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; + color: #1155cc; + // padding-left: 1px; + } + .tbody .tr .td { + font-size: 15px; + padding: 10px; + // padding-left: 1px; + 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 +100,6 @@ font-weight: 400; color: #666666; margin-bottom: 5px; - - // font-size: 18px; - // font-weight: 500; } ul {