@digihmis/esm-patient-registration-app 1.0.0

package/src/checkin-form/hooks/useDefaultFacilityLocation.ts

@@ -0,0 +1,15 @@
+import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type ChartConfig } from '../../config-schema';
+
+export const useDefaultFacilityLocation = () => {
+  const config = useConfig() as ChartConfig;
+  const apiUrl = config.defaultFacilityUrl;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    defaultFacility: data ? data?.data : null,
+    isLoading: isLoading,
+    error: error,
+  };
+};

package/src/checkin-form/hooks/useDefaultVisitLocation.ts

@@ -0,0 +1,24 @@
+import { type FetchResponse, type Location, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useEffect } from 'react';
+import useSWR from 'swr';
+
+/**
+ * Fetches the default visit location based on the location and the restrictByVisitLocationTag
+ * If restrictByVisitLocationTag is true, it fetches the nearest ancestor location that supports visits, otherwise it returns the passed-in location
+ *
+ * @param location
+ * @param restrictByVisitLocationTag
+ */
+export function useDefaultVisitLocation(location: Location, restrictByVisitLocationTag: boolean) {
+  let url = `${restBaseUrl}/emrapi/locationThatSupportsVisits?location=${location?.uuid}`;
+
+  const { data, error } = useSWR<FetchResponse>(restrictByVisitLocationTag ? url : null, openmrsFetch);
+
+  useEffect(() => {
+    if (error) {
+      console.error(error);
+    }
+  }, [error]);
+
+  return !restrictByVisitLocationTag ? location : data?.data;
+}

package/src/checkin-form/hooks/useOfflineVisitType.ts

@@ -0,0 +1,18 @@
+import { type VisitType, useConfig } from '@openmrs/esm-framework';
+import { type ChartConfig } from '../../config-schema';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useOfflineVisitType = () => {
+  const config = useConfig() as ChartConfig;
+  const { t } = useTranslation();
+  const [visitTypes, setVisitTypes] = useState<Array<VisitType>>([]);
+
+  useEffect(() => {
+    setVisitTypes([
+      { uuid: config.offlineVisitTypeUuid, name: 'Offline Visit', display: t('offlineVisit', 'Offline Visit') },
+    ]);
+  }, [t, config.offlineVisitTypeUuid]);
+
+  return visitTypes;
+};

package/src/checkin-form/hooks/usePatientHistory.ts

