@openmrs/esm-patient-label-printing-app 11.3.1-patch.9508

package/src/hooks/useStickerPdfPrinter.test.tsx

@@ -0,0 +1,237 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { useStickerPdfPrinter } from './useStickerPdfPrinter';
+
+describe('useStickerPdfPrinter', () => {
+  let mockContentWindow: any;
+  let afterPrintHandler: (() => void) | null = null;
+
+  beforeEach(() => {
+    afterPrintHandler = null;
+
+    // Create a mock contentWindow with all required methods
+    mockContentWindow = {
+      print: jest.fn(),
+      focus: jest.fn(),
+      addEventListener: jest.fn((event: string, handler: () => void) => {
+        if (event === 'afterprint') {
+          afterPrintHandler = handler;
+        }
+      }),
+    };
+
+    // Mock HTMLIFrameElement.prototype.contentWindow to return our mock
+    Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
+      configurable: true,
+      get: () => mockContentWindow,
+    });
+
+    Object.defineProperty(HTMLIFrameElement.prototype, 'src', {
+      configurable: true,
+      set: function (value) {
+        this._src = value;
+        // Trigger onload asynchronously to simulate real behavior
+        if (this.onload) {
+          Promise.resolve().then(() => {
+            if (this.onload) {
+              this.onload({} as Event);
+            }
+          });
+        }
+      },
+      get: function () {
+        return this._src;
+      },
+    });
+
+    // Mock document.hasFocus to support the polling mechanism
+    document.hasFocus = jest.fn().mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.useRealTimers();
+    afterPrintHandler = null;
+  });
+
+  const waitForIframeLoad = () => {
+    // Wait for next tick to allow iframe onload to trigger
+    return new Promise((resolve) => setTimeout(resolve, 0));
+  };
+
+  const triggerPrintCompletion = () => {
+    // Simulate the print dialog closing by triggering afterprint event
+    if (afterPrintHandler) {
+      afterPrintHandler();
+    }
+  };
+
+  it('should provide printPdf function and isPrinting state', () => {
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    expect(result.current.isPrinting).toBe(false);
+    expect(typeof result.current.printPdf).toBe('function');
+  });
+
+  it('should set isPrinting to true when printing starts', () => {
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    act(() => {
+      result.current.printPdf('http://example.com/test.pdf');
+    });
+
+    expect(result.current.isPrinting).toBe(true);
+  });
+
+  it('should reject concurrent print requests with an error', async () => {
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    act(() => {
+      result.current.printPdf('http://example.com/test.pdf');
+    });
+
+    await expect(result.current.printPdf('http://example.com/test2.pdf')).rejects.toThrow('Print already in progress');
+  });
+
+  it('should reset isPrinting to false when printing completes', async () => {
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    act(() => {
+      result.current.printPdf('http://example.com/test.pdf');
+    });
+
+    expect(result.current.isPrinting).toBe(true);
+
+    // Wait for iframe to load
+    await act(async () => {
+      await waitForIframeLoad();
+    });
+
+    // Simulate print completion
+    act(() => {
+      triggerPrintCompletion();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isPrinting).toBe(false);
+    });
+  });
+
+  it('should return a promise that resolves when printing completes', async () => {
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    let resolved = false;
+    let printPromise: Promise<void>;
+
+    act(() => {
+      printPromise = result.current.printPdf('http://example.com/test.pdf').then(() => {
+        resolved = true;
+      });
+    });
+
+    expect(resolved).toBe(false);
+
+    // Wait for iframe to load
+    await act(async () => {
+      await waitForIframeLoad();
+    });
+
+    // Simulate print completion
+    act(() => {
+      triggerPrintCompletion();
+    });
+
+    await waitFor(() => {
+      expect(resolved).toBe(true);
+    });
+
+    await printPromise!;
+  });
+
+  it('should allow printing again after previous print completes', async () => {
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    // First print
+    act(() => {
+      result.current.printPdf('http://example.com/test1.pdf');
+    });
+
+    await act(async () => {
+      await waitForIframeLoad();
+    });
+
+    act(() => {
+      triggerPrintCompletion();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isPrinting).toBe(false);
+    });
+
+    // Second print should succeed
+    act(() => {
+      result.current.printPdf('http://example.com/test2.pdf');
+    });
+
+    expect(result.current.isPrinting).toBe(true);
+
+    await act(async () => {
+      await waitForIframeLoad();
+    });
+
+    act(() => {
+      triggerPrintCompletion();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isPrinting).toBe(false);
+    });
+  });
+
+  it('should reset isPrinting after timeout when print cannot be detected as complete', async () => {
+    jest.useFakeTimers();
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    act(() => {
+      result.current.printPdf('http://example.com/test.pdf');
+    });
+
+    expect(result.current.isPrinting).toBe(true);
+
+    // Fast-forward time to trigger iframe load, then advance past timeout
+    // The iframe onload will be triggered via Promise.resolve() which needs runAllTimers
+    await act(async () => {
+      await jest.runAllTimersAsync();
+    });
+
+    // Verify timeout mechanism resets isPrinting (afterprint never fired)
+    expect(result.current.isPrinting).toBe(false);
+  });
+
+  it('should handle errors gracefully and reset isPrinting state', async () => {
+    // Mock contentWindow to return null to simulate an error
+    Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
+      configurable: true,
+      get: () => null,
+    });
+
+    const { result } = renderHook(() => useStickerPdfPrinter());
+
+    let resolved = false;
+    act(() => {
+      result.current.printPdf('http://example.com/test.pdf').then(() => {
+        resolved = true;
+      });
+    });
+
+    // Wait for iframe to attempt loading and trigger error path
+    await act(async () => {
+      await waitForIframeLoad();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isPrinting).toBe(false);
+    });
+
+    expect(resolved).toBe(true);
+  });
+});

