feat: link discount to mail receipts

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

@@ -20,6 +20,16 @@ export class GetSaleEstimateMailStateTransformer extends SaleEstimateTransfromer
       'subtotal',
       'subtotalFormatted',
 
+      'discountAmount',
+      'discountAmountFormatted',
+      'discountPercentage',
+      'discountPercentageFormatted',
+      'discountLabel',
+
+      'adjustment',
+      'adjustmentFormatted',
+      'adjustmentLabel',
+
       'estimateNumber',
       'entries',
 
@@ -97,6 +107,17 @@ export class GetSaleEstimateMailStateTransformer extends SaleEstimateTransfromer
     return estimate.amount;
   }
 
+  /**
+   * Retrieves the discount label of the estimate.
+   * @param estimate
+   * @returns {string}
+   */
+  protected discountLabel(estimate) {
+    return estimate.discountType === 'percentage'
+      ? `Discount [${estimate.discountPercentageFormatted}]`
+      : 'Discount';
+  }
+
   /**
    * Retrieves the formatted total of the estimate.
    * @param estimate

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

@@ -28,6 +28,15 @@ export class GetSaleInvoiceMailStateTransformer extends SaleInvoiceTransformer {
       'total',
       'totalFormatted',
 
+      'discountAmount',
+      'discountAmountFormatted',
+      'discountPercentage',
+      'discountPercentageFormatted',
+      'discountLabel',
+
+      'adjustment',
+      'adjustmentFormatted',
+
       'subtotal',
       'subtotalFormatted',
 
@@ -76,6 +85,17 @@ export class GetSaleInvoiceMailStateTransformer extends SaleInvoiceTransformer {
     return invoice.pdfTemplate?.attributes?.primaryColor;
   };
 
+  /**
+   * Retrieves the discount label of the estimate.
+   * @param estimate
+   * @returns {string}
+   */
+  protected discountLabel(invoice) {
+    return invoice.discountType === 'percentage'
+      ? `Discount [${invoice.discountPercentageFormatted}]`
+      : 'Discount';
+  }
+
   /**
    *
    * @param invoice

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

@@ -1,7 +1,9 @@
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { ItemEntryTransformer } from '../Invoices/ItemEntryTransformer';
+import { DiscountType } from '@/interfaces';
+import { SaleReceiptTransformer } from './SaleReceiptTransformer';
 
-export class GetSaleReceiptMailStateTransformer extends Transformer {
+export class GetSaleReceiptMailStateTransformer extends SaleReceiptTransformer {
   /**
    * Exclude these attributes from user object.
    * @returns {Array}
@@ -20,14 +22,28 @@ export class GetSaleReceiptMailStateTransformer extends Transformer {
       'companyLogoUri',
       'primaryColor',
       'customerName',
+
       'total',
       'totalFormatted',
+
+      'discountAmount',
+      'discountAmountFormatted',
+      'discountPercentage',
+      'discountPercentageFormatted',
+      'discountLabel',
+
+      'adjustment',
+      'adjustmentFormatted',
+
       'subtotal',
       'subtotalFormatted',
+
       'receiptDate',
       'receiptDateFormatted',
+
       'closedAtDate',
       'closedAtDateFormatted',
+
       'receiptNumber',
       'entries',
     ];
@@ -86,7 +102,18 @@ export class GetSaleReceiptMailStateTransformer extends Transformer {
   };
 
   /**
-   *
+   * Retrieves the discount label of the estimate.
+   * @param estimate
+   * @returns {string}
+   */
+  protected discountLabel(receipt) {
+    return receipt.discountType === DiscountType.Percentage
+      ? `Discount [${receipt.discountPercentageFormatted}]`
+      : 'Discount';
+  }
+
+  /**
+   * Retrieves the subtotal of the receipt.
    * @param receipt
    * @returns
    */
@@ -95,7 +122,7 @@ export class GetSaleReceiptMailStateTransformer extends Transformer {
   };
 
   /**
-   *
+   * Retrieves the formatted subtotal of the receipt.
    * @param receipt
    * @returns
    */
@@ -106,7 +133,7 @@ export class GetSaleReceiptMailStateTransformer extends Transformer {
   };
 
   /**
-   *
+   * Retrieves the receipt date.
    * @param receipt
    * @returns
    */
@@ -115,7 +142,7 @@ export class GetSaleReceiptMailStateTransformer extends Transformer {
   };
 
   /**
-   *
+   * Retrieves the formatted receipt date.
    * @param {ISaleReceipt} invoice
    * @returns {string}
    */

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailReceipt.tsx

@@ -1,4 +1,5 @@
 import { x } from '@xstyled/emotion';
