feat: Hook up customer/company address to invoice preview of payment page

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

@@ -3,6 +3,7 @@ import { ItemEntryTransformer } from './ItemEntryTransformer';
 import { SaleInvoiceTaxEntryTransformer } from './SaleInvoiceTaxEntryTransformer';
 import { SaleInvoiceTransformer } from './SaleInvoiceTransformer';
 import { Transformer } from '@/lib/Transformer/Transformer';
+import { contactAddressTextFormat } from '@/utils/address-text-format';
 
 export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer {
   /**
@@ -43,6 +44,7 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
       'organization',
       'isReceivable',
       'hasStripePaymentMethod',
+      'formattedCustomerAddress',
     ];
   };
 
@@ -101,6 +103,14 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
       (paymentMethod) => paymentMethod.paymentIntegration.service === 'Stripe'
     );
   }
+
+  protected formattedCustomerAddress(invoice) {
+    return contactAddressTextFormat(invoice.customer, `{ADDRESS_1}
+{ADDRESS_2}
+{CITY}, {STATE} {POSTAL_CODE}
+{COUNTRY}
+{PHONE}`);
+  }
 }
 
 class GetPaymentLinkOrganizationMetaTransformer extends Transformer {

packages/server/src/system/models/TenantMetadata.ts

@@ -68,11 +68,11 @@ export default class TenantMetadata extends BaseModel {
    */
   public get addressTextFormatted() {
     const defaultMessage = `<strong>{ORGANIZATION_NAME}</strong>
-  {ADDRESS_1},
-  {ADDRESS_2},
-  {CITY} {STATE},
-  {POSTAL_CODE},
+  {ADDRESS_1}
+  {ADDRESS_2}
+  {CITY}, {STATE} {POSTAL_CODE}
   {COUNTRY}
+  {PHONE}
 `;
     return organizationAddressTextFormat(defaultMessage, {
       organizationName: this.name,
@@ -81,6 +81,7 @@ export default class TenantMetadata extends BaseModel {
       state: this.address?.stateProvince,
       city: this.address?.city,
       postalCode: this.address?.postalCode,
+      phone: this.address?.phone,
       country: 'United State',
     });
   }

packages/server/src/utils/address-text-format.ts

@@ -8,17 +8,27 @@ interface OrganizationAddressFormatArgs {
   city?: string;
   country?: string;
   postalCode?: string;
+  phone?: string;
 }
 
 const defaultMessage = `
   <strong>{ORGANIZATION_NAME}</strong>
-  {ADDRESS_1},
-  {ADDRESS_2},
-  {CITY} {STATE},
-  {POSTAL_CODE},
+  {ADDRESS_1}
+  {ADDRESS_2}
+  {CITY}, {STATE} {POSTAL_CODE}
   {COUNTRY}
+  {PHONE}
 `;
-
+/**
+ * Formats the address text based on the provided message and arguments.
+ * This function replaces placeholders in the message with actual values
+ * from the OrganizationAddressFormatArgs. It ensures that the final
+ * formatted message is clean and free of excessive newlines.
+ *
+ * @param {string} message - The message template containing placeholders.
+ * @param {Record<string, string>} args - The arguments containing the values to replace in the message.
+ * @returns {string} - The formatted address text.
+ */
 const formatText = (message: string, replacements: Record<string, string>) => {
   let formattedMessage = Object.entries(replacements).reduce(
     (msg, [key, value]) => {
@@ -26,9 +36,11 @@ const formatText = (message: string, replacements: Record<string, string>) => {
     },
     message
   );
+  formattedMessage = formattedMessage.replace(/\n{2,}/g, '\n').trim();
   formattedMessage = formattedMessage.replace(/\n/g, '<br />');
+  formattedMessage = formattedMessage.trim();
 
-  return formattedMessage.trim();
+  return formattedMessage;
 };
 
 export const organizationAddressTextFormat = (
@@ -43,6 +55,7 @@ export const organizationAddressTextFormat = (
     STATE: args.state || '',
     POSTAL_CODE: args.postalCode || '',
     COUNTRY: args.country || '',
+    PHONE: args.phone || '',
   };
   return formatText(message, replacements);
 };
@@ -56,15 +69,15 @@ interface ContactAddressTextFormatArgs {
   city?: string;
   address2?: string;
   address1?: string;
+  phone?: string;
 }
 
 const contactFormatMessage = `{CONTACT_NAME}
 {ADDRESS_1}
 {ADDRESS_2}
-{CITY} {STATE}
-{POSTAL_CODE}
+{CITY}, {STATE} {POSTAL_CODE}
 {COUNTRY}
-{EMAIL}
+{PHONE}
 `;
 
 export const contactAddressTextFormat = (
@@ -80,6 +93,7 @@ export const contactAddressTextFormat = (
     postalCode: contact?.billingAddressPostcode,
     city: contact?.billingAddressCity,
     email: contact?.email,
+    phone: contact?.billingAddressPhone,
   } as ContactAddressTextFormatArgs;
 
   const replacements: Record<string, string> = {
@@ -91,6 +105,7 @@ export const contactAddressTextFormat = (
     POSTAL_CODE: args.postalCode || '',
     COUNTRY: args.country || '',
     EMAIL: args?.email || '',
+    PHONE: args?.phone || '',
   };
   return formatText(message, replacements);
 };

packages/webapp/src/constants/PdfTemplates.ts

@@ -10,11 +10,11 @@ export const DefaultPdfTemplateItemDescription =
   'Website development with content and SEO optimization';
 
 export const DefaultPdfTemplateAddressBilledTo = `Bigcapital Technology, Inc.<br />
-131 Continental Dr Suite 305 Newark, <br />
-Delaware 19713, <br />
-United States, <br />
-+1 762-339-5634, <br />
-ahmed@bigcapital.app
+131 Continental Dr, <br />
+Suite 305, <br />
+Newark, Delaware 19713, <br />
+United States,<br />
++1 762-339-5634
 `;
 
 export const DefaultPdfTemplateAddressBilledFrom = `131 Continental Dr Suite 305 Newark, <br />

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

@@ -1,4 +1,4 @@
-import { Text, Classes, Button, Intent } from '@blueprintjs/core';
+import { Text, Classes, Button, Intent, Tag } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { AppToaster, Box, Group, Stack } from '@/components';
 import { usePaymentPortalBoot } from './PaymentPortalBoot';
@@ -54,20 +54,25 @@ export function PaymentPortal() {
               {sharableLinkMeta?.organization?.name} Sent an Invoice for{' '}
               {sharableLinkMeta?.totalFormatted}
             </h1>
-            <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
-              Invoice due {sharableLinkMeta?.dueDateFormatted}
-            </Text>
+            <Group spacing={10}>
+              <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
+                Invoice due {sharableLinkMeta?.dueDateFormatted}{' '}
+              </Text>
+            </Group>
           </Stack>
 
           <Stack className={styles.address} spacing={2}>
             <Box className={styles.customerName}>
               {sharableLinkMeta?.customerName}
             </Box>
-            <Box>Bigcapital Technology, Inc.</Box>
-            <Box>131 Continental Dr Suite 305 Newark,</Box>
-            <Box>Delaware 19713</Box>
-            <Box>United States</Box>
-            <Box>ahmed@bigcapital.app</Box>
+
+            {sharableLinkMeta?.formattedCustomerAddress && (
+              <Box
+                dangerouslySetInnerHTML={{
+                  __html: sharableLinkMeta?.formattedCustomerAddress,
+                }}
+              />
+            )}
           </Stack>
 
           <h2 className={styles.invoiceNumber}>

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

@@ -34,6 +34,10 @@ export function PaymentInvoicePreviewContent() {
               label: tax.name,
               amount: tax.taxRateAmountFormatted,
             }))}
+            companyAddress={
+              sharableLinkMeta?.organization?.addressTextFormatted
+            }
+            customerAddress={sharableLinkMeta?.formattedCustomerAddress}
           />
         </Box>
       </DrawerBody>

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

@@ -108,6 +108,7 @@ export interface GetInvoicePaymentLinkResponse {
   organization: GetInvoicePaymentLinkOrganizationRes;
   hasStripePaymentMethod: boolean;
   isReceivable: boolean;
+  formattedCustomerAddress: string;
 }
 
 /**