@ampath/esm-patient-registration-app 6.0.1-pre.6

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

@@ -0,0 +1,198 @@
+import React, { useMemo, useCallback, useEffect, useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, Checkbox, Search, RadioButtonGroup, RadioButton } from '@carbon/react';
+import { isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { type FormValues, type PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration.types';
+import Overlay from '../../ui-components/overlay/overlay.component';
+import { ResourcesContext } from '../../../offline.resources';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import {
+  isUniqueIdentifierTypeForOffline,
+  shouldBlockPatientIdentifierInOfflineMode,
+} from '../../input/custom-input/identifier/utils';
+import { initializeIdentifier, setIdentifierSource } from './id-field.component';
+import styles from './identifier-selection.scss';
+
+interface PatientIdentifierOverlayProps {
+  setFieldValue: (string, PatientIdentifierValue) => void;
+  closeOverlay: () => void;
+}
+
+const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ closeOverlay, setFieldValue }) => {
+  const layout = useLayoutType();
+  const { identifierTypes } = useContext(ResourcesContext);
+  const { isOffline, values, initialFormValues } = useContext(PatientRegistrationContext);
+  const [unsavedIdentifierTypes, setUnsavedIdentifierTypes] = useState<FormValues['identifiers']>(values.identifiers);
+  const [searchString, setSearchString] = useState<string>('');
+  const { t } = useTranslation();
+  const { defaultPatientIdentifierTypes } = useConfig();
+  const defaultPatientIdentifierTypesMap = useMemo(() => {
+    const map = {};
+    defaultPatientIdentifierTypes?.forEach((typeUuid) => {
+      map[typeUuid] = true;
+    });
+    return map;
+  }, [defaultPatientIdentifierTypes]);
+
+  useEffect(() => {
+    setUnsavedIdentifierTypes(values.identifiers);
+  }, [values.identifiers]);
+
+  const handleSearch = useCallback((event) => setSearchString(event?.target?.value ?? ''), []);
+
+  const filteredIdentifiers = useMemo(
+    () => identifierTypes?.filter((identifier) => identifier?.name?.toLowerCase().includes(searchString.toLowerCase())),
+    [searchString, identifierTypes],
+  );
+
+  const handleCheckingIdentifier = useCallback(
+    (identifierType: PatientIdentifierType, checked: boolean) =>
+      setUnsavedIdentifierTypes((unsavedIdentifierTypes) => {
+        if (checked) {
+          return {
+            ...unsavedIdentifierTypes,
+            [identifierType.fieldName]: initializeIdentifier(
+              identifierType,
+              values.identifiers[identifierType.fieldName] ??
+                initialFormValues.identifiers[identifierType.fieldName] ??
+                {},
+            ),
+          };
+        }
+        if (unsavedIdentifierTypes[identifierType.fieldName]) {
+          return Object.fromEntries(
+            Object.entries(unsavedIdentifierTypes).filter(([fieldName]) => fieldName !== identifierType.fieldName),
+          );
+        }
+        return unsavedIdentifierTypes;
+      }),
+    [initialFormValues.identifiers, values.identifiers],
+  );
+
+  const handleSelectingIdentifierSource = (identifierType: PatientIdentifierType, sourceUuid) =>
+    setUnsavedIdentifierTypes((unsavedIdentifierTypes) => ({
+      ...unsavedIdentifierTypes,
+      [identifierType.fieldName]: {
+        ...unsavedIdentifierTypes[identifierType.fieldName],
+        ...setIdentifierSource(
+          identifierType.identifierSources.find((source) => source.uuid === sourceUuid),
+          unsavedIdentifierTypes[identifierType.fieldName].identifierValue,
+          unsavedIdentifierTypes[identifierType.fieldName].initialValue,
+        ),
+      },
+    }));
+
+  const identifierTypeFields = useMemo(
+    () =>
+      filteredIdentifiers.map((identifierType) => {
+        const patientIdentifier = unsavedIdentifierTypes[identifierType.fieldName];
+        const isDisabled =
+          identifierType.isPrimary ||
+          identifierType.required ||
+          defaultPatientIdentifierTypesMap[identifierType.uuid] ||
+          // De-selecting shouldn't be allowed if the identifier was selected earlier and is present in the form.
+          // If the user wants to de-select an identifier-type already present in the form, they'll need to delete the particular identifier from the form itself.
+          values.identifiers[identifierType.fieldName];
+        const isDisabledOffline = isOffline && shouldBlockPatientIdentifierInOfflineMode(identifierType);
+
+        return (
+          <div key={identifierType.uuid} className={styles.space05}>
+            <Checkbox
+              id={identifierType.uuid}
+              value={identifierType.uuid}
+              labelText={identifierType.name}
+              onChange={(e, { checked }) => handleCheckingIdentifier(identifierType, checked)}
+              checked={!!patientIdentifier}
+              disabled={isDisabled || (isOffline && isDisabledOffline)}
+            />
+            {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, 
+                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
+                default is the first identifierSource
+              */
+              (!patientIdentifier.initialValue || patientIdentifier?.selectedSource) && (
+                <div className={styles.radioGroup}>
+                  <RadioButtonGroup
+                    legendText={t('source', 'Source')}
+                    name={`${identifierType?.fieldName}-identifier-sources`}
+                    defaultSelected={patientIdentifier?.selectedSource?.uuid}
+                    onChange={(sourceUuid: string) => handleSelectingIdentifierSource(identifierType, sourceUuid)}
+                    orientation="vertical">
+                    {identifierType?.identifierSources.map((source) => (
+                      <RadioButton
+                        key={source.uuid}
+                        labelText={source.name}
+                        name={source.uuid}
+                        value={source.uuid}
+                        className={styles.radioButton}
+                        disabled={
+                          isOffline &&
+                          isUniqueIdentifierTypeForOffline(identifierType) &&
+                          source.autoGenerationOption?.manualEntryEnabled
+                        }
+                      />
+                    ))}
+                  </RadioButtonGroup>
+                </div>
+              )}
+          </div>
+        );
+      }),
+    [
+      filteredIdentifiers,
+      unsavedIdentifierTypes,
+      defaultPatientIdentifierTypesMap,
+      values.identifiers,
+      isOffline,
+      handleCheckingIdentifier,
+      t,
+    ],
+  );
+
+  const handleConfiguringIdentifiers = useCallback(() => {
+    setFieldValue('identifiers', unsavedIdentifierTypes);
+    closeOverlay();
+  }, [unsavedIdentifierTypes, setFieldValue, closeOverlay]);
+
+  return (
+    <Overlay
+      close={closeOverlay}
+      header={t('configureIdentifiers', 'Configure identifiers')}
+      buttonsGroup={
+        <ButtonSet className={isDesktop(layout) ? styles.desktop : styles.tablet}>
+          <Button className={styles.button} kind="secondary" onClick={closeOverlay}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.button} kind="primary" onClick={handleConfiguringIdentifiers}>
+            {t('configureIdentifiers', 'Configure identifiers')}
+          </Button>
+        </ButtonSet>
+      }>
+      <div>
+        <p className={styles.bodyLong02}>
+          {t('IDInstructions', "Select the identifiers you'd like to add for this patient:")}
+        </p>
+        {identifierTypes.length > 7 && (
+          <div className={styles.space05}>
+            <Search
+              labelText={t('searchIdentifierPlaceholder', 'Search identifier')}
+              placeholder={t('searchIdentifierPlaceholder', 'Search identifier')}
+              onChange={handleSearch}
+              value={searchString}
+            />
+          </div>
+        )}
+        <fieldset>{identifierTypeFields}</fieldset>
+      </div>
+    </Overlay>
+  );
+};
+
+export default PatientIdentifierOverlay;

