@kenyaemr/esm-patient-registration-app 7.0.3-pre.94 → 8.0.1-pre.101

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"7.0.3-pre.94"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"8.0.1-pre.101"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "7.0.3-pre.94",
+  "version": "8.0.1-pre.101",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "7.0.2"
+  "stableVersion": "8.0.0"
 }

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

@@ -0,0 +1,22 @@
+import { type FormikProps } from 'formik';
+import React, { type Dispatch } from 'react';
+import { type FormValues } from '../patient-registration/patient-registration.types';
+import { useFeatureFlag } from '@openmrs/esm-framework';
+import PatientVerification from './patient-verification/patient-verification.component';
+import HIEClientRegistry from './hie-client-registry/hie-client-registry.component';
+
+type ClientRegistryProps = {
+  props: FormikProps<FormValues>;
+  setInitialFormValues: Dispatch<FormValues>;
+};
+
+const ClientRegistry: React.FC<ClientRegistryProps> = (clientRegistryProps) => {
+  const healthInformationExchangeFlag = useFeatureFlag('healthInformationExchange');
+
+  if (healthInformationExchangeFlag) {
+    return <HIEClientRegistry {...clientRegistryProps} />;
+  }
+  return <PatientVerification {...clientRegistryProps} />;
+};
+
+export default ClientRegistry;

package/src/client-registry/hie-client-registry/hie-client-registry.component.tsx

