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

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;
 }
 
 /**