From e0c7b5af2ac93452453b8d7916b6ecc16394cc42 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Tue, 8 Oct 2024 13:41:59 +0100
Subject: [PATCH] feat: add export/print button to Upload+Label and Review
 components (#3771)

---
 .../FileUploadAndLabel/Public.test.tsx        | 26 +++++++++++++++++--
 .../components/FileUploadAndLabel/Public.tsx  |  2 ++
 .../Review/Public/Presentational.tsx          |  2 ++
 .../components/Review/Public/Public.test.tsx  |  3 ++-
 .../src/components/PrintButton.tsx            | 17 ++++++++++++
 5 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 editor.planx.uk/src/components/PrintButton.tsx

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx
index 82d5b3cd2b..83d0ee3585 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx
@@ -1,8 +1,7 @@
 import { act, screen, waitFor, within } from "@testing-library/react";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 import axios from "axios";
-import { useStore } from "pages/FlowEditor/lib/store";
-import { FullStore } from "pages/FlowEditor/lib/store";
+import { FullStore, useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { setup } from "testUtils";
 import { Breadcrumbs } from "types";
@@ -60,6 +59,18 @@ describe("Basic state and setup", () => {
     expect(results).toHaveNoViolations();
   });
 
+  it("does not show a print button if hideDropZone is false", async () => {
+    const { queryByText } = setup(
+      <FileUploadAndLabelComponent
+        title="Test title"
+        fileTypes={[mockFileTypes.AlwaysRequired, mockFileTypes.NotRequired]}
+        // hideDropZone is false by default
+      />,
+    );
+    const printButton = queryByText("Print this page");
+    expect(printButton).toBeNull();
+  });
+
   test("shows help buttons for header and applicable file", async () => {
     const { getAllByTestId } = setup(
       <FileUploadAndLabelComponent
@@ -141,6 +152,17 @@ describe("Info-only mode with hidden drop zone", () => {
     expect(results).toHaveNoViolations();
   });
 
+  it("shows a print button", async () => {
+    const { getByText } = setup(
+      <FileUploadAndLabelComponent
+        title="Test title"
+        fileTypes={[mockFileTypes.AlwaysRequired, mockFileTypes.NotRequired]}
+        hideDropZone={true}
+      />,
+    );
+    expect(getByText("Print this page")).toBeVisible();
+  });
+
   test("shows help buttons for header and applicable file", async () => {
     const { getAllByTestId } = setup(
       <FileUploadAndLabelComponent
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
index f7febf4f34..de9c75391e 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -7,6 +7,7 @@ import ListSubheader from "@mui/material/ListSubheader";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { PublicProps } from "@planx/components/ui";
+import { PrintButton } from "components/PrintButton";
 import capitalize from "lodash/capitalize";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import { HelpClickMetadata } from "pages/FlowEditor/lib/analytics/types";
@@ -271,6 +272,7 @@ function Component(props: Props) {
           </Box>
         </ErrorWrapper>
       </FullWidthWrapper>
+      {props.hideDropZone && <PrintButton />}
     </Card>
   );
 }
diff --git a/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx b/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx
index 2e91e7e86a..70e48a4057 100644
--- a/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx
+++ b/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx
@@ -2,6 +2,7 @@ import { NodeId } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
 import CardHeader from "@planx/components/shared/Preview/CardHeader";
 import SummaryListsBySections from "@planx/components/shared/Preview/SummaryList";
+import { PrintButton } from "components/PrintButton";
 import { Store } from "pages/FlowEditor/lib/store";
 import { sortBreadcrumbs } from "pages/FlowEditor/lib/store/preview";
 import type { HandleSubmit } from "pages/Preview/Node";
@@ -38,6 +39,7 @@ function Component(props: Props) {
         showChangeButton={props.showChangeButton}
         sectionComponent="h2"
       />
+      <PrintButton />
     </Card>
   );
 }
diff --git a/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx b/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx
index a0e009eefe..c04e555b1a 100644
--- a/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx
@@ -38,7 +38,7 @@ describe("Simple flow", () => {
     const handleSubmit = vi.fn();
     const changeAnswer = vi.fn();
 
-    const { user } = setup(
+    const { user, getByText } = setup(
       <Review
         title="Review"
         description="Check your answers before submitting"
@@ -52,6 +52,7 @@ describe("Simple flow", () => {
     );
 
     expect(screen.getByRole("heading")).toHaveTextContent("Review");
+    expect(getByText("Print this page")).toBeVisible();
 
     await user.click(screen.getByTestId("continue-button"));
 
diff --git a/editor.planx.uk/src/components/PrintButton.tsx b/editor.planx.uk/src/components/PrintButton.tsx
new file mode 100644
index 0000000000..a0d3c62e72
--- /dev/null
+++ b/editor.planx.uk/src/components/PrintButton.tsx
@@ -0,0 +1,17 @@
+import PrintIcon from "@mui/icons-material/Print";
+import Button from "@mui/material/Button";
+import React from "react";
+
+export const PrintButton = () => {
+  return (
+    <Button
+      variant="contained"
+      color="secondary"
+      startIcon={<PrintIcon />}
+      size="large"
+      onClick={() => window.print()}
+    >
+      Print this page
+    </Button>
+  );
+};