@ampath/esm-patient-registration-app 6.0.1-pre.7 → 6.0.1-pre.70

package/src/patient-registration/section/patient-relationships/relationships-section.test.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Form, Formik } from 'formik';
-import { render, screen } from '@testing-library/react';
-import { PatientRegistrationContext } from '../../patient-registration-context';
-import { type Resources, ResourcesContext } from '../../../offline.resources';
-import { RelationshipsSection } from './relationships-section.component';
-
-jest.mock('../../patient-registration.resource', () => ({
-  fetchPerson: jest.fn().mockResolvedValue({
-    data: {
-      results: [
-        { uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd24', display: 'Person 1' },
-        { uuid: '691eed12-c0f1-11e2-94be-8c13b969e334', display: 'Person 2' },
-      ],
-    },
-  }),
-}));
-
-let mockResourcesContextValue = {
-  addressTemplate: null,
-  currentSession: {
-    authenticated: true,
-    sessionId: 'JSESSION',
-    currentProvider: { uuid: '45ce6c2e-dd5a-11e6-9d9c-0242ac150002', identifier: 'PRO-123' },
-  },
-  identifierTypes: [],
-  relationshipTypes: null,
-} as Resources;
-
-describe('RelationshipsSection', () => {
-  it('renders a loader when relationshipTypes are not available', () => {
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik initialValues={{}} onSubmit={null}>
-          <Form>
-            <RelationshipsSection />
-          </Form>
-        </Formik>
-      </ResourcesContext.Provider>,
-    );
-
-    expect(screen.getByLabelText(/loading relationships section/i)).toBeInTheDocument();
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-    expect(screen.queryByText(/add relationship/i)).not.toBeInTheDocument();
-  });
-
-  it('renders relationships when relationshipTypes are available', () => {
-    const relationshipTypes = {
-      results: [
-        {
-          displayAIsToB: 'Mother',
-          aIsToB: 'Mother',
-          bIsToA: 'Child',
-          displayBIsToA: 'Child',
-          uuid: '42ae5ce0-d64b-11ea-9064-5adc43bbdd34',
-        },
-        {
-          displayAIsToB: 'Father',
-          aIsToB: 'Father',
-          bIsToA: 'Child',
-          displayBIsToA: 'Child',
-          uuid: '52ae5ce0-d64b-11ea-9064-5adc43bbdd24',
-        },
-      ],
-    };
-    mockResourcesContextValue = {
-      ...mockResourcesContextValue,
-      relationshipTypes: relationshipTypes,
-    };
-
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik
-          initialValues={{
-            relationships: [{ action: 'ADD', relatedPersonUuid: '11524ae7-3ef6-4ab6-aff6-804ffc58704a' }],
-          }}
-          onSubmit={null}>
-          <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                setInitialFormValues: jest.fn(),
-              }}>
-              <RelationshipsSection />
-            </PatientRegistrationContext.Provider>
-          </Form>
-        </Formik>
-      </ResourcesContext.Provider>,
-    );
-
-    expect(screen.getByLabelText(/relationships section/i)).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /relationship/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /add relationship/i })).toBeInTheDocument();
-    expect(screen.getByRole('searchbox', { name: /full name/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /mother/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /father/i })).toBeInTheDocument();
-    expect(screen.getAllByRole('option', { name: /child/i }).length).toEqual(2);
-  });
-});

package/src/patient-verification/client-registry-constants.ts

@@ -1,13 +0,0 @@
-export const countries = [
-  { text: 'Kenya', id: 'KE' },
-  { text: 'Uganda', id: 'UG' },
-  { text: 'Tanzania', id: 'TZ' },
-];
-
-export const identifierTypes = [
-  { text: 'National ID number', id: '58a47054-1359-11df-a1f1-0026b9348838' },
-  { text: 'Passport number', id: 'ced014a1-068a-4a13-b6b3-17412f754af2' },
-  { text: 'Birth Certificate Entry Number', id: '7924e13b-131a-4da8-8efa-e294184a1b0d' },
-];
-
-export const defaultSelectedCountry = 'KE';