@@ -0,0 +1,58 @@
+import React, { type Dispatch } from 'react';
+import styles from './hie-client-registry.scss';
+import { type FormikProps } from 'formik';
+import { type FormValues } from '../../patient-registration/patient-registration.types';
+import { useTranslation } from 'react-i18next';
+import { Tile, ComboBox, Button, TextInput } from '@carbon/react';
+import { Search } from '@carbon/react/icons';
+import { useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../config-schema';
+
+type HIEClientRegistryProps = {
+  props: FormikProps<FormValues>;
+  setInitialFormValues: Dispatch<FormValues>;
+};
+
+const HIEClientRegistry: React.FC<HIEClientRegistryProps> = () => {
+  const { t } = useTranslation();
+  const {
+    hieClientRegistry: { identifierTypes },
+  } = useConfig<RegistrationConfig>();
+  return (
+    <div className={styles.hieContainer}>
+      <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
+        {t('patientVerificationFromHIE', 'Patient verification from HIE')}
+      </h3>
+      <span className={styles.label01}>
+        {t('allFieldsRequiredText', 'All fields are required unless marked optional')}
+      </span>
+      <Tile className={styles.grid}>
+        <ComboBox
+          light
+          onChange={() => {}}
+          id="identifier-combobox"
+          items={identifierTypes}
+          placeholder={t('selectIdentifierType', 'Select identifier type')}
+          itemToString={(item) => (item ? item.identifierType : '')}
+          titleText={t('identifierType', 'Identifier type')}
+        />
+        <TextInput
+          light
+          id="identifier-search"
+          placeholder={t('enterIdentifierSearchValue', 'Enter identifier search value')}
+          type="text"
+          labelText={t('identifierSearch', 'Identifier search')}
+        />
+        <Button
+          renderIcon={(props) => <Search size={24} {...props} />}
+          iconDescription={t('searchRegistry', 'Search registry')}
+          size="md"
+          kind="secondary">
+          {t('search', 'Search')}
+        </Button>
+      </Tile>
+    </div>
+  );
+};
+
+export default HIEClientRegistry;

package/src/client-registry/hie-client-registry/hie-client-registry.scss

@@ -0,0 +1,46 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.hieContainer {
+  margin-bottom: layout.$layout-01;
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.label01 {
+  @include type.type-style('label-01');
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+  color: colors.$gray-50;
+}
+
+/* Tablet viewport */
+:global(.omrs-breakpoint-lt-desktop) {
+  .grid {
+    display: flex;
+    flex-direction: column;
+    row-gap: layout.$spacing-05;
+    margin: layout.$spacing-01 0;
+    padding-bottom: layout.$layout-02;
+    column-gap: layout.$spacing-05;
+
+    & > button {
+      width: 50%;
+    }
+  }
+}
+
+/* Desktop viewport */
+:global(.omrs-breakpoint-gt-tablet) {
+  .grid {
+    margin: layout.$spacing-01 0;
+    padding-bottom: layout.$layout-02;
+    display: grid;
+    grid-template-columns: 1fr 1fr 0.5fr;
+    column-gap: layout.$spacing-05;
+    align-items: flex-end;
+  }
+}

package/src/{patient-verification → client-registry/patient-verification}/patient-verification-hook.tsx

@@ -6,7 +6,7 @@ import {
   type ConceptAnswers,
   type ConceptResponse,
   type FormValues,
-} from '../patient-registration/patient-registration.types';
+} from '../../patient-registration/patient-registration.types';
 
 export function searchClientRegistry(
   identifierType: string,
@@ -108,7 +108,7 @@ export function useGlobalProperties() {
   const { data, isLoading, error } = useSWRImmutable(
     `https://afyakenyaidentityapi.health.go.ke/connect/token`,
     swrFetcher,
-    { refreshInterval: 864000 },
+    { refreshInterval: 864000, errorRetryCount: 0 },
   );
   return { data: data, isLoading, error };
 }

package/src/{patient-verification → client-registry/patient-verification}/patient-verification-utils.ts

@@ -2,7 +2,7 @@ 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 { type FormValues } from '../../patient-registration/patient-registration.types';
 import { capitalize } from 'lodash-es';
 
 export function handleClientRegistryResponse(

package/src/{patient-verification → client-registry/patient-verification}/patient-verification.component.tsx

@@ -7,7 +7,7 @@ import { searchClientRegistry, useGlobalProperties } from './patient-verificatio
 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';
+import { type FormValues } from '../../patient-registration/patient-registration.types';
 
 interface PatientVerificationProps {
   props: FormikProps<FormValues>;
@@ -58,6 +58,9 @@ const PatientVerification: React.FC<PatientVerificationProps> = ({ props }) => {
       <h3 className={styles.productiveHeading02} style={{ color: '#161616' }}>
         {t('clientVerificationWithClientRegistry', 'Client verification with client registry')}
       </h3>
+      <span className={styles.label01}>
+        {t('allFieldsRequiredText', 'All fields are required unless marked optional')}
+      </span>
       <div style={{ margin: '1rem 0 1rem' }}>
         <Layer>
           {isLoading && <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />}

package/src/{patient-verification → client-registry/patient-verification}/patient-verification.scss

@@ -1,5 +1,8 @@
 @use '@carbon/colors';
-@import '../patient-registration/patient-registration.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '../../patient-registration/patient-registration.scss' as *;
 
 /* Desktop */
 :global(.omrs-breakpoint-gt-tablet) {
@@ -23,3 +26,16 @@
 .errorWrapper {
   margin: 0 0 1rem 0;
 }
+
+.label01 {
+  @include type.type-style('label-01');
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+  color: $ui-04;
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+  color: $ui-04;
+  cursor: pointer;
+}

package/src/config-schema.ts

@@ -83,6 +83,9 @@ export interface RegistrationConfig {
     encounterProviderRoleUuid: string;
     registrationFormUuid: string | null;
   };
+  hieClientRegistry: {
+    identifierTypes: Array<{ identifierType: string; identifierValue: string }>;
+  };
 }
 
 export const builtInSections: Array<SectionDefinition> = [
@@ -364,6 +367,28 @@ export const esmPatientRegistrationSchema = {
         'The form UUID to associate with the registration encounter. By default no form will be associated.',
     },
   },
+  hieClientRegistry: {
+    identifierTypes: {
+      _type: Type.Array,
+      _elements: {
+        identifierType: {
+          _type: Type.String,
+          _description: 'The label of the identifier type',
+        },
+        identifierValue: {
+          _type: Type.String,
+          _description: 'The value of the identifier type',
+        },
+      },
+      _default: [
+        { identifierType: 'National ID', identifierValue: 'national-id' },
+        { identifierType: 'Passport Number', identifierValue: 'passport  number' },
+        { identifierType: 'Birth Certificate Number', identifierValue: 'birth-certificate-number' },
+        { identifierType: 'Alien ID Number', identifierValue: 'alien-id-number' },
+        { identifierType: 'Refugee ID Number', identifierValue: 'refugee-number' },
+      ],
+    },
+  },
   _validators: [
     validator(
       (config: RegistrationConfig) =>

package/src/index.ts

@@ -68,11 +68,11 @@ export const deleteIdentifierConfirmationModal = getAsyncLifecycle(
 );
 
 export const confirmClientRegistryModal = getAsyncLifecycle(
-  () => import('./patient-verification/verification-modal/confirm-prompt.component'),
+  () => import('./client-registry/patient-verification/verification-modal/confirm-prompt.component'),
   options,
 );
 
 export const emptyClientRegistryModal = getAsyncLifecycle(
-  () => import('./patient-verification/verification-modal/empty-prompt.component'),
+  () => import('./client-registry/patient-verification/verification-modal/empty-prompt.component'),
   options,
 );

package/src/patient-registration/field/obs/obs-field.component.tsx

@@ -33,7 +33,7 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
     return null;
   }
 
-  switch (concept.datatype.display) {
+  switch (concept?.datatype?.display) {
     case 'Text':
       return (
         <TextObsField

package/src/patient-registration/patient-registration-hooks.ts

@@ -14,7 +14,10 @@ import useSWR from 'swr';
 import { v4 } from 'uuid';
 import { type RegistrationConfig } from '../config-schema';
 import { patientRegistration } from '../constants';
-import { useConceptAnswers, useGlobalProperties } from '../patient-verification/patient-verification-hook';
+import {
+  useConceptAnswers,
+  useGlobalProperties,
+} from '../client-registry/patient-verification/patient-verification-hook';
 import {
   type FormValues,
   type PatientRegistration,

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

@@ -12,6 +12,7 @@ import {
   interpolateUrl,
   usePatient,
   usePatientPhoto,
+  useFeatureFlag,
 } from '@openmrs/esm-framework';
 import { getValidationSchema } from './validation/patient-registration-validation';
 import { type FormValues, type CapturePhotoProps } from './patient-registration.types';
@@ -19,14 +20,15 @@ import { PatientRegistrationContext } from './patient-registration-context';
 import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
 import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
 import { cancelRegistration, filterOutUndefinedPatientIdentifiers, scrollIntoView } from './patient-registration-utils';
-import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap,usePatientObs } from './patient-registration-hooks';
+import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
 import { ResourcesContext } from '../offline.resources';
 import { builtInSections, type RegistrationConfig, type SectionDefinition } from '../config-schema';
 import { SectionWrapper } from './section/section-wrapper.component';
 import BeforeSavePrompt from './before-save-prompt';
 import styles from './patient-registration.scss';
-import PatientVerification from '../patient-verification/patient-verification.component';
-import { handleSavePatientToClientRegistry } from '../patient-verification/patient-verification-hook';
+import PatientVerification from '../client-registry/patient-verification/patient-verification.component';
+import { handleSavePatientToClientRegistry } from '../client-registry/patient-verification/patient-verification-hook';
+import ClientRegistry from '../client-registry/client-registry.component';
 
 let exportedInitialFormValuesForTesting = {} as FormValues;
 
@@ -36,6 +38,7 @@ export interface PatientRegistrationProps {
 }
 
 export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePatientForm, isOffline }) => {
+  const healthInformationExchangeFlag = useFeatureFlag('healthInformationExchange');
   const { currentSession, identifierTypes } = useContext(ResourcesContext);
   const { search } = useLocation();
   const config = useConfig() as RegistrationConfig;
@@ -158,6 +161,8 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
     }
   };
 
+  const enableRegistryButton = healthInformationExchangeFlag ? false : !enableClientRegistry;
+
   const displayErrors = (errors) => {
     if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
       Object.keys(errors).forEach((error) => {
@@ -198,18 +203,20 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                     </Link>
                   </div>
                 ))}
-                <Button
-                  renderIcon={ShareKnowledge}
-                  disabled={!currentSession || !identifierTypes}
-                  onClick={() => {
-                    setEnableClientRegistry(true);
-                    props.isValid
-                      ? handleSavePatientToClientRegistry(props.values, props.setValues, inEditMode)
-                      : props.validateForm().then((errors) => displayErrors(errors));
-                  }}
-                  className={styles.submitButton}>
-                  {t('postToRegistry', 'Post to registry')}
-                </Button>
+                {!healthInformationExchangeFlag && (
+                  <Button
+                    renderIcon={ShareKnowledge}
+                    disabled={!currentSession || !identifierTypes}
+                    onClick={() => {
+                      setEnableClientRegistry(true);
+                      props.isValid
+                        ? handleSavePatientToClientRegistry(props.values, props.setValues, inEditMode)
+                        : props.validateForm().then((errors) => displayErrors(errors));
+                    }}
+                    className={styles.submitButton}>
+                    {t('postToRegistry', 'Post to registry')}
+                  </Button>
+                )}
                 <Button
                   className={styles.submitButton}
                   type="submit"
@@ -217,7 +224,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   // Current session and identifiers are required for patient registration.
                   // If currentSession or identifierTypes are not available, then the
                   // user should be blocked to register the patient.
-                  disabled={!currentSession || !identifierTypes || props.isSubmitting || !enableClientRegistry}>
+                  disabled={!currentSession || !identifierTypes || props.isSubmitting || enableRegistryButton}>
                   {props.isSubmitting ? (
                     <InlineLoading
                       className={styles.spinner}
@@ -249,7 +256,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                   initialFormValues: props.initialValues,
                   setInitialFormValues,
                 }}>
-                <PatientVerification props={props} setInitialFormValues={setInitialFormValues} />
+                <ClientRegistry props={props} setInitialFormValues={setInitialFormValues} />
                 {sections.map((section, index) => (
                   <SectionWrapper
                     key={`registration-section-${section.id}`}

package/translations/en.json

@@ -40,6 +40,7 @@
   "editIdentifierTooltip": "Edit",
   "editPatientDetails": "Edit patient details",
   "editPatientDetailsBreadcrumb": "Edit patient details",
+  "enterIdentifierSearchValue": "Enter identifier search value",
   "error": "Error",
   "errorFetchingOrderedFields": "Error occured fetching ordered fields for address hierarchy",
   "estimatedAgeInMonthsLabelText": "Estimated age in months",
@@ -54,6 +55,8 @@
   "genderUnspecified": "Gender is not specified",
   "givenNameLabelText": "First Name",
   "givenNameRequired": "Given name is required",
+  "identifierSearch": "Identifier search",
+  "identifierType": "Identifier type",
   "identifierValueRequired": "Identifier value is required",
   "idFieldLabelText": "Identifiers",
   "IDInstructions": "Select the identifiers you'd like to add for this patient:",
@@ -78,6 +81,7 @@
   "patientNameKnown": "Patient's Name is Known?",
   "patientNotFound": "The patient records could not be found in Client registry, do you want to continue to create and post patient to registry",
   "patientRegistrationBreadcrumb": "Patient Registration",
+  "patientVerificationFromHIE": "Patient verification from HIE",
   "postToRegistry": "Post to registry",
   "registerPatient": "Register Patient",
   "registerPatientSuccessSnackbarSubtitle": "The patient can now be found by searching for them using their name or ID number",
@@ -94,9 +98,11 @@
   "removeIdentifierButton": "Remove Identifier",
   "resetIdentifierTooltip": "Reset",
   "restoreRelationshipActionButton": "Undo",
+  "search": "Search",
   "searchAddress": "Search address",
   "searchClientRegistry": "Search client registry",
   "searchIdentifierPlaceholder": "Search identifier",
+  "searchRegistry": "Search registry",
   "selectAnOption": "Select an option",
   "selectCountry": "Select country",
   "selectIdentifierType": "Select identifier type",