QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/abouolia/Ratteb

Browse Source
This commit is contained in:
a.bouhuolia
2021-03-07 16:15:11 +02:00
parent 42ce791713 fd5be35d95
commit 6ec4ee4f0f
37 changed files with 615 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/DrawersContainer.js
View File

@@ -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() {
<EstimateDrawer name={'estimate-drawer'} />
<InvoiceDrawer name={'invoice-drawer'} />
<ReceiptDrawer name={'receipt-drawer'} />
<PaymentDrawer name={'payment-receive-drawer'} />
<PaymentReceiveDrawer name={'payment-receive-drawer'} />
</div>
);
}

26
client/src/containers/Drawers/PaperTemplate/PaperTemplate.js
View File

@@ -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 (
<div id={'page-size'}>
<div className={'template'}>
<PaperTemplateHeader defaultLabels={labels} />
<PaperTemplateTable />
<PaperTemplateFooter />
<PaperTemplateHeader
defaultLabels={labels}
headerData={defaultValues}
/>
<PaperTemplateTable tableData={updateItemsEntriesTotal(entries)} />
<PaperTemplateFooter footerData={defaultValues} />
</div>
</div>
);
}
export default PaperTemplate;

24
client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js
View File

@@ -1,16 +1,22 @@
import React from 'react';
import { If } from 'components';
export default function PaperTemplateFooter() {
export default function PaperTemplateFooter({
footerData: { terms_conditions },
}) {
return (
<div className="template__terms">
<div className="template__terms__title">
<h4>Conditions and terms</h4>
</div>
<ul>
<li>Est excepteur laboris do sit dolore sit exercitation non.</li>
<li>Lorem duis aliqua minim elit cillum.</li>
<li>Dolor ad quis Lorem ut mollit consectetur.</li>
</ul>
<If condition={terms_conditions}>
<div className="template__terms__title">
<h4>Conditions and terms</h4>
</div>
<ul>
{[terms_conditions].map((terms) => (
<li>{terms}</li>
))}
</ul>
</If>
</div>
);
}

52
client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js
View File

@@ -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 (
<>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{defaultLabels.name}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>Joe Biden</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.date} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.refNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amount} </span>
<p className={'info-paragraph-amount'}>6,000 LYD</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}>Donald Trump</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.dueDate} </span>
<p className={'info-paragraph'}>25/03/2022</p>
</div>
</div>
<TemplateHeader defaultLabels={defaultLabels} />
<TemplateContent
defaultLabels={defaultLabels}
billedTo={billedTo}
date={date}
referenceNo={referenceNo}
amount={amount}
billedFrom={''}
dueDate={dueDate}
/>
</>
);
}

84
client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
View File

@@ -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 }) => <Money amount={rate} currency={'USD'} />,
disableSortBy: true,
width: 50,
},
{
Header: formatMessage({ id: 'Qty' }),
accessor: 'quantity',
disableSortBy: true,
width: 50,
},
{
Header: formatMessage({ id: 'Total' }),
accessor: ({ total }) => <Money amount={total} currency={'USD'} />,
disableSortBy: true,
width: 50,
},
],
[],
);
return (
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell ">Description</span>
<span className="template__table__rows--cell">Rate</span>
<span className="template__table__rows--cell">Qty</span>
<span className="template__table__rows--cell">Total</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla commodo magnanon dolor excepteur nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<DataTable columns={columns} data={tableData} />
</div>
);
}

36
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js
View File

@@ -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 (
<div id={'page-size'}>
<div className={'template'}>
<PaymentPaperTemplateHeader defaultLabels={labels} />
<PaymentPaperTemplateTable />
</div>
{[defaultValues].map(({ entries, ...defaultValues }) => (
<div className={'template'}>
<PaymentPaperTemplateHeader
defaultLabels={labels}
headerData={defaultValues}
/>
<PaymentPaperTemplateTable tableData={entries} />
</div>
))}
</div>
);
}

50
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js
View File

