feat: Map the invoice preview data

packages/server/src/models/SaleInvoice.ts

@@ -415,7 +415,8 @@ export default class SaleInvoice extends mixin(TenantModel, [
     const { MatchedBankTransaction } = require('models/MatchedBankTransaction');
     const {
       TransactionPaymentServiceEntry,
-  } = require('models/TransactionPaymentServiceEntry');
+    } = require('models/TransactionPaymentServiceEntry');
+    const { PdfTemplate } = require('models/PdfTemplate');
 
     return {
       /**
@@ -593,6 +594,18 @@ export default class SaleInvoice extends mixin(TenantModel, [
           query.where('reference_type', 'SaleInvoice');
         },
       },
+
+      /**
+       * Sale invoice may belongs to pdf branding template.
+       */
+      pdfTemplate: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: PdfTemplate,
+        join: {
+          from: 'sales_invoices.pdfTemplateId',
+          to: 'pdf_templates.id',
+        }
+      },
     };
   }
 

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

@@ -1,10 +1,9 @@
 import moment from 'moment';
+import { Inject, Service } from 'typedi';
 import { ServiceError } from '@/exceptions';
 import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { PaymentLink } from '@/system/models';
-import { Inject, Service } from 'typedi';
-import { GeneratePaymentLinkTransformer } from './GeneratePaymentLinkTransformer';
 import { GetInvoicePaymentLinkMetaTransformer } from './GetInvoicePaymentLinkTransformer';
 import { initalizeTenantServices } from '@/api/middleware/TenantDependencyInjection';
 
@@ -46,7 +45,7 @@ export class GetInvoicePaymentLinkMetadata {
 
     const invoice = await SaleInvoice.query()
       .findById(paymentLink.resourceId)
-      .withGraphFetched('entries')
+      .withGraphFetched('entries.item')
       .withGraphFetched('customer')
       .throwIfNotFound();
 

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

@@ -1,3 +1,4 @@
+import { ItemEntryTransformer } from './ItemEntryTransformer';
 import { SaleInvoiceTransformer } from './SaleInvoiceTransformer';
 
 export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer {
@@ -33,6 +34,9 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
       'dueDate',
       'dueDateFormatted',
       'invoiceNo',
+      'invoiceMessage',
+      'termsConditions',
+      'entries',
     ];
   };
 
@@ -43,4 +47,50 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
   public companyName() {
     return 'Bigcapital Technology, Inc.';
   }
+
+  /**
+   * Retrieves the entries of the sale invoice.
+   * @param {ISaleInvoice} invoice
+   * @returns {}
+   */
+  protected entries = (invoice) => {
+    return this.item(
+      invoice.entries,
+      new GetInvoicePaymentLinkEntryMetaTransformer(),
+      {
+        currencyCode: invoice.currencyCode,
+      }
+    );
+  };
+}
+
+class GetInvoicePaymentLinkEntryMetaTransformer extends ItemEntryTransformer {
+  /**
+   * Include these attributes to item entry object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return [
+      'quantity',
+      'quantityFormatted',
+      'rate',
+      'rateFormatted',
+      'total',
+      'totalFormatted',
+      'itemName',
+      'description',
+    ];
+  };
+
+  itemName(entry) {
+    return entry.item.name;
+  }
+
+  /**
+   * Exclude these attributes from payment link object.
+   * @returns {Array}
+   */
+  public excludeAttributes = (): string[] => {
+    return ['*'];
+  };
 }

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

@@ -10,14 +10,11 @@ export default function PaymentPortalPage() {
   const { linkId } = useParams<{ linkId: string }>();
 
   return (
-    <>
-      <BodyClassName className={styles.rootBodyPage}>
-        <PaymentPortalBoot linkId={linkId}>
-          <PaymentPortal />
-        </PaymentPortalBoot>
-      </BodyClassName>
-
-      <PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
-    </>
+    <BodyClassName className={styles.rootBodyPage}>
+      <PaymentPortalBoot linkId={linkId}>
+        <PaymentPortal />
+        <PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
+      </PaymentPortalBoot>
+    </BodyClassName>
   );
 }

