feat: Download invoice pdf of the payment link

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

@@ -1,10 +1,14 @@
-import { Text, Classes, Button, Intent, Tag } from '@blueprintjs/core';
+import { Text, Classes, Button, Intent } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { AppToaster, Box, Group, Stack } from '@/components';
 import { usePaymentPortalBoot } from './PaymentPortalBoot';
 import { useDrawerActions } from '@/hooks/state';
-import { useCreateStripeCheckoutSession } from '@/hooks/query/payment-link';
+import {
+  useCreateStripeCheckoutSession,
+  useGeneratePaymentLinkInvoicePdf,
+} from '@/hooks/query/payment-link';
 import { DRAWERS } from '@/constants/drawers';
+import { downloadFile } from '@/hooks/useDownloadFile';
 import styles from './PaymentPortal.module.scss';
 
 export function PaymentPortal() {
@@ -15,10 +19,30 @@ export function PaymentPortal() {
     isLoading: isStripeCheckoutLoading,
   } = useCreateStripeCheckoutSession();
 
+  const {
+    mutateAsync: generatePaymentLinkInvoice,
+    isLoading: isInvoiceGenerating,
+  } = useGeneratePaymentLinkInvoicePdf();
+
   // Handles invoice preview button click.
   const handleInvoicePreviewBtnClick = () => {
     openDrawer(DRAWERS.PAYMENT_INVOICE_PREVIEW);
   };
+
+  // Handles invoice download button click.
+  const handleInvoiceDownloadBtnClick = () => {
+    generatePaymentLinkInvoice({ paymentLinkId: linkId })
+      .then((data) => {
+        downloadFile(data, `Invoice ${sharableLinkMeta?.invoiceNo}.pdf`);
+      })
+      .catch(() => {
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: 'Something went wrong.',
+        });
+      });
+  };
+
   // handles the pay button click.
   const handlePayButtonClick = () => {
     createStripeCheckoutSession({ linkId })
@@ -125,6 +149,8 @@ export function PaymentPortal() {
           <Button
             minimal
             className={clsx(styles.footerButton, styles.downloadInvoiceButton)}
+            onClick={handleInvoiceDownloadBtnClick}
+            loading={isInvoiceGenerating}
           >
             Download Invoice
           </Button>

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

@@ -11,6 +11,7 @@ import useApiRequest from '../useRequest';
 import { transformToCamelCase, transfromToSnakeCase } from '@/utils';
 
 const GetPaymentLinkInvoice = 'GetPaymentLinkInvoice';
+const GetPaymentLinkInvoicePdf = 'GetPaymentLinkInvoicePdf';
 
 // Create Payment Link
 // ------------------------------------
@@ -170,3 +171,56 @@ export const useCreateStripeCheckoutSession = (
     { ...options },
   );
 };
+
+// Get Payment Link Invoice PDF
+// ------------------------------------
+interface GetPaymentLinkInvoicePdfResponse {}
+
+interface GeneratePaymentLinkInvoicePdfValues {
+  paymentLinkId: string;
+}
+
+export const useGeneratePaymentLinkInvoicePdf = (
+  options?: UseMutationOptions<
+    GetPaymentLinkInvoicePdfResponse,
+    Error,
+    GeneratePaymentLinkInvoicePdfValues
+  >,
+): UseMutationResult<
+  GetPaymentLinkInvoicePdfResponse,
+  Error,
+  GeneratePaymentLinkInvoicePdfValues
+> => {
+  const apiRequest = useApiRequest();
+
+  return useMutation<
+    GetPaymentLinkInvoicePdfResponse,
+    Error,
+    GeneratePaymentLinkInvoicePdfValues
+  >(
+    (values: GeneratePaymentLinkInvoicePdfValues) => {
+      return apiRequest
+        .get(`/payment-links/${values.paymentLinkId}/invoice/pdf`)
+        .then((res) => res?.data);
+    },
+    { ...options },
+  );
+};
+
+export const useGetPaymentLinkInvoicePdf = (
+  invoiceId: string,
+  options?: UseQueryOptions<GetPaymentLinkInvoicePdfResponse, Error>,
+): UseQueryResult<GetPaymentLinkInvoicePdfResponse, Error> => {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetPaymentLinkInvoicePdfResponse, Error>(
+    [GetPaymentLinkInvoicePdf, invoiceId],
+    () =>
+      apiRequest
+        .get(`/payment-links/${invoiceId}/invoice/pdf`)
+        .then((res) => res.data),
+    {
+      ...options,
+    },
+  );
+};

packages/webapp/src/hooks/useDownloadFile.ts

@@ -33,9 +33,15 @@ export const useDownloadFile = (args: IArgs) => {
   return { ...mutation };
 };
 
-export function downloadFile(data, filename, mime, bom) {
+export function downloadFile(
+  data,
+  filename,
+  mime = 'application/octet-stream',
+  bom?: any,
+) {
   var blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
-  var blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+  var blob = new Blob(blobData, { type: mime });
+
   if (typeof window.navigator.msSaveBlob !== 'undefined') {
     // IE workaround for "HTML7007: One or more blob URLs were
     // revoked by closing the blob for which they were created.