@@ -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 (
<>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{defaultLabels.title}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>Step Currency</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.paymentDate} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.paymentNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amountReceived} </span>
<p className={'info-paragraph-amount'}>60,000 USD</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}> Klay Thompson</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.referenceNo} </span>
<p className={'info-paragraph'}></p>
</div>
</div>
<TemplateHeader defaultLabels={defaultLabels} />
<TemplateContent
defaultLabels={defaultLabels}
billedTo={billedTo}
date={date}
referenceNo={referenceNo}
amount={amount}
billedFrom={''}
/>
</>
);
}

79
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js
View File

@@ -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 }) => (
<Money amount={invoice.balance} currency={'USD'} />
),
disableSortBy: true,
},
{
Header: formatMessage({ id: 'payment_amount' }),
accessor: ({ payment_amount }) => (
<Money amount={payment_amount} currency={'USD'} />
),
disableSortBy: true,
},
],
[],
);
return (
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive ">
Invoice number
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice date
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice amount
</span>
<span className="template__table__rows--cell-payment-receive ">
Payment amount
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-1
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-2
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
<DataTable columns={columns} data={tableData} />
</div>
);
}

56
client/src/containers/Drawers/components.js Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import { Icon, If, Money } from 'components';
import moment from 'moment';
export const TemplateHeader = ({ defaultLabels }) => (
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{defaultLabels.name}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
);
export const TemplateContent = ({
defaultLabels,
billedTo,
date,
referenceNo,
amount,
billedFrom,
dueDate,
}) => (
<div className="template__content">
<div className="template__content__info">
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>{billedTo}</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.date} </span>
<p className={'info-paragraph'}>{moment(date).format('YYYY MMM DD')}</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.refNo} </span>
<p className={'info-paragraph'}>{referenceNo}</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amount} </span>
<p className={'info-paragraph-amount'}>
{<Money amount={amount} currency={'USD'} />}
</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}>{billedFrom}</p>
</div>
<div className="template__content__info">
<If condition={dueDate}>
<span> {defaultLabels.dueDate} </span>
<p className={'info-paragraph'}>
{moment(dueDate).format('YYYY MMM DD')}
</p>
</If>
</div>
</div>
);

13
client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
View File

@@ -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 (
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<EstimateDrawerContent />
<EstimateDrawerContent estimateId={estimateId} />
</DrawerSuspense>
</Drawer>
);

17
client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerContent.js Normal file
View File

@@ -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 (
<EstimateDrawerProvider estimateId={estimateId}>
<EstimatePaper />
</EstimateDrawerProvider>
);
}

33
client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawerProvider.js Normal file
View File

@@ -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 (
<DashboardInsider loading={isEstimateLoading}>
<EstimateDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useEstimateDrawerContext = () => React.useContext(EstimateDrawerContext);
export { EstimateDrawerProvider, useEstimateDrawerContext };

11
client/src/containers/Sales/Estimates/EstimateDetails/EstimatePaper.js Normal file
View File

@@ -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 <PaperTemplate paperData={estimate} entries={entries} />;
}

4
client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
View File

@@ -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.

12
client/src/containers/Sales/Estimates/EstimatesLanding/components.js
View File

