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

fix: update financial forms to use new formatted amount utilities and…

packages/server/src/api/controllers/Purchases/Bills.ts

@@ -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(),

packages/server/src/api/controllers/Sales/SalesEstimates.ts

@@ -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(),
     ];
   }
 

packages/server/src/services/CreditNotes/CreditNoteTransformer.ts

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

packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts

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

packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts

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

packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts

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

packages/server/src/services/Sales/Estimates/SaleEstimatesPdf.ts

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

packages/server/src/services/Sales/Estimates/utils.ts

@@ -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),

packages/server/src/services/Sales/Invoices/SaleInvoicePdf.ts

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

packages/server/src/services/Sales/Invoices/SaleInvoiceTransformer.ts

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

packages/server/src/services/Sales/Invoices/utils.ts

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

packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts

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

packages/server/src/services/Sales/Receipts/SaleReceiptsPdfService.ts

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

packages/server/src/services/Sales/Receipts/utils.ts

@@ -1,12 +1,10 @@
-import {
+import { ISaleReceipt } from '@/interfaces';
-  ISaleReceipt,
-  ISaleReceiptBrandingTemplateAttributes,
-} 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),
   };
 };

packages/webapp/src/components/PageForm/PageFormBigNumber.tsx

@@ -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">
+        <h1 class="big-amount__number">{amount}</h1>
-          <Money amount={amount} currency={currencyCode} />
-        </h1>
       </div>
     </div>
   );

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx

@@ -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 {
+  const totalFormatted = useManualJournalTotalFormatted();
-    values: { entries, currency_code },
-  } = useFormikContext();
-  const totalCredit = safeSumBy(entries, 'credit');
-  const totalDebit = safeSumBy(entries, 'debit');
-
-  const total = Math.max(totalCredit, totalDebit);
 
   return (
-    <PageFormBigNumber
+    <PageFormBigNumber label={<T id={'amount'} />} amount={totalFormatted} />
-      label={<T id={'amount'} />}
-      amount={total}
-      currencyCode={currency_code}
-    />
   );
 }

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx

@@ -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;
 `;

packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx

@@ -226,34 +226,73 @@ export const useSetPrimaryBranchToForm = () => {
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
 
-/**
+export const useManualJournalCreditTotal = () => {
- * Retreives the Journal totals.
+  const { values } = useFormikContext();
- */
+  const totalCredit = safeSumBy(values.entries, 'credit');
-export const useJournalTotals = () => {
-  const {
-    values: { entries, currency_code: currencyCode },
-  } = useFormikContext();
 
-  // Retrieves the invoice entries total.
+  return totalCredit;
-  const totalCredit = safeSumBy(entries, 'credit');
+};
-  const totalDebit = safeSumBy(entries, 'debit');
 
-  const total = Math.max(totalCredit, totalDebit);
+export const useManualJournalCreditTotalFormatted = () => {
-  // Retrieves the formatted total money.
+  const totalCredit = useManualJournalCreditTotal();
-  const formattedTotal = React.useMemo(
+  const { values } = useFormikContext();
-    () => formattedAmount(total, currencyCode),
-    [total, currencyCode],
-  );
-  // Retrieves the formatted subtotal.
-  const formattedSubtotal = React.useMemo(
-    () => formattedAmount(total, currencyCode, { money: false }),
-    [total, currencyCode],
-  );
 
-  return {
+  return formattedAmount(totalCredit, values.currency_code);
-    formattedTotal,
+};
-    formattedSubtotal,
+
-  };
+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);
 };
 
 /**

packages/webapp/src/containers/Drawers/BillDrawer/BillDetailTableFooter.tsx

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

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx

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

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx

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

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx

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

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx

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

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx

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

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx

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

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx

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

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx

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

packages/webapp/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.tsx

@@ -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
+              vendorCredit.discount_percentage_formatted
-                ? `Discount [${bill.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}

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx

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

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx

@@ -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 {
+  const totalFormatted = useExpenseTotalFormatted();
-    values: { currency_code, categories },
-  } = useFormikContext();
-
-  // Calculates the expense entries amount.
-  const totalExpenseAmount = useMemo(
-    () => sumBy(categories, 'amount'),
-    [categories],
-  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ExpenseFormHeaderFields />
       <PageFormBigNumber
         label={<T id={'expense_amount'} />}
-        amount={totalExpenseAmount}
+        amount={totalFormatted}
-        currencyCode={currency_code}
       />
     </div>
   );

packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx

@@ -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(
+ * Retrieves the expense subtotal formatted.
-    () => formattedAmount(total, currencyCode),
+ * @returns {string}
-    [total, currencyCode],
+ */
-  );
+export const useExpenseSubtotalFormatted = () => {
-  // Retrieves the formatted subtotal.
+  const subtotal = useExpenseSubtotal();
-  const formattedSubtotal = React.useMemo(
+  const {
-    () => formattedAmount(total, currencyCode, { money: false }),
+    values: { currency_code },
-    [total, currencyCode],
+  } = useFormikContext();
-  );
 
-  return {
+  return formattedAmount(subtotal, currency_code);
-    formattedTotal,
+};
-    formattedSubtotal,
+
-  };
+/**
+ * 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);
 };
 
 /**

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx

@@ -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 {
+  const totalFormatted = useBillTotalFormatted();
-    values: { currency_code, entries },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => sumBy(entries, 'amount'), [entries]);
 
   return (
-    <PageFormBigNumber
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }
 

packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx

@@ -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]);
 };
 

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx

@@ -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();
+  const totalFormatted = useVendorCreditTotalFormatted();
-
-  // Calculate the total amount.
-  const totalAmount = React.useMemo(
-    () => getEntriesTotal(entries),
-    [entries],
-  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <VendorCreditNoteFormHeaderFields />
       <PageFormBigNumber
         label={intl.get('vendor_credits.label.amount_to_credit')}
-        amount={totalAmount}
+        amount={totalFormatted}
-        currencyCode={currency_code}
       />
     </div>
   );

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx

@@ -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;
 };
 
 /**

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx

@@ -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 {
+  const totalFormatted = useCreditNoteTotalFormatted();
-    values: { entries, currency_code },
-  } = useFormikContext();
-
-  // Calculate the total amount.
-  const totalAmount = React.useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
     <PageFormBigNumber
       label={intl.get('credit_note.label_amount_to_credit')}
-      amount={totalAmount}
+      amount={totalFormatted}
-      currencyCode={currency_code}
     />
   );
 }

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx

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

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx

@@ -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 {
+  const totalFormatted = useEstimateTotalFormatted();
-    values: { entries, currency_code },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
-    <PageFormBigNumber
+    <PageFormBigNumber label={intl.get('amount')} amount={totalFormatted} />
-      label={intl.get('amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }
 

packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx

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

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx

@@ -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
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }
 export default InvoiceFormHeader;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx

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

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx

@@ -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 {
+  const totalFormatted = useReceiptTotalFormatted();
-    values: { currency_code, entries },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
-    <PageFormBigNumber
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }
 

shared/pdf-templates/package.json

@@ -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",

shared/pdf-templates/src/components/EstimatePaperTemplate.tsx

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

shared/pdf-templates/src/components/InvoicePaperTemplate.tsx

@@ -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
+                    <Text color={'#5f6b7c'} fontSize={12}>
-                      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) => (

shared/pdf-templates/src/components/ReceiptPaperTemplate.tsx

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

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

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