(feat) O3-4342: Split allergy form fields

packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx

@@ -45,7 +45,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
     { key: 'reaction', header: t('reaction', 'Reaction') },
     {
       key: 'note',
-      header: t('onsetDateAndComments', 'Onset date and comments'),
+      header: t('comments', 'comments'),
     },
   ];
 

packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.test.tsx

@@ -49,7 +49,7 @@ describe('AllergiesDetailedSummary', () => {
 
     expect(screen.getByRole('heading', { name: /allergies/i })).toBeInTheDocument();
 
-    const expectedColumnHeaders = [/allergen/i, /severity/i, /reaction/i, /onset date and comments/i];
+    const expectedColumnHeaders = [/allergen/i, /severity/i, /reaction/i, /comments/i];
     const expectedAllergies = [
       /ACE inhibitors moderate Anaphylaxis/i,
       /Fish mild Anaphylaxis, Angioedema, Fever, Hives Some Comments/i,

packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.test.tsx

@@ -81,8 +81,8 @@ describe('AllergyForm', () => {
     expect(screen.getByRole('radio', { name: /moderate/i })).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: /severe/i })).toBeInTheDocument();
 
-    expect(screen.getByText(/date of onset and comments/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Date of onset and comments/i)).toBeInTheDocument();
+    expect(screen.getByText(/comments/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/comments/i)).toBeInTheDocument();
   });
 
   it('enable the save button when all required fields are filled', async () => {
@@ -133,7 +133,7 @@ describe('AllergyForm', () => {
     await user.click(screen.getByText(allergen.display));
     await user.click(screen.getByRole('checkbox', { name: reaction.display }));
     await user.click(screen.getByRole('radio', { name: /moderate/i }));
-    await user.type(screen.getByLabelText(/Date of onset and comments/i), comment);
+    await user.type(screen.getByLabelText(/comments/i), comment);
     await user.click(screen.getByRole('button', { name: /save and close/i }));
 
     expect(mockSaveAllergy).toHaveBeenCalledTimes(1);
@@ -190,7 +190,7 @@ describe('AllergyForm', () => {
     await user.type(customAllergenInput, customAllergen);
     await user.click(screen.getByRole('checkbox', { name: reaction.display }));
     await user.click(screen.getByRole('radio', { name: /moderate/i }));
-    await user.type(screen.getByLabelText(/Date of onset and comments/i), comment);
+    await user.type(screen.getByLabelText(/comments/i), comment);
     await user.click(screen.getByRole('button', { name: /save and close/i }));
 
     expect(mockSaveAllergy).toHaveBeenCalledTimes(1);
@@ -223,7 +223,7 @@ describe('AllergyForm', () => {
     await user.click(screen.getByText(allergen.display));
     await user.click(screen.getByRole('checkbox', { name: reaction.display }));
     await user.click(screen.getByRole('radio', { name: /moderate/i }));
-    await user.type(screen.getByLabelText(/Date of onset and comments/i), comment);
+    await user.type(screen.getByLabelText(/comments/i), comment);
     await user.click(screen.getByRole('button', { name: /save and close/i }));
 
     expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
@@ -258,7 +258,7 @@ describe('AllergyForm', () => {
     await user.click(screen.getByText(allergen.display));
     await user.click(screen.getByRole('checkbox', { name: reaction.display }));
     await user.click(screen.getByRole('radio', { name: /moderate/i }));
-    await user.type(screen.getByLabelText(/Date of onset and comments/i), comment);
+    await user.type(screen.getByLabelText(/comments/i), comment);
     await user.click(screen.getByRole('button', { name: /save and close/i }));
 
     expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
@@ -276,7 +276,7 @@ describe('AllergyForm', () => {
     renderAllergyForm({ allergy: mockAllergy, formContext: 'editing' });
 
     const allergenInput = screen.getByPlaceholderText(/select the allergen/i);
-    const commentInput = screen.getByLabelText(/Date of onset and comments/i);
+    const commentInput = screen.getByLabelText(/comments/i);
 
     const allergen = mockAllergens[2];
     const reaction = mockAllergicReactions[0];

packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.workspace.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
+import { type TFunction, useTranslation } from 'react-i18next';
 import {
   Button,
   ButtonSet,
@@ -27,6 +27,7 @@ import {
   useConfig,
   useLayoutType,
   ResponsiveWrapper,
+  OpenmrsDatePicker,
 } from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
@@ -42,20 +43,21 @@ import { type Allergy, useAllergies } from '../allergy-intolerance.resource';
 import { AllergenType } from '../../types';
 import styles from './allergy-form.scss';
 
-const allergyFormSchema = z.object({
-  allergen: z
-    .object({
-      uuid: z.string(),
-      display: z.string(),
-      type: z.string(),
-    })
-    .required(),
-  nonCodedAllergen: z.string().optional(),
-  allergicReactions: z.array(z.string().optional()),
-  nonCodedAllergicReaction: z.string().optional(),
-  severityOfWorstReaction: z.string(),
-  comment: z.string().optional(),
-});
+const allergyFormSchema = (t: TFunction) =>
+  z.object({
+    allergen: z
+      .object({
+        uuid: z.string(),
+        display: z.string(),
+        type: z.string(),
+      })
+      .required(),
+    nonCodedAllergen: z.string().optional(),
+    allergicReactions: z.array(z.string().optional()),
+    nonCodedAllergicReaction: z.string().optional(),
+    severityOfWorstReaction: z.string(),
+    comment: z.string().optional(),
+  });
 
 type AllergyFormData = {
   allergen: Allergen;
@@ -164,13 +166,12 @@ function AllergyForm(props: AllergyFormProps) {
     control,
     handleSubmit,
     watch,
-    getValues,
     setValue,
-    formState: { isDirty },
+    formState: { errors, isDirty },
   } = useForm<AllergyFormData>({
     mode: 'all',
-    resolver: zodResolver(allergyFormSchema),
-    values: getDefaultAllergy(allergy, formContext),
+    resolver: zodResolver(allergyFormSchema(t)),
+    defaultValues: getDefaultAllergy(allergy, formContext),
   });
 
   useEffect(() => {
@@ -401,6 +402,7 @@ function AllergyForm(props: AllergyFormProps) {
               />
             </FormGroup>
           </div>
+
           <div>
             <ResponsiveWrapper>
               <Controller
@@ -409,8 +411,7 @@ function AllergyForm(props: AllergyFormProps) {
                 render={({ field: { onBlur, onChange, value } }) => (
                   <TextArea
                     id="comments"
-                    invalidText={t('invalidComment', 'Invalid comment, try again')}
-                    labelText={t('dateOfOnsetAndComments', 'Date of onset and comments')}
+                    labelText={t('comments', 'comments')}
                     onChange={onChange}
                     placeholder={t('typeAdditionalComments', 'Type any additional comments here')}
                     onBlur={onBlur}

packages/esm-patient-allergies-app/translations/en.json

@@ -10,7 +10,8 @@
   "allergySaveError": "Error saving allergy",
   "allergyUpdated": "Allergy updated",
   "cancel": "Cancel",
-  "dateOfOnsetAndComments": "Date of onset and comments",
+  "comments": "comments",
+  "DateofOnset": "Date of Onset",
   "delete": "Delete",
   "deleteModalConfirmationText": "Are you sure you want to delete this allergy?",
   "deletePatientAllergy": "Delete allergy",
@@ -20,14 +21,14 @@
   "editAllergy": "Edit an Allergy",
   "editOrDeleteAllergy": "Edit or delete allergy",
   "errorDeletingAllergy": "Error deleting allergy",
-  "invalidComment": "Invalid comment, try again",
   "loading": "Loading",
   "mild": "Mild",
   "moderate": "Moderate",
   "name": "Name",
   "nonCodedAllergenWarningDescription": "Adding a custom allergen may impact system-wide allergy notifications. It's recommended to choose from the provided list for accurate alerts. Custom entries may not trigger notifications in all relevant contexts.",
   "nonCodedAllergenWarningTitle": "Warning: Custom Allergen Entry",
-  "onsetDateAndComments": "Onset date and comments",
+  "onsetDate": "Onset date",
+  "onsetDateCannotBeFuture": "Onset date cannot be in the future",
   "other": "Other",
   "otherNonCodedAllergen": "Other non-coded allergen",
   "otherNonCodedAllergicReaction": "Other non-coded allergic reaction",