@@ -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({
<MenuItem
icon={<Icon icon={'receipt-24'} iconSize={16} />}
text={formatMessage({ id: 'estimate_paper' })}
onClick={() => onDrawer()}
onClick={safeCallback(onDrawer, original)}
/>
<MenuItem
text={formatMessage({ id: 'delete_estimate' })}

20
client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
View File

@@ -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 (
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<InvoicesDrawerContent labels={propLabels.labels} />
<InvoicesDrawerContent invoiceId={invoiceId} />
</DrawerSuspense>
</Drawer>
);

18
client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerContent.js Normal file
View File

@@ -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 (
<InvoiceDrawerProvider invoiceId={invoiceId}>
<InvoicePaper />
</InvoiceDrawerProvider>
);
}

35
client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawerProvider.js Normal file
View File

@@ -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 (
<DashboardInsider loading={isInvoiceLoading}>
<InvoiceDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useInvoiceDrawerContext = () => useContext(InvoiceDrawerContext);
export { InvoiceDrawerProvider, useInvoiceDrawerContext };

37
client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js Normal file
View File

@@ -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 (
<PaperTemplate
labels={propLabels.labels}
paperData={defaultValues}
entries={entries}
/>
);
}

6
client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
View File

@@ -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.

14
client/src/containers/Sales/Invoices/InvoicesLanding/components.js
View File

@@ -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({
<MenuItem
icon={<Icon icon={'receipt-24'} iconSize={16} />}
text={formatMessage({ id: 'invoice_paper' })}
onClick={() => onDrawer()}
onClick={safeCallback(onDrawer, original)}
/>
<MenuItem
text={formatMessage({ id: 'delete_invoice' })}

6
client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js → client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer.js
View File

@@ -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 (
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<PaymentReceiveDrawerContent />
<PaymentReceiveDrawerContent paymentReceiveId={paymentReceiveId} />
</DrawerSuspense>
</Drawer>
);

17
client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerContent.js Normal file
View File

@@ -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 (
<PaymentReceiveDrawerProvider paymentReceiveId={paymentReceiveId}>
<PaymentReceivePaper />
</PaymentReceiveDrawerProvider>
);
}

30
client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawerProvider.js Normal file
View File

@@ -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 (
<DashboardInsider loading={isPaymentReceiveLoading}>
<PaymentReceiveDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const usePaymentReceiveDrawerContext = () =>
useContext(PaymentReceiveDrawerContext);
export { PaymentReceiveDrawerProvider, usePaymentReceiveDrawerContext };

9
client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentReceivePaper.js Normal file
View File

@@ -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 <PaymentPaperTemplate paperData={paymentReceive.paymentReceive} />;
}

10
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
View File

@@ -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({
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
// onChange={handleDateChange('payment_date')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('payment_date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
@@ -264,5 +266,5 @@ export default compose(
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
})),
withDialogActions
withDialogActions,
)(PaymentReceiveHeaderFields);

4
client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
View File

@@ -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.

2
client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
View File

@@ -37,7 +37,7 @@ export function ActionsMenu({
<MenuItem
icon={<Icon icon={'receipt-24'} iconSize={16} />}
text={formatMessage({ id: 'payment_receive_paper' })}
onClick={() => onDrawer()}
onClick={safeCallback(onDrawer, paymentReceive)}
/>
<MenuItem
text={formatMessage({ id: 'delete_payment_receive' })}

20
client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
View File

@@ -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 (
<div>
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<ReceiptDrawerContent labels={propLabels.labels} />
<ReceiptDrawerContent receiptId={receiptId} />
</DrawerSuspense>
</Drawer>
</div>

17
client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerContent.js Normal file
View File

@@ -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 (
<ReceiptDrawerProvider receiptId={receiptId}>
<ReceiptPaper />
</ReceiptDrawerProvider>
);
}

32
client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js Normal file
View File

@@ -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 (
<DashboardInsider loading={isReceiptLoading}>
<ReceiptDrawerContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useReceiptDrawerContext = () => useContext(ReceiptDrawerContext);
export { ReceiptDrawerProvider, useReceiptDrawerContext };

37
client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js Normal file
View File

@@ -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 (
<PaperTemplate
labels={propLabels.labels}
paperData={receipts}
entries={entries}
/>
);
}

10
client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
View File

@@ -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,
}}
/>

2
client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
View File

@@ -41,7 +41,7 @@ export function ActionsMenu({
<MenuItem
icon={<Icon icon={'receipt-24'} iconSize={16} />}
text={formatMessage({ id: 'receipt_paper' })}
onClick={() => onDrawer()}
onClick={safeCallback(onDrawer, receipt)}
/>
<MenuItem
text={formatMessage({ id: 'delete_receipt' })}

17
client/src/hooks/query/paymentReceives.js
View File

@@ -33,7 +33,7 @@ export function usePaymentReceives(query, props) {
},
filterMeta: {},
}),
}
};
}
/**
@@ -118,20 +118,15 @@ export function usePaymentReceive(id, props) {
{
select: (res) => ({
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: [],
})
}
}),
};
}

5
client/src/lang/en/index.js
View File

@@ -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',
};

61
client/src/style/components/Drawer/DrawerTemplate.scss
View File

@@ -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 {