@digihmis/esm-patient-registration-app 1.0.0

package/src/checkin-form/visit-date-time.component.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { type Control, Controller, type FieldPath, useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { type amPm } from '@openmrs/esm-patient-common-lib';
+import { OpenmrsDatePicker, ResponsiveWrapper } from '@openmrs/esm-framework';
+import { convertToDate, type VisitFormData } from './visit-form.resource';
+import styles from './checkin-form.scss';
+
+// Helpers to safely compute min/max across optional values
+const minOf = (...values: Array<number | undefined | null>) => {
+  const nums = values.filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  return nums.length ? Math.min(...nums) : undefined;
+};
+
+const maxOf = (...values: Array<number | undefined | null>) => {
+  const nums = values.filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  return nums.length ? Math.max(...nums) : undefined;
+};
+
+interface VisitDateTimeSectionProps {
+  control: Control<VisitFormData, any>;
+  firstEncounterDateTime: number;
+  lastEncounterDateTime: number;
+}
+
+/**
+ * The component conditionally renders the Visit start and end
+ * date / time fields based on the visit status (new / ongoing / past)
+ */
+const VisitDateTimeSection: React.FC<VisitDateTimeSectionProps> = ({
+  control,
+  firstEncounterDateTime,
+  lastEncounterDateTime,
+}) => {
+  const { t } = useTranslation();
+  const [
+    visitStatus,
+    visitStartDate,
+    visitStartTime,
+    visitStartTimeFormat,
+    visitStopDate,
+    visitStopTime,
+    visitStopTimeFormat,
+  ] = useWatch({
+    control,
+    name: [
+      'visitStatus',
+      'visitStartDate',
+      'visitStartTime',
+      'visitStartTimeFormat',
+      'visitStopDate',
+      'visitStopTime',
+      'visitStopTimeFormat',
+    ],
+  });
+
+  const hasStopTime = 'past' === visitStatus;
+  const selectedVisitStartDateTime = convertToDate(visitStartDate, visitStartTime, visitStartTimeFormat);
+  const selectedVisitStopDateTime = convertToDate(visitStopDate, visitStopTime, visitStopTimeFormat);
+
+  if (visitStatus === 'new') {
+    return null;
+  }
+
+  return (
+    <section>
+      <div className={styles.sectionTitle}>
+        {visitStatus === 'ongoing'
+          ? t('visitStartDate', 'Visit start date')
+          : t('visitStartAndEndDate', 'Visit start and end date')}
+      </div>
+      <VisitDateTimeField
+        dateField={{ name: 'visitStartDate', label: t('startDate', 'Start date') }}
+        timeField={{ name: 'visitStartTime', label: t('startTime', 'Start time') }}
+        timeFormatField={{ name: 'visitStartTimeFormat', label: t('startTimeFormat', 'Start time format') }}
+        maxDate={minOf(Date.now(), firstEncounterDateTime, selectedVisitStopDateTime?.getTime())}
+      />
+      {hasStopTime && (
+        <VisitDateTimeField
+          dateField={{ name: 'visitStopDate', label: t('endDate', 'End date') }}
+          timeField={{ name: 'visitStopTime', label: t('endTime', 'End time') }}
+          timeFormatField={{ name: 'visitStopTimeFormat', label: t('endTimeFormat', 'End time format') }}
+          minDate={maxOf(lastEncounterDateTime, selectedVisitStartDateTime?.getTime())}
+          maxDate={Date.now()}
+        />
+      )}
+    </section>
+  );
+};
+
+interface VisitDateTimeFieldProps {
+  dateField: Field;
+  timeField: Field;
+  timeFormatField: Field;
+  minDate?: dayjs.ConfigType;
+  maxDate?: dayjs.ConfigType;
+  disabled?: boolean;
+}
+
+interface Field {
+  name: FieldPath<VisitFormData>;
+  label: string;
+}
+
+/**
+ * This components renders a DatePicker, TimePicker and AM / PM dropdown
+ * used to input a Date.
+ * It is used by the visit form for the start and end time inputs.
+ */
+const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
+  dateField,
+  timeField,
+  timeFormatField,
+  minDate,
+  maxDate,
+  disabled,
+}) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<VisitFormData>();
+  const { t } = useTranslation();
+
+  // Since we have the separate date and time fields, the full validation is done by zod.
+  // We are just using minDateObj and maxDateObj to restrict the bounds of the DatePicker.
+  const minDateObj = minDate ? dayjs(minDate).startOf('day') : null;
+  const maxDateObj = maxDate ? dayjs(maxDate).endOf('day') : null;
+
+  return (
+    <div className={classNames(styles.dateTimeSection, styles.sectionField)}>
+      <Controller
+        name={dateField.name}
+        control={control}
+        render={({ field, fieldState }) => (
+          <ResponsiveWrapper>
+            <OpenmrsDatePicker
+              {...field}
+              value={field.value as Date}
+              className={styles.datePicker}
+              id={`${dateField.name}Input`}
+              data-testid={`${dateField.name}Input`}
+              maxDate={maxDateObj}
+              minDate={minDateObj}
+              labelText={dateField.label}
+              invalid={Boolean(fieldState?.error?.message)}
+              invalidText={fieldState?.error?.message}
+            />
+          </ResponsiveWrapper>
+        )}
+      />
+      <ResponsiveWrapper>
+        <Controller
+          name={timeField.name}
+          control={control}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <div className={styles.timePickerContainer}>
+              <TimePicker
+                className={styles.timePicker}
+                disabled={disabled}
+                id={timeField.name}
+                invalid={Boolean(errors[timeField.name])}
+                invalidText={errors[timeField.name]?.message}
+                labelText={timeField.label}
+                onBlur={onBlur}
+                onChange={(event) => onChange(event.target.value)}
+                pattern="^(0[1-9]|1[0-2]):([0-5][0-9])$"
+                value={value as string}>
+                <Controller
+                  name={timeFormatField.name}
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <TimePickerSelect
+                      aria-label={timeFormatField.label}
+                      className={classNames({
+                        [styles.timePickerSelectError]: errors[timeFormatField.name],
+                      })}
+                      disabled={disabled}
+                      id={`${timeFormatField.name}Input`}
+                      onChange={(event) => onChange(event.target.value as amPm)}
+                      value={value as amPm}>
+                      <SelectItem value="AM" text={t('AM', 'AM')} />
+                      <SelectItem value="PM" text={t('PM', 'PM')} />
+                    </TimePickerSelect>
+                  )}
+                />
+              </TimePicker>
+              {errors[timeFormatField.name] && (
+                <div className={styles.timerPickerError}>{errors[timeFormatField.name]?.message}</div>
+              )}
+            </div>
+          )}
+        />
+      </ResponsiveWrapper>
+    </div>
+  );
+};
+
+export default VisitDateTimeSection;

