@ampath/esm-patient-registration-app 6.0.1-pre.96 → 9.2.0-next.12

package/src/patient-verification/patient-verification-utils.ts

@@ -1,179 +0,0 @@
-import { showModal } from '@openmrs/esm-framework';
-import { type FormikProps } from 'formik';
-import { type ClientRegistryPatient, type RegistryPatient } from './verification-types';
-import counties from './assets/counties.json';
-import { type FormValues } from '../patient-registration/patient-registration.types';
-import { capitalize } from 'lodash-es';
-
-export function handleClientRegistryResponse(
-  clientResponse: ClientRegistryPatient,
-  props: FormikProps<FormValues>,
-  searchTerm: string,
-) {
-  if (clientResponse?.clientExists === false) {
-    const nupiIdentifiers = {
-      ['nationalId']: {
-        initialValue: searchTerm,
-        identifierUuid: undefined,
-        selectedSource: { uuid: '', name: '' },
-        preferred: false,
-        required: false,
-        identifierTypeUuid: '58a47054-1359-11df-a1f1-0026b9348838',
-        identifierName: 'Kenyan National ID Number',
-        identifierValue: searchTerm,
-      },
-    };
-    const dispose = showModal('empty-client-registry-modal', {
-      onConfirm: () => {
-        props.setValues({ ...props.values, identifiers: { ...props.values.identifiers, ...nupiIdentifiers } });
-        dispose();
-      },
-      close: () => dispose(),
-    });
-  }
-
-  if (clientResponse?.clientExists) {
-    const {
-      client: {
-        middleName,
-        lastName,
-        firstName,
-        contact,
-        country,
-        countyOfBirth,
-        residence,
-        identifications,
-        gender,
-        dateOfBirth,
-        isAlive,
-        clientNumber,
-        educationLevel,
-        occupation,
-        maritalStatus,
-      },
-    } = clientResponse;
-
-    const nupiIdentifiers = {
-      ['nationalId']: {
-        initialValue: identifications !== undefined && identifications[0]?.identificationNumber,
-        identifierUuid: undefined,
-        selectedSource: { uuid: '', name: '' },
-        preferred: false,
-        required: false,
-        identifierTypeUuid: '58a47054-1359-11df-a1f1-0026b9348838',
-        identifierName: 'Kenyan National ID Number',
-        identifierValue: identifications !== undefined && identifications[0]?.identificationNumber,
-      },
-
-      ['nationalUniquePatientIdentifier']: {
-        identifierTypeUuid: 'cba702b9-4664-4b43-83f1-9ab473cbd64d',
-        identifierName: 'National Unique Patient Identifier (NUPI)',
-        identifierValue: clientNumber,
-        initialValue: clientNumber,
-        identifierUuid: undefined,
-        selectedSource: { uuid: '', name: '' },
-        preferred: false,
-        required: false,
-      },
-    };
-
-    const dispose = showModal('confirm-client-registry-modal', {
-      onConfirm: () => {
-        props.setValues({
-          ...props.values,
-          familyName: lastName,
-          middleName: middleName,
-          givenName: firstName,
-          gender: clientResponse.client.gender,
-          birthdate: new Date(dateOfBirth),
-          isDead: !isAlive,
-          attributes: {
-            '72a759a8-1359-11df-a1f1-0026b9348838': contact?.primaryPhone,
-            'b0a08406-09c0-4f8b-8cb5-b22b6d4a8e46': contact?.secondaryPhone,
-            '2f65dbcb-3e58-45a3-8be7-fd1dc9aa0faa': contact?.emailAddress ?? '',
-          },
-          address: {
-            address1: residence?.address,
-            address2: '',
-            address4: capitalize(residence?.ward ?? ''),
-            cityVillage: residence?.village,
-            stateProvince: capitalize(residence?.subCounty ?? ''),
-            countyDistrict: counties.find((county) => county.code === parseInt(residence?.county))?.name,
-            country: 'Kenya',
-            postalCode: residence?.address,
-          },
-          identifiers: { ...props.values.identifiers, ...nupiIdentifiers },
-          obs: {
-            'a899a9f2-1350-11df-a1f1-0026b9348838':
-              props.values.concepts.find((concept) =>
-                concept.display?.toLowerCase()?.includes(clientResponse.client.maritalStatus?.toLowerCase()),
-              )?.uuid ?? '',
-            'a89e48ae-1350-11df-a1f1-0026b9348838':
-              props.values.concepts.find((concept) =>
-                concept.display?.toLowerCase()?.includes(clientResponse.client.educationLevel?.toLowerCase()),
-              )?.uuid ?? '',
-            'a8a0a00e-1350-11df-a1f1-0026b9348838':
-              clientResponse.client.occupation === undefined || clientResponse.client.occupation === null
-                ? 'a899e0ac-1350-11df-a1f1-0026b9348838'
-                : props.values.concepts.find(
-                    (concept) => concept.display?.toLowerCase() === clientResponse.client.occupation?.toLowerCase(),
-                  )?.uuid ?? 'a8aaf3e2-1350-11df-a1f1-0026b9348838',
-          },
-        });
-        dispose();
-      },
-      close: () => dispose(),
-      patient: clientResponse.client,
-    });
-  }
-}
-
-export function generateNUPIPayload(formValues: FormValues): RegistryPatient {
-  const educationLevel = formValues.concepts.find(
-    (concept) => concept.uuid === formValues.obs['a89e48ae-1350-11df-a1f1-0026b9348838'],
-  );
-  const occupation = formValues.concepts.find(
-    (concept) => concept.uuid === formValues.obs['a8a0a00e-1350-11df-a1f1-0026b9348838'],
-  );
-  const maritalStatus = formValues.concepts.find(
-    (concept) => concept.uuid === formValues.obs['a899a9f2-1350-11df-a1f1-0026b9348838'],
-  );
-
-  let createRegistryPatient: RegistryPatient = {
-    firstName: formValues?.givenName,
-    middleName: formValues?.middleName,
-    lastName: formValues?.familyName,
-    gender: formValues?.gender === 'Male' ? 'male' : 'female',
-    dateOfBirth: new Date(formValues.birthdate).toISOString(),
-    isAlive: !formValues.isDead,
-    residence: {
-      county: `0${counties.find((county) => county.name.includes(formValues.address['countyDistrict']))?.code}`,
-      subCounty: formValues.address['stateProvince']?.toLocaleLowerCase(),
-      ward: formValues.address['address4']?.toLocaleLowerCase(),
-      village: formValues.address['cityVillage'],
-      landmark: formValues.address['address2'],
-      address: formValues.address['postalCode'],
-    },
-    nextOfKins: [],
-    contact: {
-      primaryPhone: formValues.attributes['72a759a8-1359-11df-a1f1-0026b9348838'],
-      secondaryPhone: formValues.attributes['b0a08406-09c0-4f8b-8cb5-b22b6d4a8e46'],
-      emailAddress: formValues.attributes['2f65dbcb-3e58-45a3-8be7-fd1dc9aa0faa'],
-    },
-    country: 'KE',
-    countyOfBirth: `0${counties.find((county) => county.name.includes(formValues.address['countyDistrict']))?.code}`,
-    educationLevel: educationLevel?.display?.toLowerCase() ?? '',
-    religion: '',
-    occupation: occupation?.display?.toLowerCase() ?? '',
-    maritalStatus: maritalStatus?.display?.toLowerCase() ?? '',
-    originFacilityKmflCode: '',
-    nascopCCCNumber: '',
-    identifications: [
-      {
-        identificationType: 'national-id',
-        identificationNumber: formValues.identifiers['nationalId']?.identifierValue,
-      },
-    ],
-  };
-  return createRegistryPatient;
-}

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

