feat: sharable payment link dialog

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

@@ -2,27 +2,31 @@ import { Text, Classes, Button, Intent } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { Box, Group, Stack } from '@/components';
 import styles from './PaymentPortal.module.scss';
+import { usePaymentPortalBoot } from './PaymentPortalBoot';
 
 export function PaymentPortal() {
+  const { sharableLinkMeta } = usePaymentPortalBoot();
+
   return (
     <Box className={styles.root}>
       <Stack className={styles.body}>
         <Group spacing={8}>
           <Box className={styles.companyLogoWrap}></Box>
-          <Text>Bigcapital Technology, Inc.</Text>
+          <Text>{sharableLinkMeta?.companyName}</Text>
         </Group>
 
         <Stack spacing={6}>
           <h1 className={styles.bigTitle}>
-            Bigcapital Technology, Inc. Sent an Invoice for $1000.00
+            {sharableLinkMeta?.companyName} Sent an Invoice for{' '}
+            {sharableLinkMeta?.totalFormatted}
           </h1>
           <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
-            Invoice due September 13, 2024
+            Invoice due {sharableLinkMeta?.dueDateFormatted}
           </Text>
         </Stack>
 
         <Stack spacing={2}>
-          <Box className={styles.customerName}>Ahmed Bouhuolia</Box>
+          <Box className={styles.customerName}>{sharableLinkMeta?.customerName}</Box>
           <Box>Bigcapital Technology, Inc.</Box>
           <Box>131 Continental Dr Suite 305 Newark,</Box>
           <Box>Delaware 19713</Box>
@@ -30,7 +34,9 @@ export function PaymentPortal() {
           <Box>ahmed@bigcapital.app</Box>
         </Stack>
 
-        <h2 className={styles.invoiceNumber}>Invoice INV-000001</h2>
+        <h2 className={styles.invoiceNumber}>
+          Invoice {sharableLinkMeta?.invoiceNo}
+        </h2>
 
         <Stack spacing={0} className={styles.totals}>
           <Group
@@ -38,12 +44,14 @@ export function PaymentPortal() {
             className={clsx(styles.totalItem, styles.borderBottomGray)}
           >
             <Text>Sub Total</Text>
-            <Text>11.00</Text>
+            <Text>{sharableLinkMeta?.subtotalFormatted}</Text>
           </Group>
 
           <Group position={'apart'} className={styles.totalItem}>
             <Text>Total</Text>
-            <Text style={{ fontWeight: 600 }}>11.00</Text>
+            <Text style={{ fontWeight: 600 }}>
+              {sharableLinkMeta?.totalFormatted}
+            </Text>
           </Group>
 
           <Group
@@ -51,7 +59,7 @@ export function PaymentPortal() {
             className={clsx(styles.totalItem, styles.borderBottomDark)}
           >
             <Text>Paid Amount (-)</Text>
-            <Text>11.00</Text>
+            <Text>{sharableLinkMeta?.paymentAmountFormatted}</Text>
           </Group>
 
           <Group
@@ -59,7 +67,9 @@ export function PaymentPortal() {
             className={clsx(styles.totalItem, styles.borderBottomDark)}
           >
             <Text>Due Amount</Text>
-            <Text style={{ fontWeight: 600 }}>11.00</Text>
+            <Text style={{ fontWeight: 600 }}>
+              {sharableLinkMeta?.dueAmountFormatted}
+            </Text>
           </Group>
         </Stack>
 
@@ -79,7 +89,7 @@ export function PaymentPortal() {
             intent={Intent.PRIMARY}
             className={clsx(styles.footerButton, styles.buyButton)}
           >
-            Pay $10,000.00
+            Pay {sharableLinkMeta?.totalFormatted}
           </Button>
         </Stack>
 

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

@@ -1,22 +1,37 @@
 import React, { createContext, useContext, ReactNode } from 'react';
+import {
+  GetSharableLinkMetaResponse,
+  useGetSharableLinkMeta,
+} from '@/hooks/query/payment-link';
 
 interface PaymentPortalContextType {
-  // Define the context type here
-  paymentAmount: number;
-  setPaymentAmount: (amount: number) => void;
+  sharableLinkMeta: GetSharableLinkMetaResponse | undefined;
+  isSharableLinkMetaLoading: boolean;
 }
 
 const PaymentPortalContext = createContext<PaymentPortalContextType>(
   {} as PaymentPortalContextType,
 );
 
-export const PaymentPortalBoot: React.FC<{ children: ReactNode }> = ({
+interface PaymentPortalBootProps {
+  linkId: string;
+  children: ReactNode;
+}
+
+export const PaymentPortalBoot: React.FC<PaymentPortalBootProps> = ({
+  linkId,
   children,
 }) => {
-  const [paymentAmount, setPaymentAmount] = React.useState<number>(0);
+  const { data: sharableLinkMeta, isLoading: isSharableLinkMetaLoading } =
+    useGetSharableLinkMeta(linkId);
+
+  const value = {
+    sharableLinkMeta,
+    isSharableLinkMetaLoading,
+  };
 
   return (
-    <PaymentPortalContext.Provider value={{ paymentAmount, setPaymentAmount }}>
+    <PaymentPortalContext.Provider value={value}>
       {children}
     </PaymentPortalContext.Provider>
   );

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

@@ -1,5 +1,13 @@
+import { useParams } from 'react-router-dom';
 import { PaymentPortal } from './PaymentPortal';
+import { PaymentPortalBoot } from './PaymentPortalBoot';
 
 export default function PaymentPortalPage() {
-  return <PaymentPortal />;
+  const { linkId } = useParams<{ linkId: string}>();
+
+  return (
+    <PaymentPortalBoot linkId={linkId}>
+      <PaymentPortal />
+    </PaymentPortalBoot>
+  );
 }