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

Merge pull request #760 from bigcapitalhq/fix-formatted-hooks

Browse Source 
fix: update financial forms to use new formatted amount utilities and…
This commit is contained in:
Ahmed Bouhuolia
2024-12-04 13:24:23 +02:00
committed by GitHub
parent 56b5e3469e a25ab39647
commit a7bafd4f62
47 changed files with 333 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/server/src/api/controllers/Purchases/Bills.ts
View File

@@ -153,7 +153,7 @@ export default class BillsController extends BaseController {
check('discount_type')
.default(DiscountType.Amount)
.isIn([DiscountType.Amount, DiscountType.Percentage]),
check('discount').optional().isDecimal().toFloat(),
check('discount').optional({ nullable: true }).isDecimal().toFloat(),
// # Adjustment
check('adjustment').optional({ nullable: true }).isNumeric().toFloat(),
@@ -204,7 +204,7 @@ export default class BillsController extends BaseController {
check('discount_type')
.default(DiscountType.Amount)
.isIn([DiscountType.Amount, DiscountType.Percentage]),
check('discount').optional().isDecimal().toFloat(),
check('discount').optional({ nullable: true }).isDecimal().toFloat(),
// # Adjustment
check('adjustment').optional({ nullable: true }).isNumeric().toFloat(),

4
packages/server/src/api/controllers/Sales/SalesEstimates.ts
View File

@@ -204,13 +204,13 @@ export default class SalesEstimatesController extends BaseController {
check('pdf_template_id').optional({ nullable: true }).isNumeric().toInt(),
// # Discount
check('discount').optional().isNumeric().toFloat(),
check('discount').optional({ nullable: true }).isNumeric().toFloat(),
check('discount_type')
.default(DiscountType.Amount)
.isIn([DiscountType.Amount, DiscountType.Percentage]),
// # Adjustment
check('adjustment').optional().isNumeric().toFloat(),
check('adjustment').optional({ nullable: true }).isNumeric().toFloat(),
];
}

2
packages/server/src/services/CreditNotes/CreditNoteTransformer.ts
View File

@@ -96,6 +96,7 @@ export class CreditNoteTransformer extends Transformer {
protected discountAmountFormatted = (credit): string => {
return formatNumber(credit.discountAmount, {
currencyCode: credit.currencyCode,
excerptZero: true,
});
};
@@ -118,6 +119,7 @@ export class CreditNoteTransformer extends Transformer {
protected adjustmentFormatted = (credit): string => {
return this.formatMoney(credit.adjustment, {
currencyCode: credit.currencyCode,
excerptZero: true,
});
};

2
packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts
View File

@@ -171,6 +171,7 @@ export class PurchaseInvoiceTransformer extends Transformer {
protected discountAmountFormatted = (bill): string => {
return formatNumber(bill.discountAmount, {
currencyCode: bill.currencyCode,
excerptZero: true,
});
};
@@ -193,6 +194,7 @@ export class PurchaseInvoiceTransformer extends Transformer {
protected adjustmentFormatted = (bill): string => {
return formatNumber(bill.adjustment, {
currencyCode: bill.currencyCode,
excerptZero: true,
});
};

2
packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts
View File

@@ -82,6 +82,7 @@ export class VendorCreditTransformer extends Transformer {
protected discountAmountFormatted = (credit): string => {
return formatNumber(credit.discountAmount, {
currencyCode: credit.currencyCode,
excerptZero: true,
});
};
@@ -102,6 +103,7 @@ export class VendorCreditTransformer extends Transformer {
protected adjustmentFormatted = (credit): string => {
return formatNumber(credit.adjustment, {
currencyCode: credit.currencyCode,
excerptZero: true,
});
};

2
packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts
View File

@@ -111,6 +111,7 @@ export class SaleEstimateTransfromer extends Transformer {
protected discountAmountFormatted = (estimate: ISaleEstimate): string => {
return formatNumber(estimate.discountAmount, {
currencyCode: estimate.currencyCode,
excerptZero: true,
});
};
@@ -133,6 +134,7 @@ export class SaleEstimateTransfromer extends Transformer {
protected adjustmentFormatted = (estimate: ISaleEstimate): string => {
return this.formatMoney(estimate.adjustment, {
currencyCode: estimate.currencyCode,
excerptZero: true,
});
};

6
packages/server/src/services/Sales/Estimates/SaleEstimatesPdf.ts
View File

@@ -1,14 +1,12 @@
import { Inject, Service } from 'typedi';
import { ChromiumlyTenancy } from '@/services/ChromiumlyTenancy/ChromiumlyTenancy';
import { TemplateInjectable } from '@/services/TemplateInjectable/TemplateInjectable';
import { GetSaleEstimate } from './GetSaleEstimate';
import HasTenancyService from '@/services/Tenancy/TenancyService';
import { SaleEstimatePdfTemplate } from '../Invoices/SaleEstimatePdfTemplate';
import { transformEstimateToPdfTemplate } from './utils';
import { EstimatePdfBrandingAttributes } from './constants';
import events from '@/subscribers/events';
import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
import { renderEstimatePaperTemplateHtml } from '@bigcapital/pdf-templates';
import { renderEstimatePaperTemplateHtml, EstimatePaperTemplateProps } from '@bigcapital/pdf-templates';
@Service()
export class SaleEstimatesPdf {
@@ -97,7 +95,7 @@ export class SaleEstimatesPdf {
async getEstimateBrandingAttributes(
tenantId: number,
estimateId: number
): Promise<EstimatePdfBrandingAttributes> {
): Promise<EstimatePaperTemplateProps> {
const { PdfTemplate } = this.tenancy.models(tenantId);
const saleEstimate = await this.getSaleEstimate.getEstimate(
tenantId,

5
packages/server/src/services/Sales/Estimates/utils.ts
View File

@@ -1,9 +1,9 @@
import { EstimatePaperTemplateProps } from '@bigcapital/pdf-templates';
import { contactAddressTextFormat } from '@/utils/address-text-format';
import { EstimatePdfBrandingAttributes } from './constants';
export const transformEstimateToPdfTemplate = (
estimate
): Partial<EstimatePdfBrandingAttributes> => {
): Partial<EstimatePaperTemplateProps> => {
return {
expirationDate: estimate.formattedExpirationDate,
estimateNumebr: estimate.estimateNumber,
@@ -17,6 +17,7 @@ export const transformEstimateToPdfTemplate = (
})),
total: estimate.formattedSubtotal,
subtotal: estimate.formattedSubtotal,
adjustment: estimate.adjustmentFormatted,
customerNote: estimate.note,
termsConditions: estimate.termsConditions,
customerAddress: contactAddressTextFormat(estimate.customer),

8
packages/server/src/services/Sales/Invoices/SaleInvoicePdf.ts
View File

@@ -1,10 +1,12 @@
import { Inject, Service } from 'typedi';
import { renderInvoicePaperTemplateHtml } from '@bigcapital/pdf-templates';
import {
renderInvoicePaperTemplateHtml,
InvoicePaperTemplateProps,
} from '@bigcapital/pdf-templates';
import { ChromiumlyTenancy } from '@/services/ChromiumlyTenancy/ChromiumlyTenancy';
import { GetSaleInvoice } from './GetSaleInvoice';
import HasTenancyService from '@/services/Tenancy/TenancyService';
import { transformInvoiceToPdfTemplate } from './utils';
import { InvoicePdfTemplateAttributes } from '@/interfaces';
import { SaleInvoicePdfTemplate } from './SaleInvoicePdfTemplate';
import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
import events from '@/subscribers/events';
@@ -100,7 +102,7 @@ export class SaleInvoicePdf {
async getInvoiceBrandingAttributes(
tenantId: number,
invoiceId: number
): Promise<InvoicePdfTemplateAttributes> {
): Promise<InvoicePaperTemplateProps> {
const { PdfTemplate } = this.tenancy.models(tenantId);
const invoice = await this.getInvoiceService.getSaleInvoice(

6
packages/server/src/services/Sales/Invoices/SaleInvoiceTransformer.ts
View File

@@ -170,6 +170,7 @@ export class SaleInvoiceTransformer extends Transformer {
protected discountAmountFormatted = (invoice): string => {
return formatNumber(invoice.discountAmount, {
currencyCode: invoice.currencyCode,
excerptZero: true,
});
};
@@ -192,8 +193,9 @@ export class SaleInvoiceTransformer extends Transformer {
protected adjustmentFormatted = (invoice): string => {
return this.formatMoney(invoice.adjustment, {
currencyCode: invoice.currencyCode,
})
}
excerptZero: true,
});
};
/**
* Retrieves formatted total in foreign currency.

6
packages/server/src/services/Sales/Invoices/utils.ts
View File

@@ -1,6 +1,7 @@
import { pickBy } from 'lodash';
import { InvoicePdfTemplateAttributes, ISaleInvoice } from '@/interfaces';
import { ISaleInvoice } from '@/interfaces';
import { contactAddressTextFormat } from '@/utils/address-text-format';
import { InvoicePaperTemplateProps } from '@bigcapital/pdf-templates';
export const mergePdfTemplateWithDefaultAttributes = (
brandingTemplate?: Record<string, any>,
@@ -18,7 +19,7 @@ export const mergePdfTemplateWithDefaultAttributes = (
export const transformInvoiceToPdfTemplate = (
invoice: ISaleInvoice
): Partial<InvoicePdfTemplateAttributes> => {
): Partial<InvoicePaperTemplateProps> => {
return {
dueDate: invoice.dueDateFormatted,
dateIssue: invoice.invoiceDateFormatted,
@@ -29,6 +30,7 @@ export const transformInvoiceToPdfTemplate = (
paymentMade: invoice.paymentAmountFormatted,
dueAmount: invoice.dueAmountFormatted,
discount: invoice.discountAmountFormatted,
adjustment: invoice.adjustmentFormatted,
discountLabel: invoice.discountPercentageFormatted
? `Discount [${invoice.discountPercentageFormatted}]`
: 'Discount',

2
packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts
View File

@@ -113,6 +113,7 @@ export class SaleReceiptTransformer extends Transformer {
protected discountAmountFormatted = (receipt: ISaleReceipt): string => {
return formatNumber(receipt.discountAmount, {
currencyCode: receipt.currencyCode,
excerptZero: true,
});
};
@@ -135,6 +136,7 @@ export class SaleReceiptTransformer extends Transformer {
protected adjustmentFormatted = (receipt: ISaleReceipt): string => {
return this.formatMoney(receipt.adjustment, {
currencyCode: receipt.currencyCode,
excerptZero: true,
});
};

10
packages/server/src/services/Sales/Receipts/SaleReceiptsPdfService.ts
View File

@@ -1,13 +1,15 @@
import { Inject, Service } from 'typedi';
import { ChromiumlyTenancy } from '@/services/ChromiumlyTenancy/ChromiumlyTenancy';
import {
renderReceiptPaperTemplateHtml,
ReceiptPaperTemplateProps,
} from '@bigcapital/pdf-templates';
import { GetSaleReceipt } from './GetSaleReceipt';
import HasTenancyService from '@/services/Tenancy/TenancyService';
import { SaleReceiptBrandingTemplate } from './SaleReceiptBrandingTemplate';
import { transformReceiptToBrandingTemplateAttributes } from './utils';
import { ISaleReceiptBrandingTemplateAttributes } from '@/interfaces';
import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
import events from '@/subscribers/events';
import { renderReceiptPaperTemplateHtml } from '@bigcapital/pdf-templates';
@Service()
export class SaleReceiptsPdf {
@@ -90,12 +92,12 @@ export class SaleReceiptsPdf {
* Retrieves receipt branding attributes.
* @param {number} tenantId
* @param {number} receiptId
* @returns {Promise<ISaleReceiptBrandingTemplateAttributes>}
* @returns {Promise<ReceiptPaperTemplateProps>}
*/
public async getReceiptBrandingAttributes(
tenantId: number,
receiptId: number
): Promise<ISaleReceiptBrandingTemplateAttributes> {
): Promise<ReceiptPaperTemplateProps> {
const { PdfTemplate } = this.tenancy.models(tenantId);
const saleReceipt = await this.getSaleReceiptService.getSaleReceipt(

9
packages/server/src/services/Sales/Receipts/utils.ts
View File

@@ -1,12 +1,10 @@
import {
ISaleReceipt,
ISaleReceiptBrandingTemplateAttributes,
} from '@/interfaces';
import { ISaleReceipt } from '@/interfaces';
import { contactAddressTextFormat } from '@/utils/address-text-format';
import { ReceiptPaperTemplateProps } from '@bigcapital/pdf-templates';
export const transformReceiptToBrandingTemplateAttributes = (
saleReceipt: ISaleReceipt
): Partial<ISaleReceiptBrandingTemplateAttributes> => {
): Partial<ReceiptPaperTemplateProps> => {
return {
total: saleReceipt.totalFormatted,
subtotal: saleReceipt.subtotalFormatted,
@@ -23,6 +21,7 @@ export const transformReceiptToBrandingTemplateAttributes = (
discountLabel: saleReceipt.discountPercentageFormatted
? `Discount [${saleReceipt.discountPercentageFormatted}]`
: 'Discount',
adjustment: saleReceipt.adjustmentFormatted,
customerAddress: contactAddressTextFormat(saleReceipt.customer),
};
};

14
packages/webapp/src/components/PageForm/PageFormBigNumber.tsx
View File

@@ -2,18 +2,22 @@
import React from 'react';
import classNames from 'classnames';
import { CLASSES } from '@/constants/classes';
import { Money } from '@/components';
import '@/style/components/BigAmount.scss';
export function PageFormBigNumber({ label, amount, currencyCode }) {
interface PageFormBigNumberProps {
label: string;
amount: string | number;
}
export function PageFormBigNumber({
label,
amount,
}: PageFormBigNumberProps) {
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
<div class="big-amount">
<span class="big-amount__label">{label}</span>
<h1 class="big-amount__number">
<Money amount={amount} currency={currencyCode} />
</h1>
<h1 class="big-amount__number">{amount}</h1>
</div>
</div>
);

17
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx
View File

@@ -1,11 +1,10 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes';
import { safeSumBy } from '@/utils';
import { PageFormBigNumber, FormattedMessage as T } from '@/components';
import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
import { useManualJournalTotalFormatted } from './utils';
export default function MakeJournalEntriesHeader() {
return (
@@ -21,19 +20,9 @@ export default function MakeJournalEntriesHeader() {
* @returns {React.ReactNode}
*/
function MakeJournalHeaderBigNumber() {
const {
values: { entries, currency_code },
} = useFormikContext();
const totalCredit = safeSumBy(entries, 'credit');
const totalDebit = safeSumBy(entries, 'debit');
const total = Math.max(totalCredit, totalDebit);
const totalFormatted = useManualJournalTotalFormatted();
return (
<PageFormBigNumber
label={<T id={'amount'} />}
amount={total}
currencyCode={currency_code}
/>
<PageFormBigNumber label={<T id={'amount'} />} amount={totalFormatted} />
);
}

10
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx
View File

@@ -8,10 +8,14 @@ import {
TotalLineBorderStyle,
TotalLineTextStyle,
} from '@/components';
import { useJournalTotals } from './utils';
import {
useManualJournalSubtotalFormatted,
useManualJournalTotalFormatted,
} from './utils';
export function MakeJournalFormFooterRight() {
const { formattedSubtotal, formattedTotal } = useJournalTotals();
const formattedSubtotal = useManualJournalSubtotalFormatted();
const formattedTotal = useManualJournalTotalFormatted();
return (
<MakeJouranlTotalLines>
@@ -29,7 +33,7 @@ export function MakeJournalFormFooterRight() {
);
}
const MakeJouranlTotalLines =styled(TotalLines)`
const MakeJouranlTotalLines = styled(TotalLines)`
width: 100%;
color: #555555;
`;

89
packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx
View File

@@ -226,34 +226,73 @@ export const useSetPrimaryBranchToForm = () => {
}, [isBranchesSuccess, setFieldValue, branches]);
};
/**
* Retreives the Journal totals.
*/
export const useJournalTotals = () => {
const {
values: { entries, currency_code: currencyCode },
} = useFormikContext();
export const useManualJournalCreditTotal = () => {
const { values } = useFormikContext();
const totalCredit = safeSumBy(values.entries, 'credit');
// Retrieves the invoice entries total.
const totalCredit = safeSumBy(entries, 'credit');
const totalDebit = safeSumBy(entries, 'debit');
return totalCredit;
};
const total = Math.max(totalCredit, totalDebit);
// Retrieves the formatted total money.
const formattedTotal = React.useMemo(
() => formattedAmount(total, currencyCode),
[total, currencyCode],
);
// Retrieves the formatted subtotal.
const formattedSubtotal = React.useMemo(
() => formattedAmount(total, currencyCode, { money: false }),
[total, currencyCode],
);
export const useManualJournalCreditTotalFormatted = () => {
const totalCredit = useManualJournalCreditTotal();
const { values } = useFormikContext();
return {
formattedTotal,
formattedSubtotal,
};
return formattedAmount(totalCredit, values.currency_code);
};
export const useManualJournalDebitTotal = () => {
const { values } = useFormikContext();
const totalDebit = safeSumBy(values.entries, 'debit');
return totalDebit;
};
export const useManualJournalDebitTotalFormatted = () => {
const totalDebit = useManualJournalDebitTotal();
const { values } = useFormikContext();
return formattedAmount(totalDebit, values.currency_code);
};
export const useManualJournalSubtotal = () => {
const totalCredit = useManualJournalCreditTotal();
const totalDebit = useManualJournalDebitTotal();
return Math.max(totalCredit, totalDebit);
};
export const useManualJournalSubtotalFormatted = () => {
const subtotal = useManualJournalSubtotal();
const { values } = useFormikContext();
return formattedAmount(subtotal, values.currency_code);
};
export const useManualJournalTotalDifference = () => {
const totalCredit = useManualJournalCreditTotal();
const totalDebit = useManualJournalDebitTotal();
return Math.abs(totalCredit - totalDebit);
};
export const useManualJournalTotalDifferenceFormatted = () => {
const difference = useManualJournalTotalDifference();
const { values } = useFormikContext();
return formattedAmount(difference, values.currency_code);
};
export const useManualJournalTotal = () => {
const total = useManualJournalSubtotal();
return total;
};
export const useManualJournalTotalFormatted = () => {
const total = useManualJournalTotal();
const { values } = useFormikContext();
return formattedAmount(total, values.currency_code);
};
/**

6
packages/webapp/src/containers/Drawers/BillDrawer/BillDetailTableFooter.tsx
View File

@@ -42,6 +42,12 @@ export function BillDetailTableFooter() {
textStyle={TotalLineTextStyle.Regular}
/>
)}
{bill.adjustment > 0 && (
<TotalLine
title={'Adjustment'}
value={bill.adjustment_formatted}
/>
)}
<TotalLine
title={<T id={'bill.details.total'} />}
value={bill.total_formatted}

2
packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx
View File

@@ -30,7 +30,7 @@ export default function CreditNoteDetailHeader() {
<CommercialDocTopHeader>
<DetailsMenu>
<AmountItem label={intl.get('amount')}>
<span class="big-number">{creditNote.formatted_amount}</span>
<span class="big-number">{creditNote.total_formatted}</span>
</AmountItem>
<StatusItem>

8
packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx
View File

@@ -21,6 +21,7 @@ export default function CreditNoteDetailTableFooter() {
<TotalLine
title={<T id={'credit_note.drawer.label_subtotal'} />}
value={creditNote.formatted_subtotal}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
{creditNote.discount_amount > 0 && (
<TotalLine
@@ -30,7 +31,12 @@ export default function CreditNoteDetailTableFooter() {
: 'Discount'
}
value={creditNote.discount_amount_formatted}
borderStyle={TotalLineBorderStyle.Dark}
/>
)}
{creditNote.adjustment > 0 && (
<TotalLine
title={'Adjustment'}
value={creditNote.adjustment_formatted}
/>
)}
<TotalLine

2
packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx
View File

@@ -30,7 +30,7 @@ export default function EstimateDetailHeader() {
<CommercialDocTopHeader>
<DetailsMenu>
<AmountEstimateDetail label={intl.get('amount')}>
<span class="big-number">{estimate.formatted_amount}</span>
<span class="big-number">{estimate.total_formatted}</span>
</AmountEstimateDetail>
<EstimateStatusDetail>

13
packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx
View File

@@ -25,20 +25,27 @@ export default function EstimateDetailTableFooter() {
value={estimate.formatted_subtotal}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
{estimate.discount_amount > 0 && (
{estimate?.discount_amount_formatted && (
<TotalLine
title={
estimate.discount_percentage_formatted
? `Discount [${invoice.discount_percentage_formatted}]`
? `Discount [${estimate.discount_percentage_formatted}]`
: 'Discount'
}
value={estimate.discount_amount_formatted}
textStyle={TotalLineTextStyle.Regular}
/>
)}
{estimate?.adjustment_formatted && (
<TotalLine
title="Adjustment"
value={estimate.adjustment_formatted}
textStyle={TotalLineTextStyle.Regular}
/>
)}
<TotalLine
title={<T id={'estimate.details.total'} />}
value={estimate.formatted_amount}
value={estimate.total_formatted}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>

2
packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx
View File

@@ -5,12 +5,10 @@ import styled from 'styled-components';
import { defaultTo } from 'lodash';
import {
ButtonLink,
Row,
Col,
DetailsMenu,
DetailItem,
FormatDate,
CommercialDocHeader,
CommercialDocTopHeader,
CustomerDrawerLink,

12
packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx
View File

@@ -26,7 +26,7 @@ export function InvoiceDetailTableFooter() {
value={invoice.subtotal_formatted}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
{invoice.discount_amount > 0 && (
{invoice?.discount_amount > 0 && (
<TotalLine
title={
invoice.discount_percentage_formatted
@@ -37,7 +37,14 @@ export function InvoiceDetailTableFooter() {
textStyle={TotalLineTextStyle.Regular}
/>
)}
{invoice.taxes.map((taxRate) => (
{invoice?.adjustment_formatted && (
<TotalLine
title="Adjustment"
value={invoice.adjustment_formatted}
textStyle={TotalLineTextStyle.Regular}
/>
)}
{invoice?.taxes?.map((taxRate) => (
<TotalLine
key={taxRate.id}
title={`${taxRate.name} [${taxRate.tax_rate}%]`}
@@ -45,7 +52,6 @@ export function InvoiceDetailTableFooter() {
textStyle={TotalLineTextStyle.Regular}
/>
))}
<TotalLine
title={<T id={'invoice.details.total'} />}
value={invoice.total_formatted}

2
packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx
View File

@@ -31,7 +31,7 @@ export default function ReceiptDetailHeader() {
<CommercialDocTopHeader>
<DetailsMenu>
<AmountReceiptItem label={intl.get('amount')}>
<h3 class="big-number">{receipt.formatted_amount}</h3>
<h3 class="big-number">{receipt.total_formatted}</h3>
</AmountReceiptItem>
<StatusReceiptItem>

11
packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
View File

@@ -23,7 +23,7 @@ export default function ReceiptDetailTableFooter() {
<ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'receipt.details.subtotal'} />}
value={receipt.formatted_subtotal}
value={receipt.subtotal_formatted}
/>
{receipt.discount_amount > 0 && (
<TotalLine
@@ -36,9 +36,16 @@ export default function ReceiptDetailTableFooter() {
textStyle={TotalLineTextStyle.Regular}
/>
)}
{receipt.adjustment > 0 && (
<TotalLine
title={'Adjustment'}
value={receipt.adjustment_formatted}
textStyle={TotalLineTextStyle.Regular}
/>
)}
<TotalLine
title={<T id={'receipt.details.total'} />}
value={receipt.formatted_amount}
value={receipt.total_formatted}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>

13
packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx
View File

@@ -25,17 +25,24 @@ export default function VendorCreditDetailDrawerFooter() {
value={vendorCredit.formatted_subtotal}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
{vendorCredit.discount_amount > 0 && (
{vendorCredit?.discount_amount_formatted && (
<TotalLine
title={
bill.discount_percentage_formatted
? `Discount [${bill.discount_percentage_formatted}]`
vendorCredit.discount_percentage_formatted
? `Discount [${vendorCredit.discount_percentage_formatted}]`
: 'Discount'
}
value={vendorCredit.discount_amount_formatted}
textStyle={TotalLineTextStyle.Regular}
/>
)}
{vendorCredit?.adjustment_formatted && (
<TotalLine
title={'Adjustment'}
value={vendorCredit.adjustment_formatted}
textStyle={TotalLineTextStyle.Regular}
/>
)}
<TotalLine
title={<T id={'vendor_credit.drawer.label_total'} />}
value={vendorCredit.formatted_amount}

12
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
View File

@@ -8,21 +8,25 @@ import {
TotalLineBorderStyle,
TotalLineTextStyle,
} from '@/components';
import { useExpensesTotals } from './utils';
import {
useExpenseSubtotalFormatted,
useExpenseTotalFormatted,
} from './utils';
export function ExpenseFormFooterRight() {
const { formattedSubtotal, formattedTotal } = useExpensesTotals();
const totalFormatted = useExpenseTotalFormatted();
const subtotalFormatted = useExpenseSubtotalFormatted();
return (
<ExpensesTotalLines>
<TotalLine
title={<T id={'expense.label.subtotal'} />}
value={formattedSubtotal}
value={subtotalFormatted}
borderStyle={TotalLineBorderStyle.None}
/>
<TotalLine
title={<T id={'expense.label.total'} />}
value={formattedTotal}
value={totalFormatted}
textStyle={TotalLineTextStyle.Bold}
/>
</ExpensesTotalLines>

19
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx
View File

@@ -1,34 +1,23 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import React from 'react';
import classNames from 'classnames';
import { sumBy } from 'lodash';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import ExpenseFormHeaderFields from './ExpenseFormHeaderFields';
import { PageFormBigNumber } from '@/components';
import { useExpenseTotalFormatted } from './utils';
// Expense form header.
export default function ExpenseFormHeader() {
const {
values: { currency_code, categories },
} = useFormikContext();
// Calculates the expense entries amount.
const totalExpenseAmount = useMemo(
() => sumBy(categories, 'amount'),
[categories],
);
const totalFormatted = useExpenseTotalFormatted();
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<ExpenseFormHeaderFields />
<PageFormBigNumber
label={<T id={'expense_amount'} />}
amount={totalExpenseAmount}
currencyCode={currency_code}
amount={totalFormatted}
/>
</div>
);

58
packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
View File

@@ -166,30 +166,52 @@ export const useSetPrimaryBranchToForm = () => {
};
/**
* Retreives the Journal totals.
* Retrieves the expense subtotal.
* @returns {number}
*/
export const useExpensesTotals = () => {
export const useExpenseSubtotal = () => {
const {
values: { categories, currency_code: currencyCode },
values: { categories },
} = useFormikContext();
const total = sumBy(categories, 'amount');
// Calculates the expense entries amount.
return React.useMemo(() => sumBy(categories, 'amount'), [categories]);
};
// Retrieves the formatted total money.
const formattedTotal = React.useMemo(
() => formattedAmount(total, currencyCode),
[total, currencyCode],
);
// Retrieves the formatted subtotal.
const formattedSubtotal = React.useMemo(
() => formattedAmount(total, currencyCode, { money: false }),
[total, currencyCode],
);
/**
* Retrieves the expense subtotal formatted.
* @returns {string}
*/
export const useExpenseSubtotalFormatted = () => {
const subtotal = useExpenseSubtotal();
const {
values: { currency_code },
} = useFormikContext();
return {
formattedTotal,
formattedSubtotal,
};
return formattedAmount(subtotal, currency_code);
};
/**
* Retrieves the expense total.
* @returns {number}
*/
export const useExpenseTotal = () => {
const subtotal = useExpenseSubtotal();
return subtotal;
};
/**
* Retrieves the expense total formatted.
* @returns {string}
*/
export const useExpenseTotalFormatted = () => {
const total = useExpenseTotal();
const {
values: { currency_code },
} = useFormikContext();
return formattedAmount(total, currency_code);
};
/**

18
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx
View File

@@ -1,13 +1,12 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { sumBy } from 'lodash';
import { useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes';
import { PageFormBigNumber } from '@/components';
import BillFormHeaderFields from './BillFormHeaderFields';
import { useBillTotalFormatted } from './utils';
/**
* Fill form header.
@@ -22,19 +21,10 @@ function BillFormHeader() {
}
function BillFormBigTotal() {
const {
values: { currency_code, entries },
} = useFormikContext();
// Calculate the total due amount of bill entries.
const totalDueAmount = useMemo(() => sumBy(entries, 'amount'), [entries]);
const totalFormatted = useBillTotalFormatted();
return (
<PageFormBigNumber
label={intl.get('due_amount')}
amount={totalDueAmount}
currencyCode={currency_code}
/>
<PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
);
}

9
packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
View File

@@ -325,7 +325,7 @@ export const useBillSubtotal = () => {
*/
export const useBillSubtotalFormatted = () => {
const subtotal = useBillSubtotal();
const { values} = useFormikContext();
const { values } = useFormikContext();
return formattedAmount(subtotal, values.currency_code);
};
@@ -336,8 +336,12 @@ export const useBillSubtotalFormatted = () => {
*/
export const useBillDiscountAmount = () => {
const { values } = useFormikContext();
const subtotal = useBillSubtotal();
const discount = toSafeNumber(values.discount);
return toSafeNumber(values.discount);
return values?.discount_type === 'percentage'
? (subtotal * discount) / 100
: discount;
};
/**
@@ -384,7 +388,6 @@ export const useBillTotalTaxAmount = () => {
.filter((entry) => entry.tax_amount)
.sumBy('tax_amount')
.value();
}, [values.entries]);
};

16
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx
View File

@@ -2,33 +2,23 @@
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes';
import VendorCreditNoteFormHeaderFields from './VendorCreditNoteFormHeaderFields';
import { getEntriesTotal } from '@/containers/Entries/utils';
import { PageFormBigNumber } from '@/components';
import { useVendorCreditTotalFormatted } from './utils';
/**
* Vendor Credit note header.
*/
function VendorCreditNoteFormHeader() {
const { values:{entries ,currency_code} } = useFormikContext();
// Calculate the total amount.
const totalAmount = React.useMemo(
() => getEntriesTotal(entries),
[entries],
);
const totalFormatted = useVendorCreditTotalFormatted();
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<VendorCreditNoteFormHeaderFields />
<PageFormBigNumber
label={intl.get('vendor_credits.label.amount_to_credit')}
amount={totalAmount}
currencyCode={currency_code}
amount={totalFormatted}
/>
</div>
);

6
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx
View File

@@ -206,8 +206,12 @@ export const useVendorCreditSubtotal = () => {
*/
export const useVendorCreditDiscountAmount = () => {
const { values } = useFormikContext();
const subtotal = useVendorCreditSubtotal();
const discount = toSafeNumber(values.discount);
return toSafeNumber(values.discount);
return values.discount_type === 'percentage'
? (subtotal * discount) / 100
: discount;
};
/**

14
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
View File

@@ -1,11 +1,9 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { useFormikContext } from 'formik';
import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
import { getEntriesTotal } from '@/containers/Entries/utils';
import { Group, PageFormBigNumber } from '@/components';
import { useCreditNoteTotalFormatted } from './utils';
/**
* Credit note header.
@@ -31,18 +29,12 @@ function CreditNoteFormHeader() {
* @returns {React.ReactNode}
*/
function CreditNoteFormBigNumber() {
const {
values: { entries, currency_code },
} = useFormikContext();
// Calculate the total amount.
const totalAmount = React.useMemo(() => getEntriesTotal(entries), [entries]);
const totalFormatted = useCreditNoteTotalFormatted();
return (
<PageFormBigNumber
label={intl.get('credit_note.label_amount_to_credit')}
amount={totalAmount}
currencyCode={currency_code}
amount={totalFormatted}
/>
);
}

1
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx
View File

@@ -1,5 +1,6 @@
// @ts-nocheck
import React from 'react';
import { useFormikContext } from 'formik';
import EstimateNumberDialog from '@/containers/Dialogs/EstimateNumberDialog';
/**

19
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
View File

@@ -1,12 +1,10 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import React from 'react';
import intl from 'react-intl-universal';
import { useFormikContext } from 'formik';
import { x } from '@xstyled/emotion';
import EstimateFormHeaderFields from './EstimateFormHeaderFields';
import { getEntriesTotal } from '@/containers/Entries/utils';
import { Group, PageFormBigNumber } from '@/components';
import { useEstimateTotalFormatted } from './utils';
// Estimate form top header.
function EstimateFormHeader() {
@@ -29,19 +27,10 @@ function EstimateFormHeader() {
* @returns {React.ReactNode}
*/
function EstimateFormBigTotal() {
const {
values: { entries, currency_code },
} = useFormikContext();
// Calculate the total due amount of bill entries.
const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
const totalFormatted = useEstimateTotalFormatted();
return (
<PageFormBigNumber
label={intl.get('amount')}
amount={totalDueAmount}
currencyCode={currency_code}
/>
<PageFormBigNumber label={intl.get('amount')} amount={totalFormatted} />
);
}

1
packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
View File

@@ -245,6 +245,7 @@ export const useEstimateSubtotalFormatted = () => {
*/
export const useEstimateDiscount = () => {
const { values } = useFormikContext();
const subtotal = useEstimateSubtotal();
const discount = toSafeNumber(values.discount);
return values?.discount_type === 'percentage'

15
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
View File

@@ -1,10 +1,9 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { useFormikContext } from 'formik';
import { Group, PageFormBigNumber } from '@/components';
import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
import { useInvoiceDueAmount } from './utils';
import { useInvoiceTotalFormatted } from './utils';
/**
* Invoice form header section.
@@ -29,19 +28,11 @@ function InvoiceFormHeader() {
* @returns {React.ReactNode}
*/
function InvoiceFormBigTotal() {
const {
values: { currency_code },
} = useFormikContext();
// Calculate the total due amount of invoice entries.
const totalDueAmount = useInvoiceDueAmount();
const totalFormatted = useInvoiceTotalFormatted();
return (
<PageFormBigNumber
label={intl.get('due_amount')}
amount={totalDueAmount}
currencyCode={currency_code}
/>
<PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
);
}
export default InvoiceFormHeader;

4
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
View File

@@ -324,7 +324,7 @@ export const useInvoiceSubtotalFormatted = () => {
export const useInvoiceDiscountAmount = () => {
const { values } = useFormikContext();
const subtotal = useInvoiceSubtotal();
const discount = parseFloat(values.discount);
const discount = toSafeNumber(values.discount);
return values?.discount_type === 'percentage'
? (subtotal * discount) / 100
@@ -350,7 +350,7 @@ export const useInvoiceDiscountAmountFormatted = () => {
*/
export const useInvoiceAdjustmentAmount = () => {
const { values } = useFormikContext();
const adjustment = parseFloat(values.adjustment);
const adjustment = toSafeNumber(values.adjustment);
return adjustment;
};

18
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
View File

@@ -1,10 +1,9 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import React from 'react';
import intl from 'react-intl-universal';
import { useFormikContext } from 'formik';
import { Group, PageFormBigNumber } from '@/components';
import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
import { getEntriesTotal } from '@/containers/Entries/utils';
import { useReceiptTotalFormatted } from './utils';
/**
* Receipt form header section.
@@ -35,19 +34,10 @@ function ReceiptFormHeader({
* @returns {React.ReactNode}
*/
function ReceiptFormHeaderBigTotal() {
const {
values: { currency_code, entries },
} = useFormikContext();
// Calculate the total due amount of bill entries.
const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
const totalFormatted = useReceiptTotalFormatted();
return (
<PageFormBigNumber
label={intl.get('due_amount')}
amount={totalDueAmount}
currencyCode={currency_code}
/>
<PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
);
}

2
shared/pdf-templates/package.json
View File

@@ -9,7 +9,7 @@
},
"main": "./dist/components.umd.js",
"module": "./dist/components.es.js",
"types": "./dist/src/index.d.ts",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/src/index.d.ts",

18
shared/pdf-templates/src/components/EstimatePaperTemplate.tsx
View File

@@ -43,7 +43,7 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
companyAddress?: string;
billedToLabel?: string;
// Totals
// Total
total?: string;
showTotal?: boolean;
totalLabel?: string;
@@ -53,6 +53,11 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
showDiscount?: boolean;
discountLabel?: string;
// # Adjustment
adjustment?: string;
showAdjustment?: boolean;
adjustmentLabel?: string;
// # Subtotal
subtotal?: string;
showSubtotal?: boolean;
@@ -117,6 +122,11 @@ export function EstimatePaperTemplate({
subtotalLabel = 'Subtotal',
showSubtotal = true,
// # Adjustment
adjustment = '',
showAdjustment = true,
adjustmentLabel = 'Adjustment',
// # Customer Note
showCustomerNote = true,
customerNote = DefaultPdfTemplateStatement,
@@ -240,6 +250,12 @@ export function EstimatePaperTemplate({
amount={discount}
/>
)}
{showAdjustment && adjustment && (
<PaperTemplate.TotalLine
label={adjustmentLabel}
amount={adjustment}
/>
)}
{showTotal && (
<PaperTemplate.TotalLine label={totalLabel} amount={total} />
)}

39
shared/pdf-templates/src/components/InvoicePaperTemplate.tsx
View File

@@ -1,3 +1,4 @@
import { isEmpty } from 'lodash';
import {
PaperTemplate,
PaperTemplateProps,
@@ -33,17 +34,21 @@ export interface InvoicePaperTemplateProps extends PaperTemplateProps {
primaryColor?: string;
secondaryColor?: string;
// Company
showCompanyLogo?: boolean;
companyLogoUri?: string;
// Invoice number
showInvoiceNumber?: boolean;
invoiceNumber?: string;
invoiceNumberLabel?: string;
// Date of issue
showDateIssue?: boolean;
dateIssue?: string;
dateIssueLabel?: string;
// Due date
showDueDate?: boolean;
dueDate?: string;
dueDateLabel?: string;
@@ -66,7 +71,7 @@ export interface InvoicePaperTemplateProps extends PaperTemplateProps {
lineRateLabel?: string;
lineTotalLabel?: string;
// Totals
// Total
showTotal?: boolean;
totalLabel?: string;
total?: string;
@@ -76,11 +81,17 @@ export interface InvoicePaperTemplateProps extends PaperTemplateProps {
discountLabel?: string;
discount?: string;
// Adjustment
showAdjustment?: boolean;
adjustmentLabel?: string;
adjustment?: string;
// Subtotal
showSubtotal?: boolean;
subtotalLabel?: string;
subtotal?: string;
// Payment made
showPaymentMade?: boolean;
paymentMadeLabel?: string;
paymentMade?: string;
@@ -97,6 +108,7 @@ export interface InvoicePaperTemplateProps extends PaperTemplateProps {
showTermsConditions?: boolean;
termsConditions?: string;
// Statement
statementLabel?: string;
showStatement?: boolean;
statement?: string;
@@ -145,20 +157,24 @@ export function InvoicePaperTemplate({
totalLabel = 'Total',
subtotalLabel = 'Subtotal',
discountLabel = 'Discount',
adjustmentLabel = 'Adjustment',
paymentMadeLabel = 'Payment Made',
dueAmountLabel = 'Balance Due',
// Totals
showTotal = true,
total = '$662.75',
showSubtotal = true,
showDiscount = true,
showTaxes = true,
showPaymentMade = true,
showDueAmount = true,
showAdjustment = true,
total = '$662.75',
subtotal = '630.00',
discount = '0.00',
adjustment = '',
paymentMade = '100.00',
dueAmount = '$562.75',
@@ -243,17 +259,18 @@ export function InvoicePaperTemplate({
accessor: (data) => (
<Stack spacing={2}>
<Text>{data.item}</Text>
<Text
color={'#5f6b7c'}
fontSize={12}
>
<Text color={'#5f6b7c'} fontSize={12}>
{data.description}
</Text>
</Stack>
),
thStyle: { width: '60%' },
},
{ label: lineQuantityLabel, accessor: 'quantity', align: 'right' },
{
label: lineQuantityLabel,
accessor: 'quantity',
align: 'right',
},
{ label: lineRateLabel, accessor: 'rate', align: 'right' },
{ label: lineTotalLabel, accessor: 'total', align: 'right' },
]}
@@ -267,12 +284,18 @@ export function InvoicePaperTemplate({
border={PaperTemplateTotalBorder.Gray}
/>
)}
{showDiscount && (
{showDiscount && !isEmpty(discount) && (
<PaperTemplate.TotalLine
label={discountLabel}
amount={discount}
/>
)}
{showAdjustment && !isEmpty(adjustment) && (
<PaperTemplate.TotalLine
label={adjustmentLabel}
amount={adjustment}
/>
)}
{showTaxes && (
<>
{taxes.map((tax, index) => (

16
shared/pdf-templates/src/components/ReceiptPaperTemplate.tsx
View File

@@ -39,6 +39,11 @@ export interface ReceiptPaperTemplateProps extends PaperTemplateProps {
showDiscount?: boolean;
discountLabel?: string;
// # Adjustment
adjustment?: string;
showAdjustment?: boolean;
adjustmentLabel?: string;
// Total
total?: string;
showTotal?: boolean;
@@ -111,6 +116,11 @@ export function ReceiptPaperTemplate({
discountLabel = 'Discount',
showDiscount = true,
// # Adjustment
adjustment = '',
adjustmentLabel = 'Adjustment',
showAdjustment = true,
// # Subtotal
subtotal = '1000/00',
subtotalLabel = 'Subtotal',
@@ -228,6 +238,12 @@ export function ReceiptPaperTemplate({
amount={discount}
/>
)}
{showAdjustment && adjustment && (
<PaperTemplate.TotalLine
label={adjustmentLabel}
amount={adjustment}
/>
)}
{showTotal && (
<PaperTemplate.TotalLine label={totalLabel} amount={total} />
)}

4
shared/pdf-templates/src/renders/render-invoice-paper-template.tsx
View File

@@ -8,8 +8,6 @@ export const renderInvoicePaperTemplateHtml = (
props: InvoicePaperTemplateProps
) => {
return renderSSR(
<InvoicePaperTemplate
{...props}
/>
<InvoicePaperTemplate {...props} />
);
};