@@ -1,124 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Tile, ComboBox, Layer, Button, Search, InlineLoading, InlineNotification } from '@carbon/react';
-import styles from './patient-verification.scss';
-import { countries, verificationIdentifierTypes } from './assets/verification-assets';
-import { searchClientRegistry, useGlobalProperties } from './patient-verification-hook';
-import { showSnackbar, showToast } from '@openmrs/esm-framework';
-import { handleClientRegistryResponse } from './patient-verification-utils';
-import { type FormikProps } from 'formik';
-import { type FormValues } from '../patient-registration/patient-registration.types';
-
-interface PatientVerificationProps {
-  props: FormikProps<FormValues>;
-  setInitialFormValues: React.Dispatch<FormValues>;
-}
-
-const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
-  const { t } = useTranslation();
-  const { data, isLoading, error } = useGlobalProperties();
-  const [verificationCriteria, setVerificationCriteria] = useState({
-    searchTerm: '',
-    identifierType: '',
-    countryCode: 'KE',
-  });
-  const [isLoadingSearch, setIsLoadingSearch] = useState(false);
-
-  const handleSearch = async () => {
-    setIsLoadingSearch(true);
-    try {
-      const clientRegistryResponse = await searchClientRegistry(
-        verificationCriteria.identifierType,
-        verificationCriteria.searchTerm,
-        props.values.token,
-        verificationCriteria.countryCode,
-      );
-      setIsLoadingSearch(false);
-
-      handleClientRegistryResponse(clientRegistryResponse, props, verificationCriteria.searchTerm);
-    } catch (error) {
-      showSnackbar({
-        title: 'Client registry error',
-        subtitle: `Please reload the registration page and re-try again, if the issue persist contact system administrator`,
-        timeoutInMs: 10000,
-        kind: 'error',
-        isLowContrast: true,
-      });
-      setIsLoadingSearch(false);
-    }
-  };
-
-  return (
-    <div id={'patientVerification'}>
-      <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
-        {t('clientVerificationWithClientRegistry', 'Client verification with client registry')}
-      </h3>
-      <div style={{ margin: '1rem 0 1rem' }}>
-        <Layer>
-          {isLoading && <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />}
-        </Layer>
-        {error && (
-          <InlineNotification
-            className={styles.errorWrapper}
-            aria-label="closes notification"
-            kind="error"
-            lowContrast
-            statusIconDescription="notification"
-            subtitle={t(
-              'clientRegistryErrorSubtitle',
-              'Please proceed with registration contact system admin and  try again later',
-            )}
-            title={t('clientRegistryError', 'Error occurred while reaching the client registry')}
-          />
-        )}
-        <Tile className={styles.verificationWrapper}>
-          <Layer>
-            <ComboBox
-              ariaLabel={t('selectCountry', 'Select country')}
-              id="selectCountry"
-              items={countries}
-              itemToString={(item) => item?.name ?? ''}
-              label="Select country"
-              titleText={t('selectCountry', 'Select country')}
-              initialSelectedItem={countries[0]}
-              onChange={({ selectedItem }) =>
-                setVerificationCriteria({ ...verificationCriteria, countryCode: selectedItem?.initials })
-              }
-            />
-          </Layer>
-          <Layer>
-            <ComboBox
-              ariaLabel={t('selectIdentifierType', 'Select identifier type')}
-              id="selectIdentifierType"
-              items={verificationIdentifierTypes}
-              itemToString={(item) => item?.name ?? ''}
-              label="Select identifier type"
-              titleText={t('selectIdentifierType', 'Select identifier type')}
-              onChange={({ selectedItem }) =>
-                setVerificationCriteria({ ...verificationCriteria, identifierType: selectedItem?.value })
-              }
-            />
-          </Layer>
-          <Layer>
-            <Search
-              id="clientRegistrySearch"
-              autoFocus
-              placeHolderText={t('searchClientRegistry', 'Search client registry')}
-              disabled={!verificationCriteria.identifierType}
-              onChange={(event) => setVerificationCriteria({ ...verificationCriteria, searchTerm: event.target.value })}
-            />
-          </Layer>
-          {!isLoadingSearch ? (
-            <Button disabled={!verificationCriteria.identifierType && !isLoading} size="md" onClick={handleSearch}>
-              {t('validate', 'Validate')}
-            </Button>
-          ) : (
-            <InlineLoading status="active" iconDescription="Loading" description="Searching client registry" />
-          )}
-        </Tile>
-      </div>
-    </div>
-  );
-};
-
-export default PatientVerification;

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

