@kenyaemr/esm-patient-registration-app 8.1.1-pre.124 → 8.1.2-pre.152

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

@@ -1,10 +1,62 @@
 @use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/layout';
+@use '@carbon/colors';
 
 .header {
   @include type.type-style('heading-03');
 }
 
-.body {
-  @include type.type-style('body-01');
+.patientInfo {
+  display: grid;
+  grid-template-columns: 0.25fr 0.75fr;
+  margin: 0.25rem;
+}
+
+.patientInfoLabel {
+  min-width: 5rem;
+  font-weight: bold;
+}
+
+.dependentInfo {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.patientDetails {
+  display: flex;
+  margin: 1rem;
+}
+
+.patientPhotoContainer {
+  display: flex;
+  align-items: center;
+}
+
+.patientInfoContainer {
+  width: 100%;
+  margin-left: 0.625rem;
+}
+
+.patientNameValue {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+
+  & > span {
+    color: colors.$gray-40;
+  }
+}
+
+.grid {
+  margin: 0 layout.$spacing-05;
+  padding: layout.$spacing-05 0rem 0rem orem;
+}
+
+.otpInputRow {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  align-items: flex-end;
 }

package/src/client-registry/hie-client-registry/modal/hie-otp-verification-form.component.tsx

@@ -0,0 +1,88 @@
+import { Button, Column, Row, Stack, Tag, TextInput, InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { type authorizationFormSchema, generateOTP, persistOTP, sendOtp } from '../hie-resource';
+import styles from './confirm-hie.scss';
+import { type z } from 'zod';
+
+type HIEOTPVerficationFormProps = {
+  name: string;
+  patientId: string;
+  status?: 'loadingOtp' | 'otpSendSuccessfull' | 'otpFetchError';
+  setStatus: React.Dispatch<React.SetStateAction<'loadingOtp' | 'otpSendSuccessfull' | 'otpFetchError'>>;
+};
+
+const HIEOTPVerficationForm: React.FC<HIEOTPVerficationFormProps> = ({ name, patientId, setStatus, status }) => {
+  const form = useFormContext<z.infer<typeof authorizationFormSchema>>();
+  const { t } = useTranslation();
+
+  const handleGetOTP = async () => {
+    try {
+      setStatus('loadingOtp');
+      const otp = generateOTP(5);
+      await sendOtp({ otp, receiver: form.watch('receiver') }, name);
+      setStatus('otpSendSuccessfull');
+      persistOTP(otp, patientId);
+    } catch (error) {
+      setStatus('otpFetchError');
+      showSnackbar({ title: t('error', 'Error'), kind: 'error', subtitle: error?.message });
+    }
+  };
+
+  return (
+    <Stack gap={4} className={styles.grid}>
+      <Column>
+        <Controller
+          control={form.control}
+          name="receiver"
+          render={({ field }) => (
+            <TextInput
+              invalid={form.formState.errors[field.name]?.message}
+              invalidText={form.formState.errors[field.name]?.message}
+              {...field}
+              placeholder={t('patientPhoneNUmber', 'Patient Phone number')}
+              labelText={t('patientPhoneNUmber', 'Patient Phone number')}
+              helperText={t('phoneNumberHelper', 'Patient will receive OTP on this number')}
+            />
+          )}
+        />
+      </Column>
+
+      <Column>
+        <Controller
+          control={form.control}
+          name="otp"
+          render={({ field }) => (
+            <Row className={styles.otpInputRow}>
+              <TextInput
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                {...field}
+                placeholder={t('otpCode', 'OTP Authorization code')}
+                labelText={t('otpCode', 'OTP Authorization code')}
+              />
+              <Button
+                onClick={handleGetOTP}
+                role="button"
+                type="blue"
+                kind="tertiary"
+                disabled={['loadingOtp', 'otpSendSuccessfull'].includes(status)}>
+                {status === 'loadingOtp' ? (
+                  <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+                ) : status === 'otpFetchError' ? (
+                  t('retry', 'Retry')
+                ) : (
+                  t('verifyOTP', 'Verify with OTP')
+                )}
+              </Button>
+            </Row>
+          )}
+        />
+      </Column>
+    </Stack>
+  );
+};
+
+export default HIEOTPVerficationForm;

package/src/client-registry/hie-client-registry/modal/hie-patient-detail-preview.component.tsx

@@ -0,0 +1,77 @@
+import { Accordion, AccordionItem, CodeSnippet } from '@carbon/react';
+import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
+import capitalize from 'lodash-es/capitalize';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import DependentInfo from '../dependants/dependants.component';
+import { getPatientName, maskData } from '../hie-resource';
+import PatientInfo from '../patient-info/patient-info.component';
+import styles from './confirm-hie.scss';
+import { type HIEPatientResponse } from '../hie-types';
+
+type HIEPatientDetailPreviewProps = {
+  patient: HIEPatientResponse;
+};
+
+const HIEPatientDetailPreview: React.FC<HIEPatientDetailPreviewProps> = ({ patient }) => {
+  const { familyName, givenName, middleName } = getPatientName(patient);
+  const { t } = useTranslation();
+  const getidentifier = (code: string) =>
+    patient?.entry[0]?.resource.identifier?.find(
+      (identifier) => identifier?.type?.coding?.some((coding) => coding?.code === code),
+    );
+
+  return (
+    <>
+      <div className={styles.patientDetails}>
+        <ExtensionSlot
+          className={styles.patientPhotoContainer}
+          name="patient-photo-slot"
+          state={{ patientName: `${maskData(givenName)} . ${maskData(middleName)} . ${maskData(familyName)}` }}
+        />
+        <div className={styles.patientInfoContainer}>
+          <PatientInfo label={t('healthID', 'HealthID')} value={getidentifier('sha-number')?.value} />
+          <PatientInfo
+            label={t('patientName', 'Patient name')}
+            customValue={
+              <span className={styles.patientNameValue}>
+                <p>{maskData(givenName)}</p>
+                <span>&bull;</span>
+                <p>{maskData(middleName)}</p>
+                <span>&bull;</span>
+                <p>{maskData(familyName)}</p>
+              </span>
+            }
+          />
+
+          <PatientInfo label={t('age', 'Age')} value={age(patient?.entry[0]?.resource.birthDate)} />
+          <PatientInfo
+            label={t('dateOfBirth', 'Date of birth')}
+            value={formatDate(new Date(patient?.entry[0]?.resource?.birthDate))}
+          />
+          <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.entry[0]?.resource.gender)} />
+          <PatientInfo
+            label={t('maritalStatus', 'Marital status')}
+            value={patient?.entry[0]?.resource.maritalStatus?.coding?.map((m) => m.code).join('')}
+          />
+
+          {!patient?.entry[0]?.resource.contact && <PatientInfo label={t('dependents', 'Dependents')} value="--" />}
+        </div>
+      </div>
+
+      <DependentInfo dependents={patient?.entry[0]?.resource.contact} />
+
+      <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>
+    </>
+  );
+};
+
+export default HIEPatientDetailPreview;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from '../modal/confirm-hie.scss';
+
+const PatientInfo: React.FC<{ label: string; value?: string; customValue?: JSX.Element }> = ({
+  label,
+  value,
+  customValue,
+}) => {
+  return (
+    <div className={styles.patientInfo}>
+      <span className={styles.patientInfoLabel}>{label}</span>
+      <span>{value || customValue || '--'}</span>
+    </div>
+  );
+};
+
+export default PatientInfo;

package/src/config-schema.ts

@@ -1,4 +1,5 @@
 import { Type, validator, validators } from '@openmrs/esm-framework';
+import _default from 'yup/lib/locale';
 
 export interface SectionDefinition {
   id: string;
@@ -12,7 +13,8 @@ export interface FieldDefinition {
   label?: string;
   uuid: string;
   placeholder?: string;
-  dateFormat?: string;
+  allowFutureDates?: boolean;
+  allowPastDates?: boolean;
   showHeading: boolean;
   validation?: {
     required: boolean;
@@ -71,6 +73,7 @@ export interface RegistrationConfig {
         month: number;
       };
     };
+    identifierMappings: [{ fhirIdentifierSystem: string; openmrsIdentifierTypeUuid: string }];
     phone: {
       personAttributeUuid: string;
       validation?: {
@@ -186,6 +189,16 @@ export const esmPatientRegistrationSchema = {
         _default: '',
         _description: 'Placeholder that will appear in the input.',
       },
+      allowFutureDates: {
+        _type: Type.Boolean,
+        _default: true,
+        _description: 'Indicates whether the date input field should allow the selection of future dates or not.',
+      },
+      allowPastDates: {
+        _type: Type.Boolean,
+        _default: true,
+        _description: 'Indicates whether the date input field should allow the selection of past dates or not.',
+      },
       validation: {
         required: { _type: Type.Boolean, _default: false },
         matches: {
@@ -349,6 +362,21 @@ export const esmPatientRegistrationSchema = {
         },
       },
     },
+    identifierMappings: {
+      _type: Type.Array,
+      _elements: {
+        fhirIdentifierSystem: {
+          _type: Type.String,
+          _description: 'Identifier system from the fhir server',
+        },
+        openmrsIdentifierTypeUuid: {
+          _type: Type.String,
+          _default: null,
+          _description: 'Identifier type uuid of OpenMRS to map the identifier system',
+        },
+      },
+      _default: [],
+    },
     phone: {
       personAttributeUuid: {
         _type: Type.UUID,
@@ -416,7 +444,7 @@ export const esmPatientRegistrationSchema = {
         },
       },
       _default: [
-        { identifierType: 'National ID', identifierValue: 'national-id' },
+        { 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' },

package/src/patient-registration/field/address/address-search.component.tsx

@@ -14,8 +14,11 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
   const separator = ' > ';
   const searchBox = useRef(null);
   const wrapper = useRef(null);
-  const [searchString, setSearchString] = useState<string>('');
-  const { addresses, isLoading, error } = useAddressHierarchy(searchString, separator);
+
+  const [searchString, setSearchString] = useState('');
+
+  const { addresses } = useAddressHierarchy(searchString, separator);
+
   const addressOptions: Array<string> = useMemo(() => {
     const options: Set<string> = new Set();
     addresses.forEach((address) => {

package/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx

@@ -35,7 +35,7 @@ function DeathDateField() {
         selectedDate ? dayjs(selectedDate).hour(0).minute(0).second(0).millisecond(0).toDate() : undefined,
       );
     },
-    [deathDate],
+    [setFieldValue],
   );
 
   return (

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

@@ -41,7 +41,7 @@ export const DobField: React.FC = () => {
       setFieldValue('monthsEstimated', '');
       setFieldTouched('birthdateEstimated', true, false);
     },
-    [setFieldValue],
+    [setFieldTouched, setFieldValue],
   );
 
   const onDateChange = useCallback(

package/src/patient-registration/field/field.scss

@@ -111,10 +111,6 @@
   svg {
     margin-left: layout.$spacing-03;
   }
-
-  .customField {
-    margin-bottom: layout.$spacing-05;
-  }
 }
 
 .attributeField {
@@ -169,3 +165,7 @@
   line-height: 1.34;
   margin: layout.$spacing-02 0 0;
 }
+
+.customField {
+  margin-bottom: layout.$spacing-05;
+}

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

@@ -30,8 +30,12 @@ export const GenderField: React.FC = () => {
     <div className={styles.halfWidthInDesktopView}>
       <h4 className={styles.productiveHeading02Light}>{t('sexFieldLabelText', 'Sex')}</h4>
       <div className={styles.sexField}>
-        <p className="cds--label">{t('genderLabelText', 'Sex')}</p>
-        <RadioButtonGroup name="gender" orientation="vertical" onChange={setGender} valueSelected={field.value}>
+        <RadioButtonGroup
+          name="gender"
+          legendText={t('genderLabelText', 'Sex')}
+          orientation="vertical"
+          onChange={setGender}
+          valueSelected={field.value}>
           {fieldConfigs.map((option) => (
             <RadioButton
               key={option.label ?? option.value}

package/src/patient-registration/field/id/identifier-selection-overlay.component.tsx

@@ -23,7 +23,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
   const { identifierTypes } = useContext(ResourcesContext);
   const { isOffline, values, initialFormValues } = useContext(PatientRegistrationContext);
   const [unsavedIdentifierTypes, setUnsavedIdentifierTypes] = useState<FormValues['identifiers']>(values.identifiers);
-  const [searchString, setSearchString] = useState<string>('');
+  const [searchString, setSearchString] = useState('');
   const { t } = useTranslation();
   const { defaultPatientIdentifierTypes } = useConfig();
   const defaultPatientIdentifierTypesMap = useMemo(() => {
@@ -107,11 +107,11 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
             />
             {patientIdentifier &&
               identifierType?.identifierSources?.length > 0 &&
-              /* 
+              /*
                 This check are for the cases when there's an initialValue identifier is assigned
                 to the patient
                 The corresponding flow is like:
-                1. If there's no change to the actual initial identifier, then the source remains null, 
+                1. If there's no change to the actual initial identifier, then the source remains null,
                 hence the list of the identifier sources shouldn't be displayed.
                 2. If user wants to edit the patient identifier's value, hence there will be an initialValue,
                 along with a source assigned to itself(only if the identifierType has sources, else there's nothing to worry about), which by

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

@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next';
 import { ContentSwitcher, Switch } from '@carbon/react';
 import { useField } from 'formik';
 import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
 export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
@@ -51,7 +51,7 @@ export const NameField = () => {
         setFieldTouched('photo', true, false);
       }
     },
-    [setCapturePhotoProps],
+    [setCapturePhotoProps, setFieldTouched],
   );
 
   const toggleNameKnown = (e) => {

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

@@ -57,8 +57,8 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
           concept={concept}
           label={fieldDefinition.label}
           required={fieldDefinition.validation.required}
-          dateFormat={fieldDefinition.dateFormat}
-          placeholder={fieldDefinition.placeholder}
+          allowPastDates={fieldDefinition.allowPastDates}
+          allowFutureDates={fieldDefinition.allowFutureDates}
         />
       );
     case 'Coded':
@@ -159,14 +159,16 @@ interface DateObsFieldProps {
   concept: ConceptResponse;
   label: string;
   required?: boolean;
-  dateFormat?: string;
-  placeholder?: string;
+  allowPastDates?: boolean;
+  allowFutureDates?: boolean;
 }
 
-function DateObsField({ concept, label, required, placeholder }: DateObsFieldProps) {
+function DateObsField({ concept, label, required, allowPastDates, allowFutureDates }: DateObsFieldProps) {
   const { t } = useTranslation();
   const fieldName = `obs.${concept.uuid}`;
   const { setFieldValue } = useContext(PatientRegistrationContext);
+  const futureDatesAllowed = allowFutureDates ?? true;
+  const pastDatesAllowed = allowPastDates ?? true;
 
   const onDateChange = (date: Date) => {
     setFieldValue(fieldName, date);
@@ -188,6 +190,8 @@ function DateObsField({ concept, label, required, placeholder }: DateObsFieldPro
                   isInvalid={errors[fieldName] && touched[fieldName]}
                   invalidText={t(meta.error)}
                   value={field.value}
+                  minDate={!pastDatesAllowed ? new Date() : undefined}
+                  maxDate={!futureDatesAllowed ? new Date() : undefined}
                 />
               </>
             );

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Field } from 'formik';
 import { Layer, Select, SelectItem } from '@carbon/react';
+import { reportError } from '@openmrs/esm-framework';
 import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
-import { reportError } from '@openmrs/esm-framework';
 
 export interface CodedPersonAttributeFieldProps {
   id: string;
@@ -44,7 +44,7 @@ export function CodedPersonAttributeField({
       );
       setError(true);
     }
-  }, [answerConceptSetUuid, customConceptAnswers]);
+  }, [answerConceptSetUuid, customConceptAnswers, id, t]);
 
   useEffect(() => {
     if (!isLoadingConceptAnswers && !customConceptAnswers.length) {
@@ -72,7 +72,7 @@ export function CodedPersonAttributeField({
         setError(true);
       }
     }
-  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers]);
+  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers, t, id, answerConceptSetUuid]);
 
   const answers = useMemo(() => {
     if (customConceptAnswers.length) {
@@ -98,6 +98,7 @@ export function CodedPersonAttributeField({
               return (
                 <>
                   <Select
+                    style={{ marginBottom: '1rem' }}
                     id={id}
                     name={`person-attribute-${personAttributeType.uuid}`}
                     labelText={label ?? personAttributeType?.display}

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx

@@ -4,19 +4,19 @@ import { render, screen } from '@testing-library/react';
 import { useConceptAnswers } from '../field.resource';
 import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
 
-jest.mock('formik', () => ({
-  ...jest.requireActual('formik'),
-}));
-
-jest.mock('../field.resource');
-
 const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
 
+jest.mock('../field.resource', () => ({
+  ...jest.requireActual('../field.resource'),
+  useConceptAnswers: jest.fn(),
+}));
+
 describe('CodedPersonAttributeField', () => {
   const conceptAnswers = [
     { uuid: '1', display: 'Option 1' },
     { uuid: '2', display: 'Option 2' },
   ];
+
   const personAttributeType = {
     format: 'org.openmrs.Concept',
     display: 'Referred by',
@@ -24,26 +24,35 @@ describe('CodedPersonAttributeField', () => {
     name: '',
     description: '',
   };
+
   const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
+  let consoleSpy: jest.SpyInstance;
 
   beforeEach(() => {
     mockUseConceptAnswers.mockReturnValue({
       data: conceptAnswers,
       isLoading: false,
+      error: null,
     });
+
+    consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
   });
 
-  it('shows error if there is no concept answer set provided', () => {
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+
+  it('renders an error if there is no concept answer set provided', () => {
     expect(() => {
       render(
         <Formik initialValues={{}} onSubmit={() => {}}>
           <Form>
             <CodedPersonAttributeField
-              id="attributeId"
-              personAttributeType={personAttributeType}
               answerConceptSetUuid={null}
-              label={personAttributeType.display}
               customConceptAnswers={[]}
+              id="attributeId"
+              label={personAttributeType.display}
+              personAttributeType={personAttributeType}
               required={false}
             />
           </Form>
@@ -52,11 +61,13 @@ describe('CodedPersonAttributeField', () => {
     }).toThrow(expect.stringMatching(/has been defined without an answer concept set UUID/i));
   });
 
-  it('shows error if the concept answer set does not have any concept answers', () => {
+  it('renders an error if the concept answer set does not have any concept answers', () => {
     mockUseConceptAnswers.mockReturnValue({
       data: [],
       isLoading: false,
+      error: null,
     });
+
     expect(() => {
       render(
         <Formik initialValues={{}} onSubmit={() => {}}>