feat: Hook orgnization name and logo to payment page

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.