Merge branch 'develop' into add-pdf-templates-package

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/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/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/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',
@@ -39,14 +42,26 @@ export class GetSaleInvoiceMailStateTransformer extends SaleInvoiceTransformer {
     ];
   };
 
+  /**
+   * 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/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()
@@ -366,7 +364,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/constants.ts

@@ -1,20 +1,19 @@
 import config from '@/config';
 
 export const DEFAULT_INVOICE_MAIL_SUBJECT =
-  'Invoice {Invoice Number} from {Company Name}';
-export const DEFAULT_INVOICE_MAIL_CONTENT = `
-<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>
+  'Invoice {Invoice Number} from {Company Name} for {Customer Name}';
+export const DEFAULT_INVOICE_MAIL_CONTENT = `Hi {Customer Name},
 
-<p>
-<i>Regards</i><br />
-<i>{Company Name}</i>
-</p>
+Here's invoice # {Invoice Number} for {Invoice Amount}
+
+The amount outstanding of {Invoice Due Amount} is due on {Invoice Due Date}.
+
+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/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/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/webapp/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@bigcapital/utils": "*",
     "@bigcapital/pdf-templates": "*",
-    "@blueprintjs-formik/core": "^0.3.6",
+    "@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/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"

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

@@ -0,0 +1,64 @@
+import { useMemo, ComponentType } from 'react';
+import { css } from '@emotion/css';
+import { Box } from '@/components';
+import {
+  InvoiceMailReceiptPreview,
+  InvoiceMailReceiptPreviewProps,
+} from '../InvoiceCustomize/InvoiceMailReceiptPreview';
+import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
+import { InvoiceSendMailPreviewWithHeader } from './InvoiceSendMailHeaderPreview';
+import { useSendInvoiceMailMessage } from './_hooks';
+
+export function InvoiceMailReceiptPreviewConnected() {
+  return (
+    <InvoiceSendMailPreviewWithHeader>
+      <Box px={4} pt={8} pb={16}>
+        <InvoiceMailReceiptPreviewWithProps
+          className={css`
+            margin: 0 auto;
+          `}
+        />
+      </Box>
+    </InvoiceSendMailPreviewWithHeader>
+  );
+}
+
+/**
+ * Injects props from invoice mail state into the InvoiceMailReceiptPreview component.
+ */
+const withInvoiceMailReceiptPreviewProps = <
+  P extends InvoiceMailReceiptPreviewProps,
+>(
+  WrappedComponent: ComponentType<P & InvoiceMailReceiptPreviewProps>,
+) => {
+  return function WithInvoiceMailReceiptPreviewProps(props: P) {
+    const message = useSendInvoiceMailMessage();
+    const { invoiceMailState } = useInvoiceSendMailBoot();
+
+    const items = useMemo(
+      () =>
+        invoiceMailState?.entries?.map((entry: any) => ({
+          quantity: entry.quantity,
+          total: entry.totalFormatted,
+          label: entry.name,
+        })),
+      [invoiceMailState?.entries],
+    );
+
+    const mailReceiptPreviewProps = {
+      companyName: invoiceMailState?.companyName,
+      companyLogoUri: invoiceMailState?.companyLogoUri,
+      primaryColor: invoiceMailState?.primaryColor,
+      total: invoiceMailState?.totalFormatted,
+      dueDate: invoiceMailState?.dueDateFormatted,
+      dueAmount: invoiceMailState?.dueAmountFormatted,
+      invoiceNumber: invoiceMailState?.invoiceNo,
+      items,
+      message,
+    };
+    return <WrappedComponent {...mailReceiptPreviewProps} {...props} />;
+  };
+};
+
+export const InvoiceMailReceiptPreviewWithProps =
+  withInvoiceMailReceiptPreviewProps(InvoiceMailReceiptPreview);

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import {