package/src/patient-verification/client-registry.component.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { type FormValues } from '../patient-registration/patient-registration.types';
-import {} from '@carbon/react';
-import { Dropdown, TextInput, Button, InlineLoading } from '@carbon/react';
-import styles from './client-registry.scss';
-import { useTranslation } from 'react-i18next';
-import { useClientRegistryForm } from './utils';
-import { countries, identifierTypes } from './client-registry-constants';
-
-type ClientRegistryProps = {
-  setInitialFormValues: (initialValues) => void;
-  initialFormValues: FormValues;
-};
-
-export const ClientRegistry: React.FC<ClientRegistryProps> = ({ setInitialFormValues, initialFormValues }) => {
-  const { t } = useTranslation();
-  const { handleClientRegistryDataSubmit, handleOnChange, clientRegistryData } = useClientRegistryForm(
-    setInitialFormValues,
-    initialFormValues,
-  );
-  return (
-    <div className={styles.patientVerification}>
-      <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
-        {t('patientVerification', 'Patient Verification')}
-      </h3>
-      <Dropdown
-        id="default"
-        titleText="Country"
-        label="Select country"
-        items={countries}
-        onChange={({ selectedItem }) => handleOnChange(selectedItem?.id, 'country')}
-        initialSelectedItem={countries[0]}
-        itemToString={(item) => (item ? item.text : '')}
-      />
-      <Dropdown
-        id="default"
-        titleText="Verification ID Type"
-        label="Select verification ID Type"
-        items={identifierTypes}
-        onChange={({ selectedItem }) => handleOnChange(selectedItem?.id, 'identifierType')}
-        itemToString={(item) => (item ? item.text : '')}
-      />
-      <TextInput
-        disabled={clientRegistryData.identifierType === ''}
-        onChange={(e) => handleOnChange(e.target.value, 'patientIdentifier')}
-        id="patientIdentifier"
-        type="text"
-        labelText="Patient identifier"
-        placeholder="Enter patient identifier"
-      />
-      {clientRegistryData.isSubmitting ? (
-        <InlineLoading
-          description={`${t('searchRegistry', 'Searching registry')} ...`}
-          iconDescription="searching registry ..."
-          status="active"
-        />
-      ) : (
-        <Button
-          disabled={clientRegistryData.isSubmitting || clientRegistryData.patientIdentifier === ''}
-          onClick={() => handleClientRegistryDataSubmit()}>
-          {t('searchRegistry', 'Search Registry')}
-        </Button>
-      )}
-    </div>
-  );
-};

package/src/patient-verification/client-registry.scss

@@ -1 +0,0 @@
-@import '../patient-registration/patient-registration.scss';

package/src/patient-verification/utils.tsx

@@ -1,56 +0,0 @@
-import { showModal } from '@openmrs/esm-framework';
-import { useState } from 'react';
-import { fetchPatientRecordFromClientRegistry } from '../patient-registration/patient-registration.resource';
-import { defaultSelectedCountry } from './client-registry-constants';
-
-export const handleSetFormValueFromClientRegistry = (clientData, setInitialFormValues, initialFormValues) => {
-  setInitialFormValues({
-    ...initialFormValues,
-    familyName: clientData.lastName,
-    givenName: clientData.firstName,
-    middleName: clientData.middleName,
-    gender: clientData.gender,
-    birthdate: clientData.dateOfBirth,
-    address: {
-      address2: clientData.subCounty,
-    },
-  });
-};
-
-export const useClientRegistryForm = (setInitialFormValues, initialFormValues) => {
-  const [clientRegistryData, setClientRegistryData] = useState<{
-    country: string;
-    identifierType: string;
-    patientIdentifier: string;
-    isSubmitting: boolean;
-  }>({ country: defaultSelectedCountry, identifierType: '', patientIdentifier: '', isSubmitting: false });
-
-  const handleOnChange = (data, key: 'country' | 'identifierType' | 'patientIdentifier') => {
-    setClientRegistryData({ ...clientRegistryData, [key]: data });
-  };
-
-  const handleClientRegistryDataSubmit = () => {
-    setClientRegistryData({ ...clientRegistryData, isSubmitting: true });
-    fetchPatientRecordFromClientRegistry(
-      clientRegistryData.patientIdentifier,
-      clientRegistryData.identifierType,
-      clientRegistryData.country,
-    ).then((res) => {
-      setClientRegistryData({ ...clientRegistryData, isSubmitting: false });
-      if (res.clientExists) {
-        const clientData = res.client;
-        const closeModal = showModal('client-registry-modal', {
-          clientData,
-          closeModal: () => {
-            closeModal();
-            handleSetFormValueFromClientRegistry(clientData, setInitialFormValues, initialFormValues);
-          },
-        });
-      } else {
-        const clientData = res.client;
-      }
-    });
-  };
-
-  return { handleClientRegistryDataSubmit, handleOnChange, clientRegistryData };
-};