package/src/checkin-form/visit-form.resource.ts

@@ -0,0 +1,308 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import dayjs from 'dayjs';
+import { z } from 'zod';
+import {
+  openmrsFetch,
+  restBaseUrl,
+  useConfig,
+  useConnectivity,
+  useEmrConfiguration,
+  useFeatureFlag,
+  useSession,
+  useVisitTypes,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { time12HourFormatRegex, type amPm } from '@openmrs/esm-patient-common-lib';
+import { useDefaultVisitLocation } from './hooks/useDefaultVisitLocation';
+import { ChartConfig } from '../config-schema';
+import { useOfflineVisitType } from './hooks/useOfflineVisitType';
+
+export const visitStatuses = ['new', 'ongoing', 'past'] as const;
+export type VisitStatus = (typeof visitStatuses)[number];
+
+export type VisitFormData = {
+  visitStatus: VisitStatus;
+  visitStartDate: Date; // Date object that only contains info for year, month, day
+  visitStartTime: string; // hh:mm (note that hh is from 01 to 12, NOT 00 to 23)
+  visitStartTimeFormat: amPm;
+  visitStopDate: Date; // Date object that only contains info for year, month, day
+  visitStopTime: string; // hh:mm (note that hh is from 01 to 12, NOT 00 to 23)
+  visitStopTimeFormat: amPm;
+  programType: string;
+  visitType: string;
+  patientVisitType?: string; // UUID of the patient visit type (new/revisit) - optional field
+  visitLocation: {
+    display?: string;
+    uuid?: string;
+  };
+  visitAttributes: {
+    [x: string]: string;
+  };
+};
+
+// *****************
+// Copied from form-submission.service.ts
+// TODO: consolidate logic for parsing errors from REST API calls
+export type FieldError = {
+  [key: string]: Array<{ code: string; message: string }>;
+};
+
+export type ErrorObject = {
+  error: {
+    code: string;
+    message: string;
+    detail: string;
+    fieldErrors?: FieldError;
+    globalErrors?: FieldError;
+  };
+};
+
+export function extractErrorMessagesFromResponse(errorObject: ErrorObject, t: TFunction) {
+  const {
+    error: { fieldErrors, globalErrors, message, code },
+  } = errorObject ?? {};
+
+  if (fieldErrors) {
+    return Object.values(fieldErrors)
+      .flatMap((errors) => errors.map((error) => error.message))
+      .join('\n');
+  }
+
+  if (globalErrors) {
+    return Object.values(globalErrors)
+      .flatMap((errors) => errors.map((error) => error.message))
+      .join('\n');
+  }
+
+  return message ?? code ?? t('unknownError', 'Unknown error');
+}
+
+export function useConditionalVisitTypes() {
+  const isOnline = useConnectivity();
+
+  const visitTypesHook = isOnline ? useVisitTypes : useOfflineVisitType;
+
+  return visitTypesHook();
+}
+export interface VisitFormCallbacks {
+  onVisitCreatedOrUpdated: (visit: Visit) => Promise<any>;
+}
+
+export function useVisitFormCallbacks() {
+  return useState<Map<string, VisitFormCallbacks>>(new Map());
+}
+
+export function createVisitAttribute(visitUuid: string, attributeType: string, value: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}/attribute`, {
+    method: 'POST',
+    headers: { 'Content-type': 'application/json' },
+    body: { attributeType, value },
+  });
+}
+
+export function updateVisitAttribute(visitUuid: string, visitAttributeUuid: string, value: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}/attribute/${visitAttributeUuid}`, {
+    method: 'POST',
+    headers: { 'Content-type': 'application/json' },
+    body: { value },
+  });
+}
+
+export function deleteVisitAttribute(visitUuid: string, visitAttributeUuid: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}/attribute/${visitAttributeUuid}`, {
+    method: 'DELETE',
+  });
+}
+
+export function useVisitFormSchemaAndDefaultValues(visitToEdit: Visit) {
+  const { t } = useTranslation();
+  const { visitAttributeTypes, restrictByVisitLocationTag } = useConfig<ChartConfig>();
+  const isEmrApiModuleInstalled = useFeatureFlag('emrapi-module');
+  const sessionUser = useSession();
+  const sessionLocation = sessionUser?.sessionLocation;
+  const defaultVisitLocation = useDefaultVisitLocation(
+    sessionLocation,
+    restrictByVisitLocationTag && isEmrApiModuleInstalled,
+  );
+  const { emrConfiguration } = useEmrConfiguration();
+
+  return useMemo(() => {
+    const now = new Date();
+
+    const allEncounterDateTimes = (visitToEdit?.encounters ?? []).map(({ encounterDatetime }) =>
+      Date.parse(encounterDatetime),
+    );
+
+    const firstEncounterDateTime: number = Math.min(...allEncounterDateTimes);
+    const lastEncounterDateTime: number = Math.max(...allEncounterDateTimes);
+
+    const startDateTime = convertToDateTimeFields(visitToEdit?.startDatetime ?? now);
+    const stopDateTime = convertToDateTimeFields(visitToEdit?.stopDatetime ?? now);
+
+    const visitStatus: VisitStatus =
+      visitToEdit == null ? 'new' : visitToEdit.stopDatetime === null ? 'ongoing' : 'past';
+
+    const defaultValues: Partial<VisitFormData> = {
+      visitStatus,
+      visitStartDate: startDateTime.date,
+      visitStartTime: startDateTime.time,
+      visitStartTimeFormat: startDateTime.timeFormat,
+      visitStopDate: stopDateTime.date,
+      visitStopTime: stopDateTime.time,
+      visitStopTimeFormat: stopDateTime.timeFormat,
+      visitType: visitToEdit?.visitType?.uuid ?? emrConfiguration?.atFacilityVisitType?.uuid,
+      visitLocation: visitToEdit?.location ?? defaultVisitLocation ?? {},
+      visitAttributes:
+        visitToEdit?.attributes.reduce(
+          (acc, curr) => ({
+            ...acc,
+            [curr.attributeType.uuid]: typeof curr.value === 'object' ? curr?.value?.uuid : `${curr.value ?? ''}`,
+          }),
+          {},
+        ) ?? {},
+    };
+
+    const visitAttributes = (visitAttributeTypes ?? [])?.reduce(
+      (acc, { uuid, required }) => ({
+        ...acc,
+        [uuid]: required
+          ? z.string({ required_error: t('fieldRequired', 'This field is required') })
+          : z.string().optional(),
+      }),
+      {},
+    );
+
+    const visitStatusEnum = z.enum(visitStatuses);
+    const visitFormSchema = z
+      .object({
+        visitStatus: visitToEdit ? visitStatusEnum.exclude(['new']) : visitStatusEnum,
+        visitStartDate: z.date().optional(),
+        visitStartTime: z.string().regex(time12HourFormatRegex).optional(),
+        visitStartTimeFormat: z.enum(['PM', 'AM']).optional(),
+        visitStopDate: z.date().optional(),
+        visitStopTime: z.string().regex(time12HourFormatRegex).optional(),
+        visitStopTimeFormat: z.enum(['PM', 'AM']).optional(),
+        programType: z.string().optional(),
+        visitType: z.string({ required_error: t('visitTypeRequired', 'Visit type is required') }),
+        patientVisitType: z.string().optional(), // Optional patient visit type field
+        visitLocation: z.object({
+          display: z.string(),
+          uuid: z.string({ required_error: t('visitLocationRequired', 'Visit location is required') }),
+        }),
+        visitAttributes: z.object(visitAttributes),
+      })
+      .superRefine((data, ctx) => {
+        const {
+          visitStatus,
+          visitStartDate,
+          visitStartTime,
+          visitStartTimeFormat,
+          visitStopDate,
+          visitStopTime,
+          visitStopTimeFormat,
+        } = data;
+
+        const visitStartDateTime = convertToDate(visitStartDate, visitStartTime, visitStartTimeFormat);
+        const visitStopDateTime = convertToDate(visitStopDate, visitStopTime, visitStopTimeFormat);
+
+        if (visitStatus === 'ongoing' || visitStatus === 'past') {
+          if (visitStartDateTime === null) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('visitStartDateTimeRequired', 'Start date and time are required'),
+              path: ['visitStartDate'],
+            });
+          } else if (visitStartDateTime > now) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('futureStartTime', 'Start time cannot be in the future'),
+              path: ['visitStartTime'],
+            });
+          } else if (visitStartDateTime.getTime() > firstEncounterDateTime) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t(
+                'visitStartDateMustBeBeforeEarliestEncounter',
+                'Start time must be on or before {{firstEncounterDatetime}}',
+                {
+                  firstEncounterDatetime: new Date(firstEncounterDateTime).toLocaleString(),
+                  interpolation: {
+                    escapeValue: false,
+                  },
+                },
+              ),
+              path: ['visitStartTime'],
+            });
+          }
+        }
+
+        if (visitStatus === 'past') {
+          if (visitStopDateTime === null) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('endDateTimeRequired', 'End date and time are required'),
+              path: ['visitStopDate'],
+            });
+          } else if (visitStopDateTime > now) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('futureEndTime', 'End time cannot be in the future'),
+              path: ['visitStopTime'],
+            });
+          } else if (visitStopDateTime < visitStartDateTime) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('endTimeMustBeAfterStartTime', 'End time must be after start time'),
+              path: ['visitStopDate'],
+            });
+          } else if (visitStopDateTime.getTime() < lastEncounterDateTime) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t(
+                'endTimeMustBeAfterMostRecentEncounter',
+                'End time must be on or after {{lastEncounterDatetime}}',
+                {
+                  lastEncounterDatetime: new Date(lastEncounterDateTime).toLocaleString(),
+                  interpolation: {
+                    escapeValue: false,
+                  },
+                },
+              ),
+              path: ['visitStopTime'],
+            });
+          }
+        }
+      });
+
+    return { visitFormSchema, defaultValues, firstEncounterDateTime, lastEncounterDateTime };
+  }, [t, visitAttributeTypes, visitToEdit, defaultVisitLocation, emrConfiguration]);
+}
+
+// Returns a Date object based on date, time and am/pm inputs from user.
+// Note that the inputs are expected to be in local time.
+// Returns a non-null Date only is the inputs are valid
+export const convertToDate = (
+  date: Date, // Date object that only contains info for year, month, day
+  time12h: string, // hh:mm, where hh is 01 to 12
+  timeFormat: amPm, // AM / PM
+): Date | null => {
+  if (!date || !time12h || !timeFormat) {
+    return null;
+  }
+  const dateStr = dayjs(date).format('YYYY-MM-DD');
+  const ret = dayjs(`${dateStr} ${time12h} ${timeFormat}`, 'YYYY-MM-DD hh:mm A');
+  return ret.isValid() ? ret.toDate() : null;
+};
+
+// The inverse of `convertToDate`. Takes a Date-like value and returns
+// the date (with hour / minute / seconds truncated), time12h and timeFormat
+export const convertToDateTimeFields = (dateTime: dayjs.ConfigType) => {
+  const dateTimeDayjs = dayjs(dateTime);
+  return {
+    date: dateTimeDayjs.startOf('day').toDate(),
+    time: dateTimeDayjs.format('hh:mm'),
+    timeFormat: dateTimeDayjs.format('A') as amPm,
+  };
+};

package/src/components/custom-card/compact-patient-banner.component.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { getPatientName, PatientBannerPatientInfo, PatientPhoto, launchWorkspace } from '@openmrs/esm-framework';
+import styles from './compact-patient-banner.scss';
+import { SearchedPatient } from '../../type';
+import { mapToFhirPatient } from '../../utils/fhir-mapper';
+import { usePatientSearchContext } from './patient-search-context';
+
+interface ClickablePatientContainerProps {
+  children: React.ReactNode;
+  patient: SearchedPatient;
+}
+
+interface CompactPatientBannerProps {
+  patients: Array<SearchedPatient>;
+}
+
+const CompactPatientBanner = forwardRef<HTMLDivElement, CompactPatientBannerProps>(({ patients }, ref) => {
+  const fhirMappedPatients: Array<fhir.Patient> = useMemo(() => {
+    return patients.map(mapToFhirPatient);
+  }, [patients]);
+
+  const renderPatient = useCallback(
+    (patient: fhir.Patient, index: number) => {
+      const patientName = getPatientName(patient);
+      const searchedPatient = patients[index];
+
+      return (
+        <ClickablePatientContainer key={searchedPatient.uuid} patient={searchedPatient}>
+          <div className={styles.patientAvatar} role="img">
+            <PatientPhoto patientUuid={searchedPatient.uuid} patientName={patientName} />
+          </div>
+          <PatientBannerPatientInfo patient={patient} />
+        </ClickablePatientContainer>
+      );
+    },
+    [patients],
+  );
+
+  return <div ref={ref}>{fhirMappedPatients.map(renderPatient)}</div>;
+});
+
+const ClickablePatientContainer = ({ patient, children }: ClickablePatientContainerProps) => {
+  const context = usePatientSearchContext();
+  const patientClickSideEffect = context?.patientClickSideEffect;
+  const isDeceased = Boolean(patient?.person?.dead);
+
+  const handlePatientClick = () => {
+    launchWorkspace('check-in-form', {
+      patientUuid: patient.uuid,
+      patient: patient,
+      openedFrom: 'registration',
+      showPatientHeader: true,
+    });
+
+    patientClickSideEffect?.(patient.uuid);
+  };
+
+  return (
+    <button
+      className={classNames(styles.patientSearchResult, styles.patientSearchResultButton, {
+        [styles.deceased]: isDeceased,
+      })}
+      onClick={handlePatientClick}>
+      {children}
+    </button>
+  );
+};
+
+export default CompactPatientBanner;

package/src/components/custom-card/compact-patient-banner.scss

@@ -0,0 +1,34 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.patientSearchResult,
+.deceased.patientSearchResult {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border: none;
+  border-bottom: 1px solid $ui-03;
+
+  &:hover,
+  &:focus {
+    background-color: $ui-01;
+  }
+}
+
+.patientSearchResultButton {
+  background: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+.patientAvatar {
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: layout.$spacing-05;
+  border-radius: 1px;
+}
+
+.skeletonIcon {
+  height: 3.5rem;
+  width: 3.5rem;
+}

package/src/components/custom-card/custom-loader.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SkeletonIcon, SkeletonText } from '@carbon/react';
+import styles from './compact-patient-banner.scss';
+
+export const Loader = () => {
+  return (
+    <div className={styles.patientSearchResult} data-testid="search-skeleton">
+      <div className={styles.patientAvatar} role="img">
+        <SkeletonIcon className={styles.skeletonIcon} />
+      </div>
+      <div>
+        <SkeletonText />
+        <span className={styles.demographics}>
+          <SkeletonIcon /> <span className={styles.middot}>&middot;</span> <SkeletonIcon />{' '}
+          <span className={styles.middot}>&middot;</span> <SkeletonIcon />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;

package/src/components/custom-card/patient-search-context.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+export interface PatientSearchContextProps {
+  /**
+   * A function to execute instead of navigating the user to the patient
+   * dashboard. If null/undefined, patient results will be links to the
+   * patient dashboard.
+   */
+  nonNavigationSelectPatientAction?: (patientUuid: string) => void;
+  /**
+   * A function to execute when the user clicks on a patient result. Will
+   * be executed whether or not nonNavigationSelectPatientAction is defined,
+   * just before navigation (or after nonNavigationSelectPatientAction is called).
+   */
+  patientClickSideEffect?: ((patientUuid: string) => void) | (() => void);
+  handleReturnToSearchList?: () => void;
+  showPatientSearch?: () => void;
+  hidePatientSearch?: () => void;
+}
+
+export const PatientSearchContext = createContext<PatientSearchContextProps>({
+  nonNavigationSelectPatientAction: undefined,
+  patientClickSideEffect: undefined,
+  handleReturnToSearchList: undefined,
+  showPatientSearch: undefined,
+  hidePatientSearch: undefined,
+});
+
+export const PatientSearchContextProvider = PatientSearchContext.Provider;
+export const usePatientSearchContext = () => useContext(PatientSearchContext);