feat: replace generation with pdfmake

Author: kevin9foong

frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponseNavbar.tsx

@@ -8,7 +8,6 @@ import {
   useNavigate,
   useParams,
 } from 'react-router-dom'
-import { useReactToPrint } from 'react-to-print'
 import {
   Box,
   ButtonGroup,
@@ -20,7 +19,6 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { datadogLogs } from '@datadog/browser-logs'
 import { useFeatureIsOn, useGrowthBook } from '@growthbook/growthbook-react'
 
 import { featureFlags } from '~shared/constants'
@@ -33,6 +31,7 @@ import { useUser } from '~features/user/queries'
 
 import { useUnlockedResponses } from '../ResponsesPage/storage/UnlockedResponses/UnlockedResponsesProvider'
 
+import generatePdf from './generatePdf'
 import PrintableResponse from './PrintableResponse'
 import { useIndividualSubmission } from './queries'
 
@@ -131,10 +130,6 @@ export const IndividualResponseNavbar = (): JSX.Element => {
   const isAdminPrintPdfEnabled = useFeatureIsOn(featureFlags.adminPrintPdf)
 
   const printableResponseRef = useRef<HTMLDivElement>(null)
-  const reactToPrintFn = useReactToPrint({
-    contentRef: printableResponseRef,
-    documentTitle: `${form ? `${form.title}_formId_${form._id}_` : ''}submissionId_${submissionId}_response.pdf`,
-  })
 
   return (
     <Grid
@@ -175,19 +170,16 @@ export const IndividualResponseNavbar = (): JSX.Element => {
                   aria-label="Print"
                   icon={<FaRegFilePdf />}
                   isLoading={isLoading || isFormLoading}
-                  onClick={() => {
-                    datadogLogs.logger.info(
-                      `IndividualResponseNavbar: admin printing pdf`,
-                      {
-                        meta: {
-                          action: 'adminPrintPdf',
-                          userId: user?._id,
-                          submissionId: submissionId,
-                        },
-                      },
-                    )
-                    reactToPrintFn()
-                  }}
+                  onClick={
+                    form
+                      ? () =>
+                          generatePdf({
+                            formId: form._id,
+                            formTitle: form.title,
+                            submissionId,
+                          })
+                      : undefined
+                  }
                   variant="clear"
                 />
                 <PrintableResponse ref={printableResponseRef} />

frontend/src/features/admin-form/responses/IndividualResponsePage/generatePdf.ts

@@ -0,0 +1,26 @@
+import pdfMake from 'pdfmake/build/pdfmake'
+import pdfFonts from 'pdfmake/build/vfs_fonts'
+
+pdfMake.vfs = pdfFonts.vfs
+
+const docDefinition = { content: 'This is a sample PDF printed with pdfMake' }
+
+interface ResponsePdfRenderData {
+  formId: string
+  formTitle: string
+  submissionId: string
+}
+
+const generatePdf = ({
+  formId,
+  formTitle,
+  submissionId,
+}: ResponsePdfRenderData) => {
+  const pdfTitle = `${formTitle}_formId_${formId}_submissionId_${submissionId}_response.pdf`
+
+  return pdfMake.createPdf(docDefinition).download(pdfTitle, () => {
+    console.log('PDF downloaded')
+  })
+}
+
+export default generatePdf