package/src/hooks/useStickerPdfPrinter.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useStickerPdfPrinter = () => {
+  const { t } = useTranslation();
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [isPrinting, setIsPrinting] = useState(false);
+
+  const printPdf = useCallback(
+    (url: string) => {
+      if (isPrinting) {
+        return Promise.reject(new Error(t('printInProgress', 'Print already in progress')));
+      }
+
+      return new Promise<void>((resolve) => {
+        setIsPrinting(true);
+
+        if (!iframeRef.current) {
+          const iframe = document.createElement('iframe');
+          iframe.name = 'pdfPrinterFrame';
+          iframe.setAttribute('aria-hidden', 'true');
+          Object.assign(iframe.style, {
+            position: 'fixed',
+            width: '0',
+            height: '0',
+            border: 'none',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+          });
+          iframeRef.current = iframe;
+          document.body.appendChild(iframe);
+        }
+
+        const iframe = iframeRef.current;
+        let hasClosed = false;
+
+        const handleLoad = () => {
+          try {
+            const contentWindow = iframe.contentWindow;
+            if (!contentWindow) throw new Error('No content window');
+
+            const cleanup = () => {
+              if (hasClosed) return;
+              hasClosed = true;
+              setIsPrinting(false);
+              resolve();
+            };
+
+            try {
+              contentWindow.addEventListener('afterprint', cleanup, { once: true });
+            } catch (e) {
+              // Cross-origin, use polling fallback
+            }
+
+            contentWindow.focus();
+            contentWindow.print();
+
+            let wasFocused = false;
+            const pollInterval = setInterval(() => {
+              const hasFocus = document.hasFocus();
+              if (hasFocus && wasFocused) cleanup();
+              if (!hasFocus) wasFocused = true;
+            }, 250);
+
+            setTimeout(cleanup, 30000);
+            setTimeout(() => clearInterval(pollInterval), 30000);
+          } catch (error) {
+            setIsPrinting(false);
+            resolve();
+          }
+        };
+
+        iframe.onload = handleLoad;
+        iframe.onerror = () => {
+          setIsPrinting(false);
+          resolve();
+        };
+        iframe.src = url;
+      });
+    },
+    [t, isPrinting],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (iframeRef.current?.parentNode) {
+        iframeRef.current.parentNode.removeChild(iframeRef.current);
+      }
+    };
+  }, []);
+
+  return { printPdf, isPrinting };
+};