@@ -0,0 +1,40 @@
+import { openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+export const usePatientVisitHistory = (patientUuid: string) => {
+  const { data, error, isValidating } = useSWR<{
+    data: { results: Array<Visit> };
+  }>(patientUuid ? `${restBaseUrl}/visit?patient=${patientUuid}&v=default` : null, openmrsFetch);
+
+  const visitHistory = useMemo(() => {
+    if (!data) {
+      return null;
+    }
+
+    const visits = data.data.results || [];
+    const activeVisits = visits.filter((v) => !v.voided);
+
+    return {
+      totalVisits: activeVisits.length,
+      isNewPatient: activeVisits.length === 0,
+      isRevisit: activeVisits.length > 0,
+      visits: activeVisits,
+      firstVisit:
+        activeVisits.length > 0
+          ? activeVisits.sort((a, b) => new Date(a.startDatetime).getTime() - new Date(b.startDatetime).getTime())[0]
+          : null,
+      lastVisit:
+        activeVisits.length > 0
+          ? activeVisits.sort((a, b) => new Date(b.startDatetime).getTime() - new Date(a.startDatetime).getTime())[0]
+          : null,
+    };
+  }, [data]);
+
+  return {
+    visitHistory,
+    isLoading: !data && !error,
+    error,
+    isValidating,
+  };
+};

package/src/checkin-form/hooks/useRecommendedVisitTypes.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { type ChartConfig } from '../../config-schema';
+
+interface EnrollmentVisitType {
+  dataDependencies: Array<string>;
+  enrollmentOptions: object;
+  incompatibleWith: Array<string>;
+  name: string;
+  visitTypes: { allowed: Array<EnrollmentVisitType>; disallowed: Array<EnrollmentVisitType> };
+}
+
+export const useRecommendedVisitTypes = (
+  patientUuid: string,
+  enrollmentUuid: string,
+  programUuid: string,
+  locationUuid: string,
+) => {
+  const { visitTypeResourceUrl, showRecommendedVisitTypeTab } = useConfig() as ChartConfig;
+  const url = `${visitTypeResourceUrl}${patientUuid}/program/${programUuid}/enrollment/${enrollmentUuid}?intendedLocationUuid=${locationUuid}`;
+
+  const { data, error, isLoading } = useSWR<{ data: EnrollmentVisitType }>(
+    showRecommendedVisitTypeTab && patientUuid && enrollmentUuid && programUuid ? url : null,
+    openmrsFetch,
+  );
+
+  const recommendedVisitTypes = useMemo(() => data?.data?.visitTypes?.allowed.map(mapToVisitType) ?? [], [data]);
+  return { recommendedVisitTypes, error, isLoading };
+};
+
+const mapToVisitType = (visitType) => {
+  return { ...visitType, display: visitType.name };
+};

package/src/checkin-form/hooks/useVisitAttributeType.ts

@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+interface VisitAttributeType {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string | null;
+  datatypeClassname:
+    | 'org.openmrs.customdatatype.datatype.ConceptDatatype'
+    | 'org.openmrs.customdatatype.datatype.FloatDatatype'
+    | 'org.openmrs.customdatatype.datatype.BooleanDatatype'
+    | 'org.openmrs.customdatatype.datatype.LongFreeTextDatatype'
+    | 'org.openmrs.customdatatype.datatype.FreeTextDatatype'
+    | 'org.openmrs.customdatatype.datatype.DateDatatype';
+  datatypeConfig: string;
+  preferredHandlerClassname: any;
+  retired: boolean;
+}
+
+interface Concept {
+  uuid: string;
+  name: {
+    display: string;
+  };
+  display: string;
+  answers: Array<{
+    display: string;
+    uuid: string;
+  }>;
+}
+
+const visitAttributeTypeCustomRepresentation =
+  'custom:(uuid,display,name,description,datatypeClassname,datatypeConfig)';
+
+export function useVisitAttributeTypes() {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<{ results: VisitAttributeType[] }>, Error>(
+    `${restBaseUrl}/visitattributetype?v=${visitAttributeTypeCustomRepresentation}`,
+    openmrsFetch,
+  );
+
+  if (error) {
+    console.error('Failed to fetch visit attribute types: ', error);
+  }
+
+  const results = useMemo(
+    () => ({
+      isLoading,
+      error,
+      visitAttributeTypes: data?.data?.results ?? [],
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}
+
+export function useVisitAttributeType(uuid) {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<VisitAttributeType>, Error>(
+    `${restBaseUrl}/visitattributetype/${uuid}?v=${visitAttributeTypeCustomRepresentation}`,
+    openmrsFetch,
+  );
+
+  if (error) {
+    console.error(`Failed to fetch visit attribute type ${uuid}: `, error);
+  }
+
+  const results = useMemo(
+    () => ({
+      isLoading,
+      error: error,
+      data: data?.data,
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}
+
+export function useConceptAnswersForVisitAttributeType(conceptUuid) {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<Concept>, Error>(
+    conceptUuid ? `${restBaseUrl}/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+
+  if (error) {
+    console.error(`Failed to fetch concept answers for visit attribute type ${conceptUuid}: `, error);
+  }
+
+  const results = useMemo(
+    () => ({
+      isLoading,
+      error: error,
+      data: data?.data,
+      answers: data?.data?.answers,
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}

package/src/checkin-form/location-selector.component.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash-es/isEmpty';
+import { ComboBox } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type Control, Controller } from 'react-hook-form';
+import {
+  type Location,
+  type OpenmrsResource,
+  useConfig,
+  useFeatureFlag,
+  useLocations,
+  useSession,
+} from '@openmrs/esm-framework';
+import styles from './checkin-form.scss';
+import { type VisitFormData } from './visit-form.resource';
+import { useDefaultVisitLocation } from './hooks/useDefaultVisitLocation';
+import { useDefaultFacilityLocation } from './hooks/useDefaultFacilityLocation';
+import { ChartConfig } from '../config-schema';
+
+interface LocationSelectorProps {
+  control: Control<VisitFormData>;
+}
+
+const LocationSelector: React.FC<LocationSelectorProps> = ({ control }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ChartConfig>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const sessionLocation = useSession().sessionLocation;
+  const isEmrApiModuleInstalled = useFeatureFlag('emrapi-module');
+  const defaultVisitLocation = useDefaultVisitLocation(
+    sessionLocation,
+    config.restrictByVisitLocationTag && isEmrApiModuleInstalled,
+  );
+  const locations = useLocations(
+    config.restrictByVisitLocationTag && isEmrApiModuleInstalled ? 'Visit Location' : null,
+    searchTerm,
+  );
+  const { defaultFacility, isLoading: loadingDefaultFacility } = useDefaultFacilityLocation();
+  const disableChangingVisitLocation = config?.disableChangingVisitLocation;
+  const locationsToShow: Array<OpenmrsResource> =
+    !loadingDefaultFacility && !isEmpty(defaultFacility) ? [defaultFacility] : locations ? locations : [];
+
+  const handleSearch = (searchString) => {
+    setSearchTerm(searchString);
+  };
+
+  useEffect(() => {
+    if (config.restrictByVisitLocationTag && !isEmrApiModuleInstalled) {
+      console.warn('EMR API module is not installed. Visit location will not be restricted by location tag.');
+    }
+  }, [config.restrictByVisitLocationTag, isEmrApiModuleInstalled]);
+
+  return (
+    <section data-testid="combo">
+      <div className={styles.sectionTitle}>{t('visitLocation', 'Visit Location')}</div>
+      <div className={classNames(styles.selectContainer, styles.sectionField)}>
+        {!disableChangingVisitLocation ? (
+          <Controller
+            control={control}
+            name="visitLocation"
+            render={({ field: { onBlur, onChange, value } }) => (
+              <ComboBox
+                aria-label={t('selectLocation', 'Select a location')}
+                id="location"
+                invalidText={t('required', 'Required')}
+                items={locationsToShow}
+                itemToString={(location: Location) => location?.display}
+                onBlur={onBlur}
+                onChange={({ selectedItem }) => onChange(selectedItem)}
+                onInputChange={(searchTerm) => handleSearch(searchTerm)}
+                readOnly={disableChangingVisitLocation}
+                selectedItem={value}
+                titleText={t('selectLocation', 'Select a location')}
+              />
+            )}
+          />
+        ) : (
+          <p className={styles.bodyShort02}>{defaultVisitLocation?.display}</p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default LocationSelector;

package/src/checkin-form/recommended-visit-type.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StructuredListSkeleton } from '@carbon/react';
+import { type PatientProgram } from '@openmrs/esm-patient-common-lib';
+import BaseVisitType from './base-visit-type.component';
+import { useRecommendedVisitTypes } from './hooks/useRecommendedVisitTypes';
+
+interface RecommendedVisitTypeProp {
+  patientUuid: string;
+  patientProgramEnrollment: PatientProgram;
+  locationUuid: string;
+}
+
+const RecommendedVisitType: React.FC<RecommendedVisitTypeProp> = ({
+  patientUuid,
+  patientProgramEnrollment,
+  locationUuid,
+}) => {
+  const { recommendedVisitTypes, isLoading } = useRecommendedVisitTypes(
+    patientUuid,
+    patientProgramEnrollment?.uuid,
+    patientProgramEnrollment?.program?.uuid,
+    locationUuid,
+  );
+
+  return (
+    <div style={{ marginTop: '0.625rem' }}>
+      {isLoading ? <StructuredListSkeleton /> : <BaseVisitType visitTypes={recommendedVisitTypes} />}
+    </div>
+  );
+};
+
+export const MemoizedRecommendedVisitType = React.memo(RecommendedVisitType);

package/src/checkin-form/visit-attribute-type.component.tsx

@@ -0,0 +1,256 @@
+import React, { useEffect, useId, useMemo } from 'react';
+import {
+  Checkbox,
+  NumberInput,
+  Select,
+  SelectItem,
+  SelectSkeleton,
+  TextArea,
+  TextInput,
+  TextInputSkeleton,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Controller, type ControllerFieldState, type ControllerRenderProps, useFormContext } from 'react-hook-form';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+import styles from './visit-attribute-type.scss';
+import { useConceptAnswersForVisitAttributeType, useVisitAttributeType } from './hooks/useVisitAttributeType';
+import { VisitFormData } from './visit-form.resource';
+import { ChartConfig } from '../config-schema';
+
+interface VisitAttributes {
+  [uuid: string]: string;
+}
+
+interface VisitAttributeTypeFieldsProps {
+  setErrorFetchingResources: React.Dispatch<
+    React.SetStateAction<{
+      blockSavingForm: boolean;
+    }>
+  >;
+}
+
+/**
+ * Evaluates a given expression using the provided visitAttributes.
+ *
+ * @param {string} expression - The expression to be evaluated. This should be a string of JavaScript code.
+ * @param {VisitAttributes} visitAttributes - An object containing visit attributes which will be used in the evaluation of the expression.
+ *
+ * @returns {boolean} - The boolean value of the result of the evaluated expression.
+ *
+ */
+function evaluateExpression(expression: string, visitAttributes: VisitAttributes) {
+  const func = new Function('visitAttributes', `return ${expression};`);
+
+  const result = func(visitAttributes);
+
+  return Boolean(result);
+}
+
+const VisitAttributeTypeFields: React.FC<VisitAttributeTypeFieldsProps> = ({ setErrorFetchingResources }) => {
+  const { visitAttributeTypes } = useConfig<ChartConfig>();
+  const { control, getValues } = useFormContext<VisitFormData>();
+
+  if (visitAttributeTypes?.length) {
+    return (
+      <>
+        {visitAttributeTypes.map((attributeType) => {
+          const { visitAttributes } = getValues();
+
+          const showAttributeType = attributeType?.showWhenExpression
+            ? evaluateExpression(attributeType?.showWhenExpression, visitAttributes)
+            : true;
+
+          return (
+            showAttributeType && (
+              <Controller
+                key={attributeType.uuid}
+                name={`visitAttributes.${attributeType.uuid}`}
+                control={control}
+                render={({ field, fieldState }) => (
+                  <AttributeTypeField
+                    key={attributeType.uuid}
+                    attributeType={attributeType}
+                    setErrorFetchingResources={setErrorFetchingResources}
+                    fieldProps={field}
+                    fieldState={fieldState}
+                  />
+                )}
+              />
+            )
+          );
+        })}
+      </>
+    );
+  }
+
+  return null;
+};
+
+interface AttributeTypeFieldProps {
+  fieldProps: ControllerRenderProps<VisitFormData, `visitAttributes.${string}`>;
+  fieldState: ControllerFieldState;
+  attributeType: {
+    uuid: string;
+    required: boolean;
+  };
+  setErrorFetchingResources: React.Dispatch<
+    React.SetStateAction<{
+      blockSavingForm: boolean;
+    }>
+  >;
+}
+
+const AttributeTypeField: React.FC<AttributeTypeFieldProps> = ({
+  attributeType,
+  setErrorFetchingResources,
+  fieldProps,
+  fieldState,
+}) => {
+  const { uuid, required } = attributeType;
+  const { data, isLoading, error: errorFetchingVisitAttributeType } = useVisitAttributeType(uuid);
+  const {
+    answers,
+    isLoading: isLoadingAnswers,
+    error: errorFetchingVisitAttributeAnswers,
+  } = useConceptAnswersForVisitAttributeType(data?.datatypeConfig);
+  const { t } = useTranslation();
+  const baseId = useId();
+  const labelText = !required ? `${data?.display} (${t('optional', 'optional')})` : data?.display;
+
+  const {
+    formState: { errors },
+  } = useFormContext<VisitFormData>();
+
+  useEffect(() => {
+    if (errorFetchingVisitAttributeType || errorFetchingVisitAttributeAnswers) {
+      setErrorFetchingResources((prev) => ({
+        blockSavingForm: prev?.blockSavingForm || required,
+      }));
+    }
+  }, [errorFetchingVisitAttributeAnswers, errorFetchingVisitAttributeType, required, setErrorFetchingResources]);
+
+  const fieldToRender = useMemo(() => {
+    if (isLoading) {
+      return <></>;
+    }
+
+    if (errorFetchingVisitAttributeType) {
+      return null;
+    }
+
+    switch (data?.datatypeClassname) {
+      case 'org.openmrs.customdatatype.datatype.ConceptDatatype':
+        if (isLoadingAnswers) {
+          return <SelectSkeleton />;
+        }
+
+        if (errorFetchingVisitAttributeAnswers) {
+          return null;
+        }
+
+        return (
+          <Select
+            id={`select-${baseId}`}
+            {...fieldProps}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}>
+            <SelectItem text={t('selectAnOption', 'Select an option')} value={''} />
+            {answers.map((ans, indx) => (
+              <SelectItem key={indx} text={ans.display} value={ans.uuid} />
+            ))}
+          </Select>
+        );
+      case 'org.openmrs.customdatatype.datatype.FloatDatatype':
+        return (
+          <NumberInput
+            {...fieldProps}
+            id={`number-${baseId}`}
+            label={labelText}
+            hideSteppers
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.FreeTextDatatype':
+        return (
+          <TextInput
+            {...fieldProps}
+            id={`text-${baseId}`}
+            labelText={labelText}
+            placeholder={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.LongFreeTextDatatype':
+        return (
+          <TextArea
+            {...fieldProps}
+            id={`textarea-${baseId}`}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.BooleanDatatype':
+        return (
+          <Checkbox
+            {...fieldProps}
+            id={`checkbox-${baseId}`}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.DateDatatype':
+        return (
+          <OpenmrsDatePicker
+            {...fieldProps}
+            id={`date-${baseId}`}
+            labelText={labelText}
+            aria-invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      default:
+        return (
+          <TextInput
+            {...fieldProps}
+            id={`text-${baseId}`}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+    }
+  }, [
+    isLoading,
+    errorFetchingVisitAttributeType,
+    data?.datatypeClassname,
+    isLoadingAnswers,
+    errorFetchingVisitAttributeAnswers,
+    baseId,
+    fieldProps,
+    labelText,
+    fieldState?.error?.message,
+    t,
+    answers,
+  ]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.visitAttributeField}>
+        <TextInputSkeleton />
+      </div>
+    );
+  }
+
+  if (errorFetchingVisitAttributeType) {
+    return null;
+  }
+
+  return <div className={styles.visitAttributeField}>{fieldToRender}</div>;
+};
+
+export default VisitAttributeTypeFields;

package/src/checkin-form/visit-attribute-type.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.visitAttributeField {
+  margin-bottom: layout.$spacing-05;
+}