Merge pull request #755 from bigcapitalhq/fix-upload-attachments

hotbug: upload attachments

.all-contributorsrc

@@ -159,6 +159,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "nklmantey",
+      "name": "Mantey",
+      "avatar_url": "https://avatars.githubusercontent.com/u/90279429?v=4",
+      "profile": "https://nklmantey.com/",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -133,6 +133,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/oleynikd"><img src="https://avatars.githubusercontent.com/u/3976868?v=4?s=100" width="100px;" alt="Denis"/><br /><sub><b>Denis</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Aoleynikd" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://myself.vercel.app/"><img src="https://avatars.githubusercontent.com/u/42431274?v=4?s=100" width="100px;" alt="Sachin Mittal"/><br /><sub><b>Sachin Mittal</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Amittalsam98" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.camilooviedo.com/"><img src="https://avatars.githubusercontent.com/u/64604272?v=4?s=100" width="100px;" alt="Camilo Oviedo"/><br /><sub><b>Camilo Oviedo</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/commits?author=Champetaman" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://nklmantey.com/"><img src="https://avatars.githubusercontent.com/u/90279429?v=4?s=100" width="100px;" alt="Mantey"/><br /><sub><b>Mantey</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Anklmantey" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -4,10 +4,10 @@
   "scripts": {
     "dev": "lerna run dev",
     "build": "lerna run build",
-    "dev:webapp": "lerna run dev --scope \"@bigcapital/webapp\" --scope \"@bigcapital/utils\"",
+    "dev:webapp": "lerna run dev --scope \"@bigcapital/webapp\" --scope \"@bigcapital/utils\" --scope \"@bigcapital/pdf-templates\"",
-    "build:webapp": "lerna run build --scope \"@bigcapital/webapp\" --scope \"@bigcapital/utils\"",
+    "build:webapp": "lerna run build --scope \"@bigcapital/webapp\" --scope \"@bigcapital/utils\" --scope \"@bigcapital/pdf-templates\"",
-    "dev:server": "lerna run dev --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\"",
+    "dev:server": "lerna run dev --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\" --scope \"@bigcapital/pdf-templates\" --scope \"@bigcapital/email-components\"",
-    "build:server": "lerna run build --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\"",
+    "build:server": "lerna run build --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\" --scope \"@bigcapital/pdf-templates\" --scope \"@bigcapital/email-components\"",
     "serve:server": "lerna run serve --scope \"@bigcapital/server\" --scope \"@bigcapital/utils\"",
     "test:e2e": "playwright test",
     "prepare": "husky install"

packages/server/package.json

@@ -20,10 +20,11 @@
     "bigcapital": "./bin/bigcapital.js"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.576.0",
-    "@aws-sdk/s3-request-presigner": "^3.583.0",
     "@bigcapital/utils": "*",
     "@bigcapital/email-components": "*",
+    "@bigcapital/pdf-templates": "*",
+    "@aws-sdk/client-s3": "^3.576.0",
+    "@aws-sdk/s3-request-presigner": "^3.583.0",
     "@casl/ability": "^5.4.3",
     "@hapi/boom": "^7.4.3",
     "@lemonsqueezy/lemonsqueezy.js": "^2.2.0",

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

@@ -121,7 +121,7 @@ export default class BillsController extends BaseController {
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
-      check('entries.*.quantity').exists().isNumeric().toInt(),
+      check('entries.*.quantity').exists().isNumeric().toFloat(),
       check('entries.*.discount')
         .optional({ nullable: true })
         .isNumeric()

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

@@ -170,7 +170,7 @@ export default class VendorCreditController extends BaseController {
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
-      check('entries.*.quantity').exists().isNumeric().toInt(),
+      check('entries.*.quantity').exists().isNumeric().toFloat(),
       check('entries.*.discount')
         .optional({ nullable: true })
         .isNumeric()
@@ -209,7 +209,7 @@ export default class VendorCreditController extends BaseController {
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
-      check('entries.*.quantity').exists().isNumeric().toInt(),
+      check('entries.*.quantity').exists().isNumeric().toFloat(),
       check('entries.*.discount')
         .optional({ nullable: true })
         .isNumeric()

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

@@ -233,7 +233,7 @@ export default class PaymentReceivesController extends BaseController {
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
-      check('entries.*.quantity').exists().isNumeric().toInt(),
+      check('entries.*.quantity').exists().isNumeric().toFloat(),
       check('entries.*.discount')
         .optional({ nullable: true })
         .isNumeric()
@@ -755,9 +755,8 @@ export default class PaymentReceivesController extends BaseController {
     const { tenantId } = req;
 
     try {
-      const data = await this.getCreditNoteStateService.getCreditNoteState(
+      const data =
-        tenantId
+        await this.getCreditNoteStateService.getCreditNoteState(tenantId);
-      );
       return res.status(200).send({ data });
     } catch (error) {
       next(error);

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

@@ -172,7 +172,7 @@ export default class SalesEstimatesController extends BaseController {
       check('entries').exists().isArray({ min: 1 }),
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
-      check('entries.*.quantity').exists().isNumeric().toInt(),
+      check('entries.*.quantity').exists().isNumeric().toFloat(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
       check('entries.*.description').optional({ nullable: true }).trim(),
       check('entries.*.discount')
@@ -562,9 +562,8 @@ export default class SalesEstimatesController extends BaseController {
     const { tenantId } = req;
 
     try {
-      const data = await this.saleEstimatesApplication.getSaleEstimateState(
+      const data =
-        tenantId
+        await this.saleEstimatesApplication.getSaleEstimateState(tenantId);
-      );
       return res.status(200).send({ data });
     } catch (error) {
       next(error);

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

@@ -449,9 +449,10 @@ export default class SaleInvoicesController extends BaseController {
     const acceptType = accept.types([
       ACCEPT_TYPE.APPLICATION_JSON,
       ACCEPT_TYPE.APPLICATION_PDF,
+      ACCEPT_TYPE.APPLICATION_TEXT_HTML,
     ]);
-    // Retrieves invoice in pdf format.
+    // Retrieves invoice in PDF format.
-    if (ACCEPT_TYPE.APPLICATION_PDF == acceptType) {
+    if (ACCEPT_TYPE.APPLICATION_PDF === acceptType) {
       const [pdfContent, filename] =
         await this.saleInvoiceApplication.saleInvoicePdf(
           tenantId,
@@ -463,7 +464,13 @@ export default class SaleInvoicesController extends BaseController {
         'Content-Disposition': `attachment; filename="${filename}"`,
       });
       res.send(pdfContent);
-      // Retrieves invoice in json format.
+      // Retrieves invoice in html json format.
+    } else if (ACCEPT_TYPE.APPLICATION_TEXT_HTML === acceptType) {
+      const htmlContent = await this.saleInvoiceApplication.saleInvoiceHtml(
+        tenantId,
+        saleInvoiceId
+      );
+      return res.status(200).send({ htmlContent });
     } else {
       const saleInvoice = await this.saleInvoiceApplication.getSaleInvoice(
         tenantId,

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

@@ -148,7 +148,7 @@ export default class SalesReceiptsController extends BaseController {
       check('entries.*.id').optional({ nullable: true }).isNumeric().toInt(),
       check('entries.*.index').exists().isNumeric().toInt(),
       check('entries.*.item_id').exists().isNumeric().toInt(),
-      check('entries.*.quantity').exists().isNumeric().toInt(),
+      check('entries.*.quantity').exists().isNumeric().toFloat(),
       check('entries.*.rate').exists().isNumeric().toFloat(),
       check('entries.*.discount')
         .optional({ nullable: true })
@@ -392,9 +392,8 @@ export default class SalesReceiptsController extends BaseController {
 
     // Retrieves receipt in pdf format.
     try {
-      const data = await this.saleReceiptsApplication.getSaleReceiptState(
+      const data =
-        tenantId
+        await this.saleReceiptsApplication.getSaleReceiptState(tenantId);
-      );
       return res.status(200).send({ data });
     } catch (error) {
       next(error);

packages/server/src/api/controllers/ShareLink/PublicSharableLinkController.ts

@@ -102,12 +102,13 @@ export class PublicSharableLinkController extends BaseController {
     const { paymentLinkId } = req.params;
 
     try {
-      const pdfContent = await this.paymentLinkApp.getPaymentLinkInvoicePdf(
+      const [pdfContent, filename] =
-        paymentLinkId
+        await this.paymentLinkApp.getPaymentLinkInvoicePdf(paymentLinkId);
-      );
+
       res.set({
         'Content-Type': 'application/pdf',
         'Content-Length': pdfContent.length,
+        'Content-Disposition': `attachment; filename="${filename}"`,
       });
       res.send(pdfContent);
     } catch (error) {

packages/server/src/api/controllers/ShareLink/ShareLinkController.ts

@@ -30,7 +30,6 @@ export class ShareLinkController extends BaseController {
       this.validationResult,
       asyncMiddleware(this.generateShareLink.bind(this))
     );
-
     return router;
   }
 
@@ -53,7 +52,6 @@ export class ShareLinkController extends BaseController {
       const link = await this.generateShareLinkService.generatePaymentLink(
         tenantId,
         transactionId,
-        transactionType,
         publicity,
         expiryDate
       );

packages/server/src/constants/event-tracker.ts

@@ -12,15 +12,20 @@ export const SALE_ESTIMATE_CREATED = 'Sale estimate created';
 export const SALE_ESTIMATE_EDITED = 'Sale estimate edited';
 export const SALE_ESTIMATE_DELETED = 'Sale estimate deleted';
 export const SALE_ESTIMATE_PDF_VIEWED = 'Sale estimate PDF viewed';
+export const SALE_ESTIMATE_VIEWED = 'Sale estimate viewed';
+export const SALE_ESTIMATE_MAIL_SENT = 'Sale estimate mail sent';
 
 export const PAYMENT_RECEIVED_CREATED = 'Payment received created';
 export const PAYMENT_RECEIVED_EDITED = 'payment received edited';
 export const PAYMENT_RECEIVED_DELETED = 'Payment received deleted';
 export const PAYMENT_RECEIVED_PDF_VIEWED = 'Payment received PDF viewed';
+export const PAYMENT_RECEIVED_MAIL_SENT = 'Payment received mail sent';
 
 export const SALE_RECEIPT_PDF_VIEWED = 'Sale credit PDF viewed';
+export const SALE_RECEIPT_MAIL_SENT = 'Sale credit mail sent';
 
 export const CREDIT_NOTE_PDF_VIEWED = 'Credit note PDF viewed';
+export const CREDIT_NOTE_MAIL_SENT = 'Credit note mail sent';
 
 export const BILL_CREATED = 'Bill created';
 export const BILL_EDITED = 'Bill edited';
@@ -50,6 +55,8 @@ export const AUTH_RESET_PASSWORD = 'Auth reset password';
 export const SUBSCRIPTION_CANCELLED = 'Subscription cancelled';
 export const SUBSCRIPTION_RESUMED = 'Subscription resumed';
 export const SUBSCRIPTION_PLAN_CHANGED = 'Subscription plan changed';
+export const SUBSCRIPTION_PAYMENT_SUCCEED = 'Subscription payment succeed';
+export const SUBSCRIPTION_PAYMENT_FAILED = 'Subscription payment failed';
 
 export const CUSTOMER_CREATED = 'Customer created';
 export const CUSTOMER_EDITED = 'Customer edited';
@@ -103,3 +110,21 @@ export const SALE_GROUP = 'Sale';
 export const PAYMENT_GROUP = 'Payment';
 export const BILL_GROUP = 'Bill';
 export const EXPENSE_GROUP = 'Expense';
+
+// # Reports
+export const BALANCE_SHEET_VIEWED = 'Balance sheet viewed';
+export const TRIAL_BALANCE_SHEET_VIEWED = 'Trial balance sheet viewed';
+export const PROFIT_LOSS_SHEET_VIEWED = 'Profit loss sheet viewed';
+export const CASHFLOW_STATEMENT_VIEWED = 'Cashflow statement viewed';
+export const GENERAL_LEDGER_VIEWED = 'General ledger viewed';
+export const JOURNAL_VIEWED = 'Journal viewed';
+export const RECEIVABLE_AGING_VIEWED = 'Receivable aging viewed';
+export const PAYABLE_AGING_VIEWED = 'Payable aging viewed';
+export const CUSTOMER_BALANCE_SUMMARY_VIEWED =
+  'Customer balance summary viewed';
+export const VENDOR_BALANCE_SUMMARY_VIEWED = 'Vendor balance summary viewed';
+export const INVENTORY_VALUATION_VIEWED = 'Inventory valuation viewed';
+export const CUSTOMER_TRANSACTIONS_VIEWED = 'Customer transactions viewed';
+export const VENDOR_TRANSACTIONS_VIEWED = 'Vendor transactions viewed';
+export const SALES_BY_ITEM_VIEWED = 'Sales by item viewed';
+export const PURCHASES_BY_ITEM_VIEWED = 'Purchases by item viewed';

packages/server/src/database/migrations/20241113113437_change_quantity_in_items_entries_to_decimal.js

@@ -0,0 +1,39 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function (knex) {
+  return knex.schema
+    .table('items_entries', (table) => {
+      table.decimal('quantity', 13, 3).alter();
+    })
+    .table('inventory_transactions', (table) => {
+      table.decimal('quantity', 13, 3).alter();
+    })
+    .table('inventory_cost_lot_tracker', (table) => {
+      table.decimal('quantity', 13, 3).alter();
+    })
+    .table('items', (table) => {
+      table.decimal('quantityOnHand', 13, 3).alter();
+    });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function (knex) {
+  return knex.schema
+    .table('items_entries', (table) => {
+      table.integer('quantity').alter();
+    })
+    .table('inventory_transactions', (table) => {
+      table.integer('quantity').alter();
+    })
+    .table('inventory_cost_lot_tracker', (table) => {
+      table.integer('quantity').alter();
+    })
+    .table('items', (table) => {
+      table.integer('quantityOnHand').alter();
+    });
+};

packages/server/src/interfaces/Http.ts

@@ -4,4 +4,5 @@ export const ACCEPT_TYPE = {
   APPLICATION_JSON_TABLE: 'application/json+table',
   APPLICATION_XLSX: 'application/xlsx',
   APPLICATION_CSV: 'application/csv',
+  APPLICATION_TEXT_HTML: 'application/json+html',
 };

packages/server/src/interfaces/Mailable.ts

@@ -36,8 +36,9 @@ export interface CommonMailOptions {
   to: Array<string>;
   cc?: Array<string>;
   bcc?: Array<string>;
-  data?: Record<string, any>;
+  formatArgs?: Record<string, any>;
+  toOptions: Array<AddressItem>;
+  fromOptions: Array<AddressItem>;
 }
 
-export interface CommonMailOptionsDTO extends Partial<CommonMailOptions> {
+export interface CommonMailOptionsDTO extends Partial<CommonMailOptions> {}
-}

packages/server/src/interfaces/SaleInvoice.ts

@@ -338,21 +338,22 @@ export interface InvoicePdfTemplateAttributes {
   subtotalLabel: string;
   discountLabel: string;
   paymentMadeLabel: string;
-  balanceDueLabel: string;
 
   showTotal: boolean;
   showSubtotal: boolean;
   showDiscount: boolean;
   showTaxes: boolean;
   showPaymentMade: boolean;
-  showDueAmount: boolean;
-  showBalanceDue: boolean;
 
   total: string;
   subtotal: string;
   discount: string;
   paymentMade: string;
-  balanceDue: string;
+
+  // Due Amount
+  dueAmount: string;
+  showDueAmount: boolean;
+  dueAmountLabel: string;
 
   termsConditionsLabel: string;
   showTermsConditions: boolean;

packages/server/src/lib/Mail/index.ts

@@ -9,6 +9,9 @@ export default class Mail {
   subject: string = '';
   content: string = '';
   to: string | string[];
+  cc: string | string[];
+  bcc: string | string[];
+  replyTo: string | string[];
   from: string = `${process.env.MAIL_FROM_NAME} ${process.env.MAIL_FROM_ADDRESS}`;
   data: { [key: string]: string | number };
   attachments: IMailAttachment[];
@@ -20,9 +23,12 @@ export default class Mail {
     return {
       to: this.to,
       from: this.from,
+      cc: this.cc,
+      bcc: this.bcc,
       subject: this.subject,
       html: this.html,
       attachments: this.attachments,
+      replyTo: this.replyTo,
     };
   }
 
@@ -60,6 +66,21 @@ export default class Mail {
     return this;
   }
 
+  setCC(cc: string | string[]) {
+    this.cc = cc;
+    return this;
+  }
+
+  setBCC(bcc: string | string[]) {
+    this.bcc = bcc;
+    return this;
+  }
+
+  setReplyTo(replyTo: string | string[]) {
+    this.replyTo = replyTo;
+    return this;
+  }
+
   /**
    * Sets from address to the mail.
    * @param {string} from
@@ -72,7 +93,7 @@ export default class Mail {
 
   /**
    * Set attachments to the mail.
-   * @param {IMailAttachment[]} attachments 
+   * @param {IMailAttachment[]} attachments
    * @returns {Mail}
    */
   setAttachments(attachments: IMailAttachment[]) {

packages/server/src/models/PdfTemplate.ts

@@ -1,6 +1,9 @@
+import { getUploadedObjectUri } from '@/services/Attachments/utils';
 import TenantModel from 'models/TenantModel';
 
 export class PdfTemplate extends TenantModel {
+  public readonly attributes: Record<string, any>;
+
   /**
    * Table name.
    */
@@ -47,7 +50,17 @@ export class PdfTemplate extends TenantModel {
    * Virtual attributes.
    */
   static get virtualAttributes() {
-    return [];
+    return ['companyLogoUri'];
+  }
+
+  /**
+   * Retrieves the company logo uri.
+   * @returns {string}
+   */
+  get companyLogoUri() {
+    return this.attributes?.companyLogoKey
+      ? getUploadedObjectUri(this.attributes.companyLogoKey)
+      : '';
   }
 
   /**

packages/server/src/services/Accounts/GetAccount.ts

@@ -1,5 +1,4 @@
 import { Service, Inject } from 'typedi';
-import I18nService from '@/services/I18n/I18nService';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { AccountTransformer } from './AccountTransform';
 import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
@@ -11,9 +10,6 @@ export class GetAccount {
   @Inject()
   private tenancy: HasTenancyService;
 
-  @Inject()
-  private i18nService: I18nService;
-
   @Inject()
   private transformer: TransformerInjectable;
 
@@ -44,10 +40,8 @@ export class GetAccount {
       new AccountTransformer(),
       { accountsGraph }
     );
-    const eventPayload = {
+    const eventPayload = { tenantId, accountId };
-      tenantId,
+
-      accountId,
-    };
     // Triggers `onAccountViewed` event.
     await this.eventPublisher.emitAsync(events.accounts.onViewed, eventPayload);
 

packages/server/src/services/Cashflow/NewCashflowTransactionService.ts

@@ -122,6 +122,7 @@ export default class NewCashflowTransactionService {
    * @param {number} tenantId -
    * @param {ICashflowOwnerContributionDTO} ownerContributionDTO
    * @param {number} userId - User id.
+   * @returns {Promise<ICashflowTransaction>}
    */
   public newCashflowTransaction = async (
     tenantId: number,

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

@@ -35,9 +35,12 @@ export class CreditNoteBrandingTemplate {
       ...defaultCreditNoteBrandingAttributes,
       ...commonOrgBrandingAttrs,
     };
-
+    const brandingTemplateAttrs = {
+      ...template.attributes,
+      companyLogoUri: template.companyLogoUri,
+    };
     const attributes = mergePdfTemplateWithDefaultAttributes(
-      template.attributes,
+      brandingTemplateAttrs,
       organizationBrandingAttrs
     );
     return {

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

@@ -1,7 +1,6 @@
-import Knex from 'knex';
+import { Knex } from 'knex';
-import { IRefundCreditNote } from '@/interfaces';
-import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { Inject, Service } from 'typedi';
+import HasTenancyService from '@/services/Tenancy/TenancyService';
 
 @Service()
 export default class RefundSyncCreditNoteBalance {

packages/server/src/services/EventsTracker/events/PaymentReceivedEventsTracker.ts

@@ -12,6 +12,7 @@ import {
   PAYMENT_RECEIVED_EDITED,
   PAYMENT_RECEIVED_DELETED,
   PAYMENT_RECEIVED_PDF_VIEWED,
+  PAYMENT_RECEIVED_MAIL_SENT,
 } from '@/constants/event-tracker';
 
 @Service()
@@ -39,6 +40,10 @@ export class PaymentReceivedEventsTracker extends EventSubscriber {
       events.paymentReceive.onPdfViewed,
       this.handleTrackPdfViewedPaymentReceivedEvent
     );
+    bus.subscribe(
+      events.paymentReceive.onMailSent,
+      this.handleTrackMailSentPaymentReceivedEvent
+    );
   }
 
   private handleTrackPaymentReceivedCreatedEvent = ({
@@ -80,4 +85,14 @@ export class PaymentReceivedEventsTracker extends EventSubscriber {
       properties: {},
     });
   };
+
+  private handleTrackMailSentPaymentReceivedEvent = ({
+    tenantId,
+  }: IPaymentReceivedDeletedPayload) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: PAYMENT_RECEIVED_MAIL_SENT,
+      properties: {},
+    });
+  };
 }

packages/server/src/services/EventsTracker/events/ReportsEventsTracker.ts

@@ -0,0 +1,240 @@
+import { Inject, Service } from 'typedi';
+import { EventSubscriber } from '@/lib/EventPublisher/EventPublisher';
+import { ReportsEvents } from '@/constants/event-tracker';
+import { PosthogService } from '../PostHog';
+import events from '@/subscribers/events';
+import {
+  BALANCE_SHEET_VIEWED,
+  TRIAL_BALANCE_SHEET_VIEWED,
+  PROFIT_LOSS_SHEET_VIEWED,
+  CASHFLOW_STATEMENT_VIEWED,
+  GENERAL_LEDGER_VIEWED,
+  JOURNAL_VIEWED,
+  RECEIVABLE_AGING_VIEWED,
+  PAYABLE_AGING_VIEWED,
+  CUSTOMER_BALANCE_SUMMARY_VIEWED,
+  VENDOR_BALANCE_SUMMARY_VIEWED,
+  INVENTORY_VALUATION_VIEWED,
+  CUSTOMER_TRANSACTIONS_VIEWED,
+  VENDOR_TRANSACTIONS_VIEWED,
+  SALES_BY_ITEM_VIEWED,
+  PURCHASES_BY_ITEM_VIEWED,
+} from '@/constants/event-tracker';
+
+@Service()
+export class ReportsEventsTracker extends EventSubscriber {
+  @Inject()
+  private posthog: PosthogService;
+
+  /**
+   * Constructor method.
+   */
+  public attach(bus) {
+    bus.subscribe(
+      events.reports.onBalanceSheetViewed,
+      this.handleTrackBalanceSheetViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onTrialBalanceSheetView,
+      this.handleTrackTrialBalanceSheetViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onProfitLossSheetViewed,
+      this.handleTrackProfitLossSheetViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onCashflowStatementViewed,
+      this.handleTrackCashflowStatementViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onGeneralLedgerViewed,
+      this.handleTrackGeneralLedgerViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onJournalViewed,
+      this.handleTrackJournalViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onReceivableAgingViewed,
+      this.handleTrackReceivableAgingViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onPayableAgingViewed,
+      this.handleTrackPayableAgingViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onCustomerBalanceSummaryViewed,
+      this.handleTrackCustomerBalanceSummaryViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onVendorBalanceSummaryViewed,
+      this.handleTrackVendorBalanceSummaryViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onInventoryValuationViewed,
+      this.handleTrackInventoryValuationViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onCustomerTransactionsViewed,
+      this.handleTrackCustomerTransactionsViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onVendorTransactionsViewed,
+      this.handleTrackVendorTransactionsViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onSalesByItemViewed,
+      this.handleTrackSalesByItemViewedEvent
+    );
+    bus.subscribe(
+      events.reports.onPurchasesByItemViewed,
+      this.handleTrackPurchasesByItemViewedEvent
+    );
+  }
+
+  private handleTrackBalanceSheetViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: BALANCE_SHEET_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackTrialBalanceSheetViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: TRIAL_BALANCE_SHEET_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackProfitLossSheetViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: PROFIT_LOSS_SHEET_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackCashflowStatementViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: CASHFLOW_STATEMENT_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackGeneralLedgerViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: GENERAL_LEDGER_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackJournalViewedEvent = ({ tenantId }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: JOURNAL_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackReceivableAgingViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: RECEIVABLE_AGING_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackPayableAgingViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: PAYABLE_AGING_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackCustomerBalanceSummaryViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: CUSTOMER_BALANCE_SUMMARY_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackVendorBalanceSummaryViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: VENDOR_BALANCE_SUMMARY_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackInventoryValuationViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: INVENTORY_VALUATION_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackCustomerTransactionsViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: CUSTOMER_TRANSACTIONS_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackVendorTransactionsViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: VENDOR_TRANSACTIONS_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackSalesByItemViewedEvent = ({ tenantId }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SALES_BY_ITEM_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackPurchasesByItemViewedEvent = ({
+    tenantId,
+  }: ReportsEvents) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: PURCHASES_BY_ITEM_VIEWED,
+      properties: {},
+    });
+  };
+}

packages/server/src/services/EventsTracker/events/SaleEstimateEventsTracker.ts

@@ -12,6 +12,8 @@ import {
   SALE_ESTIMATE_EDITED,
   SALE_ESTIMATE_DELETED,
   SALE_ESTIMATE_PDF_VIEWED,
+  SALE_ESTIMATE_VIEWED,
+  SALE_ESTIMATE_MAIL_SENT,
 } from '@/constants/event-tracker';
 
 @Service()
@@ -39,6 +41,14 @@ export class SaleEstimateEventsTracker extends EventSubscriber {
       events.saleEstimate.onPdfViewed,
       this.handleTrackPdfViewedEstimateEvent
     );
+    bus.subscribe(
+      events.saleEstimate.onViewed,
+      this.handleTrackViewedEstimateEvent
+    );
+    bus.subscribe(
+      events.saleEstimate.onMailSent,
+      this.handleTrackMailSentEstimateEvent
+    );
   }
 
   private handleTrackEstimateCreatedEvent = ({
@@ -80,4 +90,20 @@ export class SaleEstimateEventsTracker extends EventSubscriber {
       properties: {},
     });
   };
+
+  private handleTrackViewedEstimateEvent = ({ tenantId }) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SALE_ESTIMATE_VIEWED,
+      properties: {},
+    });
+  };
+
+  private handleTrackMailSentEstimateEvent = ({ tenantId }) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SALE_ESTIMATE_MAIL_SENT,
+      properties: {},
+    });
+  };
 }

packages/server/src/services/EventsTracker/events/TransactionsLockingEventsTracker.ts

@@ -4,6 +4,8 @@ import { ITransactionsLockingPartialUnlocked } from '@/interfaces';
 import { PosthogService } from '../PostHog';
 import {
   SUBSCRIPTION_CANCELLED,
+  SUBSCRIPTION_PAYMENT_FAILED,
+  SUBSCRIPTION_PAYMENT_SUCCEED,
   SUBSCRIPTION_PLAN_CHANGED,
   SUBSCRIPTION_RESUMED,
 } from '@/constants/event-tracker';
@@ -27,6 +29,14 @@ export class TransactionsLockingEventsTracker extends EventSubscriber {
       events.subscription.onSubscriptionPlanChanged,
       this.handleSubscriptionPlanChangedEvent
     );
+    bus.subscribe(
+      events.subscription.onSubscriptionPaymentSucceed,
+      this.handleSubscriptionPaymentFailedEvent
+    );
+    bus.subscribe(
+      events.subscription.onSubscriptionPaymentFailed,
+      this.handleSubscriptionPaymentSucceed
+    );
   }
 
   private handleSubscriptionResumedEvent = ({ tenantId }) => {
@@ -52,4 +62,20 @@ export class TransactionsLockingEventsTracker extends EventSubscriber {
       properties: {},
     });
   };
+
+  private handleSubscriptionPaymentFailedEvent = ({ tenantId }) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SUBSCRIPTION_PAYMENT_FAILED,
+      properties: {},
+    });
+  };
+
+  private handleSubscriptionPaymentSucceed = ({ tenantId }) => {
+    this.posthog.trackEvent({
+      distinctId: `tenant-${tenantId}`,
+      event: SUBSCRIPTION_PAYMENT_SUCCEED,
+      properties: {},
+    });
+  };
 }

packages/server/src/services/EventsTracker/events/events.ts

@@ -16,6 +16,7 @@ import { PdfTemplateEventsTracker } from './PdfTemplateEventsTracker';
 import { PaymentMethodEventsTracker } from './PaymentMethodEventsTracker';
 import { PaymentLinkEventsTracker } from './PaymentLinkEventsTracker';
 import { StripeIntegrationEventsTracker } from './StripeIntegrationEventsTracker';
+import { ReportsEventsTracker } from './ReportsEventsTracker';
 
 export const EventsTrackerListeners = [
   SaleInvoiceEventsTracker,
@@ -36,4 +37,5 @@ export const EventsTrackerListeners = [
   PaymentMethodEventsTracker,
   PaymentLinkEventsTracker,
   StripeIntegrationEventsTracker,
+  ReportsEventsTracker,
 ];

packages/server/src/services/FinancialStatements/AgingSummary/APAgingSummaryService.ts

@@ -6,6 +6,8 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import APAgingSummarySheet from './APAgingSummarySheet';
 import { Tenant } from '@/system/models';
 import { APAgingSummaryMeta } from './APAgingSummaryMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class APAgingSummaryService {
@@ -15,6 +17,9 @@ export class APAgingSummaryService {
   @Inject()
   private APAgingSummaryMeta: APAgingSummaryMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Default report query.
    */
@@ -96,6 +101,12 @@ export class APAgingSummaryService {
     // Retrieve the aging summary report meta.
     const meta = await this.APAgingSummaryMeta.meta(tenantId, filter);
 
+    // Triggers `onPayableAgingViewed` event.
+    await this.eventPublisher.emitAsync(events.reports.onPayableAgingViewed, {
+      tenantId,
+      query,
+    });
+
     return {
       data,
       columns,

packages/server/src/services/FinancialStatements/AgingSummary/ARAgingSummaryService.ts

@@ -6,6 +6,8 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import ARAgingSummarySheet from './ARAgingSummarySheet';
 import { Tenant } from '@/system/models';
 import { ARAgingSummaryMeta } from './ARAgingSummaryMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export default class ARAgingSummaryService {
@@ -15,6 +17,9 @@ export default class ARAgingSummaryService {
   @Inject()
   private ARAgingSummaryMeta: ARAgingSummaryMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Default report query.
    */
@@ -91,6 +96,15 @@ export default class ARAgingSummaryService {
     // Retrieve the aging summary report meta.
     const meta = await this.ARAgingSummaryMeta.meta(tenantId, filter);
 
+    // Triggers `onReceivableAgingViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onReceivableAgingViewed,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       data,
       columns,

packages/server/src/services/FinancialStatements/BalanceSheet/BalanceSheetInjectable.ts

@@ -10,6 +10,8 @@ import BalanceSheetStatement from './BalanceSheet';
 import { Tenant } from '@/system/models';
 import BalanceSheetRepository from './BalanceSheetRepository';
 import { BalanceSheetMetaInjectable } from './BalanceSheetMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export default class BalanceSheetStatementService
@@ -21,6 +23,9 @@ export default class BalanceSheetStatementService
   @Inject()
   private balanceSheetMeta: BalanceSheetMetaInjectable;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IBalanceSheetQuery}
@@ -98,6 +103,10 @@ export default class BalanceSheetStatementService
     // Balance sheet meta.
     const meta = await this.balanceSheetMeta.meta(tenantId, filter);
 
+    // Triggers `onBalanceSheetViewed` event.
+    await this.eventPublisher.emitAsync(events.reports.onBalanceSheetViewed, {
+      query,
+    });
     return {
       query: filter,
       data,

packages/server/src/services/FinancialStatements/CustomerBalanceSummary/CustomerBalanceSummaryService.ts

@@ -13,6 +13,8 @@ import Ledger from '@/services/Accounting/Ledger';
 import CustomerBalanceSummaryRepository from './CustomerBalanceSummaryRepository';
 import { Tenant } from '@/system/models';
 import { CustomerBalanceSummaryMeta } from './CustomerBalanceSummaryMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class CustomerBalanceSummaryService
@@ -24,6 +26,9 @@ export class CustomerBalanceSummaryService
   @Inject()
   private customerBalanceSummaryMeta: CustomerBalanceSummaryMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults balance sheet filter query.
    * @return {ICustomerBalanceSummaryQuery}
@@ -104,6 +109,15 @@ export class CustomerBalanceSummaryService
     // Retrieve the customer balance summary meta.
     const meta = await this.customerBalanceSummaryMeta.meta(tenantId, filter);
 
+    // Triggers `onCustomerBalanceSummaryViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onCustomerBalanceSummaryViewed,
+      {
+        tenant,
+        query,
+      }
+    );
+
     return {
       data: report.reportData(),
       query: filter,

packages/server/src/services/FinancialStatements/GeneralLedger/GeneralLedgerService.ts

@@ -5,6 +5,8 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import GeneralLedgerSheet from '@/services/FinancialStatements/GeneralLedger/GeneralLedger';
 import { GeneralLedgerMeta } from './GeneralLedgerMeta';
 import { GeneralLedgerRepository } from './GeneralLedgerRepository';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class GeneralLedgerService {
@@ -14,6 +16,9 @@ export class GeneralLedgerService {
   @Inject()
   private generalLedgerMeta: GeneralLedgerMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults general ledger report filter query.
    * @return {IBalanceSheetQuery}
@@ -72,6 +77,11 @@ export class GeneralLedgerService {
     // Retrieve general ledger report metadata.
     const meta = await this.generalLedgerMeta.meta(tenantId, filter);
 
+    // Triggers `onGeneralLedgerViewed` event.
+    await this.eventPublisher.emitAsync(events.reports.onGeneralLedgerViewed, {
+      tenantId,
+    });
+
     return {
       data: reportData,
       query: filter,

packages/server/src/services/FinancialStatements/InventoryValuationSheet/InventoryValuationSheetService.ts

@@ -11,6 +11,8 @@ import { InventoryValuationSheet } from './InventoryValuationSheet';
 import InventoryService from '@/services/Inventory/Inventory';
 import { Tenant } from '@/system/models';
 import { InventoryValuationMetaInjectable } from './InventoryValuationSheetMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class InventoryValuationSheetService {
@@ -26,6 +28,9 @@ export class InventoryValuationSheetService {
   @Inject()
   private inventoryValuationMeta: InventoryValuationMetaInjectable;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IBalanceSheetQuery}
@@ -116,6 +121,15 @@ export class InventoryValuationSheetService {
     // Retrieves the inventorty valuation meta.
     const meta = await this.inventoryValuationMeta.meta(tenantId, filter);
 
+    // Triggers `onInventoryValuationViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onInventoryValuationViewed,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       data: inventoryValuationData,
       query: filter,

packages/server/src/services/FinancialStatements/JournalSheet/JournalSheetService.ts

@@ -7,6 +7,8 @@ import Journal from '@/services/Accounting/JournalPoster';
 import { Tenant } from '@/system/models';
 import { transformToMap } from 'utils';
 import { JournalSheetMeta } from './JournalSheetMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class JournalSheetService {
@@ -16,6 +18,9 @@ export class JournalSheetService {
   @Inject()
   private journalSheetMeta: JournalSheetMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Default journal sheet filter queyr.
    */
@@ -101,6 +106,12 @@ export class JournalSheetService {
     // Retrieve the journal sheet meta.
     const meta = await this.journalSheetMeta.meta(tenantId, filter);
 
+    // Triggers `onJournalViewed` event.
+    await this.eventPublisher.emitAsync(events.reports.onJournalViewed, {
+      tenantId,
+      query,
+    });
+
     return {
       data: journalSheetData,
       query: filter,

packages/server/src/services/FinancialStatements/ProfitLossSheet/ProfitLossSheetService.ts

@@ -10,6 +10,8 @@ import { Tenant } from '@/system/models';
 import { mergeQueryWithDefaults } from './utils';
 import { ProfitLossSheetRepository } from './ProfitLossSheetRepository';
 import { ProfitLossSheetMeta } from './ProfitLossSheetMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 // Profit/Loss sheet service.
 @Service()
@@ -20,6 +22,9 @@ export default class ProfitLossSheetService {
   @Inject()
   private profitLossSheetMeta: ProfitLossSheetMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Retrieve profit/loss sheet statement.
    * @param {number} tenantId
@@ -62,6 +67,15 @@ export default class ProfitLossSheetService {
     // Retrieve the profit/loss sheet meta.
     const meta = await this.profitLossSheetMeta.meta(tenantId, filter);
 
+    // Triggers `onProfitLossSheetViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onProfitLossSheetViewed,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       query: filter,
       data,

packages/server/src/services/FinancialStatements/PurchasesByItems/PurchasesByItemsService.ts

@@ -8,6 +8,8 @@ import {
   IPurchasesByItemsSheet,
 } from '@/interfaces/PurchasesByItemsSheet';
 import { PurchasesByItemsMeta } from './PurchasesByItemsMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class PurchasesByItemsService {
@@ -17,6 +19,9 @@ export class PurchasesByItemsService {
   @Inject()
   private purchasesByItemsMeta: PurchasesByItemsMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults purchases by items filter query.
    * @return {IPurchasesByItemsReportQuery}
@@ -92,6 +97,15 @@ export class PurchasesByItemsService {
     // Retrieve the purchases by items meta.
     const meta = await this.purchasesByItemsMeta.meta(tenantId, query);
 
+    // Triggers `onPurchasesByItemViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onPurchasesByItemViewed,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       data: purchasesByItemsData,
       query: filter,

packages/server/src/services/FinancialStatements/SalesByItems/SalesByItemsService.ts

@@ -5,6 +5,8 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import SalesByItems from './SalesByItems';
 import { Tenant } from '@/system/models';
 import { SalesByItemsMeta } from './SalesByItemsMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class SalesByItemsReportService {
@@ -14,6 +16,9 @@ export class SalesByItemsReportService {
   @Inject()
   private salesByItemsMeta: SalesByItemsMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IBalanceSheetQuery}
@@ -89,6 +94,12 @@ export class SalesByItemsReportService {
     // Retrieve the sales by items meta.
     const meta = await this.salesByItemsMeta.meta(tenantId, query);
 
+    // Triggers `onSalesByItemViewed` event.
+    await this.eventPublisher.emitAsync(events.reports.onSalesByItemViewed, {
+      tenantId,
+      query,
+    });
+
     return {
       data: salesByItemsData,
       query: filter,

packages/server/src/services/FinancialStatements/TransactionsByCustomer/TransactionsByCustomersService.ts

@@ -13,6 +13,8 @@ import Ledger from '@/services/Accounting/Ledger';
 import TransactionsByCustomersRepository from './TransactionsByCustomersRepository';
 import { Tenant } from '@/system/models';
 import { TransactionsByCustomersMeta } from './TransactionsByCustomersMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 export class TransactionsByCustomersSheet
   implements ITransactionsByCustomersService
@@ -26,6 +28,9 @@ export class TransactionsByCustomersSheet
   @Inject()
   private transactionsByCustomersMeta: TransactionsByCustomersMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults balance sheet filter query.
    * @return {ICustomerBalanceSummaryQuery}
@@ -166,6 +171,15 @@ export class TransactionsByCustomersSheet
 
     const meta = await this.transactionsByCustomersMeta.meta(tenantId, filter);
 
+    // Triggers `onCustomerTransactionsViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onCustomerTransactionsViewed,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       data: reportInstance.reportData(),
       query: filter,

packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorInjectable.ts

@@ -13,6 +13,8 @@ import Ledger from '@/services/Accounting/Ledger';
 import TransactionsByVendorRepository from './TransactionsByVendorRepository';
 import { Tenant } from '@/system/models';
 import { TransactionsByVendorMeta } from './TransactionsByVendorMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 export class TransactionsByVendorsInjectable
   implements ITransactionsByVendorsService
@@ -26,6 +28,9 @@ export class TransactionsByVendorsInjectable
   @Inject()
   private transactionsByVendorMeta: TransactionsByVendorMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IVendorBalanceSummaryQuery}
@@ -171,6 +176,15 @@ export class TransactionsByVendorsInjectable
     );
     const meta = await this.transactionsByVendorMeta.meta(tenantId, filter);
 
+    // Triggers `onVendorTransactionsViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onVendorTransactionsViewed,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       data: reportInstance.reportData(),
       query: filter,

packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetInjectable.ts

@@ -7,6 +7,8 @@ import FinancialSheet from '../FinancialSheet';
 import { Tenant } from '@/system/models';
 import { TrialBalanceSheetRepository } from './TrialBalanceSheetRepository';
 import { TrialBalanceSheetMeta } from './TrialBalanceSheetMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export default class TrialBalanceSheetService extends FinancialSheet {
@@ -16,6 +18,9 @@ export default class TrialBalanceSheetService extends FinancialSheet {
   @Inject()
   private trialBalanceSheetMetaService: TrialBalanceSheetMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults trial balance sheet filter query.
    * @return {IBalanceSheetQuery}
@@ -81,6 +86,15 @@ export default class TrialBalanceSheetService extends FinancialSheet {
     // Trial balance sheet meta.
     const meta = await this.trialBalanceSheetMetaService.meta(tenantId, filter);
 
+    // Triggers `onTrialBalanceSheetViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onTrialBalanceSheetView,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       data: trialBalanceSheetData,
       query: filter,

packages/server/src/services/FinancialStatements/VendorBalanceSummary/VendorBalanceSummaryService.ts

@@ -15,6 +15,8 @@ import { Tenant } from '@/system/models';
 import { JournalSheetMeta } from '../JournalSheet/JournalSheetMeta';
 
 import { VendorBalanceSummaryMeta } from './VendorBalanceSummaryMeta';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 export class VendorBalanceSummaryService
   implements IVendorBalanceSummaryService
@@ -28,6 +30,9 @@ export class VendorBalanceSummaryService
   @Inject()
   private vendorBalanceSummaryMeta: VendorBalanceSummaryMeta;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Defaults balance sheet filter query.
    * @return {IVendorBalanceSummaryQuery}
@@ -49,7 +54,7 @@ export class VendorBalanceSummaryService
   }
 
   /**
-   * 
+   *
    * Retrieve the vendors ledger entrjes.
    * @param {number} tenantId -
    * @param {Date|string} date -
@@ -107,10 +112,19 @@ export class VendorBalanceSummaryService
     // Retrieve the vendor balance summary meta.
     const meta = await this.vendorBalanceSummaryMeta.meta(tenantId, filter);
 
+    // Triggers `onVendorBalanceSummaryViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.reports.onVendorBalanceSummaryViewed,
+      {
+        tenantId,
+        query,
+      }
+    );
+
     return {
       data: reportInstance.reportData(),
       query: filter,
-      meta
+      meta,
     };
   }
 }

packages/server/src/services/Items/ItemsApplication.ts

@@ -39,8 +39,8 @@ export class ItemsApplication {
 
   /**
    * Creates a new item (service/product).
-   * @param   {number} tenantId
+   * @param {number} tenantId
-   * @param   {IItemCreateDTO} itemDTO
+   * @param {IItemCreateDTO} itemDTO
    * @returns {Promise<IItem>}
    */
   public async createItem(
@@ -52,8 +52,8 @@ export class ItemsApplication {
 
   /**
    * Retrieves the given item.
-   * @param   {number} tenantId
+   * @param {number} tenantId
-   * @param   {number} itemId
+   * @param {number} itemId
    * @returns {Promise<IItem>}
    */
   public getItem(tenantId: number, itemId: number): Promise<IItem> {
@@ -62,9 +62,9 @@ export class ItemsApplication {
 
   /**
    * Edits the given item (service/product).
-   * @param   {number} tenantId
+   * @param {number} tenantId
-   * @param   {number} itemId
+   * @param {number} itemId
-   * @param   {IItemEditDTO} itemDTO
+   * @param {IItemEditDTO} itemDTO
    * @returns {Promise<IItem>}
    */
   public editItem(tenantId: number, itemId: number, itemDTO: IItemEditDTO) {
@@ -73,8 +73,8 @@ export class ItemsApplication {
 
   /**
    * Deletes the given item (service/product).
-   * @param   {number} tenantId
+   * @param {number} tenantId
-   * @param   {number} itemId
+   * @param {number} itemId
    * @returns {Promise<void>}
    */
   public deleteItem(tenantId: number, itemId: number) {

packages/server/src/services/MailNotification/ContactMailNotification.ts

@@ -23,22 +23,24 @@ export class ContactMailNotification {
   public async getDefaultMailOptions(
     tenantId: number,
     customerId: number
-  ): Promise<Pick<CommonMailOptions, 'to' | 'from'>> {
+  ): Promise<
+    Pick<CommonMailOptions, 'to' | 'from' | 'toOptions' | 'fromOptions'>
+  > {
     const { Customer } = this.tenancy.models(tenantId);
     const customer = await Customer.query()
       .findById(customerId)
       .throwIfNotFound();
 
-    const toAddresses = customer.contactAddresses;
+    const toOptions = customer.contactAddresses;
-    const fromAddresses = await this.mailTenancy.senders(tenantId);
+    const fromOptions = await this.mailTenancy.senders(tenantId);
 
-    const toAddress = toAddresses.find((a) => a.primary);
+    const toAddress = toOptions.find((a) => a.primary);
-    const fromAddress = fromAddresses.find((a) => a.primary);
+    const fromAddress = fromOptions.find((a) => a.primary);
 
     const to = toAddress?.mail ? castArray(toAddress?.mail) : [];
     const from = fromAddress?.mail ? castArray(fromAddress?.mail) : [];
 
-    return { to, from };
+    return { to, from, toOptions, fromOptions };
   }
 
   /**
@@ -46,7 +48,7 @@ export class ContactMailNotification {
    * @param {number} tenantId - Tenant id.
    * @returns {Promise<CommonMailOptions>}
    */
-  public async parseMailOptions(
+  public async formatMailOptions(
     tenantId: number,
     mailOptions: CommonMailOptions,
     formatterArgs?: Record<string, any>

packages/server/src/services/MailNotification/utils.ts

@@ -44,3 +44,13 @@ export function validateRequiredMailOptions(
     throw new ServiceError(ERRORS.MAIL_BODY_NOT_FOUND);
   }
 }
+
+export const mergeAndValidateMailOptions = (
+  mailOptions: CommonMailOptions,
+  overridedOptions: Partial<CommonMailOptions>
+): CommonMailOptions => {
+  const parsedMessageOptions = parseMailOptions(mailOptions, overridedOptions);
+  validateRequiredMailOptions(parsedMessageOptions);
+
+  return parsedMessageOptions;
+};

packages/server/src/services/ManualJournals/CommandManualJournalValidators.ts

@@ -1,4 +1,4 @@
-import { difference, isEmpty } from 'lodash';
+import { difference, isEmpty, round, sumBy } from 'lodash';
 import { Service, Inject } from 'typedi';
 import { ServiceError } from '@/exceptions';
 import {
@@ -23,20 +23,18 @@ export class CommandManualJournalValidators {
    * @param {IManualJournalDTO} manualJournalDTO
    */
   public valdiateCreditDebitTotalEquals(manualJournalDTO: IManualJournalDTO) {
-    let totalCredit = 0;
+    const totalCredit = round(
-    let totalDebit = 0;
+      sumBy(manualJournalDTO.entries, (entry) => entry.credit || 0),
-
+      2
-    manualJournalDTO.entries.forEach((entry) => {
+    );
-      if (entry.credit > 0) {
+    const totalDebit = round(
-        totalCredit += entry.credit;
+      sumBy(manualJournalDTO.entries, (entry) => entry.debit || 0),
-      }
+      2
-      if (entry.debit > 0) {
+    );
-        totalDebit += entry.debit;
-      }
-    });
     if (totalCredit <= 0 || totalDebit <= 0) {
       throw new ServiceError(ERRORS.CREDIT_DEBIT_NOT_EQUAL_ZERO);
     }
+
     if (totalCredit !== totalDebit) {
       throw new ServiceError(ERRORS.CREDIT_DEBIT_NOT_EQUAL);
     }

packages/server/src/services/PaymentLinks/GetInvoicePaymentLinkMetadata.ts

@@ -25,7 +25,7 @@ export class GetInvoicePaymentLinkMetadata {
       .findOne('linkId', linkId)
       .where('resourceType', 'SaleInvoice')
       .throwIfNotFound();
- 
+
     // Validate the expiry at date.
     if (paymentLink.expiryAt) {
       const currentDate = moment();
@@ -46,6 +46,7 @@ export class GetInvoicePaymentLinkMetadata {
       .withGraphFetched('customer')
       .withGraphFetched('taxes.taxRate')
       .withGraphFetched('paymentMethods.paymentIntegration')
+      .withGraphFetched('pdfTemplate')
       .throwIfNotFound();
 
     return this.transformer.transform(

packages/server/src/services/PaymentLinks/GetPaymentLinkInvoicePdf.ts

@@ -12,9 +12,11 @@ export class GetPaymentLinkInvoicePdf {
    * Retrieves the sale invoice PDF of the given payment link id.
    * @param {number} tenantId
    * @param {number} paymentLinkId
-   * @returns {Promise<Buffer>}
+   * @returns {Promise<Buffer, string>}
    */
-  async getPaymentLinkInvoicePdf(paymentLinkId: string): Promise<Buffer> {
+  async getPaymentLinkInvoicePdf(
+    paymentLinkId: string
+  ): Promise<[Buffer, string]> {
     const paymentLink = await PaymentLink.query()
       .findOne('linkId', paymentLinkId)
       .where('resourceType', 'SaleInvoice')

packages/server/src/services/PaymentLinks/PaymentLinksApplication.ts

@@ -11,7 +11,7 @@ export class PaymentLinksApplication {
 
   @Inject()
   private createInvoiceCheckoutSessionService: CreateInvoiceCheckoutSession;
-  
+
   @Inject()
   private getPaymentLinkInvoicePdfService: GetPaymentLinkInvoicePdf;
 
@@ -45,7 +45,9 @@ export class PaymentLinksApplication {
    * @param {number} paymentLinkId
    * @returns {Promise<Buffer> }
    */
-  public getPaymentLinkInvoicePdf(paymentLinkId: string): Promise<Buffer> {
+  public getPaymentLinkInvoicePdf(
+    paymentLinkId: string
+  ): Promise<[Buffer, string]> {
     return this.getPaymentLinkInvoicePdfService.getPaymentLinkInvoicePdf(
       paymentLinkId
     );

packages/server/src/services/PdfTemplate/GetPdfTemplateTransformer.ts

@@ -1,10 +1,9 @@
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { getTransactionTypeLabel } from '@/utils/transactions-types';
-import { getUploadedObjectUri } from '../Attachments/utils';
 
 export class GetPdfTemplateTransformer extends Transformer {
   /**
-   * Includeded attributes.
+   * Included attributes.
    * @returns {string[]}
    */
   public includeAttributes = (): string[] => {
@@ -44,20 +43,10 @@ export class GetPdfTemplateTransformer extends Transformer {
 
 class GetPdfTemplateAttributesTransformer extends Transformer {
   /**
-   * Includeded attributes.
+   * Included attributes.
    * @returns {string[]}
    */
   public includeAttributes = (): string[] => {
-    return ['companyLogoUri'];
+    return [];
   };
-
-  /**
-   * Retrieves the company logo uri.
-   * @returns {string}
-   */
-  protected companyLogoUri(template) {
-    return template.companyLogoKey
-      ? getUploadedObjectUri(template.companyLogoKey)
-      : '';
-  }
 }

packages/server/src/services/PdfTemplate/types.ts

@@ -66,7 +66,6 @@ export interface ICreateInvoicePdfTemplateDTO {
   showStatement?: boolean;
 }
 
-
 export interface CommonOrganizationBrandingAttributes {
   companyName?: string;
   primaryColor?: string;

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

@@ -3,6 +3,8 @@ import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
 import { SaleEstimateTransfromer } from './SaleEstimateTransformer';
 import { SaleEstimateValidators } from './SaleEstimateValidators';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
 
 @Service()
 export class GetSaleEstimate {
@@ -15,6 +17,9 @@ export class GetSaleEstimate {
   @Inject()
   private validators: SaleEstimateValidators;
 
+  @Inject()
+  private eventPublisher: EventPublisher;
+
   /**
    * Retrieve the estimate details with associated entries.
    * @async
@@ -35,10 +40,18 @@ export class GetSaleEstimate {
     this.validators.validateEstimateExistance(estimate);
 
     // Transformes sale estimate model to POJO.
-    return this.transformer.transform(
+    const transformed = await this.transformer.transform(
       tenantId,
       estimate,
       new SaleEstimateTransfromer()
     );
+    const eventPayload = { tenantId, saleEstimateId: estimateId };
+
+    // Triggers `onSaleEstimateViewed` event.
+    await this.eventPublisher.emitAsync(
+      events.saleEstimate.onViewed,
+      eventPayload
+    );
+    return transformed;
   }
 }

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

@@ -13,9 +13,10 @@ import {
   SaleEstimateMailOptionsDTO,
 } from '@/interfaces';
 import { ContactMailNotification } from '@/services/MailNotification/ContactMailNotification';
-import { parseAndValidateMailOptions } from '@/services/MailNotification/utils';
+import { mergeAndValidateMailOptions } from '@/services/MailNotification/utils';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import events from '@/subscribers/events';
+import { transformEstimateToMailDataArgs } from './utils';
 
 @Service()
 export class SendSaleEstimateMail {
@@ -65,23 +66,17 @@ export class SendSaleEstimateMail {
   }
 
   /**
-   * Formates the text of the mail.
+   * Formate the text of the mail.
    * @param {number} tenantId - Tenant id.
    * @param {number} estimateId - Estimate id.
    * @returns {Promise<Record<string, any>>}
    */
-  public formatterData = async (tenantId: number, estimateId: number) => {
+  public formatterArgs = async (tenantId: number, estimateId: number) => {
     const estimate = await this.getSaleEstimateService.getEstimate(
       tenantId,
       estimateId
     );
-    return {
+    return transformEstimateToMailDataArgs(estimate);
-      CustomerName: estimate.customer.displayName,
-      EstimateNumber: estimate.estimateNumber,
-      EstimateDate: estimate.formattedEstimateDate,
-      EstimateAmount: estimate.formattedAmount,
-      EstimateExpirationDate: estimate.formattedExpirationDate,
-    };
   };
 
   /**
@@ -92,7 +87,9 @@ export class SendSaleEstimateMail {
    */
   public getMailOptions = async (
     tenantId: number,
-    saleEstimateId: number
+    saleEstimateId: number,
+    defaultSubject: string = DEFAULT_ESTIMATE_REMINDER_MAIL_SUBJECT,
+    defaultMessage: string = DEFAULT_ESTIMATE_REMINDER_MAIL_CONTENT
   ): Promise<SaleEstimateMailOptions> => {
     const { SaleEstimate } = this.tenancy.models(tenantId);
 
@@ -100,22 +97,44 @@ export class SendSaleEstimateMail {
       .findById(saleEstimateId)
       .throwIfNotFound();
 
-    const formatterData = await this.formatterData(tenantId, saleEstimateId);
+    const formatArgs = await this.formatterArgs(tenantId, saleEstimateId);
 
-    const mailOptions = await this.contactMailNotification.getMailOptions(
+    const mailOptions =
-      tenantId,
+      await this.contactMailNotification.getDefaultMailOptions(
-      saleEstimate.customerId,
+        tenantId,
-      DEFAULT_ESTIMATE_REMINDER_MAIL_SUBJECT,
+        saleEstimate.customerId
-      DEFAULT_ESTIMATE_REMINDER_MAIL_CONTENT,
+      );
-      formatterData
-    );
     return {
       ...mailOptions,
-      data: formatterData,
+      message: defaultMessage,
+      subject: defaultSubject,
       attachEstimate: true,
+      formatArgs,
     };
   };
 
+  /**
+   * Formats the given mail options.
+   * @param {number} tenantId
+   * @param {number} saleEstimateId
+   * @param {SaleEstimateMailOptions} mailOptions
+   * @returns {Promise<SaleEstimateMailOptions>}
+   */
+  public formatMailOptions = async (
+    tenantId: number,
+    saleEstimateId: number,
+    mailOptions: SaleEstimateMailOptions
+  ): Promise<SaleEstimateMailOptions> => {
+    const formatterArgs = await this.formatterArgs(tenantId, saleEstimateId);
+    const formattedOptions =
+      await this.contactMailNotification.formatMailOptions(
+        tenantId,
+        mailOptions,
+        formatterArgs
+      );
+    return { ...formattedOptions };
+  };
+
   /**
    * Sends the mail notification of the given sale estimate.
    * @param {number} tenantId
@@ -133,27 +152,54 @@ export class SendSaleEstimateMail {
       saleEstimateId
     );
     // Overrides and validates the given mail options.
-    const messageOpts = parseAndValidateMailOptions(
+    const parsedMessageOptions = mergeAndValidateMailOptions(
       localMessageOpts,
       messageOptions
+    ) as SaleEstimateMailOptions;
+
+    const formattedOptions = await this.formatMailOptions(
+      tenantId,
+      saleEstimateId,
+      parsedMessageOptions
     );
     const mail = new Mail()
-      .setSubject(messageOpts.subject)
+      .setSubject(formattedOptions.subject)
-      .setTo(messageOpts.to)
+      .setTo(formattedOptions.to)
-      .setContent(messageOpts.body);
+      .setCC(formattedOptions.cc)
+      .setBCC(formattedOptions.bcc)
+      .setContent(formattedOptions.message);
+
+    // Attaches the estimate pdf to the mail.
+    if (formattedOptions.attachEstimate) {
+      // Retrieves the estimate pdf and attaches it to the mail.
+      const [estimatePdfBuffer, estimateFilename] =
+        await this.estimatePdf.getSaleEstimatePdf(tenantId, saleEstimateId);
 
-    if (messageOpts.attachEstimate) {
-      const estimatePdfBuffer = await this.estimatePdf.getSaleEstimatePdf(
-        tenantId,
-        saleEstimateId
-      );
       mail.setAttachments([
         {
-          filename: messageOpts.data?.EstimateNumber || 'estimate.pdf',
+          filename: `${estimateFilename}.pdf`,
           content: estimatePdfBuffer,
         },
       ]);
     }
+
+    const eventPayload = {
+      tenantId,
+      saleEstimateId,
+      messageOptions,
+      formattedOptions,
+    };
+    // Triggers `onSaleEstimateMailSend` event.
+    await this.eventPublisher.emitAsync(
+      events.saleEstimate.onMailSend,
+      eventPayload as ISaleEstimateMailPresendEvent
+    );
     await mail.send();
+
+    // Triggers `onSaleEstimateMailSent` event.
+    await this.eventPublisher.emitAsync(
+      events.saleEstimate.onMailSent,
+      eventPayload as ISaleEstimateMailPresendEvent
+    );
   }
 }

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

@@ -1,16 +1,16 @@
 export const DEFAULT_ESTIMATE_REMINDER_MAIL_SUBJECT =
-  'Estimate {EstimateNumber} is awaiting your approval';
+  'Estimate {Estimate Number} is awaiting your approval';
-export const DEFAULT_ESTIMATE_REMINDER_MAIL_CONTENT = `<p>Dear {CustomerName}</p>
+export const DEFAULT_ESTIMATE_REMINDER_MAIL_CONTENT = `<p>Dear {Customer Name}</p>
 <p>Thank you for your business, You can view or print your estimate from attachements.</p>
 <p>
-Estimate <strong>#{EstimateNumber}</strong><br />
+Estimate <strong>#{Estimate Number}</strong><br />
-Expiration Date : <strong>{EstimateExpirationDate}</strong><br />
+Expiration Date : <strong>{Estimate Expiration Date}</strong><br />
-Amount   : <strong>{EstimateAmount}</strong></br />
+Amount   : <strong>{Estimate Amount}</strong></br />
 </p>
 
 <p>
 <i>Regards</i><br />
-<i>{CompanyName}</i>
+<i>{Company Name}</i>
 </p>
 `;
 

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

@@ -22,3 +22,13 @@ export const transformEstimateToPdfTemplate = (
     customerAddress: contactAddressTextFormat(estimate.customer),
   };
 };
+
+export const transformEstimateToMailDataArgs = (estimate: any) => {
+  return {
+    'Customer Name': estimate.customer.displayName,
+    'Estimate Number': estimate.estimateNumber,
+    'Estimate Date': estimate.formattedEstimateDate,
+    'Estimate Amount': estimate.formattedAmount,
+    'Estimate Expiration Date': estimate.formattedExpirationDate,
+  };
+};

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

@@ -32,15 +32,14 @@ export class GenerateShareLink {
    */
   async generatePaymentLink(
     tenantId: number,
-    transactionId: number,
+    saleInvoiceId: number,
-    transactionType: string,
     publicity: string = 'private',
     expiryTime: string = ''
   ) {
     const { SaleInvoice } = this.tenancy.models(tenantId);
 
     const foundInvoice = await SaleInvoice.query()
-      .findById(transactionId)
+      .findById(saleInvoiceId)
       .throwIfNotFound();
 
     // Generate unique uuid for sharable link.
@@ -48,8 +47,7 @@ export class GenerateShareLink {
 
     const commonEventPayload = {
       tenantId,
-      transactionId,
+      saleInvoiceId,
-      transactionType,
       publicity,
       expiryTime,
     };

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

@@ -4,6 +4,7 @@ import { SaleInvoiceTaxEntryTransformer } from './SaleInvoiceTaxEntryTransformer
 import { SaleInvoiceTransformer } from './SaleInvoiceTransformer';
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { contactAddressTextFormat } from '@/utils/address-text-format';
+import { GetPdfTemplateTransformer } from '@/services/PdfTemplate/GetPdfTemplateTransformer';
 
 export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer {
   /**
@@ -45,6 +46,7 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
       'isReceivable',
       'hasStripePaymentMethod',
       'formattedCustomerAddress',
+      'brandingTemplate',
     ];
   };
 
@@ -63,6 +65,18 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
     );
   }
 
+  /**
+   * Retrieves the branding template for the payment link.
+   * @param {} invoice
+   * @returns
+   */
+  public brandingTemplate(invoice) {
+    return this.item(
+      invoice.pdfTemplate,
+      new GetInvoicePaymentLinkBrandingTemplate()
+    );
+  }
+
   /**
    * Retrieves the entries of the sale invoice.
    * @param {ISaleInvoice} invoice
@@ -114,7 +128,7 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
 
   /**
    * Retrieves the formatted customer address.
-   * @param invoice 
+   * @param invoice
    * @returns {string}
    */
   protected formattedCustomerAddress(invoice) {
@@ -193,3 +207,17 @@ class GetInvoicePaymentLinkTaxEntryTransformer extends SaleInvoiceTaxEntryTransf
     return ['name', 'taxRateCode', 'taxRateAmount', 'taxRateAmountFormatted'];
   };
 }
+
+class GetInvoicePaymentLinkBrandingTemplate extends GetPdfTemplateTransformer {
+  public includeAttributes = (): string[] => {
+    return ['companyLogoUri', 'primaryColor'];
+  };
+
+  public excludeAttributes = (): string[] => {
+    return ['*'];
+  };
+
+  primaryColor = (template) => {
+    return template.attributes?.primaryColor;
+  };
+}

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

@@ -21,6 +21,7 @@ export class GetInvoicePaymentMail {
 
   /**
    * Retrieves the mail template attributes of the given invoice.
+   * Invoice template attributes are composed of the invoice and branding template attributes.
    * @param {number} tenantId - Tenant id.
    * @param {number} invoiceId - Invoice id.
    */

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

@@ -41,7 +41,7 @@ export class GetInvoiceMailTemplateAttributesTransformer extends Transformer {
   };
 
   public companyLogoUri(): string {
-    return this.options.brandingTemplate?.attributes?.companyLogoUri;
+    return this.options.brandingTemplate?.companyLogoUri;
   }
 
   public companyName(): string {

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

@@ -18,7 +18,6 @@ export class GetSaleInvoiceMailState {
   /**
    * Retrieves the invoice mail state of the given sale invoice.
    * Invoice mail state includes the mail options, branding attributes and the invoice details.
-   *
    * @param {number} tenantId
    * @param {number} saleInvoiceId
    * @returns {Promise<SaleInvoiceMailState>}

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

@@ -1,4 +1,3 @@
-import { Transformer } from '@/lib/Transformer/Transformer';
 import { SaleInvoiceTransformer } from './SaleInvoiceTransformer';
 import { ItemEntryTransformer } from './ItemEntryTransformer';
 
@@ -11,6 +10,10 @@ export class GetSaleInvoiceMailStateTransformer extends SaleInvoiceTransformer {
     return ['*'];
   };
 
+  /**
+   * Included attributes.
+   * @returns {Array}
+   */
   public includeAttributes = (): string[] => {
     return [
       'invoiceDate',
@@ -36,17 +39,39 @@ export class GetSaleInvoiceMailStateTransformer extends SaleInvoiceTransformer {
       'companyLogoUri',
 
       'primaryColor',
+
+      'customerName',
     ];
   };
 
+  /**
+   * Retrieves the customer name of the invoice.
+   * @returns {string}
+   */
+  protected customerName = (invoice) => {
+    return invoice.customer.displayName;
+  };
+
+  /**
+   * Retrieves the company name.
+   * @returns {string}
+   */
   protected companyName = () => {
     return this.context.organization.name;
   };
 
+  /**
+   * Retrieves the company logo uri.
+   * @returns {string | null}
+   */
   protected companyLogoUri = (invoice) => {
-    return invoice.pdfTemplate?.attributes?.companyLogoUri;
+    return invoice.pdfTemplate?.companyLogoUri;
   };
 
+  /**
+   * Retrieves the primary color.
+   * @returns {string}
+   */
   protected primaryColor = (invoice) => {
     return invoice.pdfTemplate?.attributes?.primaryColor;
   };

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

@@ -33,8 +33,12 @@ export class SaleEstimatePdfTemplate {
       ...defaultEstimatePdfBrandingAttributes,
       ...commonOrgBrandingAttrs,
     };
+    const brandingTemplateAttrs = {
+      ...template.attributes,
+      companyLogoUri: template.companyLogoUri,
+    };
     const attributes = mergePdfTemplateWithDefaultAttributes(
-      template.attributes,
+      brandingTemplateAttrs,
       orgainizationBrandingAttrs
     );
     return {

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

@@ -1,4 +1,5 @@
 import { Inject, Service } from 'typedi';
+import { renderInvoicePaperTemplateHtml } from '@bigcapital/pdf-templates';
 import { ChromiumlyTenancy } from '@/services/ChromiumlyTenancy/ChromiumlyTenancy';
 import { TemplateInjectable } from '@/services/TemplateInjectable/TemplateInjectable';
 import { GetSaleInvoice } from './GetSaleInvoice';
@@ -8,6 +9,7 @@ import { InvoicePdfTemplateAttributes } from '@/interfaces';
 import { SaleInvoicePdfTemplate } from './SaleInvoicePdfTemplate';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import events from '@/subscribers/events';
+import { renderInvoicePaymentEmail } from '@bigcapital/email-components';
 
 @Service()
 export class SaleInvoicePdf {
@@ -17,9 +19,6 @@ export class SaleInvoicePdf {
   @Inject()
   private chromiumlyTenancy: ChromiumlyTenancy;
 
-  @Inject()
-  private templateInjectable: TemplateInjectable;
-
   @Inject()
   private getInvoiceService: GetSaleInvoice;
 
@@ -29,6 +28,25 @@ export class SaleInvoicePdf {
   @Inject()
   private eventPublisher: EventPublisher;
 
+  /**
+   * Retrieve sale invoice html content.
+   * @param {number} tenantId - Tenant Id.
+   * @param {ISaleInvoice} saleInvoice -
+   * @returns {Promise<string>}
+   */
+  public async saleInvoiceHtml(
+    tenantId: number,
+    invoiceId: number
+  ): Promise<string> {
+    const brandingAttributes = await this.getInvoiceBrandingAttributes(
+      tenantId,
+      invoiceId
+    );
+    return renderInvoicePaperTemplateHtml({
+      ...brandingAttributes,
+    });
+  }
+
   /**
    * Retrieve sale invoice pdf content.
    * @param {number} tenantId - Tenant Id.
@@ -41,15 +59,8 @@ export class SaleInvoicePdf {
   ): Promise<[Buffer, string]> {
     const filename = await this.getInvoicePdfFilename(tenantId, invoiceId);
 
-    const brandingAttributes = await this.getInvoiceBrandingAttributes(
+    const htmlContent = await this.saleInvoiceHtml(tenantId, invoiceId);
-      tenantId,
+
-      invoiceId
-    );
-    const htmlContent = await this.templateInjectable.render(
-      tenantId,
-      'modules/invoice-standard',
-      brandingAttributes
-    );
     // Converts the given html content to pdf document.
     const buffer = await this.chromiumlyTenancy.convertHtmlContent(
       tenantId,

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

@@ -32,8 +32,12 @@ export class SaleInvoicePdfTemplate {
       ...defaultInvoicePdfTemplateAttributes,
       ...commonOrgBrandingAttrs,
     };
+    const brandingTemplateAttrs = {
+      ...template.attributes,
+      companyLogoUri: template.companyLogoUri,
+    };
     const attributes = mergePdfTemplateWithDefaultAttributes(
-      template.attributes,
+      brandingTemplateAttrs,
       organizationBrandingAttrs
     );
     return {

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

@@ -28,9 +28,7 @@ import { GetInvoicePaymentsService } from './GetInvoicePaymentsService';
 import { SaleInvoiceNotifyBySms } from './SaleInvoiceNotifyBySms';
 import { SendInvoiceMailReminder } from './SendSaleInvoiceMailReminder';
 import { SendSaleInvoiceMail } from './SendSaleInvoiceMail';
-import { GetSaleInvoiceMailReminder } from './GetSaleInvoiceMailReminder';
 import { GetSaleInvoiceState } from './GetSaleInvoiceState';
-import { GetSaleInvoiceBrandTemplate } from './GetSaleInvoiceBrandTemplate';
 import { GetSaleInvoiceMailState } from './GetSaleInvoiceMailState';
 
 @Service()
@@ -275,6 +273,19 @@ export class SaleInvoiceApplication {
     return this.pdfSaleInvoiceService.saleInvoicePdf(tenantId, saleInvoiceId);
   }
 
+  /**
+   * Retrieves the html content of the given sale invoice.
+   * @param {number} tenantId
+   * @param {number} saleInvoiceId
+   * @returns {Promise<string>}
+   */
+  public saleInvoiceHtml(
+    tenantId: number,
+    saleInvoiceId: number
+  ): Promise<string> {
+    return this.pdfSaleInvoiceService.saleInvoiceHtml(tenantId, saleInvoiceId);
+  }
+
   /**
    *
    * @param {number} tenantId
@@ -366,7 +377,10 @@ export class SaleInvoiceApplication {
    * @param {number} saleInvoiceid
    * @returns {Promise<SaleInvoiceMailState>}
    */
-  public getSaleInvoiceMailState(tenantId: number, saleInvoiceid: number) {
+  public getSaleInvoiceMailState(
+    tenantId: number,
+    saleInvoiceid: number
+  ): Promise<SaleInvoiceMailState> {
     return this.getSaleInvoiceMailStateService.getInvoiceMailState(
       tenantId,
       saleInvoiceid

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

@@ -8,6 +8,7 @@ import {
   DEFAULT_INVOICE_MAIL_SUBJECT,
 } from './constants';
 import { GetInvoicePaymentMail } from './GetInvoicePaymentMail';
+import { GenerateShareLink } from './GenerateeInvoicePaymentLink';
 
 @Service()
 export class SendSaleInvoiceMailCommon {
@@ -23,6 +24,9 @@ export class SendSaleInvoiceMailCommon {
   @Inject()
   private getInvoicePaymentMail: GetInvoicePaymentMail;
 
+  @Inject()
+  private generatePaymentLinkService: GenerateShareLink;
+
   /**
    * Retrieves the mail options.
    * @param {number} tenantId - Tenant id.
@@ -75,20 +79,32 @@ export class SendSaleInvoiceMailCommon {
       tenantId,
       invoiceId
     );
-    const parsedOptions = await this.contactMailNotification.parseMailOptions(
+    const formattedOptions =
-      tenantId,
+      await this.contactMailNotification.formatMailOptions(
-      mailOptions,
+        tenantId,
-      formatterArgs
+        mailOptions,
-    );
+        formatterArgs
+      );
+    // Generates the a new payment link for the given invoice.
+    const paymentLink =
+      await this.generatePaymentLinkService.generatePaymentLink(
+        tenantId,
+        invoiceId,
+        'public'
+      );
     const message = await this.getInvoicePaymentMail.getMailTemplate(
       tenantId,
       invoiceId,
       {
         // # Invoice message
-        invoiceMessage: parsedOptions.message,
+        invoiceMessage: formattedOptions.message,
+        preview: formattedOptions.message,
+
+        // # Payment link
+        viewInvoiceButtonUrl: paymentLink.link,
       }
     );
-    return { ...parsedOptions, message };
+    return { ...formattedOptions, message };
   }
 
   /**
@@ -111,13 +127,13 @@ export class SendSaleInvoiceMailCommon {
     );
     return {
       ...commonArgs,
-      ['Customer Name']: invoice.customer.displayName,
+      'Customer Name': invoice.customer.displayName,
-      ['Invoice Number']: invoice.invoiceNo,
+      'Invoice Number': invoice.invoiceNo,
-      ['Invoice DueAmount']: invoice.dueAmountFormatted,
+      'Invoice Due Amount': invoice.dueAmountFormatted,
-      ['Invoice DueDate']: invoice.dueDateFormatted,
+      'Invoice Due Date': invoice.dueDateFormatted,
-      ['Invoice Date']: invoice.invoiceDateFormatted,
+      'Invoice Date': invoice.invoiceDateFormatted,
-      ['Invoice Amount']: invoice.totalFormatted,
+      'Invoice Amount': invoice.totalFormatted,
-      ['Overdue Days']: invoice.overdueDays,
+      'Overdue Days': invoice.overdueDays,
     };
   };
 }

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

@@ -1,12 +1,13 @@
 import { Inject, Service } from 'typedi';
 import Mail from '@/lib/Mail';
-import { ISaleInvoiceMailSend, SendInvoiceMailDTO } from '@/interfaces';
+import {
+  ISaleInvoiceMailSend,
+  SaleInvoiceMailOptions,
+  SendInvoiceMailDTO,
+} from '@/interfaces';
 import { SaleInvoicePdf } from './SaleInvoicePdf';
 import { SendSaleInvoiceMailCommon } from './SendInvoiceInvoiceMailCommon';
-import {
+import { mergeAndValidateMailOptions } from '@/services/MailNotification/utils';
-  parseMailOptions,
-  validateRequiredMailOptions,
-} from '@/services/MailNotification/utils';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import events from '@/subscribers/events';
 
@@ -18,12 +19,12 @@ export class SendSaleInvoiceMail {
   @Inject()
   private invoiceMail: SendSaleInvoiceMailCommon;
 
-  @Inject('agenda')
-  private agenda: any;
-
   @Inject()
   private eventPublisher: EventPublisher;
 
+  @Inject('agenda')
+  private agenda: any;
+
   /**
    * Sends the invoice mail of the given sale invoice.
    * @param {number} tenantId
@@ -50,6 +51,34 @@ export class SendSaleInvoiceMail {
     } as ISaleInvoiceMailSend);
   }
 
+  /**
+   * Retrieves the formatted mail options.
+   * @param {number} tenantId
+   * @param {number} saleInvoiceId
+   * @param {SendInvoiceMailDTO} messageOptions
+   * @returns {Promise<SaleInvoiceMailOptions>}
+   */
+  async getFormattedMailOptions(
+    tenantId: number,
+    saleInvoiceId: number,
+    messageOptions: SendInvoiceMailDTO
+  ): Promise<SaleInvoiceMailOptions> {
+    const defaultMessageOptions = await this.invoiceMail.getInvoiceMailOptions(
+      tenantId,
+      saleInvoiceId
+    );
+    // Merges message options with default options and parses the options values.
+    const parsedMessageOptions = mergeAndValidateMailOptions(
+      defaultMessageOptions,
+      messageOptions
+    );
+    return this.invoiceMail.formatInvoiceMailOptions(
+      tenantId,
+      saleInvoiceId,
+      parsedMessageOptions
+    );
+  }
+
   /**
    * Triggers the mail invoice.
    * @param {number} tenantId
@@ -62,27 +91,16 @@ export class SendSaleInvoiceMail {
     saleInvoiceId: number,
     messageOptions: SendInvoiceMailDTO
   ) {
-    const defaultMessageOptions = await this.invoiceMail.getInvoiceMailOptions(
+    const formattedMessageOptions = await this.getFormattedMailOptions(
       tenantId,
-      saleInvoiceId
+      saleInvoiceId,
-    );
-    // Merges message options with default options and parses the options values.
-    const parsedMessageOptions = parseMailOptions(
-      defaultMessageOptions,
       messageOptions
     );
-    // Validates the required mail options.
-    validateRequiredMailOptions(parsedMessageOptions);
-
-    const formattedMessageOptions =
-      await this.invoiceMail.formatInvoiceMailOptions(
-        tenantId,
-        saleInvoiceId,
-        parsedMessageOptions
-      );
     const mail = new Mail()
       .setSubject(formattedMessageOptions.subject)
       .setTo(formattedMessageOptions.to)
+      .setCC(formattedMessageOptions.cc)
+      .setBCC(formattedMessageOptions.bcc)
       .setContent(formattedMessageOptions.message);
 
     // Attach invoice document.
@@ -95,7 +113,6 @@ export class SendSaleInvoiceMail {
         { filename: `${invoiceFilename}.pdf`, content: invoicePdfBuffer },
       ]);
     }
-
     const eventPayload = {
       tenantId,
       saleInvoiceId,

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

@@ -1,20 +1,19 @@
 import config from '@/config';
 
 export const DEFAULT_INVOICE_MAIL_SUBJECT =
-  'Invoice {Invoice Number} from {Company Name}';
+  'Invoice {Invoice Number} from {Company Name} for {Customer Name}';
-export const DEFAULT_INVOICE_MAIL_CONTENT = `
+export const DEFAULT_INVOICE_MAIL_CONTENT = `Hi {Customer Name},
-<p>Dear {Customer Name}</p>
-<p>Thank you for your business, You can view or print your invoice from attachements.</p>
-<p>
-Invoice <strong>#{Invoice Number}</strong><br />
-Due Date : <strong>{Invoice Due Date}</strong><br />
-Amount   : <strong>{Invoice Amount}</strong></br />
-</p>
 
-<p>
+Here's invoice # {Invoice Number} for {Invoice Amount}
-<i>Regards</i><br />
+
-<i>{Company Name}</i>
+The amount outstanding of {Invoice Due Amount} is due on {Invoice Due Date}.
-</p>
+
+From your online payment page you can print a PDF or view your outstanding bills.
+
+If you have any questions, please let us know.
+
+Thanks,
+{Company Name}
 `;
 
 export const DEFAULT_INVOICE_REMINDER_MAIL_SUBJECT =

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

@@ -27,7 +27,7 @@ export const transformInvoiceToPdfTemplate = (
     total: invoice.totalFormatted,
     subtotal: invoice.subtotalFormatted,
     paymentMade: invoice.paymentAmountFormatted,
-    balanceDue: invoice.balanceAmountFormatted,
+    dueAmount: invoice.dueAmountFormatted,
 
     termsConditions: invoice.termsConditions,
     statement: invoice.invoiceMessage,

packages/server/src/services/Sales/PaymentReceived/PaymentReceivedBrandingTemplate.ts

@@ -37,8 +37,12 @@ export class PaymentReceivedBrandingTemplate {
       ...defaultPaymentReceivedPdfTemplateAttributes,
       ...commonOrgBrandingAttrs,
     };
+    const brandingTemplateAttrs = {
+      ...template.attributes,
+      companyLogoUri: template.companyLogoUri,
+    };
     const attributes = mergePdfTemplateWithDefaultAttributes(
-      template.attributes,
+      brandingTemplateAttrs,
       organizationBrandingAttrs
     );
     return {

packages/server/src/services/Sales/PaymentReceived/PaymentReceivedMailNotification.ts

@@ -13,9 +13,10 @@ import {
 } from './constants';
 import { GetPaymentReceived } from './GetPaymentReceived';
 import { ContactMailNotification } from '@/services/MailNotification/ContactMailNotification';
-import { parseAndValidateMailOptions } from '@/services/MailNotification/utils';
+import { mergeAndValidateMailOptions } from '@/services/MailNotification/utils';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import events from '@/subscribers/events';
+import { transformPaymentReceivedToMailDataArgs } from './utils';
 
 @Service()
 export class SendPaymentReceiveMailNotification {
@@ -77,15 +78,19 @@ export class SendPaymentReceiveMailNotification {
       .findById(paymentId)
       .throwIfNotFound();
 
-    const formatterData = await this.textFormatter(tenantId, paymentId);
+    const formatArgs = await this.textFormatter(tenantId, paymentId);
 
-    return this.contactMailNotification.getMailOptions(
+    const mailOptions =
-      tenantId,
+      await this.contactMailNotification.getDefaultMailOptions(
-      paymentReceive.customerId,
+        tenantId,
-      DEFAULT_PAYMENT_MAIL_SUBJECT,
+        paymentReceive.customerId
-      DEFAULT_PAYMENT_MAIL_CONTENT,
+      );
-      formatterData
+    return {
-    );
+      ...mailOptions,
+      subject: DEFAULT_PAYMENT_MAIL_SUBJECT,
+      message: DEFAULT_PAYMENT_MAIL_CONTENT,
+      ...formatArgs,
+    };
   };
 
   /**
@@ -103,19 +108,46 @@ export class SendPaymentReceiveMailNotification {
       tenantId,
       invoiceId
     );
-    return {
+    return transformPaymentReceivedToMailDataArgs(payment);
-      CustomerName: payment.customer.displayName,
+  };
-      PaymentNumber: payment.payment_receive_no,
+
-      PaymentDate: payment.formattedPaymentDate,
+  /**
-      PaymentAmount: payment.formattedAmount,
+   * Retrieves the formatted mail options of the given payment receive.
-    };
+   * @param {number} tenantId
+   * @param {number} paymentReceiveId
+   * @param {SendInvoiceMailDTO} messageDTO
+   * @returns {Promise<PaymentReceiveMailOpts>}
+   */
+  public getFormattedMailOptions = async (
+    tenantId: number,
+    paymentReceiveId: number,
+    messageDTO: SendInvoiceMailDTO
+  ) => {
+    const formatterArgs = await this.textFormatter(tenantId, paymentReceiveId);
+
+    // Default message options.
+    const defaultMessageOpts = await this.getMailOptions(
+      tenantId,
+      paymentReceiveId
+    );
+    // Parsed message opts with default options.
+    const parsedMessageOpts = mergeAndValidateMailOptions(
+      defaultMessageOpts,
+      messageDTO
+    );
+    // Formats the message options.
+    return this.contactMailNotification.formatMailOptions(
+      tenantId,
+      parsedMessageOpts,
+      formatterArgs
+    );
   };
 
   /**
    * Triggers the mail invoice.
    * @param {number} tenantId
-   * @param {number} saleInvoiceId
+   * @param {number} saleInvoiceId - Invoice id.
-   * @param {SendInvoiceMailDTO} messageDTO
+   * @param {SendInvoiceMailDTO} messageDTO - Message options.
    * @returns {Promise<void>}
    */
   public async sendMail(
@@ -123,19 +155,35 @@ export class SendPaymentReceiveMailNotification {
     paymentReceiveId: number,
     messageDTO: SendInvoiceMailDTO
   ): Promise<void> {
-    const defaultMessageOpts = await this.getMailOptions(
+    // Retrieves the formatted mail options.
+    const formattedMessageOptions = await this.getFormattedMailOptions(
       tenantId,
-      paymentReceiveId
+      paymentReceiveId,
-    );
-    // Parsed message opts with default options.
-    const parsedMessageOpts = parseAndValidateMailOptions(
-      defaultMessageOpts,
       messageDTO
     );
-    await new Mail()
+    const mail = new Mail()
-      .setSubject(parsedMessageOpts.subject)
+      .setSubject(formattedMessageOptions.subject)
-      .setTo(parsedMessageOpts.to)
+      .setTo(formattedMessageOptions.to)
-      .setContent(parsedMessageOpts.body)
+      .setCC(formattedMessageOptions.cc)
-      .send();
+      .setBCC(formattedMessageOptions.bcc)
+      .setContent(formattedMessageOptions.message);
+
+    const eventPayload = {
+      tenantId,
+      paymentReceiveId,
+      messageOptions: formattedMessageOptions,
+    };
+    // Triggers `onPaymentReceiveMailSend` event.
+    await this.eventPublisher.emitAsync(
+      events.paymentReceive.onMailSend,
+      eventPayload
+    );
+    await mail.send();
+
+    // Triggers `onPaymentReceiveMailSent` event.
+    await this.eventPublisher.emitAsync(
+      events.paymentReceive.onMailSent,
+      eventPayload
+    );
   }
 }

packages/server/src/services/Sales/PaymentReceived/constants.ts

@@ -1,15 +1,16 @@
-export const DEFAULT_PAYMENT_MAIL_SUBJECT = 'Payment Received by {CompanyName}';
+export const DEFAULT_PAYMENT_MAIL_SUBJECT =
+  'Payment Received for {Customer Name} from {Company Name}';
 export const DEFAULT_PAYMENT_MAIL_CONTENT = `
-<p>Dear {CustomerName}</p>
+<p>Dear {Customer Name}</p>
 <p>Thank you for your payment. It was a pleasure doing business with you. We look forward to work together again!</p>
 <p>
-Payment Date : <strong>{PaymentDate}</strong><br />
+Payment Date : <strong>{Payment Date}</strong><br />
-Amount   : <strong>{PaymentAmount}</strong></br />
+Amount   : <strong>{Payment Amount}</strong></br />
 </p>
 
 <p>
 <i>Regards</i><br />
-<i>{CompanyName}</i>
+<i>{Company Name}</i>
 </p>
 `;
 

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

@@ -21,3 +21,12 @@ export const transformPaymentReceivedToPdfTemplate = (
     customerAddress: contactAddressTextFormat(payment.customer),
   };
 };
+
+export const transformPaymentReceivedToMailDataArgs = (payment: any) => {
+  return {
+    'Customer Name': payment.customer.displayName,
+    'Payment Number': payment.paymentReceiveNo,
+    'Payment Date': payment.formattedPaymentDate,
+    'Payment Amount': payment.formattedAmount,
+  };
+};

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

@@ -37,8 +37,12 @@ export class SaleReceiptBrandingTemplate {
       ...defaultSaleReceiptBrandingAttributes,
       ...commonOrgBrandingAttrs,
     };
+    const brandingTemplateAttrs = {
+      ...template.attributes,
+      companyLogoUri: template.companyLogoUri,
+    };
     const attributes = mergePdfTemplateWithDefaultAttributes(
-      template.attributes,
+      brandingTemplateAttrs,
       organizationBrandingAttrs
     );
     return {

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

@@ -13,9 +13,10 @@ import {
   SaleReceiptMailOptsDTO,
 } from '@/interfaces';
 import { ContactMailNotification } from '@/services/MailNotification/ContactMailNotification';
-import { parseAndValidateMailOptions } from '@/services/MailNotification/utils';
+import { mergeAndValidateMailOptions } from '@/services/MailNotification/utils';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import events from '@/subscribers/events';
+import { transformReceiptToMailDataArgs } from './utils';
 
 @Service()
 export class SaleReceiptMailNotification {
@@ -79,18 +80,19 @@ export class SaleReceiptMailNotification {
       .findById(saleReceiptId)
       .throwIfNotFound();
 
-    const formattedData = await this.textFormatter(tenantId, saleReceiptId);
+    const formatArgs = await this.textFormatterArgs(tenantId, saleReceiptId);
 
-    const mailOpts = await this.contactMailNotification.getMailOptions(
+    const mailOptions =
-      tenantId,
+      await this.contactMailNotification.getDefaultMailOptions(
-      saleReceipt.customerId,
+        tenantId,
-      DEFAULT_RECEIPT_MAIL_SUBJECT,
+        saleReceipt.customerId
-      DEFAULT_RECEIPT_MAIL_CONTENT,
+      );
-      formattedData
-    );
     return {
-      ...mailOpts,
+      ...mailOptions,
+      message: DEFAULT_RECEIPT_MAIL_CONTENT,
+      subject: DEFAULT_RECEIPT_MAIL_SUBJECT,
       attachReceipt: true,
+      formatArgs,
     };
   }
 
@@ -101,7 +103,7 @@ export class SaleReceiptMailNotification {
    * @param {string} text - The given text.
    * @returns {Promise<string>}
    */
-  public textFormatter = async (
+  public textFormatterArgs = async (
     tenantId: number,
     receiptId: number
   ): Promise<Record<string, string>> => {
@@ -109,19 +111,66 @@ export class SaleReceiptMailNotification {
       tenantId,
       receiptId
     );
-    return {
+    return transformReceiptToMailDataArgs(receipt);
-      CustomerName: receipt.customer.displayName,
+  };
-      ReceiptNumber: receipt.receiptNumber,
+
-      ReceiptDate: receipt.formattedReceiptDate,
+  /**
-      ReceiptAmount: receipt.formattedAmount,
+   * Formats the mail options of the given sale receipt.
-    };
+   * @param {number} tenantId
+   * @param {number} receiptId
+   * @param {SaleReceiptMailOpts} mailOptions
+   * @returns {Promise<SaleReceiptMailOpts>}
+   */
+  public async formatEstimateMailOptions(
+    tenantId: number,
+    receiptId: number,
+    mailOptions: SaleReceiptMailOpts
+  ): Promise<SaleReceiptMailOpts> {
+    const formatterArgs = await this.textFormatterArgs(tenantId, receiptId);
+    const formattedOptions =
+      (await this.contactMailNotification.formatMailOptions(
+        tenantId,
+        mailOptions,
+        formatterArgs
+      )) as SaleReceiptMailOpts;
+    return formattedOptions;
+  }
+
+  /**
+   * Retrieves the formatted mail options of the given sale receipt.
+   * @param {number} tenantId
+   * @param {number} saleReceiptId
+   * @param {SaleReceiptMailOptsDTO} messageOpts
+   * @returns {Promise<SaleReceiptMailOpts>}
+   */
+  public getFormatMailOptions = async (
+    tenantId: number,
+    saleReceiptId: number,
+    messageOpts: SaleReceiptMailOptsDTO
+  ): Promise<SaleReceiptMailOpts> => {
+    const defaultMessageOptions = await this.getMailOptions(
+      tenantId,
+      saleReceiptId
+    );
+    // Merges message opts with default options.
+    const parsedMessageOpts = mergeAndValidateMailOptions(
+      defaultMessageOptions,
+      messageOpts
+    ) as SaleReceiptMailOpts;
+
+    // Formats the message options.
+    return this.formatEstimateMailOptions(
+      tenantId,
+      saleReceiptId,
+      parsedMessageOpts
+    );
   };
 
   /**
    * Triggers the mail notification of the given sale receipt.
    * @param {number} tenantId - Tenant id.
    * @param {number} saleReceiptId - Sale receipt id.
-   * @param {SaleReceiptMailOpts} messageDTO - Overrided message options.
+   * @param {SaleReceiptMailOpts} messageDTO - message options.
    * @returns {Promise<void>}
    */
   public async sendMail(
@@ -129,30 +178,43 @@ export class SaleReceiptMailNotification {
     saleReceiptId: number,
     messageOpts: SaleReceiptMailOptsDTO
   ) {
-    const defaultMessageOpts = await this.getMailOptions(
+    // Formats the message options.
+    const formattedMessageOptions = await this.getFormatMailOptions(
       tenantId,
-      saleReceiptId
+      saleReceiptId,
-    );
-    // Merges message opts with default options.
-    const parsedMessageOpts = parseAndValidateMailOptions(
-      defaultMessageOpts,
       messageOpts
     );
     const mail = new Mail()
-      .setSubject(parsedMessageOpts.subject)
+      .setSubject(formattedMessageOptions.subject)
-      .setTo(parsedMessageOpts.to)
+      .setTo(formattedMessageOptions.to)
-      .setContent(parsedMessageOpts.body);
+      .setCC(formattedMessageOptions.cc)
+      .setBCC(formattedMessageOptions.bcc)
+      .setContent(formattedMessageOptions.message);
 
-    if (parsedMessageOpts.attachReceipt) {
+    // Attaches the receipt pdf document.
+    if (formattedMessageOptions.attachReceipt) {
       // Retrieves document buffer of the receipt pdf document.
-      const receiptPdfBuffer = await this.receiptPdfService.saleReceiptPdf(
+      const [receiptPdfBuffer, filename] =
-        tenantId,
+        await this.receiptPdfService.saleReceiptPdf(tenantId, saleReceiptId);
-        saleReceiptId
+
-      );
       mail.setAttachments([
-        { filename: 'receipt.pdf', content: receiptPdfBuffer },
+        { filename: `${filename}.pdf`, content: receiptPdfBuffer },
       ]);
     }
+    const eventPayload = {
+      tenantId,
+      saleReceiptId,
+      messageOptions: {},
+    };
+    await this.eventPublisher.emitAsync(
+      events.saleReceipt.onMailSend,
+      eventPayload
+    );
     await mail.send();
+
+    await this.eventPublisher.emitAsync(
+      events.saleReceipt.onMailSent,
+      eventPayload
+    );
   }
 }

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

@@ -35,7 +35,10 @@ export class SaleReceiptsPdf {
    * @param {number} saleInvoiceId -
    * @returns {Promise<Buffer>}
    */
-  public async saleReceiptPdf(tenantId: number, saleReceiptId: number) {
+  public async saleReceiptPdf(
+    tenantId: number,
+    saleReceiptId: number
+  ): Promise<[Buffer, string]> {
     const filename = await this.getSaleReceiptFilename(tenantId, saleReceiptId);
 
     const brandingAttributes = await this.getReceiptBrandingAttributes(

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

@@ -1,16 +1,16 @@
 export const DEFAULT_RECEIPT_MAIL_SUBJECT =
-  'Receipt {ReceiptNumber} from {CompanyName}';
+  'Receipt {Receipt Number} from {Company Name}';
 export const DEFAULT_RECEIPT_MAIL_CONTENT = `
-<p>Dear {CustomerName}</p>
+<p>Dear {Customer Name}</p>
 <p>Thank you for your business, You can view or print your receipt from attachements.</p>
 <p>
-Receipt <strong>#{ReceiptNumber}</strong><br />
+Receipt <strong>#{Receipt Number}</strong><br />
-Amount  : <strong>{ReceiptAmount}</strong></br />
+Amount  : <strong>{Receipt Amount}</strong></br />
 </p>
 
 <p>
 <i>Regards</i><br />
-<i>{CompanyName}</i>
+<i>{Company Name}</i>
 </p>
 `;
 

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

@@ -1,9 +1,12 @@
-import { ISaleReceipt, ISaleReceiptBrandingTemplateAttributes } from "@/interfaces";
+import {
-import { contactAddressTextFormat } from "@/utils/address-text-format";
+  ISaleReceipt,
+  ISaleReceiptBrandingTemplateAttributes,
+} from '@/interfaces';
+import { contactAddressTextFormat } from '@/utils/address-text-format';
 
-
+export const transformReceiptToBrandingTemplateAttributes = (
-
+  saleReceipt: ISaleReceipt
-export const transformReceiptToBrandingTemplateAttributes = (saleReceipt: ISaleReceipt): Partial<ISaleReceiptBrandingTemplateAttributes> => {
+): Partial<ISaleReceiptBrandingTemplateAttributes> => {
   return {
     total: saleReceipt.formattedAmount,
     subtotal: saleReceipt.formattedSubtotal,
@@ -18,4 +21,13 @@ export const transformReceiptToBrandingTemplateAttributes = (saleReceipt: ISaleR
     receiptDate: saleReceipt.formattedReceiptDate,
     customerAddress: contactAddressTextFormat(saleReceipt.customer),
   };
-}
+};
+
+export const transformReceiptToMailDataArgs = (saleReceipt: any) => {
+  return {
+    'Customer Name': saleReceipt.customer.displayName,
+    'Receipt Number': saleReceipt.receiptNumber,
+    'Receipt Date': saleReceipt.formattedReceiptDate,
+    'Receipt Amount': saleReceipt.formattedAmount,
+  };
+};

packages/server/src/subscribers/events.ts

@@ -180,6 +180,7 @@ export default {
    * Sales estimates service.
    */
   saleEstimate: {
+    onViewed: 'onSaleEstimateViewed',
     onPdfViewed: 'onSaleEstimatePdfViewed',
 
     onCreating: 'onSaleEstimateCreating',
@@ -212,7 +213,7 @@ export default {
 
     onPreMailSend: 'onSaleEstimatePreMailSend',
     onMailSend: 'onSaleEstimateMailSend',
-    onMailSent: 'onSaleEstimateMailSend',
+    onMailSent: 'onSaleEstimateMailSent',
   },
 
   /**
@@ -751,4 +752,23 @@ export default {
     onCheckoutSessionCompleted: 'onStripeCheckoutSessionCompleted',
     onAccountUpdated: 'onStripeAccountUpdated',
   },
+
+  // Reports
+  reports: {
+    onBalanceSheetViewed: 'onBalanceSheetViewed',
+    onTrialBalanceSheetView: 'onTrialBalanceSheetViewed',
+    onProfitLossSheetViewed: 'onProfitLossSheetViewed',
+    onCashflowStatementViewed: 'onCashflowStatementViewed',
+    onGeneralLedgerViewed: 'onGeneralLedgerViewed',
+    onJournalViewed: 'onJounralViewed',
+    onReceivableAgingViewed: 'onReceivableAgingViewed',
+    onPayableAgingViewed: 'onPayableAgingViewed',
+    onCustomerBalanceSummaryViewed: 'onInventoryValuationViewed',
+    onVendorBalanceSummaryViewed: 'onVendorBalanceSummaryViewed',
+    onInventoryValuationViewed: 'onCustomerBalanceSummaryViewed',
+    onCustomerTransactionsViewed: 'onCustomerTransactionsViewed',
+    onVendorTransactionsViewed: 'onVendorTransactionsViewed',
+    onSalesByItemViewed: 'onSalesByItemViewed',
+    onPurchasesByItemViewed: 'onPurchasesByItemViewed',
+  },
 };

packages/webapp/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "dependencies": {
     "@bigcapital/utils": "*",
-    "@blueprintjs-formik/core": "^0.3.6",
+    "@bigcapital/pdf-templates": "*",
+    "@blueprintjs-formik/core": "^0.3.7",
     "@blueprintjs-formik/datetime": "^0.3.7",
     "@blueprintjs-formik/select": "^0.3.5",
     "@blueprintjs/colors": "4.1.19",

packages/webapp/src/components/DataTableCells/NumericInputCell.tsx

@@ -1,8 +1,6 @@
-// @ts-nocheck
 import React, { useState, useEffect } from 'react';
 import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
-
 import { CellType } from '@/constants';
 import { CLASSES } from '@/constants/classes';
 
@@ -12,37 +10,44 @@ import { CLASSES } from '@/constants/classes';
 export default function NumericInputCell({
   row: { index },
   column: { id },
-  cell: { value: initialValue },
+  cell: { value: controlledInputValue },
   payload,
-}) {
+}: any) {
-  const [value, setValue] = useState(initialValue);
+  const [valueAsNumber, setValueAsNumber] = useState<number | null>(
+    controlledInputValue || null,
+  );
+  const handleInputValueChange = (
+    valueAsNumber: number,
+    valueAsString: string,
+  ) => {
+    setValueAsNumber(valueAsNumber);
+  };
+  const handleInputBlur = () => {
+    payload.updateData(index, id, valueAsNumber);
+  };
 
-  const handleValueChange = (newValue) => {
-    setValue(newValue);
-  };
-  const onBlur = () => {
-    payload.updateData(index, id, value);
-  };
   useEffect(() => {
-    setValue(initialValue);
+    setValueAsNumber(controlledInputValue);
-  }, [initialValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledInputValue]);
 
   const error = payload.errors?.[index]?.[id];
 
   return (
     <FormGroup
-      intent={error ? Intent.DANGER : null}
+      intent={error ? Intent.DANGER : undefined}
       className={classNames(CLASSES.FILL)}
     >
       <NumericInput
-        value={value}
+        asyncControl
-        onValueChange={handleValueChange}
+        value={controlledInputValue}
-        onBlur={onBlur}
+        onValueChange={handleInputValueChange}
-        fill={true}
+        onBlur={handleInputBlur}
         buttonPosition={'none'}
+        fill
       />
     </FormGroup>
   );
 }
 
-NumericInputCell.cellType = CellType.Field;
+NumericInputCell.cellType = CellType.Field;

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

@@ -4,7 +4,7 @@ import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
-import { isEmpty, omit } from 'lodash';
+import { sumBy, round, isEmpty, omit } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
@@ -88,15 +88,17 @@ function MakeJournalEntriesForm({
     const entries = values.entries.filter(
       (entry) => entry.debit || entry.credit,
     );
+    // Updated getTotal function using lodash
     const getTotal = (type = 'credit') => {
-      return entries.reduce((total, item) => {
+      return round(
-        return item[type] ? item[type] + total : total;
+        sumBy(entries, (entry) => parseFloat(entry[type] || 0)),
-      }, 0);
+        2,
+      );
     };
     const totalCredit = getTotal('credit');
     const totalDebit = getTotal('debit');
 
-    // Validate the total credit should be eqials total debit.
+    // Validate the total credit should be equals total debit.
     if (totalCredit !== totalDebit) {
       AppToaster.show({
         message: intl.get('should_total_of_credit_and_debit_be_equal'),

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

@@ -4,7 +4,7 @@ import * as R from 'ramda';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
-import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
+import { sumBy, setWith, get, first, toNumber } from 'lodash';
 import {
   updateTableCell,
   repeatValue,
@@ -91,8 +91,8 @@ export function transformToEditForm(manualJournal) {
  * Entries adjustment.
  */
 function adjustmentEntries(entries) {
-  const credit = sumBy(entries, (e) => toSafeInteger(e.credit));
+  const credit = sumBy(entries, (e) => toNumber(e.credit));
-  const debit = sumBy(entries, (e) => toSafeInteger(e.debit));
+  const debit = sumBy(entries, (e) => toNumber(e.debit));
 
   return {
     debit: Math.max(credit - debit, 0),

packages/webapp/src/containers/Attachments/UploadAttachmentsPopoverContent.tsx

@@ -22,7 +22,7 @@ interface AttachmentFileCommon {
   size: number;
   mimeType: string;
 }
-interface AttachmentFileLoaded extends AttachmentFileCommon {}
+interface AttachmentFileLoaded extends AttachmentFileCommon { }
 interface AttachmentFileLoading extends AttachmentFileCommon {
   loading: boolean;
 }
@@ -74,11 +74,11 @@ export function UploadAttachmentsPopoverContent({
   };
   // Uploads the attachments.
   const { mutateAsync: uploadAttachments } = useUploadAttachments({
-    onSuccess: (data) => {
+    onSuccess: (data, formData) => {
       const newLocalFiles = stopLoadingAttachment(
         localFiles,
-        data.config.data.get('internalKey'),
+        formData.get('internalKey'),
-        data.data.data.key,
+        data.key,
       );
       handleFilesChange(newLocalFiles);
       onUploadedChange && onUploadedChange(newLocalFiles);

packages/webapp/src/containers/Authentication/Login.tsx

@@ -75,7 +75,7 @@ function LoginFooterLinks() {
       )}
       <AuthFooterLink>
         <Link to={'/auth/send_reset_password'}>
-          <T id={'forget_my_password'} />
+          <T id={'forgot_my_password'} />
         </Link>
       </AuthFooterLink>
     </AuthFooterLinks>

packages/webapp/src/containers/Authentication/Register.tsx

@@ -99,7 +99,7 @@ function RegisterFooterLinks() {
 
       <AuthFooterLink>
         <Link to={'/auth/send_reset_password'}>
-          <T id={'forget_my_password'} />
+          <T id={'forgot_my_password'} />
         </Link>
       </AuthFooterLink>
     </AuthFooterLinks>

packages/webapp/src/containers/BrandingTemplates/_utils.ts

@@ -48,6 +48,7 @@ export const useBrandingTemplateFormInitialValues = <
 
   const brandingAttributes = {
     templateName: pdfTemplate?.templateName,
+    companyLogoUri: pdfTemplate?.companyLogoUri,
     ...pdfTemplate?.attributes,
   };
   return {
@@ -56,14 +57,16 @@ export const useBrandingTemplateFormInitialValues = <
   };
 };
 
-export const useBrandingState = (state?: Partial<BrandingState>): BrandingState => {
+export const useBrandingState = (
+  state?: Partial<BrandingState>,
+): BrandingState => {
   const { brandingTemplateState } = useBrandingTemplateBoot();
 
   return {
     ...brandingTemplateState,
-    ...state
+    ...state,
-  }
+  };
-}
+};
 
 export const getCustomizeDrawerNameFromResource = (resource: string) => {
   const pairs = {

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

@@ -13,7 +13,6 @@ import {
   Tag,
 } from '@blueprintjs/core';
 import {
-  FormatNumberCell,
   TextOverviewTooltipCell,
   FormattedMessage as T,
   Choose,
@@ -51,9 +50,8 @@ export const useBillReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
+        accessor: 'quantity_formatted',
-        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity_formatted', {
-        width: getColumnWidth(entries, 'quantity', {
           minWidth: 60,
           magicSpacing: 5,
         }),

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

@@ -48,9 +48,8 @@ export const useCreditNoteReadOnlyEntriesColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
+        accessor: 'quantity_formatted',
-        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity_formatted', {
-        width: getColumnWidth(entries, 'quantity', {
           minWidth: 60,
           magicSpacing: 5,
         }),

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

@@ -47,6 +47,7 @@ function InvoiceDetailActionsBar({
   openAlert,
 
   // #withDrawerActions
+  openDrawer,
   closeDrawer,
 }) {
   const history = useHistory();
@@ -102,8 +103,9 @@ function InvoiceDetailActionsBar({
     openAlert('cancel-bad-debt', { invoiceId });
   };
 
+  // handle send mail button click.
   const handleMailInvoice = () => {
-    openDialog(DialogsName.InvoiceMail, { invoiceId });
+    openDrawer(DRAWERS.INVOICE_SEND_MAIL, { invoiceId });
   };
 
   const handleShareButtonClick = () => {

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

@@ -54,11 +54,10 @@ export const useInvoiceReadonlyEntriesColumns = () => {
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
-        Cell: FormatNumberCell,
         align: 'right',
         disableSortBy: true,
         textOverview: true,
-        width: getColumnWidth(entries, 'quantity', {
+        width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.tsx

@@ -72,7 +72,7 @@ export const useEstimateTransactionsColumns = () => {
       {
         id: 'qunatity',
         Header: intl.get('item.drawer_quantity_sold'),
-        accessor: 'quantity',
+        accessor: 'quantity_formatted',
         align: 'right',
         width: 100,
       },

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

@@ -31,9 +31,8 @@ export const useReceiptReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
+        accessor: 'quantity_formatted',
-        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity_formatted', {
-        width: getColumnWidth(entries, 'quantity', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx

@@ -117,7 +117,6 @@ export function InvoicePaymentPage({
 
   // # Copyright
   copyrightText = `© 2024 Bigcapital Technology, Inc. <br /> All rights reserved.`,
-
   classNames,
 }: PaymentPageProps) {
   return (

packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss

@@ -1,13 +1,17 @@
 
+:root {
+  --payment-page-background-color: #fff;
+  --payment-page-primary-button: #0052cc;
+}
+
 .rootBodyPage {
-  background: #1c1d29;
+  background: var(--payment-page-background-color);
 }
 
 .root {
   border-radius: 10px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   width: 600px;
-  // margin: 40px auto;
   color: #222;
   background-color: #fff;
 }

packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx

@@ -1,5 +1,6 @@
 import { Text, Classes, Button, Intent } from '@blueprintjs/core';
 import clsx from 'classnames';
+import { css } from '@emotion/css';
 import { AppToaster, Box, Group, Stack } from '@/components';
 import { usePaymentPortalBoot } from './PaymentPortalBoot';
 import { useDrawerActions } from '@/hooks/state';
@@ -62,15 +63,15 @@ export function PaymentPortal() {
   };
 
   return (
-    <Box className={styles.root}>
+    <Box className={styles.root} my={'40px'} mx={'auto'}>
       <Stack spacing={0} className={styles.body}>
         <Stack>
           <Group spacing={10}>
-            {sharableLinkMeta?.organization?.logoUri && (
+            {sharableLinkMeta?.brandingTemplate?.companyLogoUri && (
               <Box
                 className={styles.companyLogoWrap}
                 style={{
-                  backgroundImage: `url(${sharableLinkMeta?.organization?.logoUri})`,
+                  backgroundImage: `url(${sharableLinkMeta?.brandingTemplate?.companyLogoUri})`,
                 }}
               ></Box>
             )}
@@ -170,7 +171,22 @@ export function PaymentPortal() {
             sharableLinkMeta?.hasStripePaymentMethod && (
               <Button
                 intent={Intent.PRIMARY}
-                className={clsx(styles.footerButton, styles.buyButton)}
+                className={clsx(
+                  styles.footerButton,
+                  styles.buyButton,
+                  css`
+                    &.bp4-button.bp4-intent-primary {
+                      background-color: var(--payment-page-primary-button);
+
+                      &:hover,
+                      &:focus {
+                        background-color: var(
+                          --payment-page-primary-button-hover
+                        );
+                      }
+                    }
+                  `,
+                )}
                 loading={isStripeCheckoutLoading}
                 onClick={handlePayButtonClick}
               >

packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx

@@ -6,6 +6,8 @@ import { PaymentPortalBoot, usePaymentPortalBoot } from './PaymentPortalBoot';
 import { PaymentInvoicePreviewDrawer } from './drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewDrawer';
 import { DRAWERS } from '@/constants/drawers';
 import styles from './PaymentPortal.module.scss';
+import { useEffect } from 'react';
+import { hsl, lighten, parseToHsl } from 'polished';
 
 export default function PaymentPortalPage() {
   const { linkId } = useParams<{ linkId: string }>();
@@ -14,6 +16,7 @@ export default function PaymentPortalPage() {
     <BodyClassName className={styles.rootBodyPage}>
       <PaymentPortalBoot linkId={linkId}>
         <PaymentPortalHelmet />
+        <PaymentPortalCssVariables />
         <PaymentPortal />
         <PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
       </PaymentPortalBoot>
@@ -36,3 +39,33 @@ function PaymentPortalHelmet() {
     </Helmet>
   );
 }
+
+/**
+ * Renders the dynamic CSS variables for the current payment page.
+ * @returns {React.ReactNode}
+ */
+function PaymentPortalCssVariables() {
+  const { sharableLinkMeta } = usePaymentPortalBoot();
+
+  useEffect(() => {
+    if (sharableLinkMeta?.brandingTemplate?.primaryColor) {
+      const primaryColorHsl = parseToHsl(
+        sharableLinkMeta?.brandingTemplate?.primaryColor,
+      );
+      document.body.style.setProperty(
+        '--payment-page-background-color',
+        hsl(primaryColorHsl.hue, 0.19, 0.14),
+      );
+      document.body.style.setProperty(
+        '--payment-page-primary-button',
+        sharableLinkMeta?.brandingTemplate?.primaryColor,
+      );
+      document.body.style.setProperty(
+        '--payment-page-primary-button-hover',
+        lighten(0.05, sharableLinkMeta?.brandingTemplate?.primaryColor),
+      );
+    }
+  }, [sharableLinkMeta?.brandingTemplate?.primaryColor]);
+
+  return null;
+}

packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx

@@ -32,7 +32,7 @@ function EstimateMailDialogFormRoot({
   closeDialog,
 }) {
   const { mutateAsync: sendEstimateMail } = useSendSaleEstimateMail();
-  const { mailOptions, saleEstimateId, redirectToEstimatesList } =
+  const { mailOptions, saleEstimateId, } =
     useEstimateMailDialogBoot();
 
   const initialValues = transformMailFormToInitialValues(

packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogFormContent.tsx

@@ -25,8 +25,8 @@ export function EstimateMailDialogFormContent({
     <Form>
       <div className={Classes.DIALOG_BODY}>
         <MailNotificationForm
-          fromAddresses={mailOptions.from_addresses}
+          fromAddresses={mailOptions.from_options}
-          toAddresses={mailOptions.to_addresses}
+          toAddresses={mailOptions.to_options}
         />
         <AttachFormGroup name={'attachEstimate'} inline>
           <FSwitch name={'attachEstimate'} label={'Attach Estimate'} />

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

@@ -93,6 +93,7 @@ export function InvoiceMailReceipt({
             h="90px"
             w="90px"
             mx="auto"
+            borderRadius="3px"
             backgroundRepeat="no-repeat"
             backgroundPosition="center center"
             backgroundSize="contain"