package/src/index.ts

@@ -0,0 +1,18 @@
+import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+
+const moduleName = '@openmrs/esm-patient-label-printing-app';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const printIdentifierStickerActionButton = getAsyncLifecycle(
+  () => import('./print-identifier-sticker/print-identifier-sticker-action-button.component'),
+  {
+    featureName: 'patient-actions-slot-print-identifier-sticker-button',
+    moduleName,
+  },
+);

package/src/print-identifier-sticker/print-identifier-sticker-action-button.component.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { OverflowMenuItem } from '@carbon/react';
+import { showSnackbar, getCoreTranslation, useConfig, UserHasAccess, restBaseUrl } from '@openmrs/esm-framework';
+import styles from './print-identifier-sticker-action-button.scss';
+import { useStickerPdfPrinter } from '../hooks/useStickerPdfPrinter';
+import type { ConfigObject } from '../config-schema';
+
+interface PrintIdentifierStickerOverflowMenuItemProps {
+  patient: fhir.Patient;
+}
+
+const PrintIdentifierStickerOverflowMenuItem: React.FC<PrintIdentifierStickerOverflowMenuItemProps> = ({ patient }) => {
+  const { t } = useTranslation();
+  const { showPrintIdentifierStickerButton } = useConfig<ConfigObject>();
+  const { printPdf, isPrinting } = useStickerPdfPrinter();
+
+  const isVisible = useMemo(() => {
+    if (!patient?.id) return false;
+    return showPrintIdentifierStickerButton;
+  }, [showPrintIdentifierStickerButton, patient?.id]);
+
+  const getPdfUrl = useCallback(() => {
+    if (!patient?.id) {
+      throw new Error(t('patientIdNotFound', 'Patient ID not found'));
+    }
+    return `${window.openmrsBase}${restBaseUrl}/patientdocuments/patientIdSticker?patientUuid=${patient.id}`;
+  }, [patient?.id, t]);
+
+  const handlePrint = useCallback(async () => {
+    if (isPrinting) return;
+
+    try {
+      await printPdf(getPdfUrl());
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      showSnackbar({
+        kind: 'error',
+        title: getCoreTranslation('printError', 'Print Error'),
+        subtitle: getCoreTranslation('printErrorExplainer', '', { errorLocation: errorMessage }),
+      });
+    }
+  }, [getPdfUrl, printPdf, isPrinting]);
+
+  const buttonText = useMemo(() => {
+    return isPrinting
+      ? getCoreTranslation('printing', 'Printing...')
+      : getCoreTranslation('printIdentifierSticker', 'Print identifier sticker');
+  }, [isPrinting]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <UserHasAccess privilege="App: Can generate a Patient Identity Sticker">
+      <OverflowMenuItem className={styles.menuitem} itemText={buttonText} onClick={handlePrint} disabled={isPrinting} />
+    </UserHasAccess>
+  );
+};
+
+export default PrintIdentifierStickerOverflowMenuItem;

package/src/print-identifier-sticker/print-identifier-sticker-action-button.scss

@@ -0,0 +1,3 @@
+.menuitem {
+  max-width: none;
+}