@@ -1,25 +0,0 @@
-@use '@carbon/colors';
-@import '../patient-registration/patient-registration.scss';
-
-/* Desktop */
-:global(.omrs-breakpoint-gt-tablet) {
-  .verificationWrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    column-gap: 0.325rem;
-    align-items: flex-end;
-  }
-}
-
-/* Tablet */
-:global(.omrs-breakpoint-lt-desktop) {
-  .verificationWrapper {
-    row-gap: 0.5rem;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.errorWrapper {
-  margin: 0 0 1rem 0;
-}

package/src/patient-verification/verification-modal/confirm-prompt.component.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
-import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
-import capitalize from 'lodash-es/capitalize';
-import { useFacilityName } from '../patient-verification-hook';
-
-const PatientInfo: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '0.25fr 0.75fr', margin: '0.25rem' }}>
-      <span style={{ minWidth: '5rem', fontWeight: 'bold' }}>{label}</span>
-      <span>{value}</span>
-    </div>
-  );
-};
-
-interface ConfirmPromptProps {
-  onConfirm: void;
-  close: void;
-  patient: any;
-}
-
-const ConfirmPrompt: React.FC<ConfirmPromptProps> = ({ close, onConfirm, patient }) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <div className="cds--modal-header">
-        <h3 className="cds--modal-header__heading">
-          {t('clientRegistryEmpty', `Patient ${patient?.firstName} ${patient?.lastName} found`)}
-        </h3>
-      </div>
-      <div className="cds--modal-content">
-        <p>
-          {t(
-            'patientDetailsFound',
-            'Patient information found in the registry, do you want to use the information to continue with registration?',
-          )}
-        </p>
-        <div style={{ display: 'flex', margin: '1rem' }}>
-          <ExtensionSlot
-            style={{ display: 'flex', alignItems: 'center' }}
-            name="patient-photo-slot"
-            state={{ patientName: `${patient?.firstName} ${patient?.lastName}` }}
-          />
-          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
-            <PatientInfo
-              label={t('patientName', 'Patient name')}
-              value={`${patient?.firstName} ${patient?.lastName}`}
-            />
-            <PatientInfo
-              label={t('nationalId', 'National ID')}
-              value={patient?.identifications[0]?.identificationNumber}
-            />
-            <PatientInfo label={t('age', 'Age')} value={age(patient?.dateOfBirth)} />
-            <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.dateOfBirth))} />
-            <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
-            <PatientInfo label={t('nupi', 'NUPI')} value={patient?.clientNumber} />
-            <PatientInfo label={t('shaNumber', 'SHA Number')} value={'--'} />
-          </div>
-        </div>
-      </div>
-      <div className="cds--modal-footer">
-        <Button kind="secondary" onClick={close}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button onClick={onConfirm}>{t('useValues', 'Use values')}</Button>
-      </div>
-    </>
-  );
-};
-
-export default ConfirmPrompt;

