Address PR comments

src/components/ExportRequestButton/index.test.tsx

@@ -35,6 +35,10 @@ type TestParentProps = {
    * The role of the "current user" viewing the element
    */
   userRole?: UserRole;
+  /**
+   * The element to use as the print region for the PDF.
+   */
+  printRegion?: React.ReactNode;
   /**
    * The children to render within the test parent.
    */
@@ -45,6 +49,7 @@ const TestParent: FC<TestParentProps> = ({
   formStatus = FormStatus.LOADED,
   formData = {},
   userRole = "User",
+  printRegion = <div data-pdf-print-region="1" />,
   children,
 }: TestParentProps) => {
   const formValue = useMemo<FormContextState>(
@@ -73,7 +78,10 @@ const TestParent: FC<TestParentProps> = ({
 
   return (
     <AuthCtx.Provider value={authValue}>
-      <FormContext.Provider value={formValue}>{children}</FormContext.Provider>
+      <FormContext.Provider value={formValue}>
+        {printRegion}
+        {children}
+      </FormContext.Provider>
     </AuthCtx.Provider>
   );
 };
@@ -187,6 +195,21 @@ describe("Basic Functionality", () => {
       );
     });
   });
+
+  it("should display an error message if no print region is found", async () => {
+    const { getByTestId } = render(<ExportRequestButton />, {
+      wrapper: (p) => <TestParent printRegion={null} {...p} />,
+    });
+
+    userEvent.click(getByTestId("export-submission-request-button"));
+
+    await waitFor(() => {
+      expect(global.mockEnqueue).toHaveBeenCalledWith(
+        "An error occurred while exporting the Submission Request to PDF.",
+        { variant: "error" }
+      );
+    });
+  });
 });
 
 describe("Implementation Requirements", () => {

src/components/ExportRequestButton/index.tsx

@@ -14,7 +14,7 @@ const StyledTooltip = styled(StyledFormTooltip)({
   },
 });
 
-const StyledButton = styled(Button)({
+const StyledButton = styled(Button)(({ theme }) => ({
   "&.MuiButton-root": {
     display: "flex",
     justifyContent: "center",
@@ -26,11 +26,11 @@ const StyledButton = styled(Button)({
     fontStyle: "normal",
     lineHeight: "24px",
     letterSpacing: "0.32px",
-    "& .MuiSvgIcon-root": {
-      fontSize: "20px",
-    },
   },
-});
+  "&.Mui-disabled svg": {
+    opacity: theme.palette.action.disabledOpacity,
+  },
+}));
 
 const StyledDownloadIcon = styled(DownloadIcon)({
   color: "#000000",
@@ -56,7 +56,11 @@ const ExportRequestButton = forwardRef<HTMLButtonElement, ExportRequestButtonPro
 
       try {
         const printRegion: HTMLElement = document.querySelector("[data-pdf-print-region]");
-        const pdfBlob = await GenerateDocument(data, printRegion);
+        if (!printRegion) {
+          throw new Error("Unable to locate the print region for the PDF.");
+        }
+
+        const pdfBlob = await GenerateDocument(data, printRegion.cloneNode(true) as HTMLElement);
 
         const studyAbbr =
           data?.questionnaireData?.study?.abbreviation || data?.questionnaireData?.study?.name;

src/components/ExportRequestButton/pdf/Colors.ts

@@ -1,37 +1,42 @@
+/**
+ * An array of numbers representing an RGB color code as [red, green, blue]
+ */
+export type RgbColor = [number, number, number];
+
 /**
  * Defines the base text color for the document (black).
  *
  * @note #000000
  */
-export const COLOR_BASE: [number, number, number] = [0, 0, 0];
+export const COLOR_BASE: RgbColor = [0, 0, 0];
 
 /**
  * Defines the hyperlink color for the document.
  *
  * @note #0B6CB1
  */
-export const COLOR_HYPERLINK: [number, number, number] = [11, 108, 177];
+export const COLOR_HYPERLINK: RgbColor = [11, 108, 177];
 
 /**
  * The text color of the field values
  *
  * @note #595959
  */
-export const COLOR_FIELD_BASE: [number, number, number] = [89, 89, 89];
+export const COLOR_FIELD_BASE: RgbColor = [89, 89, 89];
 
 /**
  * Defines the color of the horizontal rule.
  */
-export const COLOR_HR: [number, number, number] = [198, 198, 198];
+export const COLOR_HR: RgbColor = [198, 198, 198];
 
 /**
  * The color of the email address.
  */
-export const COLOR_EMAIL: [number, number, number] = [8, 58, 80];
+export const COLOR_EMAIL: RgbColor = [8, 58, 80];
 
 /**
  * The color for footer text
  *
  * @note #2E3030
  */
-export const COLOR_DOC_FOOTER: [number, number, number] = [46, 48, 48];
+export const COLOR_DOC_FOOTER: RgbColor = [46, 48, 48];

src/components/ExportRequestButton/pdf/Generate.ts

@@ -168,7 +168,10 @@ const writeFooters = (doc: JsPDF): void => {
 /**
  * A function to generate a PDF document from a submission request.
  *
+ * @note This function temporarily modifies the width of the print region to ensure the
+ *  content fits within the page.
  * @param request The submission request to generate a PDF from.
+ * @param printRegion The region to print to the PDF.
  * @returns {Promise<URL>} A promise that resolves when the PDF is generated.
  * @throws {Error} If the submission request is invalid.
  */
@@ -197,10 +200,7 @@ export const GenerateDocument = async (
     creator: "crdc-datahub-ui",
   });
 
-  for (const font of fonts) {
-    // eslint-disable-next-line no-await-in-loop -- we need to wait for each font to load
-    await loadFont(doc, font);
-  }
+  await Promise.allSettled(fonts.map((font) => loadFont(doc, font)));
 
   return new Promise((resolve) => {
     const y = writeHeader(doc, request);