From ac143ec5fb02a966d4170b1194d2805216fbd79a 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           | 16 +++++++++++++++-
 .../print-identifier-sticker.scss                | 13 +++++++++++++
 .../esm-patient-banner-app/translations/en.json  |  5 ++++-
 3 files changed, 32 insertions(+), 2 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 2d8d2efbee..5e662e0ba6 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) {
@@ -88,6 +96,12 @@ const PrintIdentifierSticker: React.FC<PrintIdentifierStickerProps> = ({ closeMo
               }
             `}
           </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 1062c6d2d0..ee5e1761b6 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 61c50e2670..445cbbdc6d 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"
 }