feat: enhance discount handling in financial forms

- Implemented discount and adjustment fields in Bill, Credit Note, Estimate, Invoice, and Receipt forms.
- Created new components for displaying discount and adjustment totals, improving clarity in financial documents.
- Updated utility functions to format discount and adjustment amounts consistently across various forms.
- Enhanced user experience by integrating discount functionality into the form context, allowing for better data management and display.

This update improves the overall functionality and user experience related to discounts in financial transactions.

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

@@ -1,23 +1,26 @@
 // @ts-nocheck
 import styled from 'styled-components';
+import { useFormikContext } from 'formik';
 import {
   TotalLines,
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-  FFormGroup,
-  FInputGroup,
-  FSelect,
 } from '@/components';
-import { useBillAggregatedTaxRates, useBillTotals } from './utils';
-import { useFormikContext } from 'formik';
+import {
+  useBillAdjustmentAmountFormatted,
+  useBillAggregatedTaxRates,
+  useBillDiscountAmountFormatted,
+  useBillSubtotalFormatted,
+  useBillTotalFormatted,
+  useBillTotals,
+} from './utils';
 import { TaxType } from '@/interfaces/TaxRates';
-import { Button } from '@blueprintjs/core';
+import { AdjustmentTotalLine } from '@/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine';
+import { DiscountTotalLine } from '@/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine';
 
 export function BillFormFooterRight() {
   const {
-    formattedSubtotal,
-    formattedTotal,
     formattedDueTotal,
     formattedPaymentTotal,
   } = useBillTotals();
@@ -26,7 +29,11 @@ export function BillFormFooterRight() {
     values: { inclusive_exclusive_tax, currency_code },
   } = useFormikContext();
 
+  const subtotalFormatted = useBillSubtotalFormatted();
+  const totalFormatted = useBillTotalFormatted();
   const taxEntries = useBillAggregatedTaxRates();
+  const discountAmount = useBillDiscountAmountFormatted();
+  const adjustmentAmount = useBillAdjustmentAmountFormatted();
 
   return (
     <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
@@ -38,37 +45,13 @@ export function BillFormFooterRight() {
               : 'Subtotal'}
           </>
         }
-        value={formattedSubtotal}
-        borderStyle={TotalLineBorderStyle.None}
+        value={subtotalFormatted}
       />
-
-      {/* ----------- Discount ----------- */}
-      <FFormGroup name={'discount'} label={'Discount'} inline>
-        <FInputGroup
-          name={'discount'}
-          rightElement={
-            <FSelect
-              name={'discount_type'}
-              items={[
-                { text: 'USD', value: 'amount' },
-                { text: '%', value: 'percentage' },
-              ]}
-              input={({ text }) => (
-                <Button small minimal>
-                  {text}
-                </Button>
-              )}
-              filterable={false}
-            />
-          }
-        />
-      </FFormGroup>
-
-      {/* ----------- Adjustment ----------- */}
-      <FFormGroup name={'adjustment'} label={'Adjustment'} inline>
-        <FInputGroup name={'adjustment'} />
-      </FFormGroup>
-
+      <DiscountTotalLine
+        currencyCode={currency_code}
+        discountAmount={discountAmount}
+      />
+      <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
       {taxEntries.map((tax, index) => (
         <TotalLine
           key={index}
@@ -78,8 +61,8 @@ export function BillFormFooterRight() {
         />
       ))}
       <TotalLine
-        title={`Total (${currency_code})`}
-        value={formattedTotal}
+        title={`TOTAL (${currency_code})`}
+        value={totalFormatted}
         borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />

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

@@ -66,6 +66,13 @@ export const defaultBill = {
   currency_code: '',
   entries: [...repeatValue(defaultBillEntry, MIN_LINES_NUMBER)],
   attachments: [],
+
+  // Adjustment
+  adjustment: '',
+
+  // Discount
+  discount: '',
+  discount_type: 'amount',
 };
 
 export const ERRORS = {
@@ -364,6 +371,17 @@ export const useBillSubtotal = () => {
   return React.useMemo(() => getEntriesTotal(entries), [entries]);
 };
 
+/**
+ * Retrieves the bill subtotal formatted.
+ * @returns {string}
+ */
+export const useBillSubtotalFormatted = () => {
+  const subtotal = useBillSubtotal();
+  const { currency_code: currencyCode } = useFormikContext();
+
+  return formattedAmount(subtotal, currencyCode);
+};
+
 /**
  * Retrieves the bill discount amount.
  * @returns {number}
@@ -374,6 +392,17 @@ export const useBillDiscountAmount = () => {
   return toSafeNumber(values.discount);
 };
 
+/**
+ * Retrieves the bill discount amount formatted.
+ * @returns {string}
+ */
+export const useBillDiscountAmountFormatted = () => {
+  const discountAmount = useBillDiscountAmount();
+  const { currency_code: currencyCode } = useFormikContext();
+
+  return formattedAmount(discountAmount, currencyCode);
+};
+
 /**
  * Retrieves the bill adjustment amount.
  * @returns {number}
@@ -384,6 +413,17 @@ export const useBillAdjustmentAmount = () => {
   return toSafeNumber(values.adjustment);
 };
 
+/**
+ * Retrieves the bill adjustment amount formatted.
+ * @returns {string}
+ */
+export const useBillAdjustmentAmountFormatted = () => {
+  const adjustmentAmount = useBillAdjustmentAmount();
+  const { currency_code: currencyCode } = useFormikContext();
+
+  return formattedAmount(adjustmentAmount, currencyCode);
+};
+
 /**
  * Retrieves the bill total tax amount.
  * @returns {number}
@@ -426,3 +466,14 @@ export const useBillTotal = () => {
     R.subtract(R.__, adjustmentAmount),
   )(subtotal);
 };
+
+/**
+ * Retrieves the bill total formatted.
+ * @returns {string}
+ */
+export const useBillTotalFormatted = () => {
+  const total = useBillTotal();
+  const { currency_code: currencyCode } = useFormikContext();
+
+  return formattedAmount(total, currencyCode);
+};

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

@@ -1,17 +1,26 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import { useFormikContext } from 'formik';
+import { T, TotalLines, TotalLine, TotalLineTextStyle } from '@/components';
 import {
-  T,
-  TotalLines,
-  TotalLine,
-  TotalLineBorderStyle,
-  TotalLineTextStyle,
-} from '@/components';
-import { useVendorCrditNoteTotals } from './utils';
+  useVendorCreditAdjustmentAmountFormatted,
+  useVendorCreditDiscountAmount,
+  useVendorCreditSubtotalFormatted,
+  useVendorCreditTotalFormatted,
+} from './utils';
+import { DiscountTotalLine } from '@/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine';
+import { AdjustmentTotalLine } from '@/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine';
 
 export function VendorCreditNoteFormFooterRight() {
-  const { formattedSubtotal, formattedTotal } = useVendorCrditNoteTotals();
+  const {
+    values: { currency_code },
+  } = useFormikContext();
+  const totalFormatted = useVendorCreditTotalFormatted();
+  const subtotalFormatted = useVendorCreditSubtotalFormatted();
+
+  const discountAmount = useVendorCreditDiscountAmount();
+  const adjustmentAmount = useVendorCreditAdjustmentAmountFormatted();
 
   return (
     <VendorCreditNoteTotalLines
@@ -20,12 +29,16 @@ export function VendorCreditNoteFormFooterRight() {
     >
       <TotalLine
         title={<T id={'vendor_credit_form.label.subtotal'} />}
-        value={formattedSubtotal}
-        borderStyle={TotalLineBorderStyle.None}
+        value={subtotalFormatted}
       />
+      <DiscountTotalLine
+        currencyCode={currency_code}
+        discountAmount={discountAmount}
+      />
+      <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
       <TotalLine
         title={<T id={'vendor_credit_form.label.total'} />}
-        value={formattedTotal}
+        value={totalFormatted}
         textStyle={TotalLineTextStyle.Bold}
       />
     </VendorCreditNoteTotalLines>

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

@@ -11,6 +11,7 @@ import {
   transactionNumber,
   orderingLinesIndexes,
   formattedAmount,
+  toSafeNumber,
 } from '@/utils';
 import {
   updateItemsEntriesTotal,
@@ -235,6 +236,19 @@ export const useVendorCreditDiscountAmount = () => {
   return toSafeNumber(values.discount);
 };
 
+/**
+ * Retrieves the vendor credit discount amount formatted.
+ * @returns {string}
+ */
+export const useVendorCreditDiscountAmountFormatted = () => {
+  const discountAmount = useVendorCreditDiscountAmount();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(discountAmount, currencyCode);
+};
+
 /**
  * Retrieves the vendor credit adjustment amount.
  * @returns {number}
@@ -245,6 +259,19 @@ export const useVendorCreditAdjustment = () => {
   return toSafeNumber(values.adjustment);
 };
 
+/**
+ * Retrieves the vendor credit adjustment amount formatted.
+ * @returns {string}
+ */
+export const useVendorCreditAdjustmentAmountFormatted = () => {
+  const adjustmentAmount = useVendorCreditAdjustment();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(adjustmentAmount, currencyCode);
+};
+
 /**
  * Retrieves the vendor credit total.
  * @returns {number}
@@ -258,12 +285,14 @@ export const useVendorCreditTotal = () => {
 };
 
 /**
- * Retrieves the vendor credit formatted total.
+ * Retrieves the vendor credit total formatted.
  * @returns {string}
  */
-export const useVendorCreditFormattedTotal = () => {
+export const useVendorCreditTotalFormatted = () => {
   const total = useVendorCreditTotal();
-  const currencyCode = useCurrentOrganizationCurrencyCode();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
 
   return formattedAmount(total, currencyCode);
 };
@@ -279,6 +308,19 @@ export const useVendorCreditFormattedSubtotal = () => {
   return formattedAmount(subtotal, currencyCode);
 };
 
+/**
+ * Retrieves the vendor credit formatted subtotal.
+ * @returns {string}
+ */
+export const useVendorCreditSubtotalFormatted = () => {
+  const subtotal = useVendorCreditSubtotal();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(subtotal, currencyCode);
+};
+
 /**
  * Detarmines whether the vendor note has foreign customer.
  * @returns {boolean}

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

@@ -1,58 +1,45 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import {
   T,
   TotalLines,
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-  FInputGroup,
-  FFormGroup,
-  FSelect,
 } from '@/components';
 import {
+  useCreditNoteAdjustmentFormatted,
+  useCreditNoteDiscountAmountFormatted,
   useCreditNoteSubtotalFormatted,
   useCreditNoteTotalFormatted,
 } from './utils';
+import { DiscountTotalLine } from '../../Invoices/InvoiceForm/DiscountTotalLine';
+import { AdjustmentTotalLine } from '../../Invoices/InvoiceForm/AdjustmentTotalLine';
 
 export function CreditNoteFormFooterRight() {
+  const {
+    values: { currency_code },
+  } = useFormikContext();
+
   const subtotalFormatted = useCreditNoteSubtotalFormatted();
   const totalFormatted = useCreditNoteTotalFormatted();
+  const discountAmount = useCreditNoteDiscountAmountFormatted();
+  const adjustmentAmount = useCreditNoteAdjustmentFormatted();
 
   return (
     <CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
         title={<T id={'credit_note.label_subtotal'} />}
         value={subtotalFormatted}
-        borderStyle={TotalLineBorderStyle.None}
+        borderStyle={TotalLineBorderStyle.BorderBottom}
       />
-      <FFormGroup name={'discount'} label={'Discount'} inline>
-        <FInputGroup
-          name={'discount'}
-          rightElement={
-            <FSelect
-              name={'discount_type'}
-              items={[
-                { text: 'USD', value: 'amount' },
-                { text: '%', value: 'percentage' },
-              ]}
-              input={({ text }) => (
-                <Button small minimal>
-                  {text}
-                </Button>
-              )}
-              filterable={false}
-            />
-          }
-        />
-      </FFormGroup>
-
-      <FFormGroup name={'adjustment'} label={'Adjustment'} inline>
-        <FInputGroup name={'adjustment'} />
-      </FFormGroup>
-
+      <DiscountTotalLine
+        currencyCode={currency_code}
+        discountAmount={discountAmount}
+      />
+      <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
       <TotalLine
         title={<T id={'credit_note.label_total'} />}
         value={totalFormatted}

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

@@ -196,9 +196,11 @@ export const useCreditNoteSubtotal = () => {
  */
 export const useCreditNoteSubtotalFormatted = () => {
   const subtotal = useCreditNoteSubtotal();
-  const { currency_code: currencyCode } = useFormikContext();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
 
-  return formattedAmount(subtotal, currencyCode, { money: false });
+  return formattedAmount(subtotal, currencyCode, { money: true });
 };
 
 /**
@@ -215,6 +217,19 @@ export const useCreditNoteDiscountAmount = () => {
     : discount;
 };
 
+/**
+ * Retrieves the credit note discount amount formatted.
+ * @returns {string}
+ */
+export const useCreditNoteDiscountAmountFormatted = () => {
+  const discountAmount = useCreditNoteDiscountAmount();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(discountAmount, currencyCode, { money: true });
+};
+
 /**
  * Retrieves the credit note adjustment amount.
  * @returns {number}
@@ -225,6 +240,19 @@ export const useCreditNoteAdjustmentAmount = () => {
   return toSafeNumber(values.adjustment);
 };
 
+/**
+ * Retrieves the credit note adjustment amount formatted.
+ * @returns {string}
+ */
+export const useCreditNoteAdjustmentFormatted = () => {
+  const adjustmentAmount = useCreditNoteAdjustmentAmount();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(adjustmentAmount, currencyCode, { money: true });
+};
+
 /**
  * Retrieves the credit note total.
  * @returns {number}
@@ -243,9 +271,11 @@ export const useCreditNoteTotal = () => {
  */
 export const useCreditNoteTotalFormatted = () => {
   const total = useCreditNoteTotal();
-  const { currency_code: currencyCode } = useFormikContext();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
 
-  return formattedAmount(total, currencyCode);
+  return formattedAmount(total, currencyCode, { money: true });
 };
 
 /**

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

@@ -177,7 +177,7 @@ function EstimateForm({
         </PageForm>
 
         {/*------- Dialogs -------*/}
-        <EstimateFormDialogs />
+        {/* <EstimateFormDialogs /> */}
 
         {/*------- Effects -------*/}
         <EstimateIncrementSyncSettingsToForm />

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

@@ -1,55 +1,35 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import { useFormikContext } from 'formik';
+import { T, TotalLines, TotalLine, TotalLineTextStyle } from '@/components';
 import {
-  T,
-  TotalLines,
-  TotalLine,
-  TotalLineBorderStyle,
-  TotalLineTextStyle,
-  FInputGroup,
-  FFormGroup,
-  FSelect,
-} from '@/components';
-import { useEstimateTotals } from './utils';
-import { Button } from '@blueprintjs/core';
+  useEstimateAdjustmentFormatted,
+  useEstimateDiscountFormatted,
+  useEstimateTotals,
+} from './utils';
+import { AdjustmentTotalLine } from '../../Invoices/InvoiceForm/AdjustmentTotalLine';
+import { DiscountTotalLine } from '../../Invoices/InvoiceForm/DiscountTotalLine';
 
 export function EstimateFormFooterRight() {
   const { formattedSubtotal, formattedTotal } = useEstimateTotals();
+  const {
+    values: { currency_code },
+  } = useFormikContext();
+  const discountAmount = useEstimateDiscountFormatted();
+  const adjustmentAmount = useEstimateAdjustmentFormatted();
 
   return (
     <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
         title={<T id={'estimate_form.label.subtotal'} />}
         value={formattedSubtotal}
-        borderStyle={TotalLineBorderStyle.None}
       />
-
-      <FFormGroup name={'discount'} label={'Discount'} inline>
-        <FInputGroup
-          name={'discount'}
-          rightElement={
-            <FSelect
-              name={'discount_type'}
-              items={[
-                { text: 'USD', value: 'amount' },
-                { text: '%', value: 'percentage' },
-              ]}
-              input={({ text }) => (
-                <Button small minimal>
-                  {text}
-                </Button>
-              )}
-              filterable={false}
-            />
-          }
-        />
-      </FFormGroup>
-
-      <FFormGroup name={'adjustment'} label={'Adjustment'} inline>
-        <FInputGroup name={'adjustment'} />
-      </FFormGroup>
-
+      <DiscountTotalLine
+        currencyCode={currency_code}
+        discountAmount={discountAmount}
+      />
+      <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
       <TotalLine
         title={<T id={'estimate_form.label.total'} />}
         value={formattedTotal}

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

@@ -64,7 +64,7 @@ export const defaultEstimate = {
   attachments: [],
   pdf_template_id: '',
   discount: '',
-  discount_type: 'amount'
+  discount_type: 'amount',
 };
 
 const ERRORS = {
@@ -238,6 +238,107 @@ export const useEstimateTotals = () => {
   };
 };
 
+/**
+ * Retrieves the estimate subtotal.
+ * @returns {number}
+ */
+export const useEstimateSubtotal = () => {
+  const {
+    values: { entries },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
+
+  return total;
+};
+
+/**
+ * Retrieves the estimate subtotal formatted.
+ * @returns {string}
+ */
+export const useEstimateSubtotalFormatted = () => {
+  const subtotal = useEstimateSubtotal();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(subtotal, currencyCode);
+};
+
+/**
+ * Retrieves the estimate discount amount.
+ * @returns {number}
+ */
+export const useEstimateDiscount = () => {
+  const { values } = useFormikContext();
+  const discountAmount = parseFloat(values.discount);
+
+  return discountAmount;
+};
+
+/**
+ * Retrieves the estimate discount formatted.
+ * @returns {string}
+ */
+export const useEstimateDiscountFormatted = () => {
+  const discount = useEstimateDiscount();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(discount, currencyCode);
+};
+
+/**
+ * Retrieves the estimate adjustment amount.
+ * @returns {number}
+ */
+export const useEstimateAdjustment = () => {
+  const { values } = useFormikContext();
+  const adjustmentAmount = parseFloat(values.adjustment);
+
+  return adjustmentAmount;
+};
+
+/**
+ * Retrieves the estimate adjustment formatted.
+ * @returns {string}
+ */
+export const useEstimateAdjustmentFormatted = () => {
+  const adjustment = useEstimateAdjustment();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(adjustment, currencyCode);
+};
+
+/**
+ * Retrieves the estimate total.
+ * @returns {number}
+ */
+export const useEstimateTotal = () => {
+  const subtotal = useEstimateSubtotal();
+  const discount = useEstimateDiscount();
+  const adjustment = useEstimateAdjustment();
+
+  return subtotal - discount - adjustment;
+};
+
+/**
+ * Retrieves the estimate total formatted.
+ * @returns {string}
+ */
+export const useEstimateTotalFormatted = () => {
+  const total = useEstimateTotal();
+  const {
+    values: { currency_code: currencyCode },
+  } = useFormikContext();
+
+  return formattedAmount(total, currencyCode);
+};
+
 /**
  * Detarmines whether the estimate has foreign customer.
  * @returns {boolean}

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

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import { css } from '@emotion/css';
+import { x } from '@xstyled/emotion';
+import clsx from 'classnames';
+import {
+  FFormGroup,
+  FInputGroup,
+  TotalLinePrimitive,
+} from '@/components';
+
+const inputGroupCss = css`
+  & .bp4-input {
+    max-width: 110px;
+    color: rgb(17, 17, 17);
+    padding-left: 8px;
+  }
+`;
+const formGroupCss = css`
+  margin-bottom: 0;
+`;
+
+interface AdjustmentTotalLineProps {
+  adjustmentAmount: number;
+}
+
+export function AdjustmentTotalLine({
+  adjustmentAmount,
+}: AdjustmentTotalLineProps) {
+  return (
+    <TotalLinePrimitive>
+      <x.div
+        display={'table-cell'}
+        padding={'8px'}
+        borderBottom={'1px solid rgb(210, 221, 226)'}
+      >
+        <x.div
+          display={'flex'}
+          alignItems={'center'}
+          justifyContent={'space-between'}
+        >
+          <x.span>Adjustment</x.span>
+          <FFormGroup
+            name={'adjustment'}
+            label={''}
+            inline
+            fastField
+            className={formGroupCss}
+          >
+            <FInputGroup
+              name={'adjustment'}
+              fastField
+              className={clsx(
+                inputGroupCss,
+                css`
+                  & .bp4-input {
+                    border-style: dashed;
+                  }
+                `,
+              )}
+            />
+          </FFormGroup>
+        </x.div>
+      </x.div>
+
+      <x.div
+        display={'table-cell'}
+        borderBottom={'1px solid rgb(210, 221, 226)'}
+        textAlign={'right'}
+        padding={'8px'}
+      >
+        {adjustmentAmount}
+      </x.div>
+    </TotalLinePrimitive>
+  );
+}

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

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import { css } from '@emotion/css';
+import { x } from '@xstyled/emotion';
+import {
+  FFormGroup,
+  FInputGroup,
+  FSelect,
+  TotalLinePrimitive,
+} from '@/components';
+import { Button } from '@blueprintjs/core';
+
+const inputGroupCss = css`
+  & .bp4-input {
+    max-width: 110px;
+    color: rgb(17, 17, 17);
+    padding-left: 8px;
+  }
+`;
+const formGroupCss = css`
+  margin-bottom: 0;
+`;
+
+interface DiscountTotalLineProps {
+  currencyCode: string;
+  discountAmount: number;
+}
+
+export function DiscountTotalLine({
+  currencyCode,
+  discountAmount,
+}: DiscountTotalLineProps) {
+  const discountButtonInput = ({ text }) => (
+    <Button
+      small
+      minimal
+      className={css`
+        &.bp4-small {
+          font-size: 12px;
+        }
+      `}
+    >
+      {text}
+    </Button>
+  );
+
+  const discountTypeItems = [
+    { text: currencyCode, value: 'amount', label: 'Fixed Amount' },
+    { text: '%', value: 'percentage', label: 'Percentage' },
+  ];
+
+  return (
+    <TotalLinePrimitive>
+      <TotalLinePrimitive.Title borderBottom={'1px solid rgb(210, 221, 226)'}>
+        <x.div
+          display={'flex'}
+          alignItems={'center'}
+          justifyContent={'space-between'}
+        >
+          <x.span pr={2}>Discount</x.span>
+          <FFormGroup
+            name={'discount'}
+            className={formGroupCss}
+            inline
+            fastField
+          >
+            <FInputGroup
+              name={'discount'}
+              rightElement={
+                <FSelect
+                  name={'discount_type'}
+                  items={discountTypeItems}
+                  input={discountButtonInput}
+                  filterable={false}
+                />
+              }
+              fastField
+              className={inputGroupCss}
+            />
+          </FFormGroup>
+        </x.div>
+      </TotalLinePrimitive.Title>
+
+      <TotalLinePrimitive.Amount
+        textAlign={'right'}
+        borderBottom={'1px solid rgb(210, 221, 226)'}
+      >
+        {discountAmount}
+      </TotalLinePrimitive.Amount>
+    </TotalLinePrimitive>
+  );
+}

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

@@ -2,18 +2,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useFormikContext } from 'formik';
-
 import {
   T,
   TotalLines,
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-  FFormGroup,
-  FInputGroup,
-  FSelect,
 } from '@/components';
-import { useInvoiceAggregatedTaxRates } from './utils';
+import {
+  useInvoiceAdjustmentAmountFormatted,
+  useInvoiceAggregatedTaxRates,
+  useInvoiceDiscountAmountFormatted,
+} from './utils';
 import { TaxType } from '@/interfaces/TaxRates';
 import {
   InvoiceDueAmountFormatted,
@@ -21,7 +21,8 @@ import {
   InvoiceSubTotalFormatted,
   InvoiceTotalFormatted,
 } from './components';
-import { Button } from '@blueprintjs/core';
+import { AdjustmentTotalLine } from './AdjustmentTotalLine';
+import { DiscountTotalLine } from './DiscountTotalLine';
 
 export function InvoiceFormFooterRight() {
   const {
@@ -29,6 +30,8 @@ export function InvoiceFormFooterRight() {
   } = useFormikContext();
 
   const taxEntries = useInvoiceAggregatedTaxRates();
+  const adjustmentAmount = useInvoiceAdjustmentAmountFormatted();
+  const discountAmount = useInvoiceDiscountAmountFormatted();
 
   return (
     <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
@@ -42,30 +45,11 @@ export function InvoiceFormFooterRight() {
         }
         value={<InvoiceSubTotalFormatted />}
       />
-      <FFormGroup name={'discount'} label={'Discount'} inline>
-        <FInputGroup
-          name={'discount'}
-          rightElement={
-            <FSelect
-              name={'discount_type'}
-              items={[
-                { text: 'USD', value: 'amount' },
-                { text: '%', value: 'percentage' },
-              ]}
-              input={({ text }) => (
-                <Button small minimal>
-                  {text}
-                </Button>
-              )}
-              filterable={false}
-            />
-          }
-        />
-      </FFormGroup>
-
-      <FFormGroup name={'adjustment'} label={'Adjustment'} inline>
-        <FInputGroup name={'adjustment'} />
-      </FFormGroup>
+      <DiscountTotalLine
+        currencyCode={currency_code}
+        discountAmount={discountAmount}
+      />
+      <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
 
       {taxEntries.map((tax, index) => (
         <TotalLine

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

@@ -11,6 +11,7 @@ import {
   transformToForm,
   repeatValue,
   defaultFastFieldShouldUpdate,
+  formattedAmount,
 } from '@/utils';
 import { ERROR } from '@/constants/errors';
 import { AppToaster } from '@/components';
@@ -318,6 +319,43 @@ export const useInvoiceDiscountAmount = () => {
     : discount;
 };
 
+/**
+ * Retrieves the invoice discount amount formatted.
+ * @returns {string}
+ */
+export const useInvoiceDiscountAmountFormatted = () => {
+  const discountAmount = useInvoiceDiscountAmount();
+  const {
+    values: { currency_code },
+  } = useFormikContext();
+
+  return formattedAmount(discountAmount, currency_code);
+};
+
+/**
+ * Retrieves the invoice adjustment amount.
+ * @returns {number}
+ */
+export const useInvoiceAdjustmentAmount = () => {
+  const { values } = useFormikContext();
+  const adjustment = parseFloat(values.adjustment);
+
+  return adjustment;
+};
+
+/**
+ * Retrieves the invoice adjustment amount formatted.
+ * @returns {string}
+ */
+export const useInvoiceAdjustmentAmountFormatted = () => {
+  const adjustmentAmount = useInvoiceAdjustmentAmount();
+  const {
+    values: { currency_code },
+  } = useFormikContext();
+
+  return formattedAmount(adjustmentAmount, currency_code);
+};
+
 /**
  * Detarmines whether the invoice has foreign customer.
  * @returns {boolean}

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

@@ -129,6 +129,7 @@ export default function ReceiptFormFloatingActions() {
               />
             </Popover>
           </ButtonGroup>
+
           {/* ----------- Save As Draft ----------- */}
           <ButtonGroup>
             <Button

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

@@ -1,19 +1,21 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
-
+import { useFormikContext } from 'formik';
 import {
   T,
   TotalLines,
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-  FInputGroup,
-  FFormGroup,
-  FSelect,
 } from '@/components';
-import { useReceiptTotals } from './utils';
-import { Button } from '@blueprintjs/core';
+import {
+  useReceiptAdjustmentFormatted,
+  useReceiptDiscountAmountFormatted,
+  useReceiptTotals,
+} from './utils';
+import { DiscountTotalLine } from '../../Invoices/InvoiceForm/DiscountTotalLine';
+import { AdjustmentTotalLine } from '../../Invoices/InvoiceForm/AdjustmentTotalLine';
 
 export function ReceiptFormFooterRight() {
   const {
@@ -23,38 +25,24 @@ export function ReceiptFormFooterRight() {
     formattedPaymentTotal,
   } = useReceiptTotals();
 
+  const {
+    values: { currency_code },
+  } = useFormikContext();
+
+  const discountAmount = useReceiptDiscountAmountFormatted();
+  const adjustmentAmount = useReceiptAdjustmentFormatted();
+
   return (
     <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
         title={<T id={'receipt_form.label.subtotal'} />}
         value={formattedSubtotal}
-        borderStyle={TotalLineBorderStyle.None}
       />
-      <FFormGroup name={'discount'} label={'Discount'} inline>
-        <FInputGroup
-          name={'discount'}
-          rightElement={
-            <FSelect
-              name={'discount_type'}
-              items={[
-                { text: 'USD', value: 'amount' },
-                { text: '%', value: 'percentage' },
-              ]}
-              input={({ text }) => (
-                <Button small minimal>
-                  {text}
-                </Button>
-              )}
-              filterable={false}
-            />
-          }
-        />
-      </FFormGroup>
-
-      <FFormGroup name={'adjustment'} label={'Adjustment'} inline>
-        <FInputGroup name={'adjustment'} />
-      </FFormGroup>
-
+      <DiscountTotalLine
+        currencyCode={currency_code}
+        discountAmount={discountAmount}
+      />
+      <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
       <TotalLine
         title={<T id={'receipt_form.label.total'} />}
         value={formattedTotal}

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

@@ -10,6 +10,7 @@ import {
   repeatValue,
   transformToForm,
   formattedAmount,
+  toSafeNumber,
 } from '@/utils';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import {
@@ -63,6 +64,9 @@ export const defaultReceipt = {
   entries: [...repeatValue(defaultReceiptEntry, MIN_LINES_NUMBER)],
   attachments: [],
   pdf_template_id: '',
+  discount: '',
+  discount_type: 'amount',
+  adjustment: '',
 };
 
 const ERRORS = {
@@ -249,6 +253,76 @@ export const useReceiptTotals = () => {
   };
 };
 
+/**
+ * Retrieves the receipt subtotal.
+ * @returns {number}
+ */
+export const useReceiptSubtotal = () => {
+  const {
+    values: { entries },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const subtotal = React.useMemo(() => getEntriesTotal(entries), [entries]);
+
+  return subtotal;
+};
+
+/**
+ * Retrieves the formatted discount amount.
+ * @returns {string}
+ */
+export const useReceiptDiscountAmountFormatted = () => {
+  const { values } = useFormikContext();
+
+  return formattedAmount(values.discount, values.currency_code);
+};
+
+/**
+ * Retrieves the receipt adjustment amount.
+ * @returns {number}
+ */
+export const useReceiptAdjustmentAmount = () => {
+  const { values } = useFormikContext();
+  const adjustment = toSafeNumber(values.adjustment);
+
+  return adjustment;
+};
+
+/**
+ * Retrieves the formatted adjustment amount.
+ * @returns {string}
+ */
+export const useReceiptAdjustmentFormatted = () => {
+  const { values } = useFormikContext();
+  const adjustment = useReceiptAdjustmentAmount();
+
+  return formattedAmount(adjustment, values.currency_code);
+};
+
+/**
+ * Retrieves the receipt total.
+ * @returns {number}
+ */
+export const useReceiptTotal = () => {
+  const subtotal = useReceiptSubtotal();
+  const adjustmentAmount = useReceiptAdjustmentAmount();
+  const discountAmount = useReceiptDiscountAmount();
+
+  return subtotal - discountAmount + adjustmentAmount;
+};
+
+/**
+ * Retrieves the formatted receipt total.
+ * @returns {string}
+ */
+export const useReceiptTotalFormatted = () => {
+  const total = useReceiptTotal();
+  const { values } = useFormikContext();
+
+  return formattedAmount(total, values.currency_code);
+};
+
 /**
  * Detarmines whether the receipt has foreign customer.
  * @returns {boolean}