From 994ae22d1022a59dbe404bffec6249f27344ee7b Mon Sep 17 00:00:00 2001
From: jwnasambu <wamalwa1844.com>
Date: Thu, 10 Oct 2024 20:49:09 +0300
Subject: [PATCH] fix/O3-3515: Add user & timestamp to the Printed patient
 identifier sticker

---
 .../print-identifier-sticker.modal.tsx        | 24 +++++++++++++++----
 .../print-identifier-sticker.scss             | 13 ++++++++++
 .../translations/en.json                      |  5 +++-
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx
index 2d8d2efbe..e98147829 100644
--- a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx
+++ b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx
@@ -3,7 +3,14 @@ import Barcode from 'react-barcode';
 import { useTranslation } from 'react-i18next';
 import { useReactToPrint } from 'react-to-print';
 import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
-import { getPatientName, showSnackbar, useConfig, getCoreTranslation } from '@openmrs/esm-framework';
+import {
+  getPatientName,
+  showSnackbar,
+  useConfig,
+  getCoreTranslation,
+  formatDate,
+  useSession,
+} from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
 import { defaultBarcodeParams, getPatientField } from './print-identifier-sticker.resource';
 import styles from './print-identifier-sticker.scss';
@@ -25,6 +32,7 @@ const PrintIdentifierSticker: React.FC<PrintIdentifierStickerProps> = ({ closeMo
   const onBeforeGetContentResolve = useRef<() => void | null>(null);
   const [isPrinting, setIsPrinting] = useState(false);
   const headerTitle = t('patientIdentifierSticker', 'Patient identifier sticker');
+  const session = useSession();
 
   useEffect(() => {
     if (isPrinting && onBeforeGetContentResolve.current) {
@@ -83,11 +91,17 @@ const PrintIdentifierSticker: React.FC<PrintIdentifierStickerProps> = ({ closeMo
         <div ref={contentToPrintRef}>
           <style type="text/css" media="print">
             {`
-              @page {
-                size: ${pageSize};
-              }
-            `}
+        @page {
+          size: ${pageSize};
+        }
+      `}
           </style>
+          <div className={styles.printedBy}>
+            <span>
+              {t('printedBy', 'Printed by')} {session?.user?.display || t('unknownUser', 'Unknown user')}{' '}
+              {t('onDate', 'on')} {formatDate(new Date(), { noToday: true })}
+            </span>
+          </div>
           <PrintComponent patient={patient} />
         </div>
       </ModalBody>
diff --git a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss
index 1062c6d2d..ee5e1761b 100644
--- a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss
+++ b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss
@@ -1,3 +1,4 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/_vars' as *;
@@ -6,6 +7,12 @@
   padding: layout.$spacing-03 layout.$spacing-05;
 }
 
+.printedBy {
+  display: none;
+  background-color: colors.$white;
+  padding: 15px;
+}
+
 .documentHeader {
   display: flex;
   justify-content: space-between;
@@ -80,4 +87,10 @@
     padding: 0 !important;
     overflow: hidden;
   }
+
+  .printedBy {
+    @include type.type-style('body-compact-01');
+    display: flex;
+    gap: 10px;
+  }
 }
diff --git a/packages/esm-patient-banner-app/translations/en.json b/packages/esm-patient-banner-app/translations/en.json
index 61c50e267..445cbbdc6 100644
--- a/packages/esm-patient-banner-app/translations/en.json
+++ b/packages/esm-patient-banner-app/translations/en.json
@@ -7,14 +7,17 @@
   "countyDistrict": "District",
   "district": "District",
   "implementationLogo": "Implementation logo",
+  "onDate": "On date",
   "patientAge": "Age:",
   "patientDateOfBirthWithSeparator": "Date of birth:",
   "patientGenderWithSeparator": "Gender:",
   "patientIdentifierSticker": "Patient identifier sticker",
   "patientNameWithSeparator": "Patient name:",
   "postalCode": "Postal code",
+  "printedBy": "Printed by",
   "printIdentifierSticker": "Print identifier sticker",
   "state": "State",
   "stateProvince": "State",
-  "telephoneNumberWithSeparator": "Telephone number:"
+  "telephoneNumberWithSeparator": "Telephone number:",
+  "unknownUser": "Unknown user"
 }