From 1305ad64fb130e514e00ba209f03632c093a7a3c Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Thu, 6 Jan 2022 00:45:36 +0300
Subject: [PATCH 1/4] Enhancements to the Allergies Form

---
 __mocks__/allergies.mock.ts                   |   2 +-
 .../allergies-detailed-summary.component.tsx  |  15 +-
 .../allergies-detailed-summary.test.tsx       |   2 +-
 .../allergy-form.component.test.tsx           | 175 -----
 .../allergies-form/allergy-form.component.tsx | 603 +++++++++---------
 .../allergies-form/allergy-form.resource.ts   |  40 +-
 .../allergies-form/allergy-form.scss          | 118 ++++
 .../allergies-overview.component.tsx          |  14 +-
 .../src/allergies/allergies-overview.test.tsx |   2 +-
 .../allergies/allergies-tile.component.tsx    |   2 +-
 .../src/allergies/allergies.component.tsx     |   6 +-
 ...ce.tsx => allergy-intolerance.resource.ts} |  76 +--
 .../esm-patient-allergies-app/src/index.ts    |  32 +-
 .../esm-patient-allergies-app/src/root.scss   |   8 +-
 .../src/types/index.ts                        | 116 +---
 .../translations/en.json                      |  18 +-
 .../biometrics/biometrics-base.component.tsx  |   7 +-
 .../biometrics-chart.component.scss           |   4 +-
 ...cs.resource.tsx => biometrics.resource.ts} |   6 +-
 .../src/biometrics/weight-tile.component.tsx  |   4 +-
 .../src/vitals/vitals-chart.component.scss    |  18 +-
 21 files changed, 546 insertions(+), 722 deletions(-)
 delete mode 100644 packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.test.tsx
 create mode 100644 packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
 rename packages/esm-patient-allergies-app/src/allergies/{allergy-intolerance.resource.tsx => allergy-intolerance.resource.ts} (73%)
 rename packages/esm-patient-biometrics-app/src/biometrics/{biometrics.resource.tsx => biometrics.resource.ts} (96%)

diff --git a/__mocks__/allergies.mock.ts b/__mocks__/allergies.mock.ts
index 81a14fdfaa..16bf2c5f9c 100644
--- a/__mocks__/allergies.mock.ts
+++ b/__mocks__/allergies.mock.ts
@@ -1730,7 +1730,7 @@ export const mockAllergenAndReactions = {
     { uuid: '162542AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Adhesive tape' },
     { uuid: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Other' },
   ],
-  allergyReaction: [
+  allergicReactions: [
     { uuid: '121677AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Mental status change' },
     { uuid: '121629AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Anaemia' },
     { uuid: '148888AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Anaphylaxis' },
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
index ff18b3c0d2..f49c8a946e 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
-import { useAllergies } from './allergy-intolerance.resource';
 import Add16 from '@carbon/icons-react/es/add/16';
 import {
   Button,
@@ -18,19 +17,19 @@ import {
   TableRow,
 } from 'carbon-components-react';
 import styles from './allergies-detailed-summary.scss';
+import { useAllergies } from './allergy-intolerance.resource';
 import { patientAllergiesFormWorkspace } from '../constants';
 
 interface AllergiesDetailedSummaryProps {
   patient: fhir.Patient;
-  showAddAllergy: boolean;
+  showAddAllergyButton: boolean;
 }
 
-const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ patient, showAddAllergy }) => {
+const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ patient, showAddAllergyButton }) => {
   const { t } = useTranslation();
   const displayText = t('allergyIntolerances', 'allergy intolerances');
   const headerTitle = t('allergies', 'Allergies');
-
-  const { data: allergies, isError, isLoading, isValidating } = useAllergies(patient.id);
+  const { allergies, isError, isLoading, isValidating } = useAllergies(patient.id);
 
   const launchAllergiesForm = React.useCallback(() => launchPatientWorkspace(patientAllergiesFormWorkspace), []);
 
@@ -75,8 +74,8 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
           </div>
         ),
       },
-      recordedDate: dayjs(allergy.recordedDate).format('MMM-YYYY') ?? '-',
-      lastUpdated: dayjs(allergy.lastUpdated).format('DD-MMM-YYYY'),
+      recordedDate: dayjs(allergy.recordedDate).format('MMM-YYYY') ?? '--',
+      lastUpdated: allergy.lastUpdated ? dayjs(allergy.lastUpdated).format('DD-MMM-YYYY') : '--',
     }));
   }, [allergies]);
 
@@ -87,7 +86,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
       <div className={styles.widgetCard}>
         <CardHeader title={headerTitle}>
           <span>{isValidating ? <InlineLoading /> : null}</span>
