From a8157332564aadfa5833a069c67372fdb0b9afd5 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 20 Aug 2024 23:13:37 +0300
Subject: [PATCH] Fixups

---
 ...t-identifier-sticker-content.component.tsx |  15 +--
 .../print-identifier-sticker.modal.tsx        | 114 +++++++++---------
 .../banner-tags/print-identifier-sticker.scss |   2 +-
 .../translations/en.json                      |  10 +-
 4 files changed, 72 insertions(+), 69 deletions(-)

diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx
index e56d75d759..710ca77098 100644
--- a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx
+++ b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx
@@ -1,21 +1,18 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
-import styles from './print-identifier-sticker-content.scss';
 import IdentifierSticker from './print-identifier-sticker.component';
-import { useImperativeHandle } from 'react';
-import { useRef } from 'react';
-import { useEffect } from 'react';
+import styles from './print-identifier-sticker-content.scss';
 
 interface PrintIdentifierStickerContentProps {
-  numberOfLabelRowsPerPage: number;
-  numberOfLabelColumns: number;
   labels: Array<{}>;
+  numberOfLabelColumns: number;
+  numberOfLabelRowsPerPage: number;
   patient: fhir.Patient;
 }
 
 const PrintIdentifierStickerContent = forwardRef<HTMLDivElement, PrintIdentifierStickerContentProps>(
-  ({ numberOfLabelRowsPerPage, numberOfLabelColumns, labels, patient }, ref) => {
+  ({ labels, numberOfLabelColumns, numberOfLabelRowsPerPage, patient }, ref) => {
     const { printIdentifierStickerWidth, printIdentifierStickerHeight, printIdentifierStickerPaperSize } =
       useConfig<ConfigObject>();
     const divRef = useRef<HTMLDivElement>();
@@ -32,10 +29,10 @@ const PrintIdentifierStickerContent = forwardRef<HTMLDivElement, PrintIdentifier
         style.setProperty('--omrs-print-label-sticker-width', printIdentifierStickerWidth);
       }
     }, [
-      printIdentifierStickerPaperSize,
       numberOfLabelColumns,
       numberOfLabelRowsPerPage,
       printIdentifierStickerHeight,
+      printIdentifierStickerPaperSize,
       printIdentifierStickerWidth,
     ]);
 
diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx
index 5477dec169..1d54533ea7 100644
--- a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx
+++ b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx
@@ -1,13 +1,13 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useReactToPrint, type UseReactToPrintOptions } from 'react-to-print';
-import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader, NumberInput, Stack } from '@carbon/react';
 import { getPatientName, showSnackbar, useConfig, getCoreTranslation } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../config-schema';
-import styles from './print-identifier-sticker.scss';
-import { NumberInput } from '@carbon/react';
 import IdentifierSticker from './print-identifier-sticker.component';
 import PrintIdentifierStickerContent from './print-identifier-sticker-content.component';