package/src/patient-verification/verification-modal/empty-prompt.component.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
-
-interface EmptyPromptProps {
-  onConfirm: void;
-  close: void;
-}
-
-const EmptyPrompt: React.FC<EmptyPromptProps> = ({ close, onConfirm }) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <div className="cds--modal-header">
-        <h3 className="cds--modal-header__heading">{t('clientRegistryEmpty', 'Create & Post Patient')}</h3>
-      </div>
-      <div className="cds--modal-content">
-        <p>
-          {t(
-            'patientNotFound',
-            'The patient records could not be found in Client registry, do you want to continue to create and post patient to registry',
-          )}
-        </p>
-      </div>
-      <div className="cds--modal-footer">
-        <Button kind="secondary" onClick={close}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button onClick={onConfirm}>{t('continue', 'Continue to registration')}</Button>
-      </div>
-    </>
-  );
-};
-
-export default EmptyPrompt;

package/src/patient-verification/verification-types.ts

@@ -1,50 +0,0 @@
-export interface ClientIdentification {
-  identificationType: string;
-  identificationNumber: string;
-}
-
-interface ClientContact {
-  primaryPhone: string;
-  secondaryPhone?: string;
-  emailAddress?: string;
-}
-
-export interface ClientRegistryPatient {
-  clientExists: boolean;
-  client?: RegistryPatient;
-}
-
-export interface RegistryPatient {
-  clientNumber?: string;
-  firstName: string;
-  middleName: string;
-  lastName: string;
-  dateOfBirth: string;
-  maritalStatus?: string;
-  gender: string;
-  occupation?: string;
-  religion?: string;
-  educationLevel?: string;
-  country: string;
-  countyOfBirth?: string;
-  isAlive: boolean;
-  originFacilityKmflCode?: string;
-  isOnART?: string;
-  nascopCCCNumber?: string;
-  residence: {
-    county: string;
-    subCounty: string;
-    ward: string;
-    village: string;
-    landmark: string;
-    address: string;
-  };
-  identifications: Array<ClientIdentification>;
-  contact: ClientContact;
-  nextOfKins: Array<{
-    name: string;
-    relationship: string;
-    residence: string;
-    contact: ClientContact;
-  }>;
-}

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Button } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-
-interface CancelPatientEditProps {
-  close(): void;
-  onConfirm(): void;
-}
-
-const CancelPatientEdit: React.FC<CancelPatientEditProps> = ({ close, onConfirm }) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <div className="cds--modal-header">
-        <h3 className="cds--modal-header__heading">{t('discardModalHeader', 'Confirm Discard Changes')}</h3>
-      </div>
-      <div className="cds--modal-content">
-        <p>
-          {t(
-            'discardModalBody',
-            "The changes you made to this patient's details have not been saved. Discard changes?",
-          )}
-        </p>
-      </div>
-      <div className="cds--modal-footer">
-        <Button kind="secondary" onClick={close}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button kind="danger" onClick={onConfirm}>
-          {t('discard', 'Discard')}
-        </Button>
-      </div>
-    </>
-  );
-};
-
-export default CancelPatientEdit;