package/src/patient-registration/field/id/identifier-selection.scss

@@ -0,0 +1,37 @@
+@use '@carbon/styles/scss/spacing';
+@import '../../patient-registration.scss';
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: 1.5rem 1rem;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.radioGroup {
+  background-color: $ui-01;
+  padding: spacing.$spacing-05;
+}
+
+.radioButton {
+  margin: 0 !important;
+  label {
+    height: spacing.$spacing-07;
+  }
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .radioButton label {
+    height: spacing.$spacing-09 !important;
+  }
+}

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

@@ -0,0 +1,142 @@
+import React, { useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContentSwitcher, Switch } from '@carbon/react';
+import { useField } from 'formik';
+import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import { Input } from '../../input/basic-input/input/input.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import styles from '../field.scss';
+import { type RegistrationConfig } from '../../../config-schema';
+
+export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
+const containsNoNumbers = /^([^0-9]*)$/;
+
+function checkNumber(value: string) {
+  if (!containsNoNumbers.test(value)) {
+    return 'numberInNameDubious';
+  }
+
+  return undefined;
+}
+
+export const NameField = () => {
+  const { t } = useTranslation();
+  const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext);
+  const {
+    fieldConfigurations: {
+      name: {
+        displayCapturePhoto,
+        allowUnidentifiedPatients,
+        defaultUnknownGivenName,
+        defaultUnknownFamilyName,
+        displayMiddleName,
+        displayReverseFieldOrder,
+      },
+    },
+  } = useConfig<RegistrationConfig>();
+
+  const [{ value: isPatientUnknownValue }, , { setValue: setUnknownPatient }] = useField<string>(
+    `attributes.${unidentifiedPatientAttributeTypeUuid}`,
+  );
+
+  const isPatientUnknown = isPatientUnknownValue === 'true';
+
+  const onCapturePhoto = useCallback(
+    (dataUri: string, photoDateTime: string) => {
+      if (setCapturePhotoProps) {
+        setCapturePhotoProps({
+          imageData: dataUri,
+          dateTime: photoDateTime,
+        });
+      }
+    },
+    [setCapturePhotoProps],
+  );
+
+  const toggleNameKnown = (e) => {
+    if (e.name === 'known') {
+      setFieldValue('givenName', '');
+      setFieldValue('familyName', '');
+      setUnknownPatient('false');
+    } else {
+      setFieldValue('givenName', defaultUnknownGivenName);
+      setFieldValue('familyName', defaultUnknownFamilyName);
+      setUnknownPatient('true');
+    }
+  };
+
+  const firstNameField = (
+    <Input
+      id="givenName"
+      name="givenName"
+      labelText={t('givenNameLabelText', 'First Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
+  const middleNameField = displayMiddleName && (
+    <Input
+      id="middleName"
+      name="middleName"
+      labelText={t('middleNameLabelText', 'Middle Name')}
+      checkWarning={checkNumber}
+    />
+  );
+
+  const familyNameField = (
+    <Input
+      id="familyName"
+      name="familyName"
+      labelText={t('familyNameLabelText', 'Family Name')}
+      checkWarning={checkNumber}
+      required
+    />
+  );
+
+  return (
+    <div>
+      <h4 className={styles.productiveHeading02Light}>{t('fullNameLabelText', 'Full Name')}</h4>
+      <div className={styles.grid}>
+        {displayCapturePhoto && (
+          <ExtensionSlot
+            className={styles.photoExtension}
+            name="capture-patient-photo-slot"
+            state={{ onCapturePhoto, initialState: currentPhoto }}
+          />
+        )}
+
+        <div className={styles.nameField}>
+          {(allowUnidentifiedPatients || isPatientUnknown) && (
+            <>
+              <div className={styles.dobContentSwitcherLabel}>
+                <span className={styles.label01}>{t('patientNameKnown', "Patient's Name is Known?")}</span>
+              </div>
+              <ContentSwitcher
+                className={styles.contentSwitcher}
+                selectedIndex={isPatientUnknown ? 1 : 0}
+                onChange={toggleNameKnown}>
+                <Switch name="known" text={t('yes', 'Yes')} />
+                <Switch name="unknown" text={t('no', 'No')} />
+              </ContentSwitcher>
+            </>
+          )}
+          {!isPatientUnknown &&
+            (!displayReverseFieldOrder ? (
+              <>
+                {firstNameField}
+                {middleNameField}
+                {familyNameField}
+              </>
+            ) : (
+              <>
+                {familyNameField}
+                {middleNameField}
+                {firstNameField}
+              </>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,204 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { Field } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { type ConceptResponse } from '../../patient-registration.types';
+import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
+import { Input } from '../../input/basic-input/input/input.component';
+import { useConcept, useConceptAnswers } from '../field.resource';
+import styles from './../field.scss';
+
+export interface ObsFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export function ObsField({ fieldDefinition }: ObsFieldProps) {
+  const { t } = useTranslation();
+  const { data: concept, isLoading } = useConcept(fieldDefinition.uuid);
+
+  const config = useConfig<RegistrationConfig>();
+
+  if (!config.registrationObs.encounterTypeUuid) {
+    console.error(
+      'The registration form has been configured to have obs fields, ' +
+        'but no registration encounter type has been configured. Obs fields ' +
+        'will not be displayed.',
+    );
+    return null;
+  }
+
+  if (isLoading) {
+    return null;
+  }
+
+  switch (concept.datatype.display) {
+    case 'Text':
+      return (
+        <TextObsField
+          concept={concept}
+          validationRegex={fieldDefinition.validation.matches}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+        />
+      );
+    case 'Numeric':
+      return (
+        <NumericObsField
+          concept={concept}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+        />
+      );
+    case 'Coded':
+      return (
+        <CodedObsField
+          concept={concept}
+          answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+          customConceptAnswers={fieldDefinition.customConceptAnswers}
+        />
+      );
+    default:
+      return (
+        <InlineNotification kind="error" title="Error">
+          {t(
+            'obsFieldUnknownDatatype',
+            `Concept for obs field '{{fieldDefinitionId}}' has unknown datatype '{{datatypeName}}'`,
+            { fieldDefinitionId: fieldDefinition.id, datatypeName: concept.datatype.display },
+          )}
+        </InlineNotification>
+      );
+  }
+}
+
+interface TextObsFieldProps {
+  concept: ConceptResponse;
+  validationRegex: string;
+  label: string;
+  required?: boolean;
+}
+
+function TextObsField({ concept, validationRegex, label, required }: TextObsFieldProps) {
+  const { t } = useTranslation();
+
+  const validateInput = (value: string) => {
+    if (!value || !validationRegex || validationRegex === '' || typeof validationRegex !== 'string' || value === '') {
+      return;
+    }
+    const regex = new RegExp(validationRegex);
+    if (regex.test(value)) {
+      return;
+    } else {
+      return t('invalidInput', 'Invalid Input');
+    }
+  };
+
+  const fieldName = `obs.${concept.uuid}`;
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Field name={fieldName} validate={validateInput}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldName}
+              labelText={label ?? concept.display}
+              required={required}
+              invalid={errors[fieldName] && touched[fieldName]}
+              {...field}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+}
+
+interface NumericObsFieldProps {
+  concept: ConceptResponse;
+  label: string;
+  required?: boolean;
+}
+
+function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
+  const fieldName = `obs.${concept.uuid}`;
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Field name={fieldName}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldName}
+              labelText={label ?? concept.display}
+              required={required}
+              invalid={errors[fieldName] && touched[fieldName]}
+              type="number"
+              {...field}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+}
+
+interface CodedObsFieldProps {
+  concept: ConceptResponse;
+  answerConceptSetUuid?: string;
+  label?: string;
+  required?: boolean;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
+}
+
+function CodedObsField({ concept, answerConceptSetUuid, label, required, customConceptAnswers }: CodedObsFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `obs.${concept.uuid}`;
+
+  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
+    customConceptAnswers.length ? '' : answerConceptSetUuid ?? concept.uuid,
+  );
+
+  const answers = useMemo(
+    () =>
+      customConceptAnswers.length
+        ? customConceptAnswers
+        : isLoadingConceptAnswers
+          ? []
+          : conceptAnswers.map((answer) => ({ ...answer, label: answer.display })),
+    [customConceptAnswers, conceptAnswers, isLoadingConceptAnswers],
+  );
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      {!isLoadingConceptAnswers ? (
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            return (
+              <Layer>
+                <Select
+                  id={fieldName}
+                  name={fieldName}
+                  labelText={label ?? concept?.display}
+                  required={required}
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  {...field}>
+                  <SelectItem
+                    key={`no-answer-select-item-${fieldName}`}
+                    value={''}
+                    text={t('selectAnOption', 'Select an option')}
+                  />
+                  {answers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                  ))}
+                </Select>
+              </Layer>
+            );
+          }}
+        </Field>
+      ) : null}
+    </div>
+  );
+}