packages/webapp/src/containers/PaymentPortal/drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewContent.tsx

@@ -1,15 +1,36 @@
 // @ts-nocheck
 import { Box, DrawerBody, DrawerHeaderContent } from '@/components';
 import { InvoicePaperTemplate } from '@/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate';
+import { usePaymentPortalBoot } from '../../PaymentPortalBoot';
 
 export function PaymentInvoicePreviewContent() {
+  const { sharableLinkMeta } = usePaymentPortalBoot();
+
   return (
     <>
       <DrawerHeaderContent title={'Invoice'} />
 
       <DrawerBody>
         <Box style={{ paddingTop: 20, paddingBottom: 20 }}>
-          <InvoicePaperTemplate />
+          <InvoicePaperTemplate
+            invoiceNumber={sharableLinkMeta?.invoiceNo}
+            dueDate={sharableLinkMeta?.dueDateFormatted}
+            dateIssue={sharableLinkMeta?.invoiceDateFormatted}
+            total={sharableLinkMeta?.totalFormatted}
+            subtotal={sharableLinkMeta?.subtotalFormatted}
+            balanceDue={sharableLinkMeta?.dueAmountFormatted}
+            paymentMade={sharableLinkMeta?.paymentAmountFormatted}
+            termsConditions={sharableLinkMeta?.termsConditions}
+            statement={sharableLinkMeta?.invoiceMessage}
+            companyName={sharableLinkMeta?.companyName}
+            lines={sharableLinkMeta?.entries?.map((entry) => ({
+              item: entry.itemName,
+              description: entry.description,
+              quantity: entry.quantityFormatted,
+              rate: entry.rateFormatted,
+              total: entry.totalFormatted,
+            }))}
+          />
         </Box>
       </DrawerBody>
     </>

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

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import React from 'react';
 import * as R from 'ramda';
+import { Position } from '@blueprintjs/core';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';
 import { PaymentInvoicePreviewContent } from './PaymentInvoicePreviewContent';
-import { Position } from '@blueprintjs/core';
 
 /**
  *

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

@@ -99,16 +99,16 @@ export function InvoicePaperTemplate({
 
   dueDate = 'September 3, 2024',
   dueDateLabel = 'Date due',
-  showDueDate,
+  showDueDate = true,
 
   dateIssue = 'September 3, 2024',
   dateIssueLabel = 'Date of issue',
-  showDateIssue,
+  showDateIssue = true,
 
   // dateIssue,
   invoiceNumberLabel = 'Invoice number',
   invoiceNumber = '346D3D40-0001',
-  showInvoiceNumber,
+  showInvoiceNumber = true,
 
   // Address
   showBillingToAddress = true,
@@ -281,12 +281,12 @@ export function InvoicePaperTemplate({
         </Stack>
 
         <Stack spacing={0}>
-          {showTermsConditions && (
+          {showTermsConditions && termsConditions && (
             <PaperTemplate.Statement label={termsConditionsLabel}>
               {termsConditions}
             </PaperTemplate.Statement>
           )}
-          {showStatement && (
+          {showStatement && statement && (
             <PaperTemplate.Statement label={statementLabel}>
               {statement}
             </PaperTemplate.Statement>

packages/webapp/src/hooks/query/payment-link.ts

@@ -67,6 +67,18 @@ export interface GetSharableLinkMetaResponse {
   totalLocalFormatted: string;
   customerName: string;
   companyName: string;
+  invoiceMessage: string;
+  termsConditions: string;
+  entries: Array<{
+    description: string;
+    itemName: string;
+    quantity: number;
+    quantityFormatted: string;
+    rate: number;
+    rateFormatted: string;
+    total: number;
+    totalFormatted: string;
+  }>;
 }
 
 /**