package/src/widgets/delete-identifier-confirmation-modal.tsx

@@ -1,41 +0,0 @@
-import React, { useCallback } from 'react';
-import styles from './delete-identifier-modal.scss';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
-
-interface DeleteIdentifierConfirmationModalProps {
-  deleteIdentifier: (x: boolean) => void;
-  identifierName: string;
-  identifierValue: string;
-}
-
-const DeleteIdentifierConfirmationModal: React.FC<DeleteIdentifierConfirmationModalProps> = ({
-  deleteIdentifier,
-  identifierName,
-  identifierValue,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <div className={styles.modalContent}>
-      <h1 className={styles.productiveHeading}>{t('deleteIdentifierModalHeading', 'Remove identifier?')}</h1>
-      <h3 className={styles.modalSubtitle}>
-        {identifierName}
-        {t('deleteIdentifierModalText', ' has a value of ')} {identifierValue}
-      </h3>
-      <p className={styles.modalBody}>
-        {t('confirmIdentifierDeletionText', 'Are you sure you want to remove this identifier?')}
-      </p>
-      <div className={styles.buttonSet}>
-        <Button kind="secondary" size="lg" onClick={() => deleteIdentifier(false)}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button kind="danger" size="lg" onClick={() => deleteIdentifier(true)}>
-          {t('removeIdentifierButton', 'Remove Identifier')}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default DeleteIdentifierConfirmationModal;

package/src/widgets/delete-identifier-modal.scss

@@ -1,34 +0,0 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../patient-registration/patient-registration.scss';
-
-.productiveHeading {
-  @include type.type-style('heading-compact-02');
-}
-
-.modalContent {
-  width: 100%;
-  background-color: $ui-01;
-  padding: spacing.$spacing-05;
-}
-
-.modalSubtitle {
-  @include type.type-style('body-compact-01');
-}
-
-.modalBody {
-  @include type.type-style('body-compact-01');
-  margin: spacing.$spacing-05 0;
-}
-
-.buttonSet {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin-left: -(spacing.$spacing-05);
-  margin-right: -(spacing.$spacing-05);
-  margin-bottom: -(spacing.$spacing-05);
-}
-
-.buttonSet > button {
-  max-width: unset !important;
-}