-          {showAddAllergy && (
+          {showAddAllergyButton && (
             <Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
               {t('add', 'Add')}
             </Button>
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.test.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.test.tsx
index 6ab15ca188..53294afd38 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.test.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.test.tsx
@@ -8,7 +8,7 @@ import AllergiesDetailedSummary from './allergies-detailed-summary.component';
 
 const testProps = {
   patient: mockPatient,
-  showAddAllergy: false,
+  showAddAllergyButton: false,
 };
 
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.test.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.test.tsx
deleted file mode 100644
index 5fdb76599e..0000000000
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.test.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React from 'react';
-import { screen, render, act, waitFor, fireEvent } from '@testing-library/react';
-import AllergyForm from './allergy-form.component';
-import { mockPatient } from '../../../../../__mocks__/patient.mock';
-import { useConfig, showNotification } from '@openmrs/esm-framework';
-import { savePatientAllergy, fetchAllergensAndReaction } from './allergy-form.resource';
-import { of, throwError } from 'rxjs';
-import { mockAllergenAndReactions } from '../../../../../__mocks__/allergies.mock';
-import userEvent from '@testing-library/user-event';
-
-const mockedCloseWorkspace = jest.fn();
-const mockedShowNotification = showNotification as jest.Mock;
-const mockedUseConfig = useConfig as jest.Mock;
-
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-const mockSavePatientAllergy = savePatientAllergy as jest.Mock;
-const mockFetchAllergensAndReaction = fetchAllergensAndReaction as jest.Mock;
-
-const mockConcepts = {
-  concepts: {
-    drugAllergenUuid: '162552AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    environmentalAllergenUuid: '162554AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    foodAllergenUuid: '162553AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    mildReactionUuid: '1498AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    moderateReactionUuid: '1499AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    severeReactionUuid: '1500AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    allergyReactionUuid: '162555AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    otherConceptUuid: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-  },
-};
-
-jest.mock('./allergy-form.resource', () => ({
-  savePatientAllergy: jest.fn(),
-  fetchAllergensAndReaction: jest.fn(),
-}));
-
-describe('<AllergyForm>', () => {
-  const renderAllergyForm = () => {
-    mockedUseConfig.mockReturnValue(mockConcepts);
-    mockFetchAllergensAndReaction.mockReturnValue(of(mockAllergenAndReactions));
-    render(
-      <AllergyForm
-        closeWorkspace={mockedCloseWorkspace}
-        isTablet={true}
-        patient={mockPatient}
-        patientUuid={mockPatient.id}
-      />,
-    );
-  };
-
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('should display allergy form correctly', async () => {
-    renderAllergyForm();
-    expect(screen.getByRole('tab', { name: /Drug/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /Food/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /Environmental/i })).toBeInTheDocument();
-
-    // Display drug allergens
-    expect(screen.getByRole('radio', { name: /ACE inhibitors/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Aspirin/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Cephalosporins/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Codeine/i })).toBeInTheDocument();
-
-    // Display food allergen
-    const foodAllergen = screen.getByRole('tab', { name: /Food/i });
-    userEvent.click(foodAllergen);
-
-    expect(screen.getByRole('radio', { name: /Beef/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Caffeine/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Chocolate/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Strawberries/i })).toBeInTheDocument();
-
-    const beefAllergen = screen.getByRole('radio', { name: /Beef/i });
-    userEvent.click(beefAllergen);
-    expect(beefAllergen).toBeChecked();
-
-    // Should display other text box when other allergen is selected
-    const otherAllergen = screen.getByRole('radio', { name: /Other/i });
-    userEvent.click(otherAllergen);
-    expect(otherAllergen).toBeChecked();
-    expect(screen.getByRole('textbox', { name: /Please specify other allergen/i })).toBeInTheDocument();
-    const otherAllergenTextInput = screen.getByRole('textbox', { name: /Please specify other allergen/i });
-    userEvent.type(otherAllergenTextInput, 'Other Allergen Text');
-
-    // should display reaction checkboxes
-    expect(screen.getByRole('checkbox', { name: /Anaemia/i })).toBeInTheDocument();
-    expect(screen.getByRole('checkbox', { name: /Anaphylaxis/i })).toBeInTheDocument();
-    expect(screen.getByRole('checkbox', { name: /Headache/i })).toBeInTheDocument();
-    expect(screen.getByRole('checkbox', { name: /Hypertension/i })).toBeInTheDocument();
-
-    // should be able to change patient allergy reaction
-    const anaemiaReaction = screen.getByRole('checkbox', { name: /Anaemia/i });
-    expect(anaemiaReaction).not.toBeChecked();
-    userEvent.click(anaemiaReaction);
-    expect(anaemiaReaction).toBeChecked();
-
-    // uncheck selected anaemia reaction
-    userEvent.click(anaemiaReaction);
-    expect(anaemiaReaction).not.toBeChecked();
-
-    // should display other reaction checkboxes
-    const otherReaction = screen.getByRole('checkbox', { name: /Other/i });
-    userEvent.click(otherReaction);
-    expect(screen.getByLabelText(/Please specify other reaction/)).toBeInTheDocument();
-    const otherReactionTextInput = screen.getByLabelText(/Please specify other reaction/);
-    userEvent.type(otherReactionTextInput, 'Other Reaction');
-
-    expect(screen.getByRole('radio', { name: /Mild/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Moderate/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Severe/i })).toBeInTheDocument();
-    const severeReactionRadio = screen.getByRole('radio', { name: /Severe/i });
-    userEvent.click(severeReactionRadio);
-    expect(severeReactionRadio).toBeChecked();
-
-    const commentText = screen.getByRole('textbox', { name: /Comments/i });
-    userEvent.type(commentText, 'patient test comment');
-
-    const dateOfFirstOnset = screen.getByRole('textbox', { name: /Date of first onset/i });
-    fireEvent.change(dateOfFirstOnset, new Date('2021-12-12').toISOString());
-
-    // Save patient allergy
-    mockSavePatientAllergy.mockReturnValue(Promise.resolve({ status: 201 }));
-    const saveButton = screen.getByRole('button', { name: /Save and Close/i });
-    userEvent.click(saveButton);
-    expect(mockSavePatientAllergy).toHaveBeenCalledWith(
-      {
-        allergen: {
-          allergenType: 'ENVIRONMENT',
-          codedAllergen: { uuid: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
-          nonCodedAllergen: 'Other Allergen Text',
-        },
-        comment: 'patient test comment',
-        reactions: [{ reaction: { uuid: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' }, reactionNonCoded: 'Other Reaction' }],
-        severity: { uuid: '1500AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
-      },
-      '8673ee4f-e2ab-4077-ba55-4980f408773e',
-      expect.anything(),
-    );
-  });
-
-  it('should display an error when loading the form fails', () => {
-    mockedUseConfig.mockReturnValue(mockConcepts);
-    mockFetchAllergensAndReaction.mockReturnValue(throwError('loading error'));
-    render(
-      <AllergyForm
-        closeWorkspace={mockedCloseWorkspace}
-        isTablet={true}
-        patient={mockPatient}
-        patientUuid={mockPatient.id}
-      />,
-    );
-
-    expect(screen.getByText(/Allergy Form Error/i)).toBeInTheDocument();
-  });
-
-  it('should display an error message when error occurs while saving patient allergy', async () => {
-    renderAllergyForm();
-    const promise = Promise.resolve();
-    mockSavePatientAllergy.mockReturnValue(Promise.reject({ status: 500 }));
-    const saveButton = screen.getByRole('button', { name: /Save and Close/i });
-    userEvent.click(saveButton);
-    await waitFor(() =>
-      expect(mockedShowNotification).toHaveBeenCalledWith({
-        critical: true,
-        description: undefined,
-        kind: 'error',
-        title: 'Error saving allergy',
-      }),
-    );
-    await act(() => promise);
-  });
-});
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
index d029421af7..4875c4ad84 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
@@ -1,88 +1,50 @@
-import React from 'react';
-import { mutate } from 'swr';
-import styles from './allergy-form.component.scss';
-import AllergyFormTab from './allergy-form-tab.component';
-import { useTranslation } from 'react-i18next';
-import { fhirBaseUrl, showNotification, showToast, useConfig } from '@openmrs/esm-framework';
-import { AllergiesConfigObject } from '../../config-schema';
-import { fetchAllergensAndReaction, savePatientAllergy } from './allergy-form.resource';
-import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
-  SearchSkeleton,
-  TextInput,
-  TextArea,
+  Button,
+  ButtonSet,
   Checkbox,
-  Tabs,
-  Tab,
   DatePicker,
   DatePickerInput,
+  Form,
   RadioButton,
-  Button,
   RadioButtonGroup,
-  ButtonSet,
+  Row,
+  Tab,
+  Tabs,
+  TextArea,
+  TextInput,
 } from 'carbon-components-react';
-import { OpenMRSResource } from '../../types';
-
-enum ActionTypes {
-  pending = 'pending',
-  resolved = 'resolved',
-  error = 'error',
-}
-interface Pending {
-  type: ActionTypes.pending;
-}
-interface Error {
-  type: ActionTypes.error;
-  payload: Error;
-}
-
-interface Resolved {
-  type: ActionTypes.resolved;
-  payload: AllergyAndReactions;
-}
-
-type Action = Pending | Error | Resolved;
+import { useTranslation } from 'react-i18next';
+import { first } from 'rxjs/operators';
+import { mutate } from 'swr';
+import {
+  ExtensionSlot,
+  FetchResponse,
+  fhirBaseUrl,
+  showNotification,
+  showToast,
+  useConfig,
+} from '@openmrs/esm-framework';
+import { Allergens, fetchAllergensAndAllergicReactions, NewAllergy } from './allergy-form.resource';
+import { saveAllergy } from '../allergy-intolerance.resource';
+import styles from './allergy-form.scss';
 
-enum AllergenType {
+enum AllergenTypes {
   FOOD = 'FOOD',
   DRUG = 'DRUG',
   ENVIRONMENT = 'ENVIRONMENT',
 }
 
 interface AllergyFormProps {
+  closeWorkspace: () => void;
+  isTablet: boolean;
   patient: fhir.Patient;
   patientUuid: string;
-  closeWorkspace(): void;
-  isTablet: boolean;
 }
 
-interface AllergyAndReactions {
-  drugAllergens: Array<OpenMRSResource>;
-  foodAllergens: Array<OpenMRSResource>;
-  environmentalAllergens: Array<OpenMRSResource>;
-  allergyReaction: Array<OpenMRSResource>;
-}
-
-interface PatientAllergenAndReactions {
-  status: 'pending' | 'resolved' | 'error';
-  allergenAndReaction: AllergyAndReactions;
-  error?: null | Error;
-}
-
-const formStatusReducer = (state: PatientAllergenAndReactions, action: Action): PatientAllergenAndReactions => {
-  switch (action.type) {
-    case 'pending':
-      return { ...state, status: action.type };
-    case 'resolved':
-      return { allergenAndReaction: action.payload, status: action.type };
-    case 'error':
-      return { ...state, error: action.payload, status: action.type };
-  }
-};
-
-const AllergyForm: React.FC<AllergyFormProps> = ({ isTablet, closeWorkspace, patientUuid }) => {
+const AllergyForm: React.FC<AllergyFormProps> = ({ closeWorkspace, isTablet, patientUuid }) => {
   const { t } = useTranslation();
-  const { concepts } = useConfig() as AllergiesConfigObject;
+  const { concepts } = useConfig();
   const {
     drugAllergenUuid,
     foodAllergenUuid,
@@ -92,277 +54,282 @@ const AllergyForm: React.FC<AllergyFormProps> = ({ isTablet, closeWorkspace, pat
     severeReactionUuid,
     moderateReactionUuid,
     otherConceptUuid,
-  } = React.useMemo(() => concepts, [concepts]);
-  const [comment, setComment] = React.useState<string>();
-  const [patientReactions, setPatientReactions] = React.useState<Array<string>>([]);
-  const [selectedAllergen, setSelectedAllergen] = React.useState<string>();
-  const [severityOfReaction, setSeverityOfReaction] = React.useState<string>();
-  const [dateOfOnset, setDateOfOnset] = React.useState<Date>();
-  const [{ status, allergenAndReaction, error }, dispatch] = React.useReducer(formStatusReducer, {
-    status: ActionTypes.pending,
-    allergenAndReaction: null,
-  });
-  const [allergenType, setAllergenType] = React.useState<AllergenType>(AllergenType.DRUG);
-  const [otherReaction, setOtherReaction] = React.useState<string>();
-  const [otherAllergen, setOtherAllergen] = React.useState<string>();
+  } = useMemo(() => concepts, [concepts]);
+  const patientState = useMemo(() => ({ patientUuid }), [patientUuid]);
+  const [allergens, setAllergens] = useState<Allergens>(null);
+  const [allergicReactions, setAllergicReactions] = useState<Array<string>>([]);
+  const [comment, setComment] = useState('');
+  const [nonCodedAllergenType, setNonCodedAllergenType] = useState('');
+  const [nonCodedAllergicReaction, setNonCodedAllergicReaction] = useState('');
+  const [onsetDate, setOnsetDate] = useState<Date | null>(null);
+  const [selectedAllergen, setSelectedAllergen] = useState('');
+  const [selectedAllergenType, setSelectedAllergenType] = useState(AllergenTypes.DRUG);
+  const [severityOfWorstReaction, setSeverityOfWorstReaction] = useState('');
+  const allergenTypes = [t('drug', 'Drug'), t('food', 'Food'), t('environmental', 'Environmental')];
+  const severityLevels = [t('mild', 'Mild'), t('moderate', 'Moderate'), t('severe', 'Severe')];
 
-  React.useEffect(() => {
-    if (drugAllergenUuid && foodAllergenUuid && environmentalAllergenUuid) {
-      const sub = fetchAllergensAndReaction([
-        drugAllergenUuid,
-        foodAllergenUuid,
-        environmentalAllergenUuid,
-        allergyReactionUuid,
-      ]).subscribe(
-        (data) => {
-          dispatch({ type: ActionTypes.resolved, payload: data });
-        },
-        (error) => {
-          dispatch({ type: ActionTypes.error, payload: error });
-        },
-      );
-      return () => sub.unsubscribe();
-    }
-  }, [drugAllergenUuid, environmentalAllergenUuid, foodAllergenUuid, allergyReactionUuid]);
-
-  const handlePatientReactionChange = React.useCallback(
-    (value: boolean, id: string, event: React.ChangeEvent<HTMLInputElement>) => {
-      value
-        ? setPatientReactions((prevState) => [...prevState, id])
-        : setPatientReactions((prevState) => prevState.filter((reaction) => reaction !== id));
-    },
-    [],
-  );
+  useEffect(() => {
+    const allergenUuids = [drugAllergenUuid, foodAllergenUuid, environmentalAllergenUuid, allergyReactionUuid];
+    fetchAllergensAndAllergicReactions(allergenUuids).pipe(first()).subscribe(setAllergens);
+  }, [allergyReactionUuid, drugAllergenUuid, environmentalAllergenUuid, foodAllergenUuid]);
 
-  const handleAllergenTypeChange = React.useCallback((index: number) => {
+  const handleTabChange = (index: number) => {
     switch (index) {
       case 0:
-        setAllergenType(AllergenType.DRUG);
+        setSelectedAllergenType(AllergenTypes.DRUG);
+        break;
       case 1:
-        setAllergenType(AllergenType.FOOD);
+        setSelectedAllergenType(AllergenTypes.FOOD);
+        break;
       case 2:
-        setAllergenType(AllergenType.ENVIRONMENT);
+        setSelectedAllergenType(AllergenTypes.ENVIRONMENT);
+        break;
     }
+  };
+
+  const handleAllergicReactionChange = useCallback((value: boolean, id: string) => {
+    value
+      ? setAllergicReactions((prevState) => [...prevState, id])
+      : setAllergicReactions((prevState) => prevState.filter((reaction) => reaction !== id));
   }, []);
 
-  const handleSavePatientAllergy = React.useCallback(() => {
-    const allergyPayload = {
-      allergen:
-        selectedAllergen === otherConceptUuid
-          ? {
-              allergenType: allergenType,
-              codedAllergen: {
-                uuid: selectedAllergen,
-              },
-              nonCodedAllergen: otherAllergen,
-            }
-          : {
-              allergenType: allergenType,
-              codedAllergen: {
-                uuid: selectedAllergen,
-              },
-            },
-      severity: {
-        uuid: severityOfReaction,
-      },
-      comment: comment,
-      reactions: patientReactions?.map((reaction) => {
-        return reaction === otherConceptUuid
-          ? { reaction: { uuid: reaction }, reactionNonCoded: otherReaction }
-          : { reaction: { uuid: reaction } };
-      }),
-    };
+  const handleSubmit = useCallback(
+    (event: React.SyntheticEvent) => {
+      event.preventDefault();
 
-    const ac = new AbortController();
+      let payload: NewAllergy = {
+        allergen:
+          selectedAllergen === otherConceptUuid
+            ? {
+                allergenType: selectedAllergenType,
+                codedAllergen: {
+                  uuid: selectedAllergen,
+                },
+                nonCodedAllergen: nonCodedAllergenType,
+              }
+            : {
+                allergenType: selectedAllergenType,
+                codedAllergen: {
+                  uuid: selectedAllergen,
+                },
+              },
+        severity: {
+          uuid: severityOfWorstReaction,
+        },
+        comment: comment,
+        reactions: allergicReactions?.map((reaction) => {
+          return reaction === otherConceptUuid
+            ? { reaction: { uuid: reaction }, reactionNonCoded: nonCodedAllergicReaction }
+            : { reaction: { uuid: reaction } };
+        }),
+      };
 
-    savePatientAllergy(allergyPayload, patientUuid, ac).then(
-      (response) => {
-        if (response.status === 201) {
-          closeWorkspace();
+      const abortController = new AbortController();
+      saveAllergy(payload, patientUuid, abortController)
+        .then(
+          (response: FetchResponse) => {
+            if (response.status === 201) {
+              closeWorkspace();
 
-          showToast({
-            critical: true,
-            kind: 'success',
-            title: t('allergySaved', 'Allergy saved'),
-            description: t('allergyNowVisible', 'It is now visible on the Allergies page'),
-          });
+              showToast({
+                critical: true,
+                kind: 'success',
+                title: t('allergySaved', 'Allergy saved'),
+                description: t('allergyNowVisible', 'It is now visible on the Allergies page'),
+              });
 
-          mutate(`${fhirBaseUrl}/AllergyIntolerance?patient=${patientUuid}`);
-        }
-      },
-      (err) => {
-        dispatch({ type: ActionTypes.error, payload: err });
-        showNotification({
-          title: t('allergySaveError', 'Error saving allergy'),
-          kind: 'error',
-          critical: true,
-          description: err?.message,
-        });
-      },
-    );
-    return () => ac.abort();
-  }, [
-    selectedAllergen,
-    otherConceptUuid,
-    allergenType,
-    otherAllergen,
-    severityOfReaction,
-    comment,
-    patientReactions,
-    patientUuid,
-    otherReaction,
-    closeWorkspace,
-    t,
-  ]);
+              mutate(`${fhirBaseUrl}/AllergyIntolerance?patient=${patientUuid}`);
+            }
+          },
+          (err) => {
+            showNotification({
+              title: t('allergySaveError', 'Error saving allergy'),
+              kind: 'error',
+              critical: true,
+              description: err?.message,
+            });
+          },
+        )
+        .finally(() => abortController.abort());
+    },
+    [
+      selectedAllergen,
+      otherConceptUuid,
+      selectedAllergenType,
+      nonCodedAllergenType,
+      severityOfWorstReaction,
+      comment,
+      allergicReactions,
+      patientUuid,
+      nonCodedAllergicReaction,
+      closeWorkspace,
+      t,
+    ],
+  );
 
   return (
-    <main>
-      {status === ActionTypes.pending && <SearchSkeleton />}
-      {status === ActionTypes.resolved && (
-        <div className={styles.form}>
-          <div className={styles.allergyFormWrapper}>
-            <div>
-              <header className={styles.productiveHeading03}>
-                {t('allergenAndReaction', 'Allergen and reactions')}
-              </header>
-              <div className={styles.sectionWrapper}>
-                <section>
-                  <header className={styles.productiveHeading02}>
-                    {t('selectTheAllergens', 'Select the allergens')}
-                  </header>
-                  <Tabs
-                    onSelectionChange={handleAllergenTypeChange}
-                    tabContentClassName={styles.allergyFormTabs}
-                    scrollIntoView={true}
-                  >
-                    <Tab id="tab-1" label={t('drug', 'Drug')}>
-                      <AllergyFormTab
-                        name={'drug'}
-                        allergens={allergenAndReaction?.drugAllergens}
-                        selectedAllergen={selectedAllergen}
-                        handleChange={setSelectedAllergen}
-                      />
-                    </Tab>
-                    <Tab id="tab-2" label={t('food', 'Food')}>
-                      <AllergyFormTab
-                        name="food"
-                        allergens={allergenAndReaction?.foodAllergens}
-                        selectedAllergen={selectedAllergen}
-                        handleChange={setSelectedAllergen}
-                      />
-                    </Tab>
-                    <Tab id="tab-3" label={t('environmental', 'Environmental')}>
-                      <AllergyFormTab
-                        name="environment"
-                        allergens={allergenAndReaction?.environmentalAllergens}
-                        selectedAllergen={selectedAllergen}
-                        handleChange={setSelectedAllergen}
-                      />
-                    </Tab>
-                  </Tabs>
-                  {selectedAllergen === otherConceptUuid && (
-                    <TextInput
-                      light={isTablet}
-                      id="otherAllergen"
-                      invalidText={t('otherAllergenInvalidText', 'Other allergen is required')}
-                      labelText={t('pleaseSpecifyOtherReaction', 'Please specify other allergen')}
-                      onChange={(event) => setOtherAllergen(event.target.value)}
-                      placeholder={t('enterOtherReaction', 'Type in other Allergen')}
-                    />
-                  )}
-                </section>
-                <section>
-                  <header className={styles.productiveHeading02}>
-                    {t('selectTheReactions', 'Select the reactions')}
-                  </header>
-                  <div className={styles.checkBoxWrapper}>
-                    {allergenAndReaction?.allergyReaction?.map((reaction, index) => (
-                      <Checkbox
-                        onChange={handlePatientReactionChange}
-                        key={index}
-                        labelText={reaction.display}
-                        id={reaction.uuid}
-                        value={reaction.display}
-                      />
-                    ))}
+    <Form>
+      {isTablet ? (
+        <Row className={styles.header}>
+          <ExtensionSlot
+            className={styles.content}
+            extensionSlotName="patient-details-header-slot"
+            state={patientState}
+          />
+        </Row>
+      ) : null}
+      <h1 className={styles.heading}>{t('allergensAndReactions', 'Allergens and reactions')}</h1>
+      <div className={`${styles.container} ${isTablet ? `${styles.tablet}` : `${styles.desktop}`}`}>
+        <section className={styles.section}>
+          <h2 className={styles.sectionHeading}>{t('selectAllergens', 'Select the allergens')}</h2>
+          <Tabs onSelectionChange={handleTabChange}>
+            {allergenTypes.map((allergenType, index) => {
+              const allergenCategory = allergenType.toLowerCase() + 'Allergens';
+              return (
+                <Tab id={`tab-${index + 1}`} key={index} label={allergenType}>
+                  <div className={isTablet && styles.wrapperContainer}>
+                    <RadioButtonGroup
+                      name={`allergen-type-${index + 1}`}
+                      orientation="vertical"
+                      onChange={(event) => setSelectedAllergen(event.toString())}
+                      valueSelected={selectedAllergen}
+                    >
+                      {allergens?.[allergenCategory]?.map((allergen) => (
+                        <RadioButton
+                          className={styles.radio}
+                          id={allergen.display}
+                          key={allergen.uuid}
+                          labelText={allergen.display}
+                          value={allergen.uuid}
+                        />
+                      ))}
+                    </RadioButtonGroup>
                   </div>
-                  {patientReactions.includes(otherConceptUuid) && (
-                    <TextInput
-                      light={isTablet}
-                      id="otherReaction"
-                      invalidText={t('otherReactionInvalidText', 'Other reaction is required')}
-                      labelText={t('pleaseSpecifyOtherReaction', 'Please specify other reaction')}
-                      onChange={(event) => setOtherReaction(event.target.value)}
-                      placeholder={t('enterOtherReaction', 'Type in other reaction')}
-                    />
-                  )}
-                </section>
-              </div>
+                </Tab>
+              );
+            })}
+          </Tabs>
+          {selectedAllergen === otherConceptUuid ? (
+            <div className={styles.input}>
+              <TextInput
+                light={isTablet}
+                id="nonCodedAllergenType"
+                labelText={t('otherNonCodedAllergen', 'Other non-coded allergen')}
+                onChange={(event) => setNonCodedAllergenType(event.target.value)}
+                placeholder={t('typeAllergenName', 'Please type in the name of the allergen')}
+              />
             </div>
-            <div>
-              <header className={styles.productiveHeading03}>
-                {t('severityAndDateOfOnset', 'Severity and date of onset')}
-              </header>
-              <div className={styles.sectionWrapper}>
-                <section>
-                  <header className={styles.productiveHeading02}>
-                    {t('severityOfWorstReaction', 'Severity of worst reaction')}
-                  </header>
-                  <RadioButtonGroup
-                    onChange={(event) => setSeverityOfReaction(event.toString())}
-                    name="severityOfWorstReaction"
-                    valueSelected={severityOfReaction}
-                  >
-                    <RadioButton id="mild" labelText={t('mild', 'Mild')} value={mildReactionUuid} />
-                    <RadioButton id="moderate" labelText={t('moderate', 'Moderate')} value={moderateReactionUuid} />
-                    <RadioButton id="severe" labelText={t('severe', 'Severe')} value={severeReactionUuid} />
-                  </RadioButtonGroup>
-                </section>
-                <section>
-                  <header className={styles.productiveHeading02}>{t('dateAndComments', 'Date and comments')}</header>
-                  <DatePicker
-                    light={isTablet}
-                    maxDate={new Date().toISOString()}
-                    dateFormat="m/d/Y"
-                    datePickerType="single"
-                  >
-                    <DatePickerInput
-                      id="date-of-first-onset"
-                      placeholder="mm/dd/yyyy"
-                      labelText={t('dateOfFirstOnset', 'Date of first onset')}
-                      type="text"
-                      size="xl"
-                      style={{ width: '18rem' }}
-                      onChange={(event) => setDateOfOnset(event.target.valueAsDate)}
-                    />
-                  </DatePicker>
-                  <TextArea
-                    light={isTablet}
-                    cols={25}
-                    onChange={(event) => setComment(event.target.value)}
-                    id="comments"
-                    invalidText={t('invalidComment', 'Invalid comment, try again')}
-                    labelText={t('comments', 'Comments')}
-                    placeholder={t('typeAnyAdditional', 'Type any additional comments here')}
-                    rows={4}
-                    style={{ width: '26.375rem' }}
-                  />
-                </section>
-              </div>
+          ) : null}
+        </section>
+        <section className={styles.section}>
+          <h2 className={styles.sectionHeading}>{t('selectReactions', 'Select the reactions')}</h2>
+          <div className={isTablet && styles.checkboxContainer} style={{ margin: '1rem' }}>
+            {allergens?.allergicReactions?.map((reaction, index) => (
+              <Checkbox
+                className={styles.checkbox}
+                key={index}
+                labelText={reaction.display}
+                id={reaction.uuid}
+                onChange={handleAllergicReactionChange}
+                value={reaction.display}
+              />
+            ))}
+          </div>
+          {allergicReactions.includes(otherConceptUuid) ? (
+            <div className={styles.input}>
+              <TextInput
+                light={isTablet}
+                id="nonCodedAllergicReaction"
+                labelText={t('otherNonCodedAllergicReaction', 'Other non-coded allergic reaction')}
+                onChange={(event) => setNonCodedAllergicReaction(event.target.value)}
+                placeholder={t('typeAllergicReactionName', 'Please type in the name of the allergic reaction')}
+              />
             </div>
+          ) : null}
+        </section>
+      </div>
+      <h1 className={styles.heading}>{t('severityAndOnsetDate', 'Severity and date of onset')}</h1>
+      <div className={`${styles.container} ${isTablet ? `${styles.tablet}` : `${styles.desktop}`}`}>
+        <section className={styles.section}>
+          <h2 className={styles.sectionHeading}>{t('severityOfWorstReaction', 'Severity of worst reaction')}</h2>
+          <div className={styles.wrapper}>
+            <RadioButtonGroup
+              name="severity-of-worst-reaction"
+              onChange={(event) => setSeverityOfWorstReaction(event.toString())}
+              valueSelected={severityOfWorstReaction}
+            >
+              {severityLevels.map((severity, index) => (
+                <RadioButton
+                  id={severity.toLowerCase() + 'Severity'}
+                  key={index}
+                  labelText={severity}
+                  value={(() => {
+                    switch (severity.toLowerCase()) {
+                      case 'mild':
+                        return mildReactionUuid;
+                      case 'moderate':
+                        return moderateReactionUuid;
+                      case 'severe':
+                        return severeReactionUuid;
+                      default:
+                        return '';
+                    }
+                  })()}
+                />
+              ))}
+            </RadioButtonGroup>
+          </div>
+        </section>
+        <section className={styles.section}>
+          <h2 className={styles.sectionHeading}>{t('dateAndComments', 'Date and comments')}</h2>
+          <div className={styles.wrapper}>
+            <DatePicker
+              id="onsetDate"
+              dateFormat="d/m/Y"
+              datePickerType="single"
+              light={!isTablet}
+              maxDate={new Date().toISOString()}
+              onChange={([date]) => setOnsetDate(date)}
+              value={onsetDate}
+            >
+              <DatePickerInput
+                id="onsetDateInput"
+                placeholder="dd/mm/yyyy"
+                labelText={t('dateOfFirstOnset', 'Date of first onset')}
+              />
+            </DatePicker>
+          </div>
+          <div className={styles.wrapper}>
+            <TextArea
+              className={styles.textbox}
+              cols={20}
+              light={!isTablet}
+              id="comments"
+              invalidText={t('invalidComment', 'Invalid comment, try again')}
+              labelText={t('comments', 'Comments')}
+              onChange={(event) => setComment(event.target.value)}
+              placeholder={t('typeAdditionalComments', 'Type any additional comments here')}
+              rows={4}
+            />
           </div>
-          <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-            <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
-              {t('discard', 'Discard')}
-            </Button>
-            <Button className={styles.button} kind="primary" onClick={handleSavePatientAllergy} type="submit">
-              {t('saveAndClose', 'Save and close')}
-            </Button>
-          </ButtonSet>
-        </div>
-      )}
-      {status === ActionTypes.error && <ErrorState headerTitle={'Allergy Form Error'} error={error} />}
-    </main>
+        </section>
+      </div>
+      <div className={styles.buttonContainer}>
+        <ButtonSet style={{ margin: isTablet ? '1.5rem 1rem' : '0rem' }}>
+          <Button className={styles.button} onClick={closeWorkspace} kind="secondary">
+            {t('discard', 'Discard')}
+          </Button>
+          <Button
+            className={styles.button}
+            disabled={!selectedAllergen || (selectedAllergen === otherConceptUuid && !nonCodedAllergenType)}
+            onClick={handleSubmit}
+            kind="primary"
+          >
+            {t('saveAndClose', 'Save and close')}
+          </Button>
+        </ButtonSet>
+      </div>
+    </Form>
   );
 };
 
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.resource.ts b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.resource.ts
index 3477d7c3f8..3a04c97d97 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.resource.ts
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.resource.ts
@@ -1,13 +1,20 @@
-import { openmrsFetch, openmrsObservableFetch } from '@openmrs/esm-framework';
-import { forkJoin } from 'rxjs';
+import { forkJoin, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { OpenMRSResource } from '../../types';
+import { openmrsFetch, openmrsObservableFetch } from '@openmrs/esm-framework';
 
 interface AllergenReaction {
   setMembers: Array<OpenMRSResource>;
 }
 
-export const fetchAllergensAndReaction = (concepts: Array<string>) => {
+export type Allergens = {
+  allergicReactions: Array<Record<string, string>>;
+  drugAllergens: Array<Record<string, string>>;
+  environmentalAllergens: Array<Record<string, string>>;
+  foodAllergens: Array<Record<string, string>>;
+};
+
+export const fetchAllergensAndAllergicReactions = (concepts: Array<string>): Observable<Allergens> => {
   const response = concepts.map((concept) =>
     openmrsObservableFetch<AllergenReaction>(`/ws/rest/v1/concept/${concept}?v=full`).pipe(
       map(({ data }) =>
@@ -23,19 +30,38 @@ export const fetchAllergensAndReaction = (concepts: Array<string>) => {
       const drugAllergens = response[0];
       const foodAllergens = response[1];
       const environmentalAllergens = response[2];
-      const allergyReaction = response[3];
-      return { drugAllergens, foodAllergens, environmentalAllergens, allergyReaction };
+      const allergicReactions = response[3];
+      return { drugAllergens, foodAllergens, environmentalAllergens, allergicReactions };
     }),
   );
 };
 
-export function savePatientAllergy(payLoad: any, patientUuid: string, abortController: AbortController) {
+export type NewAllergy = {
+  allergen: {
+    allergenType: string;
+    codedAllergen: {
+      uuid: string;
+    };
+    nonCodedAllergen?: string;
+  };
+  severity: {
+    uuid: string;
+  };
+  comment?: string;
+  reactions: Array<{
+    reaction: {
+      uuid: string;
+    };
+  }>;
+};
+
+export function saveAllergy(payload: NewAllergy, patientUuid: string, abortController: AbortController) {
   return openmrsFetch(`/ws/rest/v1/patient/${patientUuid}/allergy`, {
     headers: {
       'Content-Type': 'application/json',
     },
     method: 'POST',
-    body: payLoad,
+    body: payload,
     signal: abortController.signal,
   });
 }
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
new file mode 100644
index 0000000000..e75759361d
--- /dev/null
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
@@ -0,0 +1,118 @@
+@import '../../root.scss';
+
+.header {
+  border-bottom: 0.0625rem solid $grey-2;
+  margin: 0;
+}
+
+.content {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: 0.5rem 1rem;
+  width: 100%;
+}
+
+.tablet { 
+  background-color: white;
+}
+
+.desktop {
+  background-color: $ui-01;
+}
+
+.container {
+  border: solid 1px $ui-03;
+  margin: 1rem;
+  
+  &:first-of-type {
+    margin-bottom: 3rem;
+  }
+
+  &:last-of-type {
+    margin-top: 2.5rem;
+  }
+}
+
+.heading {
+  @include carbon--type-style("productive-heading-03");
+  color: $text-01;
+  margin: 1rem 1rem 0.5rem;
+}
+
+.section {
+  &:not(:first-of-type) {
+    margin-bottom: 2rem;
+  }
+
+  &:last-of-type {
+    margin-top: 2rem;
+  }
+}
+
+.wrapperContainer fieldset {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+}
+
+.wrapperContainer :global(.bx--radio-button__label) {
+  justify-content: flex-start;
+}
+
+.sectionHeading {
+  @include carbon--type-style('productive-heading-02');  
+  color: $text-01;
+  margin: 1rem 1rem 0.5rem;
+}
+
+.radio {
+  margin: 1rem 0rem;
+
+  label {
+    justify-content: flex-start;
+  }
+}
+
+.checkbox {
+  &:not(:first-child) {
+    // subtract default checkbox wrapper margins
+    margin: calc(1rem - 0.1875rem - 0.25rem) 0rem;
+  }
+}
+
+.input {
+  margin: 0rem 1rem 1rem;
+}
+
+.checkboxContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.wrapper { 
+  margin: 1rem;
+
+  &:last-of-type {
+    margin-top: 1.5rem;
+  }
+}
+
+.button {
+  min-width: 50%;
+}
+
+.buttonContainer {
+  margin-top: 2rem;
+
+  button {
+    height: 4rem;
+    display: flex;
+    align-content: flex-start;
+    align-items: flex-start;
+    flex-direction: row;
+  }
+}
+
+.textbox {
+  width: 26.375rem;
+}
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
index b19b6c0c39..ae7bd9f1e1 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
@@ -13,7 +13,7 @@ import {
   TableHeader,
   TableRow,
 } from 'carbon-components-react';
-import styles from './allergies-overview.scss';
+import { useTranslation } from 'react-i18next';
 import {
   CardHeader,
   EmptyState,
@@ -21,25 +21,25 @@ import {
   launchPatientWorkspace,
   PatientChartPagination,
 } from '@openmrs/esm-patient-common-lib';
-import { useTranslation } from 'react-i18next';
-import { useAllergies } from './allergy-intolerance.resource';
 import { usePagination } from '@openmrs/esm-framework';
 import { allergiesToShowCount, patientAllergiesFormWorkspace } from '../constants';
+import { useAllergies } from './allergy-intolerance.resource';
+import styles from './allergies-overview.scss';
 
 interface AllergiesOverviewProps {
   basePath: string;
   patient: fhir.Patient;
-  showAddAllergy: boolean;
+  showAddAllergyButton: boolean;
 }
 
-const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddAllergy, basePath }) => {
+const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddAllergyButton, basePath }) => {
   const { t } = useTranslation();
   const displayText = t('allergyIntolerances', 'allergy intolerances');
   const headerTitle = t('allergies', 'Allergies');
   const urlLabel = t('seeAll', 'See all');
   const pageUrl = window.spaBase + basePath + '/allergies';
 
-  const { data: allergies, isError, isLoading, isValidating } = useAllergies(patient.id);
+  const { allergies, isError, isLoading, isValidating } = useAllergies(patient.id);
   const { results: paginatedAllergies, goTo, currentPage } = usePagination(allergies ?? [], allergiesToShowCount);
 
   const tableHeaders = [
@@ -71,7 +71,7 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
       <div className={styles.widgetCard}>
         <CardHeader title={headerTitle}>
           <span>{isValidating ? <InlineLoading /> : null}</span>
-          {showAddAllergy && (
+          {showAddAllergyButton && (
             <Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>
               {t('add', 'Add')}
             </Button>
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.test.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.test.tsx
index 2868dc30f3..6019896cc5 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.test.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.test.tsx
@@ -9,7 +9,7 @@ import AllergiesOverview from './allergies-overview.component';
 const testProps = {
   patient: mockPatient,
   basePath: patientChartBasePath,
-  showAddAllergy: false,
+  showAddAllergyButton: false,
 };
 
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-tile.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-tile.component.tsx
index cf439c45c8..4b4dbb30a8 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-tile.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-tile.component.tsx
@@ -10,7 +10,7 @@ interface AllergyTileInterface {
 
 const AllergyTile: React.FC<AllergyTileInterface> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { data: allergies, isLoading } = useAllergies(patientUuid);
+  const { allergies, isLoading } = useAllergies(patientUuid);
 
   if (isLoading) {
     return <InlineLoading role="progressbar" description={`${t('loading', 'Loading')} ...`} />;
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies.component.tsx
index 1e97170d6a..e11ac8d19b 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies.component.tsx
@@ -7,10 +7,10 @@ interface AllergiesProps {
   basePath: string;
   patient: fhir.Patient;
   patientUuid: string;
-  showAddAllergy: boolean;
+  showAddAllergyButton: boolean;
 }
 
-export default function Allergies({ basePath, patient, patientUuid, showAddAllergy }: AllergiesProps) {
+export default function Allergies({ basePath, patient, patientUuid, showAddAllergyButton }: AllergiesProps) {
   return (
     <AllergiesContext.Provider value={{ patientUuid, patient }}>
       <BrowserRouter basename={`${window.spaBase}${basePath}/allergies`}>
@@ -18,7 +18,7 @@ export default function Allergies({ basePath, patient, patientUuid, showAddAller
           <Route
             exact
             path="/"
-            render={() => <AllergyDetailedSummary patient={patient} showAddAllergy={showAddAllergy} />}
+            render={() => <AllergyDetailedSummary patient={patient} showAddAllergyButton={showAddAllergyButton} />}
           />
         </Switch>
       </BrowserRouter>
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergy-intolerance.resource.tsx b/packages/esm-patient-allergies-app/src/allergies/allergy-intolerance.resource.ts
similarity index 73%
rename from packages/esm-patient-allergies-app/src/allergies/allergy-intolerance.resource.tsx
rename to packages/esm-patient-allergies-app/src/allergies/allergy-intolerance.resource.ts
index d615304297..8d1c272b15 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergy-intolerance.resource.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergy-intolerance.resource.ts
@@ -2,10 +2,31 @@ import useSWR from 'swr';
 import { map } from 'rxjs/operators';
 import capitalize from 'lodash-es/capitalize';
 import { fhirBaseUrl, openmrsFetch, openmrsObservableFetch } from '@openmrs/esm-framework';
-import { AllergyData, AllergicReaction, FHIRAllergy, FHIRAllergyResponse } from '../types';
-import { ALLERGY_REACTION_CONCEPT } from '../constants';
+import { FHIRAllergy, FHIRAllergyResponse } from '../types';
 
-export function useAllergies(patientUuid: string) {
+export type Allergy = {
+  id: string;
+  clinicalStatus: string;
+  criticality: string;
+  display: string;
+  recordedDate: string;
+  recordedBy: string;
+  recorderType: string;
+  note: string;
+  reactionToSubstance: string;
+  reactionManifestations: Array<string>;
+  reactionSeverity: string;
+  lastUpdated: string;
+};
+
+type UseAllergies = {
+  allergies: Array<Allergy>;
+  isError: Error | null;
+  isLoading: boolean;
+  isValidating: boolean;
+};
+
+export function useAllergies(patientUuid: string): UseAllergies {
   const { data, error, isValidating } = useSWR<{ data: FHIRAllergyResponse }, Error>(
     `${fhirBaseUrl}/AllergyIntolerance?patient=${patientUuid}`,
     openmrsFetch,
@@ -20,7 +41,7 @@ export function useAllergies(patientUuid: string) {
       : null;
 
   return {
-    data: data ? formattedAllergies : null,
+    allergies: data ? formattedAllergies : null,
     isError: error,
     isLoading: !data && !error,
     isValidating,
@@ -29,7 +50,7 @@ export function useAllergies(patientUuid: string) {
 
 function mapAllergyProperties(allergy: FHIRAllergy): Allergy {
   const manifestations = allergy?.reaction[0]?.manifestation?.map((coding) => coding.coding[0]?.display);
-  const formattedAllergy: Allergy = {
+  return {
     id: allergy?.id,
     clinicalStatus: allergy?.clinicalStatus?.coding[0]?.display,
     criticality: allergy?.criticality,
@@ -43,39 +64,15 @@ function mapAllergyProperties(allergy: FHIRAllergy): Allergy {
     reactionSeverity: capitalize(allergy?.reaction[0]?.severity),
     lastUpdated: allergy?.meta?.lastUpdated,
   };
-  return formattedAllergy;
 }
 
 export function fetchAllergyByUuid(allergyUuid: string) {
-  return openmrsObservableFetch(`${fhirBaseUrl}/AllergyIntolerance/${allergyUuid}`).pipe(
-    map(({ data }) => data),
-    map((data: FHIRAllergy) => mapAllergyProperties(data)),
+  return openmrsObservableFetch<FHIRAllergy>(`${fhirBaseUrl}/AllergyIntolerance/${allergyUuid}`).pipe(
+    map(({ data }) => mapAllergyProperties(data)),
   );
 }
 
-export function getPatientAllergyByPatientUuid(
-  patientUuid: string,
-  allergyUuid: any,
-  abortController: AbortController,
-) {
-  return openmrsFetch<AllergyData>(`/ws/rest/v1/patient/${patientUuid}/allergy/${allergyUuid.allergyUuid}?v=full`, {
-    signal: abortController.signal,
-  });
-}
-
-export function getAllergyAllergenByConceptUuid(allergyUuid: string) {
-  return openmrsObservableFetch(`/ws/rest/v1/concept/${allergyUuid}?v=full`).pipe(
-    map(({ data }) => data['setMembers']),
-  );
-}
-
-export function getAllergicReactions() {
-  return openmrsObservableFetch<Array<AllergicReaction>>(`/ws/rest/v1/concept/${ALLERGY_REACTION_CONCEPT}?v=full`).pipe(
-    map(({ data }) => data['setMembers']),
-  );
-}
-
-export function savePatientAllergy(patientAllergy: any, patientUuid: string, abortController: AbortController) {
+export function saveAllergy(patientAllergy: any, patientUuid: string, abortController: AbortController) {
   const reactions = patientAllergy.reactionUuids.map((reaction: any) => {
     return {
       reaction: {
@@ -148,18 +145,3 @@ export function deletePatientAllergy(patientUuid: string, allergyUuid: any, abor
     signal: abortController.signal,
   });
 }
-
-export type Allergy = {
-  id: string;
-  clinicalStatus: string;
-  criticality: string;
-  display: string;
-  recordedDate: string;
-  recordedBy: string;
-  recorderType: string;
-  note: string;
-  reactionToSubstance: string;
-  reactionManifestations: Array<string>;
-  reactionSeverity: string;
-  lastUpdated: string;
-};
diff --git a/packages/esm-patient-allergies-app/src/index.ts b/packages/esm-patient-allergies-app/src/index.ts
index 4f81ab1986..1dff4058f2 100644
--- a/packages/esm-patient-allergies-app/src/index.ts
+++ b/packages/esm-patient-allergies-app/src/index.ts
@@ -56,8 +56,8 @@ function setupOpenMRS() {
         meta: {
           columnSpan: 4,
         },
-        online: { showAddAllergy: true },
-        offline: { showAddAllergy: false },
+        online: { showAddAllergyButton: true },
+        offline: { showAddAllergyButton: false },
       },
       {
         id: 'allergies-details-widget',
@@ -66,8 +66,8 @@ function setupOpenMRS() {
         meta: {
           columnSpan: 1,
         },
-        online: { showAddAllergy: true },
-        offline: { showAddAllergy: false },
+        online: { showAddAllergyButton: true },
+        offline: { showAddAllergyButton: false },
       },
       {
         id: 'allergies-summary-dashboard',
@@ -75,8 +75,8 @@ function setupOpenMRS() {
         order: 6,
         load: getSyncLifecycle(createDashboardLink(dashboardMeta), options),
         meta: dashboardMeta,
-        online: { showAddAllergy: true },
-        offline: { showAddAllergy: true },
+        online: { showAddAllergyButton: true },
+        offline: { showAddAllergyButton: true },
       },
       {
         id: patientAllergiesFormWorkspace,
@@ -88,9 +88,27 @@ function setupOpenMRS() {
           },
         },
       },
+      {
+        id: 'patient-details-tile',
+        slot: 'patient-details-header-slot',
+        order: 1,
+        load: getAsyncLifecycle(
+          () => import('../../esm-patient-chart-app/src/ui-components/patient-details-tile.component'),
+          options,
+        ),
+      },
+      {
+        id: 'weight-tile',
+        slot: 'patient-details-header-slot',
+        order: 2,
+        load: getAsyncLifecycle(
+          () => import('../../esm-patient-biometrics-app/src/biometrics/weight-tile.component'),
+          options,
+        ),
+      },
       {
         id: 'allergy-tile',
-        slot: 'visit-form-header-slot',
+        slot: 'patient-details-header-slot',
         order: 3,
         load: getAsyncLifecycle(() => import('./allergies/allergies-tile.component'), options),
       },
diff --git a/packages/esm-patient-allergies-app/src/root.scss b/packages/esm-patient-allergies-app/src/root.scss
index 4e479f8e58..fb250cd7aa 100644
--- a/packages/esm-patient-allergies-app/src/root.scss
+++ b/packages/esm-patient-allergies-app/src/root.scss
@@ -1,6 +1,6 @@
 @import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";
-@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
 
 .productiveHeading01 {
   @include carbon--type-style("productive-heading-01");
@@ -13,22 +13,18 @@
 
 .productiveHeading03 {
   @include carbon--type-style("productive-heading-03");
-  
 }
 
 .productiveHeading04 {
   @include carbon--type-style("productive-heading-04");
-  
 }
 
 .productiveHeading05 {
   @include carbon--type-style("productive-heading-05");
-  
 }
 
 .productiveHeading06 {
   @include carbon--type-style("productive-heading-06");
-  
 }
 
 .bodyShort01 {
diff --git a/packages/esm-patient-allergies-app/src/types/index.ts b/packages/esm-patient-allergies-app/src/types/index.ts
index eb76b2ef1b..bd2caa3923 100644
--- a/packages/esm-patient-allergies-app/src/types/index.ts
+++ b/packages/esm-patient-allergies-app/src/types/index.ts
@@ -1,10 +1,3 @@
-export interface DataCaptureComponentProps {
-  entryStarted: () => void;
-  entrySubmitted: () => void;
-  entryCancelled: () => void;
-  closeComponent: () => void;
-}
-
 export interface FHIRAllergyResponse {
   entry: Array<{
     resource: FHIRAllergy;
@@ -48,7 +41,7 @@ export interface FHIRAllergy {
     reference: string;
     type: string;
   };
-  reaction: Array<FHIRAllergicReaction>;
+  reaction: Array<AllergicReaction>;
   recordedDate: string;
   recorder: {
     display: string;
@@ -68,18 +61,16 @@ export interface ExtensionData {
   url: string;
 }
 
-export interface FHIRAllergicReaction {
-  manifestation: Array<FHIRAllergyManifestation>;
+export interface AllergicReaction {
+  manifestation: Array<{
+    coding: CodingData;
+  }>;
   severity: string;
   substance: {
     coding: Array<CodingData>;
   };
 }
 
-export interface FHIRAllergyManifestation {
-  coding: CodingData;
-}
-
 export interface CodingData {
   code: string;
   display: string;
@@ -87,103 +78,6 @@ export interface CodingData {
   system?: string;
 }
 
-export interface AllergyData {
-  allergen: {
-    allergenType: string;
-    codedAllergen: {
-      answers: [];
-      attrributes: [];
-      conceptClass: DisplayMetadata;
-      display: string;
-      links: Links;
-      mappings: Array<DisplayMetadata>;
-      name: {
-        conceptNameType: string;
-        display: string;
-        locale: string;
-        name: string;
-        uuid: string;
-      };
-      names: Array<DisplayMetadata>;
-      setMembers: [];
-      uuid: string;
-    };
-  };
-  auditInfo: {
-    changedBy: DisplayMetadata;
-    creator: DisplayMetadata;
-    dateCreated: string;
-    dateChanged: string;
-  };
-  comment: string;
-  display: string;
-  links: Links;
-  reactions: [
-    {
-      reaction: AllergicReaction;
-    },
-  ];
-  severity: {
-    name: {
-      conceptNameType: string;
-      display: string;
-      locale: string;
-      name: string;
-      uuid: string;
-    };
-    names: Array<DisplayMetadata>;
-    uuid: string;
-  };
-}
-
-export type Allergen = {
-  answers: [];
-  attributes: [];
-  conceptClass: DisplayMetadata;
-  dataType: DisplayMetadata;
-  descriptions: [];
-  display: string;
-  links: Links;
-  mappings: Array<DisplayMetadata>;
-  name: {
-    display: string;
-    links: Links;
-    uuid: string;
-    conceptTypeName?: string;
-    locale: string;
-    localePreferred: boolean;
-    name: string;
-    resourceVersion: string;
-  };
-  names: Array<DisplayMetadata>;
-  setMembers: [];
-  uuid: string;
-};
-
-export type AllergicReaction = {
-  answers: [];
-  attributes: [];
-  conceptClass: DisplayMetadata;
-  datatype: DisplayMetadata;
-  descriptions: Array<DisplayMetadata>;
-  name: {
-    display: string;
-  };
-  display: string;
-  uuid: string;
-};
-
-export type Links = Array<{
-  rel: string;
-  uri: string;
-}>;
-
-export interface DisplayMetadata {
-  display?: string;
-  links?: Links;
-  uuid?: string;
-}
-
 export interface OpenMRSResource {
   uuid: string;
   display: string;
diff --git a/packages/esm-patient-allergies-app/translations/en.json b/packages/esm-patient-allergies-app/translations/en.json
index b9291d5f21..8f2d5be23c 100644
--- a/packages/esm-patient-allergies-app/translations/en.json
+++ b/packages/esm-patient-allergies-app/translations/en.json
@@ -1,7 +1,7 @@
 {
   "add": "Add",
   "allergen": "Allergen",
-  "allergenAndReaction": "Allergen and reactions",
+  "allergensAndReactions": "Allergens and reactions",
   "allergies": "Allergies",
   "allergyIntolerances": "allergy intolerances",
   "allergyNowVisible": "It is now visible on the Allergies page",
@@ -12,7 +12,6 @@
   "dateOfFirstOnset": "Date of first onset",
   "discard": "Discard",
   "drug": "Drug",
-  "enterOtherReaction": "Type in other reaction",
   "environmental": "Environmental",
   "food": "Food",
   "invalidComment": "Invalid comment, try again",
@@ -21,18 +20,19 @@
   "mild": "Mild",
   "moderate": "Moderate",
   "name": "Name",
-  "otherAllergenInvalidText": "Other allergen is required",
-  "otherReactionInvalidText": "Other reaction is required",
-  "pleaseSpecifyOtherReaction": "Please specify other reaction",
+  "otherNonCodedAllergen": "Other non-coded allergen",
+  "otherNonCodedAllergicReaction": "Other non-coded allergic reaction",
   "reactions": "Reactions",
   "saveAndClose": "Save and close",
   "seeAll": "See all",
-  "selectTheAllergens": "Select the allergens",
-  "selectTheReactions": "Select the reactions",
+  "selectAllergens": "Select the allergens",
+  "selectReactions": "Select the reactions",
   "severe": "Severe",
-  "severityAndDateOfOnset": "Severity and date of onset",
+  "severityAndOnsetDate": "Severity and date of onset",
   "severityandReaction": "Severity & Reaction",
   "severityOfWorstReaction": "Severity of worst reaction",
   "since": "Since",
-  "typeAnyAdditional": "Type any additional comments here"
+  "typeAdditionalComments": "Type any additional comments here",
+  "typeAllergenName": "Please type in the name of the allergen",
+  "typeAllergicReactionName": "Please type in the name of the allergic reaction"
 }
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
index 9c6773dd51..cc151d1040 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
@@ -17,7 +17,6 @@ import {
   launchPatientWorkspace,
   withUnit,
 } from '@openmrs/esm-patient-common-lib';
-import { ConfigObject } from '../config-schema';
 import { patientVitalsBiometricsFormWorkspace } from '../constants';
 import styles from './biometrics-overview.scss';
 
@@ -41,13 +40,12 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
   const headerTitle = t('biometrics', 'Biometrics');
   const [chartView, setChartView] = React.useState(false);
 
-  const config = useConfig() as ConfigObject;
+  const config = useConfig();
   const { bmiUnit } = config.biometrics;
+  const { biometrics, isLoading, isError, isValidating } = useBiometrics(patientUuid, config.concepts);
 
   const { data: conceptUnits } = useVitalsConceptMetadata();
 
-  const { data: biometrics, isLoading, isError, isValidating } = useBiometrics(patientUuid);
-
   const launchBiometricsForm = React.useCallback(
     () => launchPatientWorkspace(patientVitalsBiometricsFormWorkspace),
     [],
@@ -60,6 +58,7 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
     { key: 'bmi', header: `BMI (${bmiUnit})` },
     { key: 'muac', header: withUnit('MUAC', conceptUnits.get(config.concepts.muacUuid) ?? '') },
   ];
+
   const tableRows = React.useMemo(
     () =>
       biometrics?.map((data, index) => {
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-chart.component.scss b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-chart.component.scss
index 60ad60b3e6..72b90ee64f 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-chart.component.scss
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-chart.component.scss
@@ -77,11 +77,11 @@
   width: 10rem;
 }
 
-:global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-item+.bx--tabs--scrollable__nav-item) {
+.verticalTabs :global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-item+.bx--tabs--scrollable__nav-item) {
   margin-left: 0rem;
 }
 
-:global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-link) {
+.verticalTabs :global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-link) {
   border-bottom: 0 !important;
   border-left: 2px solid $color-gray-30;
 }
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics.resource.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics.resource.ts
similarity index 96%
rename from packages/esm-patient-biometrics-app/src/biometrics/biometrics.resource.tsx
rename to packages/esm-patient-biometrics-app/src/biometrics/biometrics.resource.ts
index bb7c2b13ea..b4615bffec 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics.resource.tsx
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics.resource.ts
@@ -6,9 +6,7 @@ export const pageSize = 100;
 
 type Biometrics = Array<FHIRResource['resource']>;
 
-export function useBiometrics(patientUuid: string) {
-  const { concepts } = useConfig();
-
+export function useBiometrics(patientUuid: string, concepts: Record<string, string>) {
   const { data, error, isValidating } = useSWR<{ data: BiometricsFetchResponse }, Error>(
     `${fhirBaseUrl}/Observation?subject:Patient=${patientUuid}&` +
       `code=${Object.values(concepts).join(',')}&_count=${pageSize}`,
@@ -22,7 +20,7 @@ export function useBiometrics(patientUuid: string) {
   const observations: Biometrics = data?.data?.entry?.map((entry) => entry.resource) ?? [];
 
   return {
-    data:
+    biometrics:
       data?.data?.total > 0
         ? formatDimensions(
             filterByConceptUuid(observations, concepts.heightUuid),
diff --git a/packages/esm-patient-biometrics-app/src/biometrics/weight-tile.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/weight-tile.component.tsx
index dde555a83a..3191d9df72 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/weight-tile.component.tsx
+++ b/packages/esm-patient-biometrics-app/src/biometrics/weight-tile.component.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineLoading } from 'carbon-components-react';
+import { useConfig } from '@openmrs/esm-framework';
 import { useVitalsConceptMetadata } from '@openmrs/esm-patient-common-lib';
 import { useBiometrics } from './biometrics.resource';
 import styles from './weight-tile.component.scss';
 import { ConfigObject } from '../config-schema';
-import { useConfig } from '@openmrs/esm-framework';
 
 interface WeightTileInterface {
   patientUuid: string;
@@ -14,8 +14,8 @@ interface WeightTileInterface {
 const WeightTile: React.FC<WeightTileInterface> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const config = useConfig() as ConfigObject;
-  const { data: biometrics, isLoading } = useBiometrics(patientUuid);
   const { data: conceptUnits } = useVitalsConceptMetadata();
+  const { biometrics, isLoading } = useBiometrics(patientUuid, config.concepts);
   const weightData = biometrics?.filter((result) => result.weight);
 
   if (isLoading) {
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.scss b/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.scss
index 153f4cb252..cee6339f4d 100644
--- a/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/vitals-chart.component.scss
@@ -49,6 +49,16 @@
   flex-direction: column !important;
 }
 
+.verticalTabs :global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-item+.bx--tabs--scrollable__nav-item) {
+  margin-left: 0rem;
+}
+
+.verticalTabs :global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-link) {
+  border-bottom: 0 !important;
+  border-left: 2px solid $color-gray-30;
+}
+
+
 .tab:hover {
   border-bottom: none !important;
 }
@@ -76,11 +86,3 @@
   width: 10rem;
 }
 
-:global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-item+.bx--tabs--scrollable__nav-item) {
-  margin-left: 0rem;
-}
-
-:global(.bx--tabs--scrollable .bx--tabs--scrollable__nav-link) {
-  border-bottom: 0 !important;
-  border-left: 2px solid $color-gray-30;
-}

From 7a005e1734f26c435137a5f208a0950e00f6ac61 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Thu, 6 Jan 2022 22:00:06 +0300
Subject: [PATCH 2/4] Add tests and InlineNotification

---
 __mocks__/allergies.mock.ts                   | 101 ++++++++------
 .../allergies-form/allergies-form.test.tsx    | 131 ++++++++++++++++++
 .../allergies-form/allergy-form.component.tsx |  20 ++-
 .../translations/en.json                      |   2 +
 4 files changed, 204 insertions(+), 50 deletions(-)
 create mode 100644 packages/esm-patient-allergies-app/src/allergies/allergies-form/allergies-form.test.tsx

diff --git a/__mocks__/allergies.mock.ts b/__mocks__/allergies.mock.ts
index 16bf2c5f9c..b3d2700757 100644
--- a/__mocks__/allergies.mock.ts
+++ b/__mocks__/allergies.mock.ts
@@ -1011,58 +1011,69 @@ export const mockPatientAllergyResult = {
 };
 
 export const mockAllergyResult = {
-  data: {
-    display: 'ARBs (angiotensin II receptor blockers)',
-    uuid: '90c17541-833d-419e-b5d3-bc06828bf95f',
-    allergen: {
-      allergenType: 'DRUG',
-      codedAllergen: {
-        display: 'ARBs (angiotensin II receptor blockers)',
-        uuid: '921fbd85-fa49-46c3-9ee1-77e093fd10a5',
-      },
-      nonCodedAllergen: null,
+  display: 'ACE inhibitors',
+  uuid: 'dbba59ef-c8a5-4967-b20a-5761b1954f6d',
+  allergen: {
+    allergenType: 'DRUG',
+    codedAllergen: {
+      uuid: '162298AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      display: 'ACE inhibitors',
+      links: [
+        {
+          rel: 'self',
+          uri: 'http://localhost:8090/openmrslocalhost:8080/openmrs/ws/rest/v1/concept/162298AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+      ],
     },
-    severity: {
-      uuid: '1498AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-      display: 'Mild',
-      name: {
-        display: 'Mild',
-        uuid: '1738BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB',
-        name: 'Mild',
-        locale: 'en',
-        localePreferred: true,
-        conceptNameType: 'FULLY_SPECIFIED',
+    nonCodedAllergen: null,
+  },
+  severity: {
+    uuid: '1498AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    display: 'Mild',
+    links: [
+      {
+        rel: 'self',
+        uri: 'http://localhost:8090/openmrslocalhost:8080/openmrs/ws/rest/v1/concept/1498AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      },
+    ],
+  },
+  comment: null,
+  reactions: [
+    {
+      reaction: {
+        uuid: '143264AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        display: 'Cough',
+        links: [
+          {
+            rel: 'self',
+            uri: 'http://localhost:8090/openmrslocalhost:8080/openmrs/ws/rest/v1/concept/143264AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          },
+        ],
       },
+      reactionNonCoded: null,
     },
-    comment: 'The patient is showing a mild reaction to the above allergens',
-    reactions: [
+  ],
+  patient: {
+    uuid: '011cffa0-7383-45ef-962c-d1976718b8d4',
+    display: '103H22 - test test test',
+    links: [
       {
-        reaction: {
-          uuid: '121677AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-          display: 'Mental status change',
-          name: {
-            display: 'Mental status change',
-            uuid: '127084BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB',
-            name: 'Mental status change',
-            locale: 'en',
-            localePreferred: true,
-            conceptNameType: null,
-          },
-        },
+        rel: 'self',
+        uri: 'http://localhost:8090/openmrslocalhost:8080/openmrs/ws/rest/v1/patient/011cffa0-7383-45ef-962c-d1976718b8d4',
       },
     ],
-    patient: {
-      uuid: '90f7f0b4-06a8-4a97-9678-e7a977f4b518',
-      display: '10010W - John Taylor',
+  },
+  links: [
+    {
+      rel: 'self',
+      uri: 'http://localhost:8090/openmrslocalhost:8080/openmrs/ws/rest/v1/patient/011cffa0-7383-45ef-962c-d1976718b8d4/allergy/dbba59ef-c8a5-4967-b20a-5761b1954f6d',
     },
-    auditInfo: {
-      creator: {
-        uuid: '285f67ce-3d8b-4733-96e5-1e2235e8e804',
-        display: 'doc',
-      },
-      dateChanged: '2020-01-03T07:05:12.000+0000',
+    {
+      rel: 'full',
+      uri: 'http://localhost:8090/openmrslocalhost:8080/openmrs/ws/rest/v1/patient/011cffa0-7383-45ef-962c-d1976718b8d4/allergy/dbba59ef-c8a5-4967-b20a-5761b1954f6d?v=full',
     },
-  },
+  ],
+  resourceVersion: '1.8',
 };
 
 export const mockUpdatedAllergyResult = {
@@ -1689,7 +1700,7 @@ export const mockFhirAllergyIntoleranceResponse = {
   ],
 };
 
-export const mockAllergenAndReactions = {
+export const mockAllergensAndAllergicReactions = {
   drugAllergens: [
     { uuid: '162298AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'ACE inhibitors' },
     { uuid: '162299AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'ARBs (angiotensin II receptor blockers)' },
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergies-form.test.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergies-form.test.tsx
new file mode 100644
index 0000000000..ec649cc97b
--- /dev/null
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergies-form.test.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render, act } from '@testing-library/react';
+import { of } from 'rxjs/internal/observable/of';
+import { showNotification, showToast, useConfig } from '@openmrs/esm-framework';
+import { mockPatient } from '../../../../../__mocks__/patient.mock';
+import { mockAllergensAndAllergicReactions, mockAllergyResult } from '../../../../../__mocks__/allergies.mock';
+import { fetchAllergensAndAllergicReactions, saveAllergy } from './allergy-form.resource';
+import AllergyForm from './allergy-form.component';
+
+const mockUseConfig = useConfig as jest.Mock;
+const mockFetchAllergensAndAllergicReactions = fetchAllergensAndAllergicReactions as jest.Mock;
+const mockSaveAllergy = saveAllergy as jest.Mock;
+const mockShowNotification = showNotification as jest.Mock;
+const mockShowToast = showToast as jest.Mock;
+
+jest.mock('./allergy-form.resource', () => ({
+  fetchAllergensAndAllergicReactions: jest.fn(),
+  saveAllergy: jest.fn(),
+}));
+
+describe('AllergiesForm: ', () => {
+  it('renders the Record Allergy form', () => {
+    mockFetchAllergensAndAllergicReactions.mockReturnValueOnce(of(mockAllergensAndAllergicReactions));
+
+    renderAllergyForm();
+
+    expect(screen.getByRole('heading', { name: /allergens and reactions/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /select the allergens/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /select the reactions/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /severity and date of onset/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /severity of worst reaction/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /date and comments/i })).toBeInTheDocument();
+
+    const tabNames = [/drug/i, /food/i, /environmental/i];
+    tabNames.map((tabName) => expect(screen.getByRole('tab', { name: tabName })).toBeInTheDocument());
+
+    expect(screen.getByRole('radio', { name: /ace inhibitors/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /mild/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /moderate/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /severe/i })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /anaemia/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /date of first onset/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /comments/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /discard/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /save and close/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /save and close/i })).toBeDisabled();
+  });
+
+  describe('Form submission: ', () => {
+    it('renders a success notification after successful submission', async () => {
+      const promise = Promise.resolve();
+      mockFetchAllergensAndAllergicReactions.mockReturnValueOnce(of(mockAllergensAndAllergicReactions));
+      mockSaveAllergy.mockReturnValueOnce(
+        Promise.resolve({ data: mockAllergyResult, status: 201, statusText: 'Created' }),
+      );
+
+      renderAllergyForm();
+
+      userEvent.click(screen.getByRole('radio', { name: /ace inhibitors/i }));
+      userEvent.click(screen.getByRole('checkbox', { name: /cough/i }));
+      userEvent.click(screen.getByRole('radio', { name: /moderate/i }));
+      userEvent.type(screen.getByRole('textbox', { name: /date of first onset/i }), '02/01/2022');
+      userEvent.click(screen.getByRole('button', { name: /save and close/i }));
+
+      await act(() => promise);
+
+      expect(mockShowToast).toHaveBeenCalledTimes(1);
+      expect(mockShowToast).toHaveBeenCalledWith({
+        critical: true,
+        kind: 'success',
+        title: 'Allergy saved',
+        description: 'It is now visible on the Allergies page',
+      });
+    });
+
+    it('renders an error notification upon an invalid submission', async () => {
+      const promise = Promise.resolve();
+      mockFetchAllergensAndAllergicReactions.mockReturnValueOnce(of(mockAllergensAndAllergicReactions));
+      mockSaveAllergy.mockRejectedValueOnce({
+        message: 'Internal Server Error',
+        response: {
+          status: 500,
+          statusText: 'Internal Server Error',
+        },
+      });
+
+      renderAllergyForm();
+
+      userEvent.click(screen.getByRole('radio', { name: /ace inhibitors/i }));
+      userEvent.click(screen.getByRole('checkbox', { name: /cough/i }));
+      userEvent.click(screen.getByRole('radio', { name: /moderate/i }));
+      userEvent.type(screen.getByRole('textbox', { name: /date of first onset/i }), '02/01/2022');
+      userEvent.click(screen.getByRole('button', { name: /save and close/i }));
+
+      await act(() => promise);
+
+      expect(mockShowNotification).toHaveBeenCalledTimes(1);
+      expect(mockShowNotification).toHaveBeenCalledWith({
+        critical: true,
+        description: 'Internal Server Error',
+        kind: 'error',
+        title: 'Error saving allergy',
+      });
+    });
+  });
+});
+
+const testProps = {
+  closeWorkspace: () => {},
+  isTablet: false,
+  patient: mockPatient,
+  patientUuid: mockPatient.id,
+};
+
+function renderAllergyForm() {
+  mockUseConfig.mockReturnValue({
+    concepts: {
+      drugAllergenUuid: '162552AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      environmentalAllergenUuid: '162554AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      foodAllergenUuid: '162553AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      mildReactionUuid: '1498AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      moderateReactionUuid: '1499AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      severeReactionUuid: '1500AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      allergyReactionUuid: '162555AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      otherConceptUuid: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+  });
+
+  render(<AllergyForm {...testProps} />);
+}
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
index 4875c4ad84..f4752653a9 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
@@ -6,6 +6,7 @@ import {
   DatePicker,
   DatePickerInput,
   Form,
+  InlineNotification,
   RadioButton,
   RadioButtonGroup,
   Row,
@@ -25,8 +26,7 @@ import {
   showToast,
   useConfig,
 } from '@openmrs/esm-framework';
-import { Allergens, fetchAllergensAndAllergicReactions, NewAllergy } from './allergy-form.resource';
-import { saveAllergy } from '../allergy-intolerance.resource';
+import { Allergens, fetchAllergensAndAllergicReactions, saveAllergy, NewAllergy } from './allergy-form.resource';
 import styles from './allergy-form.scss';
 
 enum AllergenTypes {
@@ -59,6 +59,7 @@ const AllergyForm: React.FC<AllergyFormProps> = ({ closeWorkspace, isTablet, pat
   const [allergens, setAllergens] = useState<Allergens>(null);
   const [allergicReactions, setAllergicReactions] = useState<Array<string>>([]);
   const [comment, setComment] = useState('');
+  const [error, setError] = useState<Error | null>(null);
   const [nonCodedAllergenType, setNonCodedAllergenType] = useState('');
   const [nonCodedAllergicReaction, setNonCodedAllergicReaction] = useState('');
   const [onsetDate, setOnsetDate] = useState<Date | null>(null);
@@ -70,7 +71,7 @@ const AllergyForm: React.FC<AllergyFormProps> = ({ closeWorkspace, isTablet, pat
 
   useEffect(() => {
     const allergenUuids = [drugAllergenUuid, foodAllergenUuid, environmentalAllergenUuid, allergyReactionUuid];
-    fetchAllergensAndAllergicReactions(allergenUuids).pipe(first()).subscribe(setAllergens);
+    fetchAllergensAndAllergicReactions(allergenUuids).pipe(first()).subscribe(setAllergens, setError);
   }, [allergyReactionUuid, drugAllergenUuid, environmentalAllergenUuid, foodAllergenUuid]);
 
   const handleTabChange = (index: number) => {
@@ -179,6 +180,15 @@ const AllergyForm: React.FC<AllergyFormProps> = ({ closeWorkspace, isTablet, pat
         </Row>
       ) : null}
       <h1 className={styles.heading}>{t('allergensAndReactions', 'Allergens and reactions')}</h1>
+      {error ? (
+        <InlineNotification
+          style={{ margin: '0rem', minWidth: '100%' }}
+          kind="error"
+          lowContrast={true}
+          title={t('errorFetchingData', 'Error fetching allergens and reactions')}
+          subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
+        />
+      ) : null}
       <div className={`${styles.container} ${isTablet ? `${styles.tablet}` : `${styles.desktop}`}`}>
         <section className={styles.section}>
           <h2 className={styles.sectionHeading}>{t('selectAllergens', 'Select the allergens')}</h2>
@@ -187,7 +197,7 @@ const AllergyForm: React.FC<AllergyFormProps> = ({ closeWorkspace, isTablet, pat
               const allergenCategory = allergenType.toLowerCase() + 'Allergens';
               return (
                 <Tab id={`tab-${index + 1}`} key={index} label={allergenType}>
-                  <div className={isTablet && styles.wrapperContainer}>
+                  <div className={isTablet ? styles.wrapperContainer : undefined}>
                     <RadioButtonGroup
                       name={`allergen-type-${index + 1}`}
                       orientation="vertical"
@@ -223,7 +233,7 @@ const AllergyForm: React.FC<AllergyFormProps> = ({ closeWorkspace, isTablet, pat
         </section>
         <section className={styles.section}>
           <h2 className={styles.sectionHeading}>{t('selectReactions', 'Select the reactions')}</h2>
-          <div className={isTablet && styles.checkboxContainer} style={{ margin: '1rem' }}>
+          <div className={isTablet ? styles.checkboxContainer : undefined} style={{ margin: '1rem' }}>
             {allergens?.allergicReactions?.map((reaction, index) => (
               <Checkbox
                 className={styles.checkbox}
diff --git a/packages/esm-patient-allergies-app/translations/en.json b/packages/esm-patient-allergies-app/translations/en.json
index 8f2d5be23c..60bee5c55d 100644
--- a/packages/esm-patient-allergies-app/translations/en.json
+++ b/packages/esm-patient-allergies-app/translations/en.json
@@ -13,6 +13,7 @@
   "discard": "Discard",
   "drug": "Drug",
   "environmental": "Environmental",
+  "errorFetchingData": "Error fetching allergens and reactions",
   "food": "Food",
   "invalidComment": "Invalid comment, try again",
   "lastUpdated": "Last updated",
@@ -32,6 +33,7 @@
   "severityandReaction": "Severity & Reaction",
   "severityOfWorstReaction": "Severity of worst reaction",
   "since": "Since",
+  "tryReopeningTheForm": "Please try launching the form again",
   "typeAdditionalComments": "Type any additional comments here",
   "typeAllergenName": "Please type in the name of the allergen",
   "typeAllergicReactionName": "Please type in the name of the allergic reaction"

From 16ebbab7abc9b0820cc0705ea8407aa266016ee2 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Fri, 14 Jan 2022 16:27:25 +0300
Subject: [PATCH 3/4] Fixes after rebasing

---
 .../allergies-form/allergy-form.component.tsx | 286 +++++++++---------
 .../allergies-form/allergy-form.scss          |  70 +++--
 2 files changed, 193 insertions(+), 163 deletions(-)

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
index f4752653a9..0b799f0bdf 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx
@@ -179,153 +179,153 @@ const AllergyForm: React.FC<AllergyFormProps> = ({ closeWorkspace, isTablet, pat
           />
         </Row>
       ) : null}
-      <h1 className={styles.heading}>{t('allergensAndReactions', 'Allergens and reactions')}</h1>
-      {error ? (
-        <InlineNotification
-          style={{ margin: '0rem', minWidth: '100%' }}
-          kind="error"
-          lowContrast={true}
-          title={t('errorFetchingData', 'Error fetching allergens and reactions')}
-          subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
-        />
-      ) : null}
-      <div className={`${styles.container} ${isTablet ? `${styles.tablet}` : `${styles.desktop}`}`}>
-        <section className={styles.section}>
-          <h2 className={styles.sectionHeading}>{t('selectAllergens', 'Select the allergens')}</h2>
-          <Tabs onSelectionChange={handleTabChange}>
-            {allergenTypes.map((allergenType, index) => {
-              const allergenCategory = allergenType.toLowerCase() + 'Allergens';
-              return (
-                <Tab id={`tab-${index + 1}`} key={index} label={allergenType}>
-                  <div className={isTablet ? styles.wrapperContainer : undefined}>
-                    <RadioButtonGroup
-                      name={`allergen-type-${index + 1}`}
-                      orientation="vertical"
-                      onChange={(event) => setSelectedAllergen(event.toString())}
-                      valueSelected={selectedAllergen}
-                    >
-                      {allergens?.[allergenCategory]?.map((allergen) => (
-                        <RadioButton
-                          className={styles.radio}
-                          id={allergen.display}
-                          key={allergen.uuid}
-                          labelText={allergen.display}
-                          value={allergen.uuid}
-                        />
-                      ))}
-                    </RadioButtonGroup>
-                  </div>
-                </Tab>
-              );
-            })}
-          </Tabs>
-          {selectedAllergen === otherConceptUuid ? (
-            <div className={styles.input}>
-              <TextInput
-                light={isTablet}
-                id="nonCodedAllergenType"
-                labelText={t('otherNonCodedAllergen', 'Other non-coded allergen')}
-                onChange={(event) => setNonCodedAllergenType(event.target.value)}
-                placeholder={t('typeAllergenName', 'Please type in the name of the allergen')}
-              />
-            </div>
-          ) : null}
-        </section>
-        <section className={styles.section}>
-          <h2 className={styles.sectionHeading}>{t('selectReactions', 'Select the reactions')}</h2>
-          <div className={isTablet ? styles.checkboxContainer : undefined} style={{ margin: '1rem' }}>
-            {allergens?.allergicReactions?.map((reaction, index) => (
-              <Checkbox
-                className={styles.checkbox}
-                key={index}
-                labelText={reaction.display}
-                id={reaction.uuid}
-                onChange={handleAllergicReactionChange}
-                value={reaction.display}
-              />
-            ))}
-          </div>
-          {allergicReactions.includes(otherConceptUuid) ? (
-            <div className={styles.input}>
-              <TextInput
-                light={isTablet}
-                id="nonCodedAllergicReaction"
-                labelText={t('otherNonCodedAllergicReaction', 'Other non-coded allergic reaction')}
-                onChange={(event) => setNonCodedAllergicReaction(event.target.value)}
-                placeholder={t('typeAllergicReactionName', 'Please type in the name of the allergic reaction')}
-              />
-            </div>
-          ) : null}
-        </section>
-      </div>
-      <h1 className={styles.heading}>{t('severityAndOnsetDate', 'Severity and date of onset')}</h1>
-      <div className={`${styles.container} ${isTablet ? `${styles.tablet}` : `${styles.desktop}`}`}>
-        <section className={styles.section}>
-          <h2 className={styles.sectionHeading}>{t('severityOfWorstReaction', 'Severity of worst reaction')}</h2>
-          <div className={styles.wrapper}>
-            <RadioButtonGroup
-              name="severity-of-worst-reaction"
-              onChange={(event) => setSeverityOfWorstReaction(event.toString())}
-              valueSelected={severityOfWorstReaction}
-            >
-              {severityLevels.map((severity, index) => (
-                <RadioButton
-                  id={severity.toLowerCase() + 'Severity'}
+      <div className={`${styles.form} ${isTablet ? styles.tablet : styles.desktop}`}>
+        <h1 className={styles.heading}>{t('allergensAndReactions', 'Allergens and reactions')}</h1>
+        {error ? (
+          <InlineNotification
+            style={{ margin: '0rem', minWidth: '100%' }}
+            kind="error"
+            lowContrast={true}
+            title={t('errorFetchingData', 'Error fetching allergens and reactions')}
+            subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
+          />
+        ) : null}
+        <div className={`${styles.container} ${isTablet ? styles.tabletContainer : styles.desktopContainer}`}>
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>{t('selectAllergens', 'Select the allergens')}</h2>
+            <Tabs onSelectionChange={handleTabChange}>
+              {allergenTypes.map((allergenType, index) => {
+                const allergenCategory = allergenType.toLowerCase() + 'Allergens';
+                return (
+                  <Tab id={`tab-${index + 1}`} key={index} label={allergenType}>
+                    <div className={isTablet ? styles.wrapperContainer : undefined}>
+                      <RadioButtonGroup
+                        name={`allergen-type-${index + 1}`}
+                        orientation="vertical"
+                        onChange={(event) => setSelectedAllergen(event.toString())}
+                        valueSelected={selectedAllergen}
+                      >
+                        {allergens?.[allergenCategory]?.map((allergen) => (
+                          <RadioButton
+                            className={styles.radio}
+                            id={allergen.display}
+                            key={allergen.uuid}
+                            labelText={allergen.display}
+                            value={allergen.uuid}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    </div>
+                  </Tab>
+                );
+              })}
+            </Tabs>
+            {selectedAllergen === otherConceptUuid ? (
+              <div className={styles.input}>
+                <TextInput
+                  light={isTablet}
+                  id="nonCodedAllergenType"
+                  labelText={t('otherNonCodedAllergen', 'Other non-coded allergen')}
+                  onChange={(event) => setNonCodedAllergenType(event.target.value)}
+                  placeholder={t('typeAllergenName', 'Please type in the name of the allergen')}
+                />
+              </div>
+            ) : null}
+          </section>
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>{t('selectReactions', 'Select the reactions')}</h2>
+            <div className={isTablet ? styles.checkboxContainer : undefined} style={{ margin: '1rem' }}>
+              {allergens?.allergicReactions?.map((reaction, index) => (
+                <Checkbox
+                  className={styles.checkbox}
                   key={index}
-                  labelText={severity}
-                  value={(() => {
-                    switch (severity.toLowerCase()) {
-                      case 'mild':
-                        return mildReactionUuid;
-                      case 'moderate':
-                        return moderateReactionUuid;
-                      case 'severe':
-                        return severeReactionUuid;
-                      default:
-                        return '';
-                    }
-                  })()}
+                  labelText={reaction.display}
+                  id={reaction.uuid}
+                  onChange={handleAllergicReactionChange}
+                  value={reaction.display}
                 />
               ))}
-            </RadioButtonGroup>
-          </div>
-        </section>
-        <section className={styles.section}>
-          <h2 className={styles.sectionHeading}>{t('dateAndComments', 'Date and comments')}</h2>
-          <div className={styles.wrapper}>
-            <DatePicker
-              id="onsetDate"
-              dateFormat="d/m/Y"
-              datePickerType="single"
-              light={!isTablet}
-              maxDate={new Date().toISOString()}
-              onChange={([date]) => setOnsetDate(date)}
-              value={onsetDate}
-            >
-              <DatePickerInput
-                id="onsetDateInput"
-                placeholder="dd/mm/yyyy"
-                labelText={t('dateOfFirstOnset', 'Date of first onset')}
+            </div>
+            {allergicReactions.includes(otherConceptUuid) ? (
+              <div className={styles.input}>
+                <TextInput
+                  light={isTablet}
+                  id="nonCodedAllergicReaction"
+                  labelText={t('otherNonCodedAllergicReaction', 'Other non-coded allergic reaction')}
+                  onChange={(event) => setNonCodedAllergicReaction(event.target.value)}
+                  placeholder={t('typeAllergicReactionName', 'Please type in the name of the allergic reaction')}
+                />
+              </div>
+            ) : null}
+          </section>
+        </div>
+        <h1 className={styles.heading}>{t('severityAndOnsetDate', 'Severity and date of onset')}</h1>
+        <div className={`${styles.container} ${isTablet ? styles.tabletContainer : styles.desktopContainer}`}>
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>{t('severityOfWorstReaction', 'Severity of worst reaction')}</h2>
+            <div className={styles.wrapper}>
+              <RadioButtonGroup
+                name="severity-of-worst-reaction"
+                onChange={(event) => setSeverityOfWorstReaction(event.toString())}
+                valueSelected={severityOfWorstReaction}
+              >
+                {severityLevels.map((severity, index) => (
+                  <RadioButton
+                    id={severity.toLowerCase() + 'Severity'}
+                    key={index}
+                    labelText={severity}
+                    value={(() => {
+                      switch (severity.toLowerCase()) {
+                        case 'mild':
+                          return mildReactionUuid;
+                        case 'moderate':
+                          return moderateReactionUuid;
+                        case 'severe':
+                          return severeReactionUuid;
+                        default:
+                          return '';
+                      }
+                    })()}
+                  />
+                ))}
+              </RadioButtonGroup>
+            </div>
+          </section>
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>{t('dateAndComments', 'Date and comments')}</h2>
+            <div className={styles.wrapper}>
+              <DatePicker
+                id="onsetDate"
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                light={!isTablet}
+                maxDate={new Date().toISOString()}
+                onChange={([date]) => setOnsetDate(date)}
+                value={onsetDate}
+              >
+                <DatePickerInput
+                  id="onsetDateInput"
+                  placeholder="dd/mm/yyyy"
+                  labelText={t('dateOfFirstOnset', 'Date of first onset')}
+                />
+              </DatePicker>
+            </div>
+            <div className={styles.wrapper}>
+              <TextArea
+                className={styles.textbox}
+                cols={20}
+                light={!isTablet}
+                id="comments"
+                invalidText={t('invalidComment', 'Invalid comment, try again')}
+                labelText={t('comments', 'Comments')}
+                onChange={(event) => setComment(event.target.value)}
+                placeholder={t('typeAdditionalComments', 'Type any additional comments here')}
+                rows={4}
               />
-            </DatePicker>
-          </div>
-          <div className={styles.wrapper}>
-            <TextArea
-              className={styles.textbox}
-              cols={20}
-              light={!isTablet}
-              id="comments"
-              invalidText={t('invalidComment', 'Invalid comment, try again')}
-              labelText={t('comments', 'Comments')}
-              onChange={(event) => setComment(event.target.value)}
-              placeholder={t('typeAdditionalComments', 'Type any additional comments here')}
-              rows={4}
-            />
-          </div>
-        </section>
-      </div>
-      <div className={styles.buttonContainer}>
-        <ButtonSet style={{ margin: isTablet ? '1.5rem 1rem' : '0rem' }}>
+            </div>
+          </section>
+        </div>
+        <ButtonSet className={isTablet ? styles.tabletButtons : styles.desktopButtons}>
           <Button className={styles.button} onClick={closeWorkspace} kind="secondary">
             {t('discard', 'Discard')}
           </Button>
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
index e75759361d..a1b4793232 100644
--- a/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
+++ b/packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.scss
@@ -12,20 +12,12 @@
   width: 100%;
 }
 
-.tablet { 
-  background-color: white;
-}
-
-.desktop {
-  background-color: $ui-01;
-}
-
 .container {
   border: solid 1px $ui-03;
-  margin: 1rem;
-  
+  margin: 0rem 1rem 1rem;
+
   &:first-of-type {
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
   }
 
   &:last-of-type {
@@ -97,22 +89,60 @@
   }
 }
 
+.textbox {
+  width: 26.375rem;
+}
+
 .button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
   min-width: 50%;
 }
 
-.buttonContainer {
+.tablet {
+  padding: 0rem;
+}
+
+.desktopButtons {
   margin-top: 2rem;
+}
 
-  button {
-    height: 4rem;
-    display: flex;
-    align-content: flex-start;
-    align-items: flex-start;
-    flex-direction: row;
+.tabletButtons {
+  margin-top: 2rem;
+  padding: 1.5rem 1rem;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.desktopContainer {
+  background-color: $ui-01;
+}
+
+.tabletContainer {
+  background-color: white;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .form {
+    height: calc(100vh - 6rem);
   }
 }
 
-.textbox {
-  width: 26.375rem;
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: calc(100vh - 9rem);
+  }
 }

From 7177d4a540f7f3a15fb67baf0b5b4e810849a932 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Fri, 14 Jan 2022 17:07:13 +0300
Subject: [PATCH 4/4] Fix biometrics type error

---
 .../src/biometrics/biometrics-base.component.tsx               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
index cc151d1040..b82d9a460f 100644
--- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
+++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
@@ -17,6 +17,7 @@ import {
   launchPatientWorkspace,
   withUnit,
 } from '@openmrs/esm-patient-common-lib';
+import { ConfigObject } from '../config-schema';
 import { patientVitalsBiometricsFormWorkspace } from '../constants';
 import styles from './biometrics-overview.scss';
 
@@ -40,7 +41,7 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
   const headerTitle = t('biometrics', 'Biometrics');
   const [chartView, setChartView] = React.useState(false);
 
-  const config = useConfig();
+  const config = useConfig() as ConfigObject;
   const { bmiUnit } = config.biometrics;
   const { biometrics, isLoading, isError, isValidating } = useBiometrics(patientUuid, config.concepts);