@tebokaroa/openmrs-esm-patient-notes-app 12.1.0-custom.1

package/src/notes/visit-notes-form.workspace.tsx

@@ -0,0 +1,943 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classnames from 'classnames';
+import dayjs from 'dayjs';
+import { debounce } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm, type Control } from 'react-hook-form';
+import type { TFunction } from 'i18next';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  Form,
+  FormGroup,
+  InlineLoading,
+  InlineNotification,
+  Row,
+  Search,
+  SkeletonText,
+  Stack,
+  Tag,
+  TextArea,
+  Tile,
+} from '@carbon/react';
+import { Add, CloseFilled, WarningFilled } from '@carbon/react/icons';
+import {
+  createAttachment,
+  createErrorHandler,
+  ExtensionSlot,
+  OpenmrsDatePicker,
+  ResponsiveWrapper,
+  restBaseUrl,
+  showModal,
+  showSnackbar,
+  useConfig,
+  useLayoutType,
+  useSession,
+  Workspace2,
+  type Encounter,
+  type UploadedFile,
+} from '@openmrs/esm-framework';
+import {
+  invalidateVisitAndEncounterData,
+  type PatientWorkspace2DefinitionProps,
+  useAllowedFileExtensions,
+} from '@openmrs/esm-patient-common-lib';
+import type { ConfigObject } from '../config-schema';
+import type { Concept, Diagnosis, DiagnosisPayload, FreeConcept, VisitNotePayload } from '../types';
+import {
+  deletePatientDiagnosis,
+  fetchDiagnosisConceptsByName,
+  savePatientDiagnosis,
+  saveVisitNote,
+  updateVisitNote,
+  useVisitNotes,
+} from './visit-notes.resource';
+import styles from './visit-notes-form.scss';
+
+type VisitNotesFormData = Omit<z.infer<ReturnType<typeof createSchema>>, 'images'> & {
+  images?: UploadedFile[];
+};
+
+interface DiagnosesDisplayProps {
+  fieldName: string;
+  isDiagnosisNotSelected: (diagnosis: FreeConcept) => boolean;
+  isLoading: boolean;
+  isSearching: boolean;
+  onAddDiagnosis: (diagnosis: FreeConcept, searchInputField: string) => void;
+  searchResults: Array<Concept>;
+  t: TFunction;
+  value: string;
+}
+
+interface DiagnosisSearchProps {
+  control: Control<VisitNotesFormData>;
+  error?: object;
+  handleSearch: (fieldName) => void;
+  labelText: string;
+  name: 'noteDate' | 'primaryDiagnosisSearch' | 'secondaryDiagnosisSearch' | 'clinicalNote';
+  placeholder: string;
+  setIsSearching: (isSearching: boolean) => void;
+}
+
+const createSchema = (t: TFunction) => {
+  return z.object({
+    noteDate: z.date(),
+    primaryDiagnosisSearch: z.string(),
+    secondaryDiagnosisSearch: z.string().optional(),
+    clinicalNote: z.string().optional(),
+    images: z.array(z.any()).optional(),
+  });
+};
+
+export interface VisitNotesFormProps {
+  encounter?: Encounter;
+  formContext: 'creating' | 'editing';
+}
+
+const VisitNotesForm: React.FC<PatientWorkspace2DefinitionProps<VisitNotesFormProps, {}>> = ({
+  closeWorkspace,
+  workspaceProps: { formContext, encounter },
+  groupProps: { patientUuid, patient },
+}) => {
+  const isEditing: boolean = Boolean(formContext === 'editing' && encounter?.id);
+  const searchTimeoutInMs = 500;
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const session = useSession();
+  const { isPrimaryDiagnosisRequired, ...config } = useConfig<ConfigObject>();
+  const memoizedState = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
+  const { clinicianEncounterRole, encounterNoteTextConceptUuid, encounterTypeUuid, formConceptUuid } =
+    config.visitNoteConfig;
+  const [isLoadingPrimaryDiagnoses, setIsLoadingPrimaryDiagnoses] = useState(false);
+  const [isLoadingSecondaryDiagnoses, setIsLoadingSecondaryDiagnoses] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [selectedPrimaryDiagnoses, setSelectedPrimaryDiagnoses] = useState<Array<Diagnosis>>([]);
+  const [selectedSecondaryDiagnoses, setSelectedSecondaryDiagnoses] = useState<Array<Diagnosis>>([]);
+  const [searchPrimaryResults, setSearchPrimaryResults] = useState<Array<Concept>>(null);
+  const [searchSecondaryResults, setSearchSecondaryResults] = useState<Array<Concept>>(null);
+  const [combinedDiagnoses, setCombinedDiagnoses] = useState<Array<Diagnosis>>([]);
+  const [rows, setRows] = useState<number>();
+  const [error, setError] = useState<Error>(null);
+  const { allowedFileExtensions } = useAllowedFileExtensions();
+
+  const visitNoteFormSchema = useMemo(() => createSchema(t), [t]);
+
+  const customResolver = useCallback(
+    async (data, context, options) => {
+      const zodResult = await zodResolver(visitNoteFormSchema)(data, context, options);
+
+      if (isPrimaryDiagnosisRequired && selectedPrimaryDiagnoses.length === 0) {
+        return {
+          ...zodResult,
+          errors: {
+            ...zodResult.errors,
+            primaryDiagnosisSearch: {
+              type: 'custom',
+              message: t('primaryDiagnosisRequired', 'Choose at least one primary diagnosis'),
+            },
+          },
+        };
+      }
+
+      return zodResult;
+    },
+    [visitNoteFormSchema, isPrimaryDiagnosisRequired, selectedPrimaryDiagnoses, t],
+  );
+
+  const {
+    clearErrors,
+    control,
+    formState: { errors, dirtyFields, isSubmitting },
+    handleSubmit,
+    setValue,
+    watch,
+  } = useForm<VisitNotesFormData>({
+    mode: 'onSubmit',
+    resolver: customResolver,
+    defaultValues: {
+      primaryDiagnosisSearch: '',
+      noteDate: isEditing ? new Date(encounter.rawDatetime) : new Date(),
+      clinicalNote: isEditing
+        ? String(encounter?.obs?.find((obs) => obs.concept.uuid === encounterNoteTextConceptUuid)?.value || '')
+        : '',
+    },
+  });
+
+  useEffect(() => {
+    if (encounter?.diagnoses?.length) {
+      try {
+        const transformedDiagnoses = encounter.diagnoses.map((d) => ({
+          patient: patientUuid,
+          diagnosis: {
+            coded: d.diagnosis.coded?.uuid,
+            nonCoded: d.diagnosis.nonCoded,
+          },
+          certainty: d.certainty,
+          rank: d.rank,
+          display: d.display,
+        }));
+
+        const primaryDiagnoses = transformedDiagnoses.filter((d) => d.rank === 1);
+        const secondaryDiagnoses = transformedDiagnoses.filter((d) => d.rank === 2);
+
+        setSelectedPrimaryDiagnoses(primaryDiagnoses);
+        setSelectedSecondaryDiagnoses(secondaryDiagnoses);
+        setCombinedDiagnoses([...primaryDiagnoses, ...secondaryDiagnoses]);
+      } catch (err) {
+        setError(new Error(t('errorTransformingDiagnoses', 'Error transforming diagnoses')));
+        createErrorHandler();
+      }
+    }
+  }, [encounter, patientUuid, t]);
+
+  const currentImages = watch('images');
+
+  const { mutateVisitNotes } = useVisitNotes(patientUuid);
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const mutateAttachments = useCallback(
+    () => globalMutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/attachment`)),
+    [globalMutate],
+  );
+
+  const locationUuid = session?.sessionLocation?.uuid;
+  const providerUuid = session?.currentProvider?.uuid;
+
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((fieldQuery, fieldName) => {
+        clearErrors('primaryDiagnosisSearch');
+        if (fieldQuery) {
+          if (fieldName === 'primaryDiagnosisSearch') {
+            setIsLoadingPrimaryDiagnoses(true);
+          } else if (fieldName === 'secondaryDiagnosisSearch') {
+            setIsLoadingSecondaryDiagnoses(true);
+          }
+
+          fetchDiagnosisConceptsByName(fieldQuery, config.diagnosisConceptClass)
+            .then((matchingConceptDiagnoses: Array<Concept>) => {
+              if (fieldName === 'primaryDiagnosisSearch') {
+                setSearchPrimaryResults(matchingConceptDiagnoses);
+                setIsLoadingPrimaryDiagnoses(false);
+              } else if (fieldName === 'secondaryDiagnosisSearch') {
+                setSearchSecondaryResults(matchingConceptDiagnoses);
+                setIsLoadingSecondaryDiagnoses(false);
+              }
+            })
+            .catch((e) => {
+              setError(e);
+              createErrorHandler();
+            });
+        }
+      }, searchTimeoutInMs),
+    [config.diagnosisConceptClass, clearErrors],
+  );
+
+  const handleSearch = useCallback(
+    (fieldName) => {
+      const fieldQuery = watch(fieldName);
+      if (fieldQuery) {
+        debouncedSearch(fieldQuery, fieldName);
+      }
+      setIsSearching(false);
+    },
+    [debouncedSearch, watch],
+  );
+
+  const createDiagnosis = useCallback(
+    (concept: FreeConcept) => ({
+      certainty: 'PROVISIONAL',
+      display: concept.display,
+      diagnosis: concept.uuid ? { coded: concept.uuid } : { nonCoded: concept.display }, // Fallback to nonCoded if no UUID
+      patient: patientUuid,
+      rank: 2,
+    }),
+    [patientUuid],
+  );
+
+  const handleAddDiagnosis = useCallback(
+    (conceptDiagnosisToAdd: FreeConcept, searchInputField: string) => {
+      const newDiagnosis = createDiagnosis(conceptDiagnosisToAdd);
+      if (searchInputField === 'primaryDiagnosisSearch') {
+        newDiagnosis.rank = 1;
+        setValue('primaryDiagnosisSearch', '');
+        setSearchPrimaryResults([]);
+        setSelectedPrimaryDiagnoses((selectedDiagnoses) => [...selectedDiagnoses, newDiagnosis]);
+        clearErrors('primaryDiagnosisSearch');
+      } else if (searchInputField === 'secondaryDiagnosisSearch') {
+        setValue('secondaryDiagnosisSearch', '');
+        setSearchSecondaryResults([]);
+        setSelectedSecondaryDiagnoses((selectedDiagnoses) => [...selectedDiagnoses, newDiagnosis]);
+      }
+      setCombinedDiagnoses((combinedDiagnoses) => [...combinedDiagnoses, newDiagnosis]);
+    },
+    [createDiagnosis, setValue, clearErrors],
+  );
+
+  const handleRemoveDiagnosis = useCallback(
+    (diagnosisToRemove: Diagnosis, searchInputField) => {
+      if (searchInputField === 'primaryInputSearch') {
+        setSelectedPrimaryDiagnoses(
+          selectedPrimaryDiagnoses.filter((diagnosis) =>
+            diagnosis.diagnosis.coded
+              ? diagnosis.diagnosis.coded !== diagnosisToRemove.diagnosis.coded
+              : diagnosis.diagnosis.nonCoded !== diagnosisToRemove.diagnosis.nonCoded,
+          ),
+        );
+      } else if (searchInputField === 'secondaryInputSearch') {
+        setSelectedSecondaryDiagnoses(
+          selectedSecondaryDiagnoses.filter((diagnosis) =>
+            diagnosis.diagnosis.coded
+              ? diagnosis.diagnosis.coded !== diagnosisToRemove.diagnosis.coded
+              : diagnosis.diagnosis.nonCoded !== diagnosisToRemove.diagnosis.nonCoded,
+          ),
+        );
+      }
+      setCombinedDiagnoses(
+        combinedDiagnoses.filter((diagnosis) =>
+          diagnosis.diagnosis.coded
+            ? diagnosis.diagnosis.coded !== diagnosisToRemove.diagnosis.coded
+            : diagnosis.diagnosis.nonCoded !== diagnosisToRemove.diagnosis.nonCoded,
+        ),
+      );
+    },
+    [combinedDiagnoses, selectedPrimaryDiagnoses, selectedSecondaryDiagnoses],
+  );
+
+  const isDiagnosisNotSelected = (diagnosis: Concept | FreeConcept) => {
+    const isPrimaryDiagnosisSelected = selectedPrimaryDiagnoses.some((selectedDiagnosis) =>
+      diagnosis.uuid
+        ? diagnosis.uuid === selectedDiagnosis.diagnosis.coded
+        : diagnosis.display.toLocaleLowerCase() === selectedDiagnosis.diagnosis.nonCoded.toLocaleLowerCase(),
+    );
+    const isSecondaryDiagnosisSelected = selectedSecondaryDiagnoses.some((selectedDiagnosis) =>
+      diagnosis.uuid
+        ? diagnosis.uuid === selectedDiagnosis.diagnosis.coded
+        : diagnosis.display.toLocaleLowerCase() === selectedDiagnosis.diagnosis.nonCoded.toLocaleLowerCase(),
+    );
+
+    return !isPrimaryDiagnosisSelected && !isSecondaryDiagnosisSelected;
+  };
+
+  const showImageCaptureModal = useCallback(() => {
+    const close = showModal('capture-photo-modal', {
+      saveFile: (file: UploadedFile) => {
+        if (file.capturedFromWebcam && !file.fileName.includes('.')) {
+          file.fileName = `${file.fileName}.png`;
+        }
+
+        setValue('images', currentImages ? [...currentImages, file] : [file]);
+        close();
+        return Promise.resolve();
+      },
+      closeModal: () => {
+        close();
+      },
+      allowedExtensions:
+        allowedFileExtensions && Array.isArray(allowedFileExtensions)
+          ? allowedFileExtensions.filter((ext) => !/pdf/i.test(ext))
+          : [],
+      collectDescription: true,
+      multipleFiles: true,
+    });
+  }, [allowedFileExtensions, currentImages, setValue]);
+
+  const handleRemoveImage = (index: number) => {
+    const updatedImages = [...currentImages];
+    updatedImages.splice(index, 1);
+    setValue('images', updatedImages);
+
+    showSnackbar({
+      title: t('imageRemoved', 'Image removed'),
+      kind: 'success',
+      isLowContrast: true,
+    });
+  };
+
+  const onSubmit = useCallback(
+    (data: VisitNotesFormData) => {
+      const { noteDate, clinicalNote, images } = data;
+
+      if (isPrimaryDiagnosisRequired && !selectedPrimaryDiagnoses.length) {
+        return;
+      }
+
+      let finalNoteDate = dayjs(noteDate);
+      const now = new Date();
+      if (finalNoteDate.diff(now, 'minute') <= 30) {
+        finalNoteDate = null;
+      }
+
+      const existingClinicalNoteObs = encounter?.obs?.find((obs) => obs.concept.uuid === encounterNoteTextConceptUuid);
+
+      const visitNotePayload: VisitNotePayload = {
+        encounterDatetime: finalNoteDate?.format(),
+        form: formConceptUuid,
+        patient: patientUuid,
+        location: locationUuid,
+        encounterProviders: [
+          {
+            encounterRole: clinicianEncounterRole,
+            provider: providerUuid,
+          },
+        ],
+        encounterType: encounterTypeUuid,
+        obs: clinicalNote
+          ? [
+              {
+                concept: { uuid: encounterNoteTextConceptUuid, display: '' },
+                value: clinicalNote,
+                ...(existingClinicalNoteObs && { uuid: existingClinicalNoteObs.uuid }),
+              },
+            ]
+          : [],
+      };
+
+      const abortController = new AbortController();
+
+      const savePromise = isEditing
+        ? updateVisitNote(abortController, encounter.id, visitNotePayload)
+        : saveVisitNote(abortController, visitNotePayload);
+
+      return savePromise
+        .then((response) => {
+          if (response.status === 201 || response.status === 200) {
+            const encounterUuid = encounter?.id || response.data.uuid;
+
+            // If editing, first delete existing diagnoses
+            if (isEditing && encounter?.diagnoses?.length) {
+              return Promise.all(
+                encounter.diagnoses.map((diagnosis) => deletePatientDiagnosis(abortController, diagnosis.uuid)),
+              ).then(() => encounterUuid);
+            }
+
+            return encounterUuid;
+          }
+        })
+        .then((encounterUuid) => {
+          return Promise.all(
+            combinedDiagnoses.map((diagnosis) => {
+              const diagnosesPayload: DiagnosisPayload = {
+                encounter: encounterUuid,
+                patient: patientUuid,
+                condition: null,
+                diagnosis: {
+                  coded: diagnosis.diagnosis.coded,
+                  nonCoded: diagnosis.diagnosis.nonCoded,
+                },
+                certainty: diagnosis.certainty,
+                rank: diagnosis.rank,
+              };
+              return savePatientDiagnosis(abortController, diagnosesPayload);
+            }),
+          );
+        })
+        .then(() => {
+          if (images?.length) {
+            return Promise.all(
+              images.map((image) => {
+                const imageToUpload: UploadedFile = {
+                  base64Content: image.base64Content,
+                  file: image.file,
+                  fileName: image.fileName,
+                  fileType: image.fileType,
+                  fileDescription: image.fileDescription || '',
+                };
+                return createAttachment(patientUuid, imageToUpload);
+              }),
+            );
+          } else {
+            return Promise.resolve([]);
+          }
+        })
+        .then(() => {
+          // Invalidate encounter and notes data since we created a new encounter with notes
+          // Also invalidate visit history table since the visit now has new encounters
+          invalidateVisitAndEncounterData(globalMutate, patientUuid);
+          mutateVisitNotes();
+
+          if (images?.length) {
+            mutateAttachments();
+          }
+
+          closeWorkspace({ discardUnsavedChanges: true });
+
+          showSnackbar({
+            isLowContrast: true,
+            subtitle: t('visitNoteNowVisible', 'It is now visible on the Visits page'),
+            kind: 'success',
+            title: t('visitNoteSaved', 'Visit note saved'),
+          });
+        })
+        .catch((err) => {
+          createErrorHandler();
+
+          showSnackbar({
+            title: t('visitNoteSaveError', 'Error saving visit note'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: err?.responseBody?.error?.message ?? err.message,
+          });
+        });
+    },
+    [
+      clinicianEncounterRole,
+      closeWorkspace,
+      combinedDiagnoses,
+      encounter?.diagnoses,
+      encounter?.id,
+      encounter?.obs,
+      encounterNoteTextConceptUuid,
+      encounterTypeUuid,
+      formConceptUuid,
+      globalMutate,
+      isEditing,
+      isPrimaryDiagnosisRequired,
+      locationUuid,
+      mutateAttachments,
+      mutateVisitNotes,
+      patientUuid,
+      providerUuid,
+      selectedPrimaryDiagnoses.length,
+      t,
+    ],
+  );
+
+  const onError = (errors) => console.error(errors);
+
+  const hasUserUnsavedChanges = Object.keys(dirtyFields).length > 0;
+
+  return (
+    <Workspace2 title={t('visitNoteWorkspaceTitle', 'Visit note')} hasUnsavedChanges={hasUserUnsavedChanges}>
+      <Form className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
+        <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
+
+        {isTablet && (
+          <Row className={styles.headerGridRow}>
+            <ExtensionSlot name="visit-form-header-slot" className={styles.dataGridRow} state={memoizedState} />
+          </Row>
+        )}
+
+        <div className={styles.formContainer}>
+          <Stack gap={2}>
+            {isTablet ? <h2 className={styles.heading}>{t('addVisitNote', 'Add a visit note')}</h2> : null}
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('date', 'Date')}</span>
+              </Column>
+              <Column sm={3}>
+                <Controller
+                  name="noteDate"
+                  control={control}
+                  render={({ field, fieldState }) => (
+                    <ResponsiveWrapper>
+                      <OpenmrsDatePicker
+                        {...field}
+                        data-testid="visitDateTimePicker"
+                        id="visitDateTimePicker"
+                        invalid={Boolean(fieldState?.error?.message)}
+                        invalidText={fieldState?.error?.message}
+                        isDisabled={isEditing}
+                        labelText={t('visitDate', 'Visit date')}
+                        maxDate={new Date()}
+                      />
+                    </ResponsiveWrapper>
+                  )}
+                />
+              </Column>
+            </Row>
+            <div className={styles.diagnosesText}>
+              {selectedPrimaryDiagnoses && selectedPrimaryDiagnoses.length ? (
+                <>
+                  {selectedPrimaryDiagnoses.map((diagnosis, index) => (
+                    <Tag
+                      className={styles.tag}
+                      filter
+                      key={index}
+                      onClose={() => handleRemoveDiagnosis(diagnosis, 'primaryInputSearch')}
+                      type="red"
+                    >
+                      {diagnosis.display}
+                    </Tag>
+                  ))}
+                </>
+              ) : null}
+              {selectedSecondaryDiagnoses && selectedSecondaryDiagnoses.length ? (
+                <>
+                  {selectedSecondaryDiagnoses.map((diagnosis, index) => (
+                    <Tag
+                      className={styles.tag}
+                      filter
+                      key={index}
+                      onClose={() => handleRemoveDiagnosis(diagnosis, 'secondaryInputSearch')}
+                      type="blue"
+                    >
+                      {diagnosis.display}
+                    </Tag>
+                  ))}
+                </>
+              ) : null}
+              {selectedPrimaryDiagnoses &&
+                !selectedPrimaryDiagnoses.length &&
+                selectedSecondaryDiagnoses &&
+                !selectedSecondaryDiagnoses.length && (
+                  <span>{t('emptyDiagnosisText', 'No diagnosis selected — Enter a diagnosis below')}</span>
+                )}
+            </div>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('primaryDiagnosis', 'Primary diagnosis')}</span>
+              </Column>
+              <Column sm={3}>
+                <FormGroup legendText={t('searchForPrimaryDiagnosis', 'Search for a primary diagnosis')}>
+                  <DiagnosisSearch
+                    name="primaryDiagnosisSearch"
+                    control={control}
+                    labelText={t('enterPrimaryDiagnoses', 'Enter Primary diagnoses')}
+                    placeholder={t('primaryDiagnosisInputPlaceholder', 'Choose a primary diagnosis')}
+                    handleSearch={handleSearch}
+                    error={errors?.primaryDiagnosisSearch}
+                    setIsSearching={setIsSearching}
+                  />
+                  {error ? (
+                    <InlineNotification
+                      className={styles.errorNotification}
+                      lowContrast
+                      title={t('error', 'Error')}
+                      subtitle={t('errorFetchingConcepts', 'There was a problem fetching concepts') + '.'}
+                      onClose={() => setError(null)}
+                    />
+                  ) : null}
+                  <DiagnosesDisplay
+                    fieldName={'primaryDiagnosisSearch'}
+                    isDiagnosisNotSelected={isDiagnosisNotSelected}
+                    isLoading={isLoadingPrimaryDiagnoses}
+                    isSearching={isSearching}
+                    onAddDiagnosis={handleAddDiagnosis}
+                    searchResults={searchPrimaryResults}
+                    t={t}
+                    value={watch('primaryDiagnosisSearch')}
+                  />
+                </FormGroup>
+              </Column>
+            </Row>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('secondaryDiagnosis', 'Secondary diagnosis')}</span>
+              </Column>
+              <Column sm={3}>
+                <FormGroup legendText={t('searchForSecondaryDiagnosis', 'Search for a secondary diagnosis')}>
+                  <DiagnosisSearch
+                    name="secondaryDiagnosisSearch"
+                    control={control}
+                    labelText={t('enterSecondaryDiagnoses', 'Enter Secondary diagnoses')}
+                    placeholder={t('secondaryDiagnosisInputPlaceholder', 'Choose a secondary diagnosis')}
+                    handleSearch={handleSearch}
+                    setIsSearching={setIsSearching}
+                  />
+                  {error ? (
+                    <InlineNotification
+                      className={styles.errorNotification}
+                      lowContrast
+                      title={t('error', 'Error')}
+                      subtitle={t('errorFetchingConcepts', 'There was a problem fetching concepts') + '.'}
+                      onClose={() => setError(null)}
+                    />
+                  ) : null}
+                  <DiagnosesDisplay
+                    fieldName={'secondaryDiagnosisSearch'}
+                    isDiagnosisNotSelected={isDiagnosisNotSelected}
+                    isLoading={isLoadingSecondaryDiagnoses}
+                    isSearching={isSearching}
+                    onAddDiagnosis={handleAddDiagnosis}
+                    searchResults={searchSecondaryResults}
+                    t={t}
+                    value={watch('secondaryDiagnosisSearch')}
+                  />
+                </FormGroup>
+              </Column>
+            </Row>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('note', 'Note')}</span>
+              </Column>
+              <Column sm={3}>
+                <Controller
+                  name="clinicalNote"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ResponsiveWrapper>
+                      <TextArea
+                        id="additionalNote"
+                        rows={rows}
+                        labelText={t('clinicalNoteLabel', 'Write your notes')}
+                        placeholder={t('clinicalNotePlaceholder', 'Write any notes here')}
+                        value={value}
+                        onBlur={onBlur}
+                        onChange={(event) => {
+                          onChange(event);
+                          const textareaLineHeight = 24; // This is the default line height for Carbon's TextArea component
+                          const newRows = Math.ceil(event.target.scrollHeight / textareaLineHeight);
+                          setRows(newRows);
+                        }}
+                      />
+                    </ResponsiveWrapper>
+                  )}
+                />
+              </Column>
+            </Row>
+            <Row className={styles.row}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>{t('image', 'Image')}</span>
+              </Column>
+              <Column sm={3}>
+                <FormGroup legendText="">
+                  <p className={styles.imgUploadHelperText}>
+                    {t('imageUploadHelperText', "Upload images or use this device's camera to capture images")}
+                  </p>
+                  <Button
+                    className={styles.uploadButton}
+                    kind={isTablet ? 'ghost' : 'tertiary'}
+                    onClick={showImageCaptureModal}
+                    renderIcon={(props) => <Add size={16} {...props} />}
+                  >
+                    {t('addImage', 'Add image')}
+                  </Button>
+                  <div className={styles.imgThumbnailGrid}>
+                    {currentImages?.map((image, index) => (
+                      <div key={index} className={styles.imgThumbnailItem}>
+                        <div className={styles.imgThumbnailContainer}>
+                          <img
+                            className={styles.imgThumbnail}
+                            src={image.base64Content}
+                            alt={image.fileDescription ?? image.fileName}
+                          />
+                        </div>
+                        <Button kind="ghost" className={styles.removeButton} onClick={() => handleRemoveImage(index)}>
+                          <CloseFilled size={16} className={styles.closeIcon} />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </FormGroup>
+              </Column>
+            </Row>
+          </Stack>
+        </div>
+        <ButtonSet className={classnames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button
+            className={styles.button}
+            kind="primary"
+            disabled={!hasUserUnsavedChanges || isSubmitting}
+            type="submit"
+          >
+            {isSubmitting ? (
+              <InlineLoading className={styles.spinner} description={t('saving', 'Saving') + '...'} />
+            ) : (
+              <span>{t('saveAndClose', 'Save and close')}</span>
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+function DiagnosisSearch({
+  name,
+  control,
+  labelText,
+  placeholder,
+  handleSearch,
+  error,
+  setIsSearching,
+}: DiagnosisSearchProps) {
+  const isTablet = useLayoutType() === 'tablet';
+  const inputRef = useRef(null);
+
+  const searchInputFocus = () => {
+    inputRef.current.focus();
+  };
+
+  useEffect(() => {
+    if (error) {
+      searchInputFocus();
+    }
+  }, [error]);
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field: { value, onChange, onBlur }, fieldState }) => (
+        <>
+          <ResponsiveWrapper>
+            <Search
+              ref={inputRef}
+              size={isTablet ? 'lg' : 'md'}
+              id={name}
+              labelText={labelText}
+              className={error && styles.diagnoserrorOutline}
+              placeholder={placeholder}
+              renderIcon={error && ((props) => <WarningFilled fill="red" {...props} />)}
+              onChange={(e) => {
+                setIsSearching(true);
+                onChange(e);
+                handleSearch(name);
+              }}
+              value={value instanceof Date ? value.toISOString() : value}
+              onBlur={onBlur}
+            />
+          </ResponsiveWrapper>
+          {fieldState?.error?.message && <p className={styles.errorMessage}>{fieldState?.error?.message}</p>}
+        </>
+      )}
+    />
+  );
+}
+
+function DiagnosesDisplay({
+  fieldName,
+  isDiagnosisNotSelected,
+  isLoading,
+  isSearching,
+  onAddDiagnosis,
+  searchResults,
+  t,
+  value: rawValue,
+}: DiagnosesDisplayProps) {
+  const value = rawValue?.trim();
+
+  if (!value) {
+    return null;
+  }
+
+  if (isSearching || isLoading) {
+    return <Loader />;
+  }
+
+  if (!isSearching && searchResults?.length > 0) {
+    if (
+      searchResults?.length === 1 &&
+      !isDiagnosisNotSelected(searchResults[0]) &&
+      searchResults[0]?.display?.toLocaleLowerCase() === value?.toLocaleLowerCase()
+    )
+      return (
+        <Tile className={styles.emptyResults}>
+          <span>
+            {t('diagnosisAlreadySelected', 'Diagnosis already selected')}: <strong>"{value}"</strong>
+          </span>
+        </Tile>
+      );
+    return (
+      <ul className={styles.diagnosisList}>
+        {searchResults.map((diagnosis, index) => {
+          if (isDiagnosisNotSelected(diagnosis)) {
+            return (
+              <li
+                className={styles.diagnosis}
+                key={index}
+                onClick={() => onAddDiagnosis(diagnosis, fieldName)}
+                role="menuitem"
+              >
+                {diagnosis.display}
+              </li>
+            );
+          }
+        })}
+
+        {isDiagnosisNotSelected({ display: value }) ? (
+          // if the searchResults doesn't contain the exact search term,
+          // still allow proposing adding it as a custom free-text diagnosis
+          !searchResults
+            .map((diagnosis) => diagnosis.display.toLocaleLowerCase())
+            .includes(value.toLocaleLowerCase()) && (
+            <li className={styles.diagnosis} role="menuitem">
+              <Button
+                size="md"
+                kind="ghost"
+                onClick={() =>
+                  onAddDiagnosis(
+                    {
+                      display: value,
+                    },
+                    fieldName,
+                  )
+                }
+                className={styles.customDiagnosisButton}
+              >
+                {t('addCustomDiagnosis', 'Add custom diagnosis')} <strong> "{value}"</strong>
+              </Button>
+            </li>
+          )
+        ) : (
+          <Tile className={styles.emptyResults}>
+            <span>
+              {t('diagnosisAlreadySelected', 'Diagnosis already selected')}: <strong>"{value}"</strong>
+            </span>
+          </Tile>
+        )}
+      </ul>
+    );
+  }
+
+  if (searchResults?.length === 0) {
+    return (
+      <ResponsiveWrapper>
+        {isDiagnosisNotSelected({ display: value }) ? (
+          <>
+            <Tile className={styles.emptyResults}>
+              <span>
+                {t('noMatchingDiagnoses', 'No diagnoses found matching')} <strong>"{value}"</strong>
+              </span>
+            </Tile>
+            <ul className={styles.diagnosisList}>
+              <li className={styles.diagnosis} role="menuitem">
+                <Button
+                  size="md"
+                  kind="ghost"
+                  onClick={() =>
+                    onAddDiagnosis(
+                      {
+                        display: value,
+                      },
+                      fieldName,
+                    )
+                  }
+                  className={styles.customDiagnosisButton}
+                >
+                  {t('addCustomDiagnosis', 'Add custom diagnosis')} <strong> "{value}"</strong>
+                </Button>
+              </li>
+            </ul>
+          </>
+        ) : (
+          <Tile className={styles.emptyResults}>
+            <span>
+              {t('diagnosisAlreadySelected', 'Diagnosis already selected')}: <strong>"{value}"</strong>
+            </span>
+          </Tile>
+        )}
+      </ResponsiveWrapper>
+    );
+  }
+}
+
+function Loader() {
+  return (
+    <>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <SkeletonText key={index} className={styles.skeleton} />
+      ))}
+    </>
+  );
+}
+
+export default VisitNotesForm;