@kenyaemr/esm-patient-registration-app 8.0.1-pre.95 → 8.1.0

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":"8.0.1-pre.95"}
+{"$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}],"modals":[{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.1.0"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "8.0.1-pre.95",
+  "version": "8.1.0",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -53,6 +53,5 @@
   },
   "devDependencies": {
     "webpack": "^5.74.0"
-  },
-  "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,134 @@
+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, InlineLoading } from '@carbon/react';
+import { Search } from '@carbon/react/icons';
+import { showModal, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { z } from 'zod';
+import { type RegistrationConfig } from '../../config-schema';
+import { useForm, Controller, type SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { fetchPatientFromHIE, mapHIEPatientToFormValues } from './hie-resource';
+import { type HIEPatient } from './hie-types';
+
+type HIEClientRegistryProps = {
+  props: FormikProps<FormValues>;
+  setInitialFormValues: Dispatch<FormValues>;
+};
+
+type HIEFormValues = {
+  identifierType: string;
+  identifierValue: string;
+};
+
+const HIEFormSchema = z.object({
+  identifierType: z.string().min(1, { message: 'Identifier type is required' }),
+  identifierValue: z.string().min(1, { message: 'Identifier value is required' }),
+});
+
+const HIEClientRegistry: React.FC<HIEClientRegistryProps> = ({ setInitialFormValues, props }) => {
+  const { t } = useTranslation();
+  const { control, handleSubmit, watch, formState } = useForm<HIEFormValues>({
+    mode: 'all',
+    defaultValues: { identifierType: '', identifierValue: '' },
+    resolver: zodResolver(HIEFormSchema),
+  });
+  const {
+    hieClientRegistry: { identifierTypes },
+  } = useConfig<RegistrationConfig>();
+
+  const onSubmit: SubmitHandler<HIEFormValues> = async (data: HIEFormValues, event: React.BaseSyntheticEvent) => {
+    try {
+      const hieClientRegistry = await fetchPatientFromHIE(data.identifierType, data.identifierValue);
+
+      if (hieClientRegistry && hieClientRegistry.resourceType === 'Patient') {
+        const dispose = showModal('hie-confirmation-modal', {
+          patient: hieClientRegistry,
+          closeModal: () => dispose(),
+          onUseValues: () =>
+            setInitialFormValues(mapHIEPatientToFormValues(hieClientRegistry as HIEPatient, props.values)),
+        });
+      }
+
+      if (hieClientRegistry && hieClientRegistry.resourceType === 'OperationOutcome') {
+        const issueMessage = hieClientRegistry?.['issue']?.map((issue) => issue.diagnostics).join(', ');
+        const dispose = showModal('empty-client-registry-modal', {
+          onConfirm: () => dispose(),
+          close: () => dispose(),
+          title: t('clientRegistryEmpty', 'Create & Post Patient'),
+          message: issueMessage,
+        });
+      }
+    } catch (error) {
+      showSnackbar({
+        title: t('errorFetchingPatient', 'Error fetching patient'),
+        subtitle: error.message,
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} 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}>
+        <Controller
+          control={control}
+          name="identifierType"
+          render={({ field: { onChange, value, onBlur, ref }, fieldState }) => (
+            <ComboBox
+              light
+              style={{ borderBottom: 'none' }}
+              onChange={({ selectedItem }) => onChange(selectedItem?.identifierValue)}
+              id="identifier-combobox"
+              items={identifierTypes}
+              placeholder={t('selectIdentifierType', 'Select identifier type')}
+              itemToString={(item) => (item ? item.identifierType : '')}
+              titleText={t('identifierType', 'Identifier type')}
+              invalid={!!fieldState?.error?.message}
+              invalidText={fieldState?.error?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="identifierValue"
+          render={({ field, fieldState }) => (
+            <TextInput
+              disabled={watch('identifierType') === ''}
+              light
+              id="identifier-search"
+              placeholder={t('enterIdentifierSearchValue', 'Enter identifier search value')}
+              type="text"
+              labelText={t('identifierSearch', 'Identifier search')}
+              invalid={!!fieldState?.error?.message}
+              invalidText={fieldState?.error?.message}
+              {...field}
+            />
+          )}
+        />
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          renderIcon={(props) => <Search size={24} {...props} />}
+          iconDescription={t('searchRegistry', 'Search registry')}
+          size="md"
+          disabled={!watch('identifierType') || !watch('identifierValue') || formState.isSubmitting}
+          kind="tertiary">
+          {formState.isSubmitting
+            ? t('searchingRegistry', 'Searching registry...')
+            : t('searchRegistry', 'Search registry')}
+        </Button>
+      </Tile>
+    </form>
+  );
+};
+
+export default HIEClientRegistry;

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

@@ -0,0 +1,53 @@
+@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-start;
+
+    & > button {
+      align-self: flex-start;
+      margin-top: 1.4rem;
+      max-width: 14rem;
+      min-width: 14rem;
+    }
+  }
+}

package/src/client-registry/hie-client-registry/hie-resource.ts

@@ -0,0 +1,160 @@
+import { add, capitalize } from 'lodash-es';
+import { type PatientIdentifierValue, type FormValues } from '../../patient-registration/patient-registration.types';
+import { type MapperConfig, type HIEPatient, type ErrorResponse } from './hie-types';
+import { getConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../config-schema';
+import { v4 } from 'uuid';
+/**
+ * Represents a client for interacting with a Health Information Exchange (HIE) resource.
+ * @template T - The type of the resource being fetched.
+ */
+class HealthInformationExchangeClient<T> {
+  async fetchResource(resourceType: string, params: Record<string, string>): Promise<T> {
+    const {
+      hieClientRegistry: { baseUrl, encodedCredentials },
+    } = await getConfig<RegistrationConfig>('@kenyaemr/esm-patient-registration-app');
+    const urlParams = new URLSearchParams(params);
+    const response = await fetch(`${baseUrl}${resourceType}?${urlParams}`, {
+      headers: new Headers({
+        Authorization: `Basic ${encodedCredentials}`,
+      }),
+    });
+
+    return response.json();
+  }
+}
+
+/**
+ * Represents a generic Mapper class.
+ * @template T - The source type.
+ * @template U - The target type.
+ */
+class Mapper<T, U> {
+  protected config: MapperConfig;
+
+  constructor(config: MapperConfig) {
+    this.config = config;
+  }
+}
+
+/**
+ * Maps HIEPatient objects to FormValues objects.
+ */
+class PatientMapper extends Mapper<HIEPatient, FormValues> {
+  mapHIEPatientToFormValues(hiePatient: HIEPatient, currentFormValues: FormValues): FormValues {
+    const name = hiePatient.name?.[0] || {};
+    const telecom = hiePatient.telecom || [];
+
+    const telecomAttributes = this.mapTelecomToAttributes(telecom);
+    const updatedIdentifiers = this.mapIdentifiers(hiePatient, currentFormValues);
+    const extensionAddressEntries = this.mapExtensionsToAddress(hiePatient.extension);
+
+    return {
+      isDead: hiePatient.deceasedBoolean || false,
+      gender: hiePatient.gender || '',
+      birthdate: hiePatient.birthDate || '',
+      givenName: name.given?.[0] || '',
+      familyName: name.family || '',
+      telephoneNumber: telecom.find((t) => t.system === 'phone')?.value || '',
+      middleName: name.given?.[1],
+      address: extensionAddressEntries,
+      identifiers: updatedIdentifiers,
+      attributes: telecomAttributes,
+      relationships: [],
+      patientUuid: v4(),
+    } as FormValues;
+  }
+
+  private mapTelecomToAttributes(telecom: Array<fhir.ContactPoint>): Record<string, string> {
+    return telecom.reduce<Record<string, string>>((acc, { system, value }) => {
+      if (system && value && this.config.teleComMap[system]) {
+        const filteredValue = value.replace(/^254/, '0');
+        if (filteredValue) {
+          acc[this.config.teleComMap[system]] = filteredValue;
+        }
+      }
+      return acc;
+    }, {});
+  }
+
+  private mapIdentifiers(
+    hiePatient: HIEPatient,
+    currentFormValues: FormValues,
+  ): Record<string, PatientIdentifierValue> {
+    const updatedIdentifiers: Record<string, PatientIdentifierValue> = { ...currentFormValues.identifiers };
+
+    // Map Social Health Authority Unique Identification Number to HIE Patient ID
+    // See https://github.com/palladiumkenya/openmrs-module-kenyaemr/blob/1e1d281eaba8041c45318e60ca0730449b8e4197/api/src/main/distro/metadata/identifierTypes.xml#L33
+    updatedIdentifiers.socialHealthAuthorityIdentificationNumber = {
+      ...currentFormValues.identifiers['socialHealthAuthorityIdentificationNumber'],
+      identifierValue: hiePatient.id,
+    };
+
+    // Map fhir.Patient.Identifier to identifiers
+    hiePatient.identifier?.forEach((identifier) => {
+      const system = identifier.system?.split('/').pop();
+      if (system && this.config.identifierMap[system]) {
+        const key = this.config.identifierMap[system];
+        updatedIdentifiers[key] = {
+          ...currentFormValues.identifiers[key],
+          identifierValue: identifier.value || '',
+        };
+      }
+    });
+
+    // Filter out undefined keys and values
+    Object.keys(updatedIdentifiers).forEach((key) => {
+      if (updatedIdentifiers[key] === undefined || updatedIdentifiers[key].identifierValue === undefined) {
+        delete updatedIdentifiers[key];
+      }
+    });
+
+    return updatedIdentifiers;
+  }
+
+  private mapExtensionsToAddress(extensions: HIEPatient['extension']): Record<string, string> {
+    return extensions.reduce<Record<string, string>>((acc, ext) => {
+      const identifierType = ext.url.split('/').pop();
+      const mappedKey = this.config.addressHierarchyMap[identifierType];
+
+      if (mappedKey && ext.valueString) {
+        acc[mappedKey] = capitalize(ext.valueString);
+      }
+
+      return acc;
+    }, {});
+  }
+}
+
+// Update MapperConfig interface in hie-types.ts
+
+const mapperConfig: MapperConfig = {
+  teleComMap: {
+    email: 'b8d0b331-1d2d-4a9a-b741-1816f498bdb6',
+    phone: 'b2c38640-2603-4629-aebd-3b54f33f1e3a',
+  },
+  addressHierarchyMap: {
+    county: 'countyDistrict',
+    'sub-county': 'stateProvince',
+    ward: 'address4',
+  },
+  addressMap: {},
+  // Map FHIR Patient identifiers to identifiers, at the moment HIE teams returns null for all identifiers type codings
+  identifierMap: {},
+};
+
+// Create instances
+const hieApiClient = new HealthInformationExchangeClient<HIEPatient | ErrorResponse>();
+const patientMapper = new PatientMapper(mapperConfig);
+
+// Exported functions
+export const fetchPatientFromHIE = async (
+  identifierType: string,
+  identifierValue: string,
+): Promise<HIEPatient | ErrorResponse> => {
+  return hieApiClient.fetchResource('Patient', { [identifierType]: identifierValue });
+};
+
+export const mapHIEPatientToFormValues = (hiePatient: HIEPatient, currentFormValues: FormValues): FormValues => {
+  return patientMapper.mapHIEPatientToFormValues(hiePatient, currentFormValues);
+};

package/src/client-registry/hie-client-registry/hie-types.ts

@@ -0,0 +1,29 @@
+export type HIEPatient = fhir.Patient & {
+  extension: Array<{
+    url: string;
+    valueString: string;
+  }>;
+};
+
+export type APIClientConfig = {
+  baseUrl: string;
+  credentials: string;
+};
+
+export interface MapperConfig {
+  teleComMap: Record<string, string>;
+  addressHierarchyMap: Record<string, string>;
+  identifierMap: Record<string, string>;
+  addressMap: Record<string, string>;
+}
+
+export type ErrorResponse = {
+  resourceType: string;
+  issue: Array<Issue>;
+};
+
+export type Issue = {
+  severity: string;
+  code: string;
+  diagnostics: string;
+};

package/src/client-registry/hie-client-registry/modal/confirm-hie.modal.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalHeader, ModalFooter, Accordion, AccordionItem, CodeSnippet } from '@carbon/react';
+import styles from './confirm-hie.scss';
+import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
+import { type HIEPatient } from '../hie-types';
+import capitalize from 'lodash-es/capitalize';
+
+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 HIEConfirmationModalProps {
+  closeModal: () => void;
+  patient: HIEPatient;
+  onUseValues: () => void;
+}
+
+const HIEConfirmationModal: React.FC<HIEConfirmationModalProps> = ({ closeModal, patient, onUseValues }) => {
+  const { t } = useTranslation();
+  const firstName = patient?.name[0]['given']?.[0];
+  const lastName = patient?.name[0]['family'];
+
+  const handleUseValues = () => {
+    onUseValues();
+    closeModal();
+  };
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal}>
+        <span className={styles.header}>{t('hieModal', 'HIE Patient Record Found')}</span>
+      </ModalHeader>
+      <ModalBody>
+        <div style={{ display: 'flex', margin: '1rem' }}>
+          <ExtensionSlot
+            style={{ display: 'flex', alignItems: 'center' }}
+            name="patient-photo-slot"
+            state={{ patientName: `${firstName} ${lastName}` }}
+          />
+          <div style={{ width: '100%', marginLeft: '0.625rem' }}>
+            <PatientInfo label={t('healthID', 'HealthID')} value={patient?.id} />
+            <PatientInfo label={t('patientName', 'Patient name')} value={`${firstName} ${lastName}`} />
+            <PatientInfo label={t('age', 'Age')} value={age(patient?.birthDate)} />
+            <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.birthDate))} />
+            <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
+            <PatientInfo
+              label={t('maritalStatus', 'Marital status')}
+              value={patient?.maritalStatus?.coding?.map((m) => m.code).join('')}
+            />
+            <PatientInfo label={t('dependents', 'Dependents')} value="--" />
+          </div>
+        </div>
+        <div>
+          <Accordion>
+            <AccordionItem title={t('viewFullResponse', 'View full response')}>
+              <CodeSnippet type="multi" feedback="Copied to clipboard">
+                {JSON.stringify(patient, null, 2)}
+              </CodeSnippet>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+
+        <Button onClick={handleUseValues} kind="primary">
+          {t('useValues', 'Use values')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default HIEConfirmationModal;

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

@@ -0,0 +1,10 @@
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.header {
+  @include type.type-style('heading-03');
+}
+
+.body {
+  @include type.type-style('body-01');
+}

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/{patient-verification → client-registry/patient-verification}/verification-modal/empty-prompt.component.tsx

@@ -5,21 +5,24 @@ import { Button } from '@carbon/react';
 interface EmptyPromptProps {
   onConfirm: void;
   close: void;
+  title?: string;
+  message?: string;
 }
 
-const EmptyPrompt: React.FC<EmptyPromptProps> = ({ close, onConfirm }) => {
+const EmptyPrompt: React.FC<EmptyPromptProps> = ({ close, onConfirm, title, message }) => {
   const { t } = useTranslation();
   return (
     <>
       <div className="cds--modal-header">
-        <h3 className="cds--modal-header__heading">{t('clientRegistryEmpty', 'Create & Post Patient')}</h3>
+        <h3 className="cds--modal-header__heading">{title ?? 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',
-          )}
+          {message ??
+            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">