@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/shared/dashboard-link/dashboard-link.component.tsx

@@ -11,23 +11,26 @@ export interface LinkConfig {
   name: string;
   title: string;
   icon?: string | CarbonIconType;
+  basePath?: string;
 }
 
-export function LinkExtension({ config }: { config: LinkConfig }) {
+export function LinkExtension({ config }: { readonly config: LinkConfig }) {
   const { t } = useTranslation();
-  const { name, title, icon } = config;
+  const { name, title, icon, basePath = 'home' } = config;
   const nameSegment = name.split('/').at(-1);
   const location = useLocation();
-  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+  const spaBasePath = window.getOpenmrsSpaBase() + basePath;
 
-  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
-  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/')) || ''), [location.pathname]);
+  const IconComp = typeof icon === 'string' ? null : icon;
+
+  const url = spaBasePath + '/' + name;
+
+  const cleanUrl = url.replaceAll(/(?<!:)\/\//g, '/');
 
   const isActive = nameSegment === urlSegment;
   return (
-    <ConfigurableLink
-      to={spaBasePath + '/' + name}
-      className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
+    <ConfigurableLink to={cleanUrl} className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
       {typeof icon === 'string' ? (
         <MaybeIcon icon={icon} className={styles.icon} size={16} />
       ) : (

package/src/shared/orders/OrderTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, Layer, Button } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { parseDate, formatDatetime } from '@openmrs/esm-framework';
+import { parseDate, formatDatetime, translateFrom, OpenmrsResource } from '@openmrs/esm-framework';
 import { PriorityPill, StatusPill } from './OrderPills';
 import { type Order } from '../../types/order/order';
 import { CardHeader } from '@openmrs/esm-patient-common-lib';
@@ -15,12 +15,14 @@ type OrderTableProps = {
   tableCellClassName: string;
   priorityPillClassName: string;
   statusPillClassName: string;
+  module: string;
 };
 
 const defaultHeaders = (t: (k: string, d: string) => string) => [
   { header: t('orderNo', 'Order No'), key: 'orderNo' },
   { header: t('dateOrdered', 'Date Ordered'), key: 'dateOrdered' },
   { header: t('order', 'Order'), key: 'order' },
+  { header: t('orderReason', 'Order reason'), key: 'orderReason' },
   { header: t('priority', 'Priority'), key: 'priority' },
   { header: t('orderBy', 'Order By'), key: 'orderBy' },
   { header: t('status', 'Status'), key: 'status' },
@@ -34,6 +36,7 @@ export const OrderTable: React.FC<OrderTableProps> = ({
   tableCellClassName,
   priorityPillClassName,
   statusPillClassName,
+  module,
 }) => {
   const { t } = useTranslation();
 
@@ -42,9 +45,22 @@ export const OrderTable: React.FC<OrderTableProps> = ({
     orderNo: order.orderNumber,
     dateOrdered: formatDatetime(parseDate(order.dateActivated), { mode: 'standard' }),
     order: order.concept?.display?.replace('_', ' ') ?? '--',
-    priority: <PriorityPill value={order.urgency} className={priorityPillClassName} dataAttrName="priority" />,
+    priority: (
+      <PriorityPill
+        value={translateFrom(module, order.urgency, order.urgency)}
+        className={priorityPillClassName}
+        dataAttrName="priority"
+      />
+    ),
     orderBy: order.orderer?.display ?? '--',
-    status: <StatusPill value={order.fulfillerStatus} className={statusPillClassName} dataAttrName="status" />,
+    orderReason: (order.orderReason as unknown as OpenmrsResource)?.display,
+    status: (
+      <StatusPill
+        value={translateFrom(module, order.fulfillerStatus, order.fulfillerStatus)}
+        className={statusPillClassName}
+        dataAttrName="status"
+      />
+    ),
   }));
 
   if (orders?.length === 0) {

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) => {