feat: add discount and adjustment fields to email templates.

packages/server/src/interfaces/SaleEstimate.ts

@@ -26,6 +26,9 @@ export interface ISaleEstimate {
   branchId?: number;
   warehouseId?: number;
 
+  total?: number;
+  totalLocal?: number;
+
   discountAmount?: number;
   discountPercentage?: number | null;
 

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

@@ -25,6 +25,12 @@ export class GetEstimateMailTemplateAttributesTransformer extends Transformer {
       'subtotal',
       'subtotalLabel',
 
+      'discount',
+      'discountLabel',
+
+      'adjustment',
+      'adjustmentLabel',
+
       'dueAmount',
       'dueAmountLabel',
 
@@ -103,7 +109,7 @@ export class GetEstimateMailTemplateAttributesTransformer extends Transformer {
    * Estimate total.
    */
   public total(): string {
-    return this.options.estimate.formattedAmount;
+    return this.options.estimate.totalFormatted;
   }
 
   /**
@@ -114,11 +120,43 @@ export class GetEstimateMailTemplateAttributesTransformer extends Transformer {
     return 'Total';
   }
 
+  /**
+   * Estimate discount.
+   * @returns {string}
+   */
+  public discount(): string {
+    return this.options.estimate?.discountAmountFormatted;
+  }
+
+  /**
+   * Estimate discount label.
+   * @returns {string}
+   */
+  public discountLabel(): string {
+    return 'Discount';
+  }
+
+  /**
+   * Estimate adjustment.
+   * @returns {string}
+   */
+  public adjustment(): string {
+    return this.options.estimate?.adjustmentFormatted;
+  }
+
+  /**
+   * Estimate adjustment label.
+   * @returns {string}
+   */
+  public adjustmentLabel(): string {
+    return 'Adjustment';
+  }
+
   /**
    * Estimate subtotal.
    */
   public subtotal(): string {
-    return this.options.estimate.formattedAmount;
+    return this.options.estimate.formattedSubtotal;
   }
 
   /**

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

@@ -21,6 +21,8 @@ export class SaleEstimateTransfromer extends Transformer {
       'discountAmountFormatted',
       'discountPercentageFormatted',
       'adjustmentFormatted',
+      'totalFormatted',
+      'totalLocalFormatted',
       'formattedCreatedAt',
       'entries',
       'attachments',
@@ -134,6 +136,27 @@ export class SaleEstimateTransfromer extends Transformer {
     });
   };
 
+  /**
+   * Retrieves the formatted estimate total.
+   * @returns {string}
+   */
+  protected totalFormatted = (estimate: ISaleEstimate): string => {
+    return formatNumber(estimate.total, {
+      currencyCode: estimate.currencyCode,
+    });
+  };
+
+  /**
+   * Retrieves the formatted estimate total in local currency.
+   * @param estimate
+   * @returns {string}
+   */
+  protected totalLocalFormatted = (estimate: ISaleEstimate): string => {
+    return formatNumber(estimate.totalLocal, {
+      currencyCode: estimate.currencyCode,
+    });
+  };
+
   /**
    * Retrieves the entries of the sale estimate.
    * @param {ISaleEstimate} estimate

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

@@ -18,9 +18,6 @@ export class SaleEstimatesPdf {
   @Inject()
   private chromiumlyTenancy: ChromiumlyTenancy;
 
-  @Inject()
-  private templateInjectable: TemplateInjectable;
-
   @Inject()
   private getSaleEstimate: GetSaleEstimate;
 
@@ -62,6 +59,7 @@ export class SaleEstimatesPdf {
     // Retireves the sale estimate html.
     const htmlContent = await this.saleEstimateHtml(tenantId, saleEstimateId);
 
+    // Converts the html content to pdf.
     const content = await this.chromiumlyTenancy.convertHtmlContent(
       tenantId,
       htmlContent

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

@@ -23,6 +23,15 @@ export class GetInvoiceMailTemplateAttributesTransformer extends Transformer {
       'invoiceNumber',
       'invoiceNumberLabel',
 
+      'subtotal',
+      'subtotalLabel',
+
+      'discount',
+      'discountLabel',
+
+      'adjustment',
+      'adjustmentLabel',
+
       'total',
       'totalLabel',
 
@@ -76,6 +85,30 @@ export class GetInvoiceMailTemplateAttributesTransformer extends Transformer {
     return 'Invoice # {invoiceNumber}';
   }
 
+  public subtotal(): string {
+    return this.options.invoice?.subtotalFormatted;
+  }
+
+  public subtotalLabel(): string {
+    return 'Subtotal';
+  }
+
+  public discount(): string {
+    return this.options.invoice?.discountAmountFormatted;
+  }
+
+  public discountLabel(): string {
+    return 'Discount';
+  }
+
+  public adjustment(): string {
+    return this.options.invoice?.adjustmentFormatted;
+  }
+
+  public adjustmentLabel(): string {
+    return 'Adjustment';
+  }
+
   public total(): string {
     return this.options.invoice?.totalFormatted;
   }

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

@@ -20,6 +20,12 @@ export class GetSaleReceiptMailTemplateAttributesTransformer extends Transformer
       'total',
       'totalLabel',
 
+      'discount',
+      'discountLabel',
+
+      'adjustment',
+      'adjustmentLabel',
+
       'subtotal',
       'subtotalLabel',
 
@@ -98,7 +104,7 @@ export class GetSaleReceiptMailTemplateAttributesTransformer extends Transformer
    * Receipt total.
    */
   public total(): string {
-    return this.options.receipt.formattedAmount;
+    return this.options.receipt.totalFormatted;
   }
 
   /**
@@ -109,12 +115,44 @@ export class GetSaleReceiptMailTemplateAttributesTransformer extends Transformer
     return 'Total';
   }
 
+  /**
+   * Receipt discount.
+   * @returns {string}
+   */
+  public discount(): string {
+    return this.options.receipt?.discountAmountFormatted;
+  }
+
+  /**
+   * Receipt discount label.
+   * @returns {string}
+   */
+  public discountLabel(): string {
+    return 'Discount';
+  }
+
+  /**
+   * Receipt adjustment.
+   * @returns {string}
+   */
+  public adjustment(): string {
+    return this.options.receipt?.adjustmentFormatted;
+  }
+
+  /**
+   * Receipt adjustment label.
+   * @returns {string}
+   */
+  public adjustmentLabel(): string {
+    return 'Adjustment';
+  }
+
   /**
    * Receipt subtotal.
    * @returns {string}
    */
   public subtotal(): string {
-    return this.options.receipt.formattedSubtotal;
+    return this.options.receipt.subtotalFormatted;
   }
 
   /**

pnpm-lock.yaml

@@ -882,6 +882,12 @@ importers:
       '@react-email/components':
         specifier: 0.0.25
         version: 0.0.25(react-dom@18.3.1)(react@18.3.1)
+      '@types/lodash.isempty':
+        specifier: ^4.4.9
+        version: 4.4.9
+      lodash.isempty:
+        specifier: ^4.4.0
+        version: 4.4.0
       react:
         specifier: 18.3.1
         version: 18.3.1
@@ -2504,7 +2510,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.26.0
-      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
       '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.0)
     dev: true
@@ -11420,6 +11426,12 @@ packages:
       - tedious
     dev: false
 
+  /@types/lodash.isempty@4.4.9:
+    resolution: {integrity: sha512-DPSFfnT2JmZiAWNWOU8IRZws/Ha6zyGF5m06TydfsY+0dVoQqby2J61Na2QU4YtwiZ+moC6cJS6zWYBJq4wBVw==}
+    dependencies:
+      '@types/lodash': 4.17.13
+    dev: false
+
   /@types/lodash@4.17.13:
     resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==}
     dev: false
@@ -15958,7 +15970,7 @@ packages:
       postcss-modules-values: 4.0.0(postcss@8.4.47)
       postcss-value-parser: 4.2.0
       semver: 7.6.2
-      webpack: 5.91.0(esbuild@0.23.1)
+      webpack: 5.91.0(esbuild@0.18.20)(webpack-cli@5.1.4)
 
   /css-minimizer-webpack-plugin@3.4.1(esbuild@0.23.1)(webpack@5.91.0):
     resolution: {integrity: sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==}
@@ -31178,7 +31190,7 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      webpack: 5.91.0(esbuild@0.23.1)
+      webpack: 5.91.0(esbuild@0.18.20)(webpack-cli@5.1.4)
 
   /styled-components@5.3.11(@babel/core@7.26.0)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==}
@@ -33492,6 +33504,7 @@ packages:
       - '@swc/core'
       - esbuild
       - uglify-js
+    dev: false
 
   /webpack@5.91.0(esbuild@0.23.1)(webpack-cli@4.10.0):
     resolution: {integrity: sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==}

shared/email-components/package.json

@@ -22,11 +22,13 @@
   },
   "dependencies": {
     "@react-email/components": "0.0.25",
+    "@types/lodash.isempty": "^4.4.9",
+    "lodash.isempty": "^4.4.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "tailwindcss": "^3.4.14",
     "vite-plugin-dts": "^4.3.0",
-    "vitest": "^2.1.3",
+    "vitest": "^2.1.3"
-    "react-dom": "18.3.1",
-    "react": "18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

shared/email-components/src/lib/CreditNoteEmailTemplate.stories.tsx

@@ -30,4 +30,7 @@ If you have any questions, please let us know.
 
 Thanks,
 Bigcapital`,
+  subtotal: '$1,000.00',
+  discount: '$1,000.00',
+  adjustment: '$1,000.00'
 };

shared/email-components/src/lib/CreditNoteEmailTemplate.tsx

@@ -7,6 +7,7 @@ import {
   Section,
   Text,
 } from '@react-email/components';
+import isEmpty from 'lodash.isempty';
 import { EmailTemplateLayout } from './EmailTemplateLayout';
 import { CSSProperties } from 'react';
 import { EmailTemplate } from './EmailTemplate';
@@ -25,6 +26,18 @@ export interface CreditNoteEmailProps {
   total: string;
   totalLabel?: string;
 
+  // # Subtotal
+  subtotal: string;
+  subtotalLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
+  // # Discount
+  discount?: string;
+  discountLabel?: string;
+
   // # Items
   items: Array<{ label: string; quantity: string; rate: string }>;
 
@@ -56,6 +69,18 @@ export const CreditNoteEmailTemplate: React.FC<
   total,
   totalLabel = 'Total',
 
+  // # Subtotal
+  subtotal,
+  subtotalLabel = 'Subtotal',
+
+  // # Discount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',
+
   // # Credit Note #
   creditNoteNumberLabel = 'Credit Note # {creditNoteNumber}',
   creditNoteNumber = 'CN-00001',
@@ -119,6 +144,40 @@ export const CreditNoteEmailTemplate: React.FC<
               </Row>
             ))}
 
+            <Row style={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={totalLineItemLabelStyle}>{subtotalLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={totalLineItemAmountStyle}>{subtotal}</Text>
+              </Column>
+            </Row>
+
+            {!isEmpty(discount) && (
+              <Row style={itemLineRowStyle}>
+                <Column width={'50%'}>
+                  <Text style={listItemLabelStyle}>{discountLabel}</Text>
+                </Column>
+
+                <Column width={'50%'}>
+                  <Text style={listItemAmountStyle}>{discount}</Text>
+                </Column>
+              </Row>
+            )}
+
+            {!isEmpty(adjustment) && (
+              <Row style={itemLineRowStyle}>
+                <Column width={'50%'}>
+                  <Text style={listItemLabelStyle}>{adjustmentLabel}</Text>
+                </Column>
+
+                <Column width={'50%'}>
+                  <Text style={listItemAmountStyle}>{adjustment}</Text>
+                </Column>
+              </Row>
+            )}
+
             <Row style={totalLineRowStyle}>
               <Column width={'50%'}>
                 <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
@@ -133,7 +192,7 @@ export const CreditNoteEmailTemplate: React.FC<
       </EmailTemplate>
     </EmailTemplateLayout>
   );
-  };
+};
 
 /**
  * Renders the estimate mail template to string

shared/email-components/src/lib/EstimatePaymentEmail.stories.tsx

@@ -30,4 +30,7 @@ If you have any questions, please let us know.
 
 Thanks,
 Bigcapital`,
+  adjustment: '$100.00',
+  discount: '$100.00',
+  subtotal: '$100.00',
 };

shared/email-components/src/lib/EstimatePaymentEmail.tsx

@@ -1,8 +1,8 @@
 import { CSSProperties } from 'react';
+import isEmpty from 'lodash.isempty';
 import {
   Button,
   Column,
-  Container,
   Heading,
   render,
   Row,
@@ -30,7 +30,15 @@ export interface EstimatePaymentEmailProps {
   subtotal: string;
   subtotalLabel?: string;
 
-  // # Estimate No#
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
+  // # Discount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Estimate No.
   estimateNumber?: string;
   estimateNumberLabel?: string;
 
@@ -65,6 +73,14 @@ export const EstimatePaymentEmail: React.FC<
   total,
   totalLabel = 'Total',
 
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',
+
+  // # Discount
+  discount,
+  discountLabel = 'Discount',
+
   // # Subtotal
   subtotal,
   subtotalLabel = 'Subtotal',
@@ -147,6 +163,30 @@ export const EstimatePaymentEmail: React.FC<
             </Column>
           </Row>
 
+          {!isEmpty(discount) && (
+            <Row style={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={listItemLabelStyle}>{discountLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={listItemAmountStyle}>{discount}</Text>
+              </Column>
+            </Row>
+          )}
+
+          {!isEmpty(adjustment) && (
+            <Row style={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={listItemLabelStyle}>{adjustmentLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={listItemAmountStyle}>{adjustment}</Text>
+              </Column>
+            </Row>
+          )}
+
           <Row style={totalLineRowStyle}>
             <Column width={'50%'}>
               <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
@@ -160,7 +200,7 @@ export const EstimatePaymentEmail: React.FC<
       </EmailTemplate>
     </EmailTemplateLayout>
   );
-  };
+};
 
 /**
  * Renders the estimate mail template to string

shared/email-components/src/lib/InvoicePaymentEmail.stories.tsx

@@ -33,6 +33,9 @@ Thanks,
 Bigcapital`,
   dueDate: ' 10 Oct 2024',
   total: '$1,000.00',
+  subtotal: '$1,000.00',
   dueAmount: '$1,000.00',
   items: [{ label: 'Swaniawski Muller', quantity: '1', rate: '$1,000.00' }],
+  adjustment: '$100.00',
+  discount: '$100.00',
 };

shared/email-components/src/lib/InvoicePaymentEmail.tsx

@@ -1,6 +1,6 @@
+import { CSSProperties } from 'react';
 import {
   Button,
-  Container,
   Section,
   Heading,
   Text,
@@ -8,7 +8,7 @@ import {
   Column,
   render,
 } from '@react-email/components';
-import { CSSProperties } from 'react';
+import isEmpty from 'lodash.isempty';
 import { EmailTemplateLayout } from './EmailTemplateLayout';
 import { EmailTemplate } from './EmailTemplate';
 
@@ -36,6 +36,18 @@ export interface InvoicePaymentEmailProps {
   dueAmount: string;
   dueAmountLabel?: string;
 
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
+  // # Discount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Subtotal
+  subtotal: string;
+  subtotalLabel?: string;
+
   // # Due date
   dueDate: string;
   dueDateLabel?: string;
@@ -82,6 +94,18 @@ export const InvoicePaymentEmail: React.FC<
   total,
   totalLabel = 'Total',
 
+  // # Subtotal
+  subtotal,
+  subtotalLabel = 'Subtotal',
+
+  // # Discount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',
+
   // # Invoice due amount
   dueAmountLabel = 'Due Amount',
   dueAmount,
@@ -143,6 +167,50 @@ export const InvoicePaymentEmail: React.FC<
               </Row>
             ))}
 
+            <Row style={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={totalLineItemLabelStyle}>{subtotalLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={totalLineItemAmountStyle}>{subtotal}</Text>
+              </Column>
+            </Row>
+
+            {!isEmpty(discount) && (
+              <Row style={lineRowStyle}>
+                <Column width={'50%'}>
+                  <Text style={listItemLabelStyle}>{discountLabel}</Text>
+                </Column>
+
+                <Column width={'50%'}>
+                  <Text style={listItemAmountStyle}>{discount}</Text>
+                </Column>
+              </Row>
+            )}
+
+            {!isEmpty(adjustment) && (
+              <Row style={lineRowStyle}>
+                <Column width={'50%'}>
+                  <Text style={listItemLabelStyle}>{adjustmentLabel}</Text>
+                </Column>
+
+                <Column width={'50%'}>
+                  <Text style={listItemAmountStyle}>{adjustment}</Text>
+                </Column>
+              </Row>
+            )}
+
+            <Row style={totalLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={totalLineItemAmountStyle}>{total}</Text>
+              </Column>
+            </Row>
+
             <Row style={dueAmounLineRowStyle}>
               <Column width={'50%'}>
                 <Text style={dueAmountLineItemLabelStyle}>
@@ -154,22 +222,12 @@ export const InvoicePaymentEmail: React.FC<
                 <Text style={dueAmountLineItemAmountStyle}>{dueAmount}</Text>
               </Column>
             </Row>
-
-              <Row style={totalLineRowStyle}>
-                <Column width={'50%'}>
-                  <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
-                </Column>
-
-                <Column width={'50%'}>
-                  <Text style={totalLineItemAmountStyle}>{total}</Text>
-                </Column>
-              </Row>
           </Section>
         </Section>
       </EmailTemplate>
     </EmailTemplateLayout>
   );
-  };
+};
 
 export const renderInvoicePaymentEmail = (props: InvoicePaymentEmailProps) => {
   return render(<InvoicePaymentEmail {...props} />);
@@ -237,6 +295,11 @@ const dueAmounLineRowStyle: CSSProperties = {
   height: 40,
 };
 
+const lineRowStyle: CSSProperties = {
+  borderBottom: '1px solid #D9D9D9',
+  height: 40,
+};
+
 const totalLineRowStyle: CSSProperties = {
   borderBottom: '1px solid #000',
   height: 40,

shared/email-components/src/lib/ReceiptPaymentEmail.stories.tsx

@@ -28,4 +28,6 @@ If you have any questions, please let us know.
 
 Thanks,
 Bigcapital`,
+  adjustment: '$100.00',
+  discount: '$100.00',
 };

shared/email-components/src/lib/ReceiptPaymentEmail.tsx

@@ -1,5 +1,5 @@
+import { CSSProperties } from 'react';
 import {
-  Button,
   Column,
   Heading,
   render,
@@ -7,14 +7,12 @@ import {
   Section,
   Text,
 } from '@react-email/components';
-import { CSSProperties } from 'react';
+import isEmpty from 'lodash.isempty';
 import { EmailTemplateLayout } from './EmailTemplateLayout';
 import { EmailTemplate } from './EmailTemplate';
-
 export interface ReceiptEmailTemplateProps {
   preview: string;
 
-
   companyName?: string;
   companyLogoUri: string;
 
@@ -36,6 +34,10 @@ export interface ReceiptEmailTemplateProps {
   discount?: string;
   discountLabel?: string;
 
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
   // # Subtotal
   subtotal?: string;
   subtotalLabel?: string;
@@ -60,6 +62,14 @@ export const ReceiptEmailTemplate: React.FC<
   total = '$1,000.00',
   totalLabel = 'Total',
 
+  // # Diso
+  discountLabel = 'Discount',
+  discount,
+
+  // # ADjustment
+  adjustmentLabel = 'Adjustment',
+  adjustment,
+
   // # Subtotal
   subtotal = '$1,000.00',
   subtotalLabel = 'Subtotal',
@@ -122,6 +132,30 @@ export const ReceiptEmailTemplate: React.FC<
             </Column>
           </Row>
 
+          {!isEmpty(discount) && (
+            <Row style={itemLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={listItemLabelStyle}>{discountLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={listItemAmountStyle}>{discount}</Text>
+              </Column>
+            </Row>
+          )}
+
+          {!isEmpty(adjustment) && (
+            <Row style={itemLineRowStyle}>
+              <Column width={'50%'}>
+                <Text style={listItemLabelStyle}>{adjustmentLabel}</Text>
+              </Column>
+
+              <Column width={'50%'}>
+                <Text style={listItemAmountStyle}>{adjustment}</Text>
+              </Column>
+            </Row>
+          )}
+
           <Row style={totalLineRowStyle}>
             <Column width={'50%'}>
               <Text style={totalLineItemLabelStyle}>{totalLabel}</Text>
@@ -135,7 +169,7 @@ export const ReceiptEmailTemplate: React.FC<
       </EmailTemplate>
     </EmailTemplateLayout>
   );
-  };
+};
 
 /**
  * Renders the sale receipt mail template to string