@kenyaemr/esm-express-workflow-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/shared/orders/print-order/print-order.component.tsx

@@ -0,0 +1,158 @@
+import React, { useRef, useState, useMemo } from 'react';
+import { Button, ButtonSet, ModalBody, ModalFooter, InlineNotification } from '@carbon/react';
+import { useReactToPrint } from 'react-to-print';
+import { formatDatetime, parseDate, useSession } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './print-order.scss';
+import { Order } from '../../../types/order/order';
+import { documentId } from '../../utils';
+export type OrderDocumentType = 'lab' | 'radiology' | 'procedure';
+
+type PrintOrderPreviewModalProps = {
+  onClose: () => void;
+  orders: Array<Order>;
+  orderType: OrderDocumentType;
+  patientName?: string;
+  patientId?: string;
+  patientAge?: string | number;
+};
+
+const documentMeta = (
+  orderType: OrderDocumentType,
+  t: (k: string, d: string) => string,
+): { title: string; orderLabel: string } => {
+  switch (orderType) {
+    case 'lab':
+      return { title: t('labOrderForm', 'Laboratory Order Form'), orderLabel: t('test', 'Test') };
+    case 'radiology':
+      return { title: t('radiologyOrderForm', 'Radiology Order Form'), orderLabel: t('procedure', 'Procedure') };
+    case 'procedure':
+      return { title: t('procedureOrderForm', 'Procedure Order Form'), orderLabel: t('procedure', 'Procedure') };
+    default:
+      return { title: t('orderForm', 'Order Form'), orderLabel: t('order', 'Order') };
+  }
+};
+
+const PrintOrderPreviewModal: React.FC<PrintOrderPreviewModalProps> = ({
+  onClose,
+  orders,
+  orderType,
+  patientName,
+  patientId,
+  patientAge,
+}) => {
+  const { t } = useTranslation();
+  const [printError, setPrintError] = useState<string | null>(null);
+  const printRef = useRef<HTMLDivElement>(null);
+  const { sessionLocation, user } = useSession();
+  const userDisplay = user ? user.display : '';
+  const generationTimestamp = useMemo(() => new Date(), []);
+  const { title, orderLabel } = documentMeta(orderType, t);
+
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+    documentTitle: title,
+    onAfterPrint: () => setPrintError(null),
+    onPrintError: (_, error) => {
+      setPrintError(error?.message || t('errorOccurredWhilePrinting', 'An error occurred while printing'));
+    },
+    pageStyle: `
+      @page {
+        size: A4;
+        margin: 15mm;
+      }
+    `,
+  });
+
+  return (
+    <>
+      <ModalBody>
+        <div className={styles.container}>
+          <div ref={printRef} className={styles.printableContent}>
+            <div className={styles.printableHeader}>
+              <div className={styles.facilityDetails}>
+                <div className={styles.facilityName}>{sessionLocation?.display}</div>
+                <div className={styles.heading}>{title}</div>
+              </div>
+            </div>
+
+            <div className={styles.printableBody}>
+              <div className={styles.topInfoRow}>
+                <div className={styles.infoItem}>
+                  <span className={styles.label}>{t('patientName', 'Patient Name:')}</span>
+                  <span className={styles.value}>{patientName || ''}</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <span className={styles.label}>{t('patientNo', 'Patient No:')}</span>
+                  <span className={styles.value}>{patientId || ''}</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <span className={styles.label}>{t('age', 'Age:')}</span>
+                  <span className={styles.value}>{patientAge ?? ''}</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <span className={styles.label}>{t('date', 'Date:')}</span>
+                  <span className={styles.value}>{formatDatetime(generationTimestamp, { mode: 'standard' })}</span>
+                </div>
+              </div>
+
+              <table className={styles.orderTable}>
+                <thead>
+                  <tr>
+                    <th className={styles.th}>{t('orderNo', 'Order No')}</th>
+                    <th className={styles.th}>{t('dateOrdered', 'Date Ordered')}</th>
+                    <th className={styles.th}>{orderLabel}</th>
+                    <th className={styles.th}>{t('priority', 'Priority')}</th>
+                    <th className={styles.th}>{t('orderBy', 'Order By')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {orders.map((order) => (
+                    <tr key={order.uuid}>
+                      <td className={styles.td}>{order.orderNumber}</td>
+                      <td className={styles.td}>
+                        {order.dateActivated
+                          ? formatDatetime(parseDate(order.dateActivated), { mode: 'standard' })
+                          : '--'}
+                      </td>
+                      <td className={styles.td}>{order.concept?.display?.replace('_', ' ') ?? '--'}</td>
+                      <td className={styles.td}>{order.urgency ?? '--'}</td>
+                      <td className={styles.td}>{order.orderer?.display ?? '--'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              <div className={styles.footer}>
+                <div className={styles.footerDetails}>
+                  <div>
+                    {documentId()} | {t('generatedBy', 'Generated By')}: {userDisplay}
+                  </div>
+                  <div>
+                    {t('generationTimestamp', 'Generated')}: {formatDatetime(generationTimestamp)} |{' '}
+                    {t('facility', 'Facility')}: {sessionLocation?.display}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.btnSet}>
+          <Button kind="secondary" onClick={onClose} type="button">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="button" onClick={handlePrint}>
+            {t('print', 'Print')}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+
+      {printError && (
+        <InlineNotification kind="error" title={t('printError', 'Error')} subtitle={printError} hideCloseButton />
+      )}
+    </>
+  );
+};
+
+export default PrintOrderPreviewModal;

package/src/shared/orders/print-order/print-order.scss

@@ -0,0 +1,225 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  padding: layout.$spacing-06;
+  margin-bottom: layout.$spacing-05;
+  background-color: colors.$white;
+
+  @media print {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.printableContent {
+  background-color: colors.$white;
+  width: 210mm;
+  min-height: 297mm;
+  margin: 0 auto;
+  padding: layout.$spacing-07;
+  box-sizing: border-box;
+  font-size: 11px;
+  line-height: 1.3;
+  color: colors.$black;
+
+  @media print {
+    width: 100%;
+    height: 100%;
+    padding: layout.$spacing-07;
+    margin: 0;
+    box-shadow: none;
+    border: none;
+  }
+}
+
+.printableHeader {
+  text-align: center;
+  margin-bottom: layout.$spacing-05;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid colors.$black;
+}
+
+.facilityDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.facilityName {
+  font-weight: 700;
+  color: colors.$black;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: layout.$spacing-03;
+  font-size: 14px;
+}
+
+.heading {
+  font-weight: 600;
+  color: colors.$black;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 12px;
+}
+
+.printableBody {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.topInfoRow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-03;
+  border: 1px solid colors.$black;
+  border-radius: 2px;
+}
+
+.infoItem {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.label {
+  font-weight: 600;
+  color: colors.$black;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.value {
+  color: colors.$black;
+  border-bottom: 1px solid colors.$black;
+  padding: layout.$spacing-01;
+  min-height: layout.$spacing-04;
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+}
+
+.orderTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 10px;
+}
+
+.th {
+  border: 1px solid colors.$black;
+  padding: layout.$spacing-03;
+  text-align: left;
+  font-weight: 600;
+  background-color: colors.$gray-10;
+  text-transform: uppercase;
+  font-size: 9px;
+
+  @media print {
+    background-color: colors.$gray-10 !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+
+.td {
+  border: 1px solid colors.$black;
+  padding: layout.$spacing-03;
+  color: colors.$black;
+}
+
+.signaturesSection {
+  margin-top: layout.$spacing-05;
+  padding-top: layout.$spacing-03;
+  border-top: 1px solid colors.$black;
+}
+
+.signatureBlock {
+  margin-bottom: layout.$spacing-03;
+}
+
+.signatureRow {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: layout.$spacing-03;
+  align-items: center;
+  padding: layout.$spacing-02;
+}
+
+.nameField,
+.signField {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.nameValue {
+  color: colors.$black;
+  border-bottom: 1px solid colors.$black;
+  padding: layout.$spacing-01;
+  min-height: layout.$spacing-04;
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+}
+
+.signatureLine {
+  border-bottom: 1px solid colors.$black;
+  height: layout.$spacing-04;
+  width: 100%;
+}
+
+.btnSet {
+  width: 100%;
+  margin-top: layout.$spacing-05;
+}
+
+.footer {
+  margin-top: layout.$spacing-06;
+  padding-top: layout.$spacing-04;
+  border-top: 1px solid colors.$black;
+  text-align: center;
+  page-break-inside: avoid;
+
+  @media print {
+    position: fixed !important;
+    bottom: layout.$spacing-05 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    border-top: 0.5pt solid colors.$gray-50 !important;
+    box-sizing: border-box !important;
+  }
+}
+
+.footerDetails {
+  font-size: 7pt;
+  color: colors.$gray-70;
+  text-align: center;
+  line-height: 1.3;
+
+  div {
+    margin-bottom: layout.$spacing-02;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  .printableContent,
+  .printableContent * {
+    visibility: visible;
+  }
+  .printableContent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    padding: layout.$spacing-07;
+  }
+}

package/src/shared/orders/print-prescription/print-prescription.component.tsx

@@ -0,0 +1,65 @@
+import React, { useRef } from 'react';
+import { Button, ButtonSet, ModalBody, ModalFooter, InlineLoading, InlineNotification } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { usePrescriptionPdf } from './print-prescription.resource';
+import styles from './print-prescription.scss';
+
+type PrintPrescriptionModalProps = {
+  onClose: () => void;
+  medicationRequestUuids: string[];
+};
+
+const PrintPrescriptionModal: React.FC<PrintPrescriptionModalProps> = ({ onClose, medicationRequestUuids }) => {
+  const { t } = useTranslation();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { pdfUrl, isLoading, error } = usePrescriptionPdf(medicationRequestUuids);
+
+  const handlePrint = () => {
+    if (iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.focus();
+      iframeRef.current.contentWindow.print();
+    }
+  };
+
+  return (
+    <>
+      <ModalBody className={styles.modalBody}>
+        {isLoading && (
+          <div className={styles.stateContainer}>
+            <InlineLoading description={t('loadingPrescription', 'Loading prescription...')} />
+          </div>
+        )}
+        {error && !isLoading && (
+          <div className={styles.stateContainer}>
+            <InlineNotification
+              kind="error"
+              title={t('errorLoadingPrescription', 'Error loading prescription')}
+              subtitle={error.message}
+              hideCloseButton
+            />
+          </div>
+        )}
+        {pdfUrl && !isLoading && (
+          <iframe
+            ref={iframeRef}
+            src={pdfUrl}
+            className={styles.pdfFrame}
+            title={t('prescriptionPreview', 'Prescription Preview')}
+          />
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.btnSet}>
+          <Button kind="secondary" onClick={onClose} type="button">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="button" onClick={handlePrint} disabled={!pdfUrl || isLoading}>
+            {t('print', 'Print')}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default PrintPrescriptionModal;

package/src/shared/orders/print-prescription/print-prescription.resource.ts

@@ -0,0 +1,45 @@
+import { restBaseUrl } from '@openmrs/esm-framework';
+import { useEffect, useMemo, useState } from 'react';
+
+export function usePrescriptionPdf(medicationRequestUuids: string[]) {
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const uuidParam = useMemo(() => medicationRequestUuids.join(','), [medicationRequestUuids]);
+
+  useEffect(() => {
+    if (!uuidParam) {
+      return;
+    }
+
+    let objectUrl: string | null = null;
+    setIsLoading(true);
+    setPdfUrl(null);
+    setError(null);
+
+    const url = `/openmrs${restBaseUrl}/palladiumemr/prescription?medicationRequestUuid=${uuidParam}`;
+
+    fetch(url, { credentials: 'include', headers: { Accept: 'application/pdf' } })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`${response.status} ${response.statusText}`);
+        }
+        return response.blob();
+      })
+      .then((blob) => {
+        objectUrl = URL.createObjectURL(new Blob([blob], { type: 'application/pdf' }));
+        setPdfUrl(objectUrl);
+      })
+      .catch((err) => setError(err instanceof Error ? err : new Error(String(err))))
+      .finally(() => setIsLoading(false));
+
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [uuidParam]);
+
+  return { pdfUrl, isLoading, error };
+}

package/src/shared/orders/print-prescription/print-prescription.scss

@@ -0,0 +1,25 @@
+@use '@carbon/layout';
+
+.modalBody {
+  padding: 0;
+  min-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.pdfFrame {
+  width: 100%;
+  flex: 1;
+  min-height: 70vh;
+  border: none;
+}
+
+.stateContainer {
+  padding: layout.$spacing-06;
+  display: flex;
+  justify-content: center;
+}
+
+.btnSet {
+  width: 100%;
+}

package/src/shared/otp-verification/index.ts

@@ -3,7 +3,36 @@ import { default as otpVerificationModal } from './otp-verification.modal';
 import { type ModalSize } from '@carbon/react/lib/components/Modal/Modal';
 
 /**
- * Options for configuring the OTP Verification modal.
+ * Result returned by onStartBiometric — the caller's `/biometric-authorize`
+ * handler resolves with this shape so the modal knows the embed URL to render
+ * and the auth code to round-trip on success.
+ */
+export type BiometricStartResult = {
+  embed_url: string;
+  authorization_code: string;
+  consent_token: string;
+};
+
+/**
+ * Result handed to onBiometricSuccess when the iframe's eKYC capture completes
+ * successfully (postMessage from the eKYC origin).
+ */
+export type BiometricSuccessResult = {
+  authorization_code: string;
+  consent_token: string;
+};
+
+/**
+ * Options for configuring the OTP / Secure Patient Authentication modal.
+ *
+ * The modal supports two operating modes:
+ *
+ * 1. **otp-only** (default, backward compatible) — opens directly into the
+ *    existing OTP confirm-phone screen. Use this when the only auth path is OTP.
+ *    All existing consumers don't need to change.
+ *
+ * 2. **multi** — opens an auth landing screen with three options: biometric,
+ *    OTP, or whitelist request. The available options depend on `whitelistedForOTP`.
  *
  * @property {number} [otpLength] - The number of digits required for the OTP. Defaults to implementation-specific value.
  * @property {(otp: string) => Promise<void>} [onVerify] - Callback invoked when the user submits the OTP. Should return a promise that resolves on successful verification.
@@ -15,35 +44,61 @@ import { type ModalSize } from '@carbon/react/lib/components/Modal/Modal';
  * @property {number} [expiryMinutes] - The number of minutes after which the OTP expires. Defaults to 5 minutes. This is displayed to the user for clarity.
  * @property {() => void} [onCleanup] - Callback invoked when the modal closes to clean up OTP resources.
  *
+ * @property {'otp-only' | 'multi'} [authMode] - When 'multi', shows the auth-landing method picker first (Biometric / OTP / Whitelist). When 'otp-only' or undefined, opens directly to the existing OTP landing.
+ * @property {boolean} [whitelistedForOTP] - Whether the patient is approved for OTP whitelist bypass. Drives method picker layout and post-failure recovery options.
+ * @property {() => Promise<BiometricStartResult>} [onStartBiometric] - Called when the user picks biometric. Should resolve with the embed_url + auth code from /biometric-authorize.
+ * @property {(result: BiometricSuccessResult) => void} [onBiometricSuccess] - Called on successful biometric capture (iframe postMessage SUCCESS).
+ * @property {(consentToken: string | null) => void} [onBiometricCancel] - Called when biometric session is cancelled (user closes, timer expires). Backend's /biometric-cancel goes here.
+ * @property {() => void} [onRequestWhitelist] - Called when the user clicks "Request OTP Whitelisting" — parent should open the whitelist submission flow.
+ * @property {() => void} [onRejected] - Called when the user clicks "Reject" on the auth landing — visit proceeds without consent (administrative override).
+ * @property {string} [ekycOrigin] - Expected origin of the eKYC iframe's postMessage events for security validation. Defaults to https://test.ekyc.pesaflow.com.
+ *
+ * @example
+ * // OTP-only mode (existing behavior, unchanged)
+ * launchOtpVerificationModal({
+ *   otpLength: 6,
+ *   phoneNumber: '254700000000',
+ *   onRequestOtp: async (phone) => sendSHAOtp(crId, codes),
+ *   onVerify: async (otp) => createSHAVirtualClaim(crId, otp, ...),
+ *   onVerificationSuccess: () => console.log('verified'),
+ * });
+ *
  * @example
- * <Button
- *   onClick={() =>
- *     launchOtpVerificationModal({
- *       otpLength: 4,
- *       obscureText: false,
- *       phoneNumber: '254700000000',
- *       expiryMinutes: 10, // OTP expires in 10 minutes
- *       onRequestOtp: (phone) =>
- *         new Promise((resolve, reject) => {
- *           const success = true;
- *           setTimeout(() => (success ? resolve() : reject(new Error('Some error'))), 3000);
- *         }),
- *       onVerify: async (otp) =>
- *         new Promise((resolve, reject) => {
- *           const success = true;
- *           setTimeout(() => (success ? resolve() : reject(new Error('Some error'))), 3000);
- *         }),
- *       onCleanup: () => {
- *         // Clean up OTP resources
- *         otpManager.cleanupExpiredOTPs();
- *       },
- *     })
- *   }
- * >
- *   Launch OTP verification Modal
- * </Button>
+ * // Multi-method auth mode (biometric + OTP + whitelist)
+ * launchOtpVerificationModal({
+ *   authMode: 'multi',
+ *   whitelistedForOTP: patient.whitelisted_for_otp ?? false,
+ *   phoneNumber: '254700000000',
+ *
+ *   // OTP wiring
+ *   onRequestOtp: async (phone) => sendSHAOtp(crId, codes),
+ *   onVerify: async (otp) => createSHAVirtualClaim(crId, otp, ...),
+ *   onVerificationSuccess: () => { ... },
+ *
+ *   // Biometric wiring
+ *   onStartBiometric: async () => {
+ *     const res = await createSHABiometricAuthorize({ ... });
+ *     if (!res.success || !res.embed_url) throw new Error(res.error);
+ *     return {
+ *       embed_url: res.embed_url,
+ *       authorization_code: res.authorization_code!,
+ *       consent_token: res.consent_token!,
+ *     };
+ *   },
+ *   onBiometricSuccess: (result) => {
+ *     shaClaimResponseRef.current = result;
+ *   },
+ *   onBiometricCancel: async (consentToken) => {
+ *     if (consentToken) await cancelBiometricSession(consentToken);
+ *   },
+ *
+ *   // Escape paths
+ *   onRequestWhitelist: () => launchWhitelistSubmissionModal({ patientCRId }),
+ *   onRejected: () => markVisitProceedingWithoutConsent(),
+ * });
  */
 export type OTPVerificationModalOptions = {
+  // ── existing OTP props ──
   otpLength?: number;
   onVerify?: (otp: string) => Promise<void>;
   obscureText?: boolean;
@@ -54,12 +109,40 @@ export type OTPVerificationModalOptions = {
   expiryMinutes?: number;
   size?: ModalSize;
   onCleanup?: () => void;
+
+  // ── new multi-method auth props ──
+  /** When 'multi', shows the auth-landing method picker first. Defaults to 'otp-only'. */
+  authMode?: 'otp-only' | 'multi';
+
+  /** Whether the patient is approved for OTP whitelist bypass. */
+  whitelistedForOTP?: boolean;
+
+  /** Called when user picks biometric. Resolve with embed_url + auth code. */
+  onStartBiometric?: () => Promise<BiometricStartResult>;
+
+  /** Called on successful biometric capture (postMessage SUCCESS from eKYC). */
+  onBiometricSuccess?: (result: BiometricSuccessResult) => void;
+
+  /** Called when biometric session is cancelled. Wire to backend /biometric-cancel. */
+  onBiometricCancel?: (consentToken: string | null) => void;
+
+  /** Called when user clicks "Request OTP Whitelisting". */
+  onRequestWhitelist?: () => void;
+
+  /** Called when user clicks "Reject" — visit proceeds without consent. */
+  onRejected?: () => void;
+
+  /** Expected origin of eKYC postMessage events. Defaults to https://test.ekyc.pesaflow.com. */
+  ekycOrigin?: string;
+
+  /** Whether this modal is being used to start or end a visit. Defaults to 'start'. Affects progress message text. */
+  visitAction?: 'start' | 'end';
 };
 
 /**
- * Launch the OTP verification modal with the provided options
+ * Launch the OTP / Secure Patient Authentication modal with the provided options.
  *
- * @param props - Configuration options for the OTP verification modal
+ * @param props - Configuration options for the modal
  * @returns A dispose function to close the modal programmatically
  */
 export const launchOtpVerificationModal = (props: OTPVerificationModalOptions) => {