+import { isEmpty } from 'lodash';
 import { Group, Stack } from '@/components';
 import {
   SendMailReceipt,
@@ -14,6 +15,14 @@ export interface EstimateSendMailReceiptProps extends SendMailReceiptProps {
   estimateNumberLabel?: string;
   estimateNumber: string;
 
+  // # Discount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjsutmentLabel?: string;
+
   // # Total.
   total: string;
   totalLabel?: string;
@@ -47,10 +56,6 @@ export function EstimateSendMailReceipt({
   estimateNumberLabel = 'Estimate #',
   estimateNumber,
 
-  // # Total.
-  total,
-  totalLabel = 'Total',
-
   // # Expiration date.
   expirationDateLabel = 'Expiration Date',
   expirationDate,
@@ -65,6 +70,18 @@ export function EstimateSendMailReceipt({
   subtotal,
   subtotalLabel = 'Subtotal',
 
+  // # Discount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjsutmentLabel = 'Adjustment',
+
+  // # Total.
+  total,
+  totalLabel = 'Total',
+
   // # View estimate button
   showViewEstimateButton = true,
   viewEstimateButtonLabel = 'View Estimate',
@@ -142,6 +159,36 @@ export function EstimateSendMailReceipt({
           </x.span>
         </Group>
 
+        {!isEmpty(discount) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{discountLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {discount}
+            </x.span>
+          </Group>
+        )}
+
+        {!isEmpty(adjustment) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{adjsutmentLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {adjustment}
+            </x.span>
+          </Group>
+        )}
+
         <Group
           h={'40px'}
           position={'apart'}

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/withEstimateMailReceiptPreviewProps.tsx

@@ -35,6 +35,9 @@ export const withEstimateMailReceiptPreviewProps = <
       expirationDate: estimateMailState?.expirationDateFormatted,
       estimateNumber: estimateMailState?.estimateNumber,
       estimateDate: estimateMailState?.estimateDateFormatted,
+      subtotal: estimateMailState?.subtotalFormatted,
+      discount: estimateMailState?.discountFormatted,
+      adjustment: estimateMailState?.adjustmentFormatted,
       items,
       message,
     };

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { x } from '@xstyled/emotion';
 import { lighten } from 'polished';
 import { Group, Stack, StackProps } from '@/components';
+import { isEmpty } from 'lodash';
 
 export interface InvoiceMailReceiptProps extends StackProps {
   // # Company
@@ -16,6 +17,18 @@ export interface InvoiceMailReceiptProps extends StackProps {
   dueDate: string;
   dueDateLabel?: string;
 
+  // # Subtotal
+  subtotal: string;
+  subtotalLabel?: string;
+
+  // # Discount amount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
   // # Due amount
   dueAmountLabel?: string;
   dueAmount: string;
@@ -52,14 +65,26 @@ export function InvoiceMailReceipt({
   dueDate,
   dueDateLabel = 'Due',
 
-  // # Due amount
+  // # Subtotal
-  dueAmountLabel = 'Due Amount',
+  subtotal,
-  dueAmount,
+  subtotalLabel = 'Subtotal',
+
+  // # Discount amount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',
 
   // # Total
   total,
   totalLabel = 'Total',
 
+  // # Due amount
+  dueAmountLabel = 'Due Amount',
+  dueAmount,
+
   // # Invoice number
   invoiceNumber,
   invoiceNumberLabel = 'Invoice #',
@@ -166,6 +191,53 @@ export function InvoiceMailReceipt({
           </Group>
         ))}
 
+        {/*---- Subtotal ----*/}
+        <Group
+          h={'40px'}
+          position={'apart'}
+          borderBottomStyle="solid"
+          borderBottomWidth={'1px'}
+          borderColor={'#000'}
+        >
+          <x.span fontWeight={500}>{subtotalLabel}</x.span>
+          <x.span fontWeight={600} fontSize={15}>
+            {subtotal}
+          </x.span>
+        </Group>
+
+        {/*---- Discount ----*/}
+        {!isEmpty(discount) && (
+          <Group
+            h="40px"
+            position="apart"
+            borderBottomStyle="solid"
+            borderBottomWidth="1px"
+            borderColor="#000"
+          >
+            <x.span fontWeight={500}>{discountLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {discount}
+            </x.span>
+          </Group>
+        )}
+
+        {/*---- Adjustment ----*/}
+        {!isEmpty(adjustment) && (
+          <Group
+            h="40px"
+            position="apart"
+            borderBottomStyle="solid"
+            borderBottomWidth="1px"
+            borderColor="#000"
+          >
+            <x.span fontWeight={500}>{adjustmentLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {adjustment}
+            </x.span>
+          </Group>
+        )}
+
+        {/*---- Total ----*/}
         <Group
           h={'40px'}
           position={'apart'}
@@ -179,6 +251,7 @@ export function InvoiceMailReceipt({
           </x.span>
         </Group>
 
+        {/*---- Due amount ----*/}
         <Group
           h={'40px'}
           position={'apart'}

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx

@@ -29,6 +29,7 @@ export function InvoiceMailReceiptPreview(
     total: '$1,000.00',
     invoiceNumber: 'INV-0001',
     dueDate: '2 Oct 2024',
+    subtotal: '$1,000.00',
     dueAmount: '$1,000.00',
     items: [{ label: 'Web development', total: '$1000.00', quantity: 1 }],
     companyLogoUri: ' ',

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceMailReceiptPreviewConnected.tsx

@@ -56,9 +56,12 @@ const withInvoiceMailReceiptPreviewProps = <
       companyLogoUri: invoiceMailState?.companyLogoUri,
       primaryColor: invoiceMailState?.primaryColor,
       total: invoiceMailState?.totalFormatted,
+      subtotal: invoiceMailState?.subtotalFormatted,
       dueDate: invoiceMailState?.dueDateFormatted,
       dueAmount: invoiceMailState?.dueAmountFormatted,
       invoiceNumber: invoiceMailState?.invoiceNo,
+      discount: invoiceMailState?.discountAmountFormatted,
+      adjustment: invoiceMailState?.adjustmentFormatted,
       items,
       message,
     };

packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx

@@ -2,7 +2,10 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
-import { GetSaleReceiptMailStateResponse, useSaleInvoiceMailState, useSaleReceiptMailState } from '@/hooks/query';
+import {
+  GetSaleReceiptMailStateResponse,
+  useSaleReceiptMailState,
+} from '@/hooks/query';
 
 interface ReceiptSendMailBootValues {
   receiptId: number;

packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailReceipt.tsx

@@ -4,6 +4,7 @@ import {
   SendMailReceipt,
   SendMailReceiptProps,
 } from '../../Estimates/SendMailViewDrawer/SendMailViewReceiptPreview';
+import { isEmpty } from 'lodash';
 
 export interface ReceiptSendMailReceiptProps extends SendMailReceiptProps {
   // # Company name.
@@ -14,10 +15,6 @@ export interface ReceiptSendMailReceiptProps extends SendMailReceiptProps {
   receiptNumberLabel?: string;
   receiptNumber: string;
 
-  // # Total.
-  total: string;
-  totalLabel?: string;
-
   // # Message
   message: string;
 
@@ -27,6 +24,18 @@ export interface ReceiptSendMailReceiptProps extends SendMailReceiptProps {
   // # Subtotal
   subtotal: string;
   subtotalLabel?: string;
+
+  // # Discount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
+  // # Total.
+  total: string;
+  totalLabel?: string;
 }
 
 export function ReceiptSendMailReceipt({
@@ -42,6 +51,14 @@ export function ReceiptSendMailReceipt({
   total,
   totalLabel = 'Total',
 
+  // # Discount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',
+
   // # Message
   message,
 
@@ -49,7 +66,6 @@ export function ReceiptSendMailReceipt({
   items,
   subtotal,
   subtotalLabel = 'Subtotal',
-
   ...rest
 }: ReceiptSendMailReceiptProps) {
   return (
@@ -109,6 +125,36 @@ export function ReceiptSendMailReceipt({
           </x.span>
         </Group>
 
+        {!isEmpty(discount) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{discountLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {discount}
+            </x.span>
+          </Group>
+        )}
+
+        {!isEmpty(adjustment) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{adjustmentLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {adjustment}
+            </x.span>
+          </Group>
+        )}
+
         <Group
           h={'40px'}
           position={'apart'}

packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx

@@ -37,6 +37,8 @@ export const withReceiptMailReceiptPreviewProps = <
       total: receiptMailState?.totalFormatted,
       subtotal: receiptMailState?.subtotalFormatted,
       receiptNumber: receiptMailState?.receiptNumber,
+      discount: receiptMailState?.discountAmountFormatted,
+      adjustment: receiptMailState?.adjustmentFormatted,
       items,
       message,
     };

packages/webapp/src/hooks/query/estimates.tsx

@@ -284,6 +284,15 @@ export interface SaleEstimateMailStateResponse {
   subtotal: number;
   subtotalFormatted: string;
 
+  discount: number;
+  discountFormatted: string;
+  discountLabel: string;
+  discountPercentage: number | null;
+  discountPercentageFormatted: string;
+
+  adjustment: number;
+  adjustmentFormatted: string;
+
   estimateNumber: string;
 
   formatArgs: {

packages/webapp/src/hooks/query/invoices.tsx

@@ -434,6 +434,15 @@ export interface GetSaleInvoiceDefaultOptionsResponse {
   subtotal: number;
   subtotalFormatted: string;
 
+  discountAmount: number;
+  discountAmountFormatted: string;
+  discountLabel: string;
+  discountPercentage: number;
+  discountPercentageFormatted: string;
+
+  adjustment: number;
+  adjustmentFormatted: string;
+
   total: number;
   totalFormatted: string;
 

packages/webapp/src/hooks/query/receipts.tsx

@@ -263,6 +263,18 @@ export interface GetSaleReceiptMailStateResponse {
   to: string[];
   toOptions: Array<{ mail: string; label: string; primary: boolean; }>;
 
+  // # Discount
+  discountAmount: number;
+  discountAmountFormatted: string;
+  discountLabel: string;
+  discountPercentage: number | null;
+  discountPercentageFormatted: string;
+
+  // # Adjustment
+  adjustment: number,
+  adjustmentFormatted: string,
+
+  // # Total
   total: number;
   totalFormatted: string;