feat: Hook orgnization name and logo to payment page

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

@@ -1,6 +1,8 @@
+import { Transform } from 'form-data';
 import { ItemEntryTransformer } from './ItemEntryTransformer';
 import { SaleInvoiceTaxEntryTransformer } from './SaleInvoiceTaxEntryTransformer';
 import { SaleInvoiceTransformer } from './SaleInvoiceTransformer';
+import { Transformer } from '@/lib/Transformer/Transformer';
 
 export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer {
   /**
@@ -17,7 +19,6 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
    */
   public includeAttributes = (): string[] => {
     return [
-      'companyName',
       'customerName',
       'dueAmount',
       'dueDateFormatted',
@@ -39,6 +40,7 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
       'termsConditions',
       'entries',
       'taxes',
+      'organization',
     ];
   };
 
@@ -46,8 +48,15 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
     return invoice.customer.displayName;
   }
 
-  public companyName() {
-    return 'Bigcapital Technology, Inc.';
+  /**
+   * Retrieves the organization metadata for the payment link.
+   * @returns 
+   */
+  public organization(invoice) {
+    return this.item(
+      this.context.organization,
+      new GetPaymentLinkOrganizationMetaTransformer()
+    );
   }
 
   /**
@@ -82,6 +91,20 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
   };
 }
 
+class GetPaymentLinkOrganizationMetaTransformer extends Transformer {
+  /**
+   * Include these attributes to item entry object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return ['primaryColor', 'name', 'address', 'logoUri'];
+  };
+
+  public excludeAttributes = (): string[] => {
+    return ['*'];
+  };
+}
+
 class GetInvoicePaymentLinkEntryMetaTransformer extends ItemEntryTransformer {
   /**
    * Include these attributes to item entry object.

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

@@ -17,7 +17,6 @@
   width :50px;
   border-radius: 50px;
   background-color: #dfdfdf;
-  background-image: url('https://pbs.twimg.com/profile_images/1381635804397703182/x5chIdsO_400x400.png');
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;

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

@@ -38,13 +38,20 @@ export function PaymentPortal() {
       <Stack spacing={0} className={styles.body}>
         <Stack>
           <Group spacing={10}>
-            <Box className={styles.companyLogoWrap}></Box>
-            <Text>{sharableLinkMeta?.companyName}</Text>
+            {sharableLinkMeta?.organization?.logoUri && (
+              <Box
+                className={styles.companyLogoWrap}
+                style={{
+                  backgroundImage: `url(${sharableLinkMeta?.organization?.logoUri})`,
+                }}
+              ></Box>
+            )}
+            <Text>{sharableLinkMeta?.organization?.name}</Text>
           </Group>
 
           <Stack spacing={6}>
             <h1 className={styles.bigTitle}>
-              {sharableLinkMeta?.companyName} Sent an Invoice for{' '}
+              {sharableLinkMeta?.organization?.name} Sent an Invoice for{' '}
               {sharableLinkMeta?.totalFormatted}
             </h1>
             <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>

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

@@ -54,6 +54,15 @@ export function useCreatePaymentLink(
 
 // Get Invoice Payment Link
 // -----------------------------------------
+interface GetInvoicePaymentLinkAddressResponse {
+  address_1: string;
+  address_2: string;
+  postal_code: string;
+  city: string;
+  state_province: string;
+  phone: string;
+}
+
 export interface GetInvoicePaymentLinkResponse {
   dueAmount: number;
   dueAmountFormatted: string;
@@ -70,7 +79,6 @@ export interface GetInvoicePaymentLinkResponse {
   totalFormatted: string;
   totalLocalFormatted: string;
   customerName: string;
-  companyName: string;
   invoiceMessage: string;
   termsConditions: string;
   entries: Array<{
@@ -89,7 +97,17 @@ export interface GetInvoicePaymentLinkResponse {
     taxRateAmountFormatted: string;
     taxRateCode: string;
   }>;
+  organization: Record<
+    string,
+    {
+      address: Record<string, GetInvoicePaymentLinkAddressResponse>;
+      name: string;
+      primaryColor: string;
+      logoUri: string;
+    }
+  >;
 }
+
 /**
  * Fetches the sharable invoice link metadata for a given link ID.
  * @param {string} linkId - The ID of the link to fetch metadata for.