+import styles from './print-identifier-sticker.scss';
 
 interface PrintIdentifierStickerModalProps {
   closeModal: () => void;
@@ -61,45 +61,62 @@ const PrintIdentifierStickerModal: React.FC<PrintIdentifierStickerModalProps> =
         closeModal={closeModal}
         title={getCoreTranslation('printIdentifierSticker', 'Print identifier sticker')}
       />
-      <ModalBody>
-        <NumberInput
-          id="numberOfColumnsInput"
-          label={t('numberOfLabelColumns', 'Number of patient Id sticker columns')}
-          min={1}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            setNumberOfLabelColumns(parseInt(event.target.value || '1'))
-          }
-          value={numberOfLabelColumns}
-          hideSteppers={true}
-        />
-        <NumberInput
-          id="numberOfRowsPerPageInput"
-          label={t('numberOfLabelRowsPerPage', 'Number of patient Id sticker rows per page')}
-          min={1}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            setNumberOfLabelRowsPerPage(parseInt(event.target.value || '1'))
-          }
-          value={numberOfLabelRowsPerPage}
-          hideSteppers={true}
-        />
-        <NumberInput
-          id="numberOfLabels"
-          label={t('numberOfLabels', 'Number of Patient Id Stickers')}
-          min={1}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            setNumberOfLabels(parseInt(event.target.value || '1'))
-          }
-          value={numberOfLabels}
-          hideSteppers={true}
-        />
-        <div className={styles.stickerContent}>
-          <IdentifierSticker patient={patient} />
-          <span>
-            <Button kind="ghost" onClick={() => setIsPreviewVisible(!isPreviewVisible)}>
-              {!isPreviewVisible ? t('preview', 'Preview') : t('hidePreview', 'Hide Preview')}
-            </Button>
-          </span>
-        </div>
+      <ModalBody hasScrollingContent>
+        <Stack gap={5}>
+          <NumberInput
+            hideSteppers
+            id="numberOfColumnsInput"
+            label={t('numberOfLabelColumns', 'No. of patient ID sticker columns')}
+            min={1}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setNumberOfLabelColumns(parseInt(event.target.value || '1'))
+            }
+            value={numberOfLabelColumns}
+          />
+          <NumberInput
+            hideSteppers
+            id="numberOfRowsPerPageInput"
+            label={t('numberOfLabelRowsPerPage', 'No. of patient ID sticker rows per page')}
+            min={1}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setNumberOfLabelRowsPerPage(parseInt(event.target.value || '1'))
+            }
+            value={numberOfLabelRowsPerPage}
+          />
+          <NumberInput
+            hideSteppers
+            id="numberOfLabels"
+            label={t('numberOfLabels', 'No. of patient ID stickers')}
+            min={1}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setNumberOfLabels(parseInt(event.target.value || '1'))
+            }
+            value={numberOfLabels}
+          />
+          <div className={styles.stickerContent}>
+            <IdentifierSticker patient={patient} />
+            <span>
+              <Button kind="ghost" onClick={() => setIsPreviewVisible(!isPreviewVisible)}>
+                {!isPreviewVisible ? t('showPreview', 'Show preview') : t('hidePreview', 'Hide preview')}
+              </Button>
+            </span>
+          </div>
+          <div
+            className={classNames(styles.previewContainer, {
+              [styles.hideResultsPreview]: !isPreviewVisible,
+            })}
+          >
+            <div ref={contentToPrintRef}>
+              <PrintIdentifierStickerContent
+                labels={labels}
+                numberOfLabelColumns={numberOfLabelColumns}
+                numberOfLabelRowsPerPage={numberOfLabelRowsPerPage}
+                patient={patient}
+                ref={contentToPrintRef}
+              />
+            </div>
+          </div>
+        </Stack>
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={closeModal}>
@@ -113,17 +130,6 @@ const PrintIdentifierStickerModal: React.FC<PrintIdentifierStickerModalProps> =
           )}
         </Button>
       </ModalFooter>
-      <div className={`${styles.previewContainer} ${!isPreviewVisible ? styles.hideResultsPreview : ''}`}>
-        <div ref={contentToPrintRef}>
-          <PrintIdentifierStickerContent
-            ref={contentToPrintRef}
-            numberOfLabelRowsPerPage={numberOfLabelRowsPerPage}
-            numberOfLabelColumns={numberOfLabelColumns}
-            labels={labels}
-            patient={patient}
-          />
-        </div>
-      </div>
     </>
   );
 };
diff --git a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.scss b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.scss
index 5235e2744c..a8cc055584 100644
--- a/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.scss
+++ b/packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.scss
@@ -54,7 +54,7 @@
   max-height: 10rem;
   overflow-y: scroll;
   background-color: white;
-  width: 96%;
+  width: 100%;
   border: 1px solid $ui-03;
   margin-left: auto;
   margin-right: auto;
diff --git a/packages/esm-patient-banner-app/translations/en.json b/packages/esm-patient-banner-app/translations/en.json
index 0b6e5127ac..f177cb1283 100644
--- a/packages/esm-patient-banner-app/translations/en.json
+++ b/packages/esm-patient-banner-app/translations/en.json
@@ -7,13 +7,13 @@
   "countyDistrict": "District",
   "district": "District",
   "dob": "DOB",
-  "hidePreview": "Hide Preview",
-  "numberOfLabelColumns": "Number of patient Id sticker columns",
-  "numberOfLabelRowsPerPage": "Number of patient Id sticker rows per page",
-  "numberOfLabels": "Number of patient Id stickers",
+  "hidePreview": "Hide preview",
+  "numberOfLabelColumns": "No. of patient ID sticker columns",
+  "numberOfLabelRowsPerPage": "No. of patient ID sticker rows per page",
+  "numberOfLabels": "No. of patient ID stickers",
   "patientIdentifierSticker": "Patient identifier sticker",
   "postalCode": "Postal code",
-  "preview": "Preview",
+  "showPreview": "Show preview",
   "state": "State",
   "stateProvince": "State"
 }