package/src/patient-verification/verification-modal.scss

@@ -1,20 +0,0 @@
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.cardContainer {
-  display: grid;
-  grid-template-columns: 0.5fr 1fr;
-  column-gap: 0.25rem;
-  margin: 0.5rem 0;
-}
-
-.label {
-  @include type.type-style('body-compact-02');
-  color: colors.$cool-gray-100;
-  font-weight: bold;
-}
-
-.value {
-  @include type.type-style('legal-01');
-  color: colors.$cool-gray-80;
-}

package/src/patient-verification/verification.component.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import styles from './verification-modal.scss';
-
-type VerificationModalProps = { clientData; closeModal };
-
-const VerificationModal: React.FC<VerificationModalProps> = ({ clientData, closeModal }) => {
-  const { t } = useTranslation();
-  return (
-    <div>
-      <ModalHeader closeModal={closeModal} title={t('clientRegistry', 'Client registry')} />
-      <ModalBody>
-        <p>{t('clientRegistry', 'Client registry')}</p>
-        <Card label="Name" value={`${clientData.firstName} ${clientData.middleName} ${clientData.lastName}`} />
-        <Card
-          label="Identification Type"
-          value={clientData.identifications.map((id) => id.identificationType).join(' ')}
-        />
-        <Card
-          label="Identication Number"
-          value={clientData.identifications.map((id) => id.identificationNumber).join(' ')}
-        />
-        <Card label="Date of Birth" value={clientData.dateOfBirth} />
-        <Card label={t('gender', 'Gender')} value={clientData.gender} />
-      </ModalBody>
-      <ModalFooter>
-        <Button kind="secondary" onClick={() => {}}>
-          {t('contactSupport', 'Contact supportt')}
-        </Button>
-        <Button kind="danger" onClick={closeModal}>
-          {t('continue', 'Continue')}
-        </Button>
-      </ModalFooter>
-    </div>
-  );
-};
-
-export default VerificationModal;
-
-export const Card: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div className={styles.cardContainer}>
-      <span>{label}</span>
-      <span>{value}</span>
-    </div>
-  );
-};

package/src/root.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import Root from './root.component';
-
-window['getOpenmrsSpaBase'] = jest.fn().mockImplementation(() => '/');
-
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-  };
-});
-
-describe('root component', () => {
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
-    const root = createRoot(div);
-
-    root.render(
-      <Root
-        savePatientForm={jest.fn()}
-        addressTemplate={{ results: [] }}
-        currentSession={{} as any}
-        relationshipTypes={{ results: [] }}
-        identifierTypes={[]}
-        isOffline={false}
-      />,
-    );
-  });
-});

package/src/widgets/cancel-patient-edit.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { screen, render } from '@testing-library/react';
-import CancelPatientEdit from './cancel-patient-edit.component';
-
-describe('CancelPatientEdit component', () => {
-  const mockClose = jest.fn();
-  const mockOnConfirm = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders the modal and triggers close and onConfirm functions', async () => {
-    const user = userEvent.setup();
-
-    render(<CancelPatientEdit close={mockClose} onConfirm={mockOnConfirm} />);
-
-    const cancelButton = screen.getByRole('button', { name: /Cancel/i });
-    await user.click(cancelButton);
-    expect(mockClose).toHaveBeenCalledTimes(1);
-
-    const discardButton = screen.getByRole('button', { name: /discard/i });
-    await user.click(discardButton);
-    expect(mockOnConfirm).toHaveBeenCalledTimes(1);
-  });
-});

