From c377521b93596de4c9a55214320f183188fcbfab Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:27:32 +0100
Subject: [PATCH] feat: add 'printed at' timestamp to print view (#3836)

---
 .../src/components/PrintButton.tsx            | 45 +++++++++++++++----
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/editor.planx.uk/src/components/PrintButton.tsx b/editor.planx.uk/src/components/PrintButton.tsx
index a0d3c62e72..8b48c60a7a 100644
--- a/editor.planx.uk/src/components/PrintButton.tsx
+++ b/editor.planx.uk/src/components/PrintButton.tsx
@@ -1,17 +1,44 @@
 import PrintIcon from "@mui/icons-material/Print";
 import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import React from "react";
 
+const StyledPrintButton = styled(Button)(() => ({
+  "@media print": {
+    display: "none",
+  },
+}));
+
+const StyledTimestamp = styled(Typography)(() => ({
+  display: "none",
+  "@media print": {
+    display: "block",
+  },
+}));
+
+const PrintedAt = () => {
+  return (
+    <StyledTimestamp>
+      Printed at {new Date().toLocaleString("en-GB")}
+    </StyledTimestamp>
+  );
+};
+
 export const PrintButton = () => {
   return (
-    <Button
-      variant="contained"
-      color="secondary"
-      startIcon={<PrintIcon />}
-      size="large"
-      onClick={() => window.print()}
-    >
-      Print this page
-    </Button>
+    <>
+      <StyledPrintButton
+        variant="contained"
+        color="secondary"
+        startIcon={<PrintIcon />}
+        size="large"
+        onClick={() => window.print()}
+      >
+        Print this page
+      </StyledPrintButton>
+
+      <PrintedAt />
+    </>
   );
 };