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

feat: add terms and conditions to invoice details.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-25 12:10:29 +02:00
parent af9f4c45fc
commit 1497a27e7d
4 changed files with 78 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
View File

@@ -1,52 +1,33 @@
import React from 'react';
import styled from 'styled-components';
import {
T,
TotalLines,
FormatNumber,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { CommercialDocFooter, If, DetailsMenu, DetailItem } from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
* Invoice details footer.
* @returns {React.JSX}
*/
export function InvoiceDetailFooter() {
const { invoice } = useInvoiceDetailDrawerContext();
if (!invoice.terms_conditions && !invoice.invoice_message) {
return null;
}
return (
<InvoiceDetailsFooterRoot>
<InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'invoice.details.subtotal'} />}
value={<FormatNumber value={invoice.balance} />}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'invoice.details.total'} />}
value={invoice.formatted_amount}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'invoice.details.payment_amount'} />}
value={invoice.formatted_payment_amount}
/>
<TotalLine
title={<T id={'invoice.details.due_amount'} />}
value={invoice.formatted_due_amount}
textStyle={TotalLineTextStyle.Bold}
/>
</InvoiceTotalLines>
</InvoiceDetailsFooterRoot>
<CommercialDocFooter>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<If condition={invoice.terms_conditions}>
<DetailItem label={'Terms & Conditions'}>
{invoice.terms_conditions}
</DetailItem>
</If>
<If condition={invoice.invoice_message}>
<DetailItem label={'Invoice Message'}>
{invoice.invoice_message}
</DetailItem>
</If>
</DetailsMenu>
</CommercialDocFooter>
);
}
const InvoiceDetailsFooterRoot = styled.div``;
const InvoiceTotalLines = styled(TotalLines)`
margin-left: auto;
`;

2
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
View File

@@ -4,6 +4,7 @@ import { CommercialDocBox } from 'components';
import InvoiceDetailHeader from './InvoiceDetailHeader';
import InvoiceDetailTable from './InvoiceDetailTable';
import { InvoiceDetailTableFooter } from './InvoiceDetailTableFooter';
import { InvoiceDetailFooter } from './InvoiceDetailFooter';
/**
@@ -14,6 +15,7 @@ export default function InvoiceDetailTab() {
<CommercialDocBox>
<InvoiceDetailHeader />
<InvoiceDetailTable />
<InvoiceDetailTableFooter />
<InvoiceDetailFooter />
</CommercialDocBox>
);

52
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.js Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
import styled from 'styled-components';
import {
T,
TotalLines,
FormatNumber,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
* Invoice details footer.
*/
export function InvoiceDetailTableFooter() {
const { invoice } = useInvoiceDetailDrawerContext();
return (
<InvoiceDetailsFooterRoot>
<InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'invoice.details.subtotal'} />}
value={<FormatNumber value={invoice.balance} />}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'invoice.details.total'} />}
value={invoice.formatted_amount}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'invoice.details.payment_amount'} />}
value={invoice.formatted_payment_amount}
/>
<TotalLine
title={<T id={'invoice.details.due_amount'} />}
value={invoice.formatted_due_amount}
textStyle={TotalLineTextStyle.Bold}
/>
</InvoiceTotalLines>
</InvoiceDetailsFooterRoot>
);
}
const InvoiceDetailsFooterRoot = styled.div``;
const InvoiceTotalLines = styled(TotalLines)`
margin-left: auto;
`;