package/src/print-identifier-sticker/print-identifier-sticker-action-button.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, showSnackbar, useConfig, UserHasAccess } from '@openmrs/esm-framework';
+import { mockFhirPatient } from '__mocks__';
+import { renderWithSwr } from 'tools';
+import { useStickerPdfPrinter } from '../hooks/useStickerPdfPrinter';
+import { configSchema, type ConfigObject } from '../config-schema';
+import PrintIdentifierStickerOverflowMenuItem from './print-identifier-sticker-action-button.component';
+
+jest.mock('../hooks/useStickerPdfPrinter');
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  UserHasAccess: jest.fn(({ children }) => children),
+}));
+
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockUseStickerPdfPrinter = jest.mocked(useStickerPdfPrinter);
+const mockUserHasAccess = jest.mocked(UserHasAccess);
+const mockPrintPdf = jest.fn();
+
+describe('PrintIdentifierStickerOverflowMenuItem', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      showPrintIdentifierStickerButton: true,
+    } as ConfigObject);
+    mockPrintPdf.mockResolvedValue(undefined);
+    mockUseStickerPdfPrinter.mockReturnValue({
+      printPdf: mockPrintPdf,
+      isPrinting: false,
+    });
+  });
+
+  it('renders the print button when enabled in config', () => {
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={mockFhirPatient} />);
+
+    expect(screen.getByRole('menuitem', { name: /print identifier sticker/i })).toBeInTheDocument();
+  });
+
+  it('does not render the button when disabled in config', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      showPrintIdentifierStickerButton: false,
+    } as ConfigObject);
+
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={mockFhirPatient} />);
+
+    expect(screen.queryByRole('menuitem', { name: /print identifier sticker/i })).not.toBeInTheDocument();
+  });
+
+  it('does not render the button when patient ID is missing', () => {
+    const patientWithoutId = { ...mockFhirPatient, id: undefined } as fhir.Patient;
+
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={patientWithoutId} />);
+
+    expect(screen.queryByRole('menuitem', { name: /print identifier sticker/i })).not.toBeInTheDocument();
+  });
+
+  it('triggers print when button is clicked', async () => {
+    const user = userEvent.setup();
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={mockFhirPatient} />);
+
+    const printButton = screen.getByRole('menuitem', { name: /print identifier sticker/i });
+    await user.click(printButton);
+
+    expect(mockPrintPdf).toHaveBeenCalledTimes(1);
+    expect(mockPrintPdf).toHaveBeenCalledWith(expect.stringContaining(mockFhirPatient.id));
+  });
+
+  it('shows error notification when print fails', async () => {
+    const user = userEvent.setup();
+    const errorMessage = 'Network error';
+    mockPrintPdf.mockRejectedValueOnce(new Error(errorMessage));
+
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={mockFhirPatient} />);
+
+    const printButton = screen.getByRole('menuitem', { name: /print identifier sticker/i });
+    await user.click(printButton);
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      kind: 'error',
+      title: 'Print error',
+      subtitle: expect.stringContaining(errorMessage),
+    });
+  });
+
+  it('shows loading state when printing', () => {
+    mockUseStickerPdfPrinter.mockReturnValue({
+      printPdf: mockPrintPdf,
+      isPrinting: true,
+    });
+
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={mockFhirPatient} />);
+
+    const printButton = screen.getByRole('menuitem', { name: /printing/i });
+    expect(printButton).toBeInTheDocument();
+    expect(printButton).toBeDisabled();
+  });
+
+  it('prevents multiple print calls when already printing', async () => {
+    const user = userEvent.setup();
+    mockUseStickerPdfPrinter.mockReturnValue({
+      printPdf: mockPrintPdf,
+      isPrinting: true,
+    });
+
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={mockFhirPatient} />);
+
+    const printButton = screen.getByRole('menuitem', { name: /printing/i });
+    await user.click(printButton);
+
+    expect(mockPrintPdf).not.toHaveBeenCalled();
+  });
+
+  it('checks for the correct privilege when rendering', () => {
+    renderWithSwr(<PrintIdentifierStickerOverflowMenuItem patient={mockFhirPatient} />);
+
+    expect(mockUserHasAccess).toHaveBeenCalledWith(
+      expect.objectContaining({
+        privilege: 'App: Can generate a Patient Identity Sticker',
+      }),
+      expect.anything(),
+    );
+  });
+});

package/src/routes.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "patientdocuments": "^1.0.0-SNAPSHOT"
+  },
+  "extensions": [
+    {
+      "name": "print-identifier-sticker-button",
+      "slot": "patient-actions-slot",
+      "component": "printIdentifierStickerActionButton",
+      "online": true,
+      "offline": true
+    }
+  ]
+}

package/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "patientIdNotFound": "Patient ID not found"
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*", "../../tools/setup-tests.ts"],
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');