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)}>