package/src/widgets/display-photo.component.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Avatar from 'react-avatar';
-import GeoPattern from 'geopattern';
-import { usePatientPhoto } from '../patient-registration/patient-registration.resource';
-
-interface DisplayPatientPhotoProps {
-  patientName: string;
-  patientUuid: string;
-  size?: string;
-}
-
-export default function DisplayPatientPhoto({ patientUuid, patientName, size }: DisplayPatientPhotoProps) {
-  const { data: photo } = usePatientPhoto(patientUuid);
-  const patternUrl: string = GeoPattern.generate(patientUuid).toDataUri();
-
-  return (
-    <Avatar
-      alt={`${patientName ? `${patientName}'s avatar` : 'Patient avatar'}`}
-      color="rgba(0,0,0,0)"
-      name={patientName}
-      src={photo?.imageSrc}
-      size={size === 'small' ? '48' : '80'}
-      textSizeRatio={size === 'small' ? 1 : 2}
-      style={{
-        backgroundImage: `url(${patternUrl})`,
-        backgroundRepeat: 'round',
-      }}
-    />
-  );
-}

package/src/widgets/display-photo.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { mockPatient } from '__mocks__';
-import DisplayPatientPhoto from './display-photo.component';
-
-jest.mock('../patient-registration/patient-registration.resource', () => ({
-  usePatientPhoto: jest.fn().mockReturnValue({ data: { imageSrc: 'test-image-src' } }),
-}));
-
-jest.mock('geopattern', () => ({
-  generate: jest.fn().mockReturnValue({
-    toDataUri: jest.fn().mockReturnValue('https://example.com'),
-  }),
-}));
-
-const patientUuid = mockPatient.uuid;
-const patientName = mockPatient.name;
-
-describe('DisplayPatientPhoto Component', () => {
-  it('should render the component with the patient photo and size should not be small', () => {
-    render(<DisplayPatientPhoto patientUuid={patientUuid} patientName={patientName} />);
-
-    const avatarImage = screen.getByTitle(`${patientName}`);
-
-    expect(avatarImage).toBeInTheDocument();
-    expect(avatarImage).toHaveAttribute('style', expect.stringContaining('width: 80px; height: 80px'));
-  });
-
-  it('should render the component with the patient photo and size should be small i.e. 48px', () => {
-    render(<DisplayPatientPhoto patientUuid={patientUuid} patientName={patientName} size="small" />);
-
-    const avatarImage = screen.getByTitle(`${patientName}`);
-
-    expect(avatarImage).toBeInTheDocument();
-    expect(avatarImage).toHaveAttribute('style', expect.stringContaining('width: 48px; height: 48px'));
-  });
-});

package/src/widgets/edit-patient-details-button.test.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
-import { navigate } from '@openmrs/esm-framework';
-import { mockPatient } from '__mocks__';
-import EditPatientDetailsButton from './edit-patient-details-button.component';
-
-describe('EditPatientDetailsButton', () => {
-  const patientUuid = mockPatient.uuid;
-
-  it('should navigate to the edit page when clicked', async () => {
-    const user = userEvent.setup();
-    const mockNavigate = navigate as jest.Mock;
-
-    jest.mock('@openmrs/esm-framework', () => {
-      const originalModule = jest.requireActual('@openmrs/esm-framework');
-      return {
-        ...originalModule,
-      };
-    });
-
-    render(<EditPatientDetailsButton patientUuid={patientUuid} />);
-
-    const button = screen.getByRole('menuitem');
-    await user.click(button);
-
-    expect(mockNavigate).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) });
-  });
-
-  it('should call the onTransition function when provided', async () => {
-    const user = userEvent.setup();
-
-    const onTransitionMock = jest.fn();
-    render(<EditPatientDetailsButton patientUuid={patientUuid} onTransition={onTransitionMock} />);
-
-    const button = screen.getByRole('menuitem');
-    await user.click(button);
-
-    expect(onTransitionMock).toHaveBeenCalled();
-  });
-});