(refactor) O3-3870 Move inline styles to SCSS file

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.component.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../config-schema';
+import IdentifierSticker from './print-identifier-sticker.component';
+import styles from './print-identifier-sticker-content.scss';
+
+interface PrintIdentifierStickerContentProps {
+  labels: Array<{}>;
+  numberOfLabelColumns: number;
+  numberOfLabelRowsPerPage: number;
+  patient: fhir.Patient;
+}
+
+const PrintIdentifierStickerContent = forwardRef<HTMLDivElement, PrintIdentifierStickerContentProps>(
+  ({ labels, numberOfLabelColumns, numberOfLabelRowsPerPage, patient }, ref) => {
+    const { printIdentifierStickerWidth, printIdentifierStickerHeight, printIdentifierStickerPaperSize } =
+      useConfig<ConfigObject>();
+
+    const maxLabelsPerPage = numberOfLabelRowsPerPage * numberOfLabelColumns;
+    const pages: Array<typeof labels> = [];
+
+    for (let i = 0; i < labels.length; i += maxLabelsPerPage) {
+      pages.push(labels.slice(i, i + maxLabelsPerPage));
+    }
+    const divRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => divRef.current);
+
+    useEffect(() => {
+      if (divRef.current) {
+        const style = divRef.current.style;
+        style.setProperty('--omrs-print-label-paper-size', printIdentifierStickerPaperSize);
+        style.setProperty('--omrs-print-label-columns', numberOfLabelColumns.toString());
+        style.setProperty('--omrs-print-label-rows', numberOfLabelRowsPerPage.toString());
+        style.setProperty('--omrs-print-label-sticker-height', printIdentifierStickerHeight);
+        style.setProperty('--omrs-print-label-sticker-width', printIdentifierStickerWidth);
+      }
+    }, [
+      numberOfLabelColumns,
+      numberOfLabelRowsPerPage,
+      printIdentifierStickerHeight,
+      printIdentifierStickerPaperSize,
+      printIdentifierStickerWidth,
+    ]);
+
+    if (numberOfLabelColumns < 1 || numberOfLabelRowsPerPage < 1 || labels.length < 1) {
+      return;
+    }
+
+    return (
+      <div ref={divRef} className={styles.printRoot}>
+        {pages.map((pageLabels, pageIndex) => (
+          <div key={pageIndex} className={pageIndex < pages.length - 1 ? styles.pageBreak : ''}>
+            <div className={styles.labelsContainer}>
+              {pageLabels.map((_, index) => (
+                <div key={index} className={styles.printContainer}>
+                  <IdentifierSticker patient={patient} />
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+export default PrintIdentifierStickerContent;

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss

@@ -0,0 +1,38 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.printRoot {
+  @media print {
+    @page {
+      size: var(--omrs-print-label-paper-size, auto);
+    }
+
+    html,
+    body {
+      height: initial !important;
+      overflow: initial !important;
+      background-color: white;
+    }
+  }
+
+  .labelsContainer {
+    display: grid;
+    column-gap: 1.3rem;
+    row-gap: 1rem;
+    place-items: center;
+    background-color: white;
+    grid-template-columns: repeat(var(--omrs-print-label-columns, 1), 1fr);
+    grid-template-rows: repeat(var(--omrs-print-label-rows, 1), auto);
+  }
+
+  .printContainer {
+    height: var(--omrs-print-label-sticker-height, 11rem);
+    width: var(--omrs-print-label-sticker-width, 13rem);
+    background-color: $ui-01;
+  }
+
+  .pageBreak {
+    page-break-after: always;
+  }
+}

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.component.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { age, getPatientName, useConfig, getCoreTranslation } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../config-schema';
+import styles from './print-identifier-sticker.scss';
+
+interface IdentifierStickerProps {
+  patient: fhir.Patient;
+}
+
+const getGender = (gender: string): string => {
+  switch (gender) {
+    case 'male':
+      return getCoreTranslation('male', 'Male');
+    case 'female':
+      return getCoreTranslation('female', 'Female');
+    case 'other':
+      return getCoreTranslation('other', 'Other');
+    case 'unknown':
+      return getCoreTranslation('unknown', 'Unknown');
+    default:
+      return gender;
+  }
+};
+
+const IdentifierSticker = forwardRef<HTMLDivElement, IdentifierStickerProps>(({ patient }, ref) => {
+  const { t } = useTranslation();
+  const { printIdentifierStickerFields, excludePatientIdentifierCodeTypes } = useConfig<ConfigObject>();
+
+  const patientDetails = useMemo(() => {
+    if (!patient) {
+      return {};
+    }
+
+    const identifiers =
+      patient.identifier?.filter(
+        (identifier) => !excludePatientIdentifierCodeTypes?.uuids.includes(identifier.type.coding[0].code),
+      ) ?? [];
+
+    return {
+      address: patient.address,
+      age: age(patient.birthDate),
+      dateOfBirth: patient.birthDate,
+      gender: getGender(patient.gender),
+      id: patient.id,
+      identifiers: [...identifiers],
+      name: patient ? getPatientName(patient) : '',
+      photo: patient.photo,
+    };
+  }, [excludePatientIdentifierCodeTypes?.uuids, patient]);
+
+  return (
+    <div ref={ref} className={styles.stickerContainer}>
+      {printIdentifierStickerFields.includes('name') && <div className={styles.patientName}>{patientDetails.name}</div>}
+      {patientDetails.identifiers.map((identifier) => {
+        return (
+          <p key={identifier?.id}>
+            {identifier?.type?.text}: <span className="patient-identifier">{identifier?.value}</span>
+          </p>
+        );
+      })}
+      <p>
+        {getCoreTranslation('sex', 'Sex')}: <span className="patient-gender">{patientDetails.gender}</span>
+      </p>
+      <p>
+        {t('dob', 'DOB')}: <span className="patient-dob">{patientDetails.dateOfBirth}</span>
+      </p>
+      <p>
+        {getCoreTranslation('age', 'Age')}: <span className="patient-age">{patientDetails.age}</span>
+      </p>
+    </div>
+  );
+});
+
+export default IdentifierSticker;

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx

@@ -115,7 +115,7 @@ const PrintIdentifierSticker: React.FC<PrintIdentifierStickerProps> = ({ closeMo
     onAfterPrint: handleAfterPrint,
     onBeforeGetContent: handleBeforeGetContent,
     onPrintError: handlePrintError,
-  });
+  } as any);
 
   return (
     <>

packages/esm-patient-banner-app/src/config-schema.ts

@@ -36,6 +36,21 @@ export const configSchema = {
       'Specifies the paper size for printing the sticker. You can define the size using units (e.g., mm, in) or named sizes (e.g., "148mm 210mm", "A1", "A2", "A4", "A5").',
     _default: '4in 6in',
   },
+  printIdentifierStickerWidth: {
+    _type: Type.String,
+    _description: 'Specifies the width of the sticker to be printed.',
+    _default: '4in',
+  },
+  printIdentifierStickerHeight: {
+    _type: Type.String,
+    _description: 'Specifies the height of the sticker to be printed.',
+    _default: '6in',
+  },
+  printIdentifierStickerPaperSize: {
+    _type: Type.String,
+    _description: 'Specifies the paper size to be used for printing the sticker.',
+    _default: 'A4',
+  },
   useRelationshipNameLink: {
     _type: Type.Boolean,
     _description: "Whether to use the relationship name as a link to the associated person's patient chart.",
@@ -50,4 +65,7 @@ export interface ConfigObject {
   printIdentifierStickerFields: Array<string>;
   printIdentifierStickerSize: string;
   useRelationshipNameLink: boolean;
+  printIdentifierStickerWidth: string;
+  printIdentifierStickerHeight: string;
+  printIdentifierStickerPaperSize: string;
 }