@olaboot/esm-patient-registration-app 9.2.0 → 10.0.2

package/src/patient-registration/field/address/address-search.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { vi, describe, it, expect, test, beforeEach, type Mock } from 'vitest';
 import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/react';
-import { Formik, Form, useFormikContext } from 'formik';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { Formik, Form } from 'formik';
 import { renderWithContext } from 'tools';
 import { type Resources } from '../../../offline.resources';
 import { PatientRegistrationContextProvider } from '../../patient-registration-context';
@@ -10,27 +11,18 @@ import { useAddressHierarchy, useOrderedAddressHierarchyLevels } from './address
 import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
 import { mockedAddressTemplate, mockedAddressOptions, mockedOrderedFields } from '__mocks__';
 import { ResourcesContextProvider } from '../../../resources-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { type FormValues } from '../../patient-registration.types';
 import AddressSearchComponent from './address-search.component';
 
-const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
-const mockUseAddressHierarchy = jest.mocked(useAddressHierarchy);
-const mockUseOrderedAddressHierarchyLevels = jest.mocked(useOrderedAddressHierarchyLevels);
-const mockUseFormikContext = useFormikContext as jest.Mock;
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+const mockUseAddressHierarchy = vi.mocked(useAddressHierarchy);
+const mockUseOrderedAddressHierarchyLevels = vi.mocked(useOrderedAddressHierarchyLevels);
 
-jest.mock('./address-hierarchy.resource', () => ({
-  ...(jest.requireActual('./address-hierarchy.resource') as jest.Mock),
-  useAddressHierarchy: jest.fn(),
-  useOrderedAddressHierarchyLevels: jest.fn(),
-}));
-
-jest.mock('../../patient-registration.resource', () => ({
-  ...(jest.requireActual('../../../patient-registration.resource') as jest.Mock),
-  useAddressHierarchy: jest.fn(),
-}));
-
-jest.mock('formik', () => ({
-  ...(jest.requireActual('formik') as jest.Mock),
-  useFormikContext: jest.fn(() => ({})),
+vi.mock('./address-hierarchy.resource', async () => ({
+  ...((await vi.importActual('./address-hierarchy.resource')) as object),
+  useAddressHierarchy: vi.fn(),
+  useOrderedAddressHierarchyLevels: vi.fn(),
 }));
 
 const allFields = mockedAddressTemplate.lines
@@ -44,23 +36,55 @@ const allFields = mockedAddressTemplate.lines
 const orderMap = Object.fromEntries(mockedOrderedFields.map((field, indx) => [field, indx]));
 allFields.sort((existingField1, existingField2) => orderMap[existingField1.name] - orderMap[existingField2.name]);
 
-async function renderAddressHierarchy(addressTemplate = mockedAddressTemplate) {
+/**
+ * Helper to render AddressSearchComponent with Formik for state-dependent tests.
+ */
+async function renderAddressSearchWithFormik(
+  initialValues: Partial<FormValues> = {},
+  addressTemplate = mockedAddressTemplate,
+) {
+  const defaultValues = {
+    address: {},
+    ...initialValues,
+  };
+
+  let formValuesRef: FormValues = { ...initialFormValues, ...defaultValues } as FormValues;
   const mockResourcesContextValue = { addressTemplate } as unknown as Resources;
 
-  await renderWithContext(
-    <Formik initialValues={{}} onSubmit={null}>
-      <Form>
-        <PatientRegistrationContextProvider value={{ setFieldValue: jest.fn() } as any}>
-          <AddressSearchComponent addressLayout={allFields} />
-        </PatientRegistrationContextProvider>
-      </Form>
+  const utils = await renderWithContext(
+    <Formik initialValues={defaultValues} onSubmit={() => {}}>
+      {({ setFieldValue, values }) => {
+        formValuesRef = { ...initialFormValues, ...values } as FormValues;
+        return (
+          <Form>
+            <PatientRegistrationContextProvider
+              value={{
+                identifierTypes: [],
+                values: formValuesRef,
+                validationSchema: null,
+                inEditMode: false,
+                setFieldValue: setFieldValue as any,
+                setCapturePhotoProps: vi.fn(),
+                setFieldTouched: vi.fn().mockResolvedValue(undefined),
+                currentPhoto: '',
+                isOffline: false,
+                initialFormValues: formValuesRef,
+              }}>
+              <AddressSearchComponent addressLayout={allFields} />
+            </PatientRegistrationContextProvider>
+          </Form>
+        );
+      }}
     </Formik>,
     ResourcesContextProvider,
     mockResourcesContextValue,
   );
-}
 
-const setFieldValue = jest.fn();
+  return {
+    ...utils,
+    getFormValues: () => formValuesRef,
+  };
+}
 
 describe('Testing address search bar', () => {
   beforeEach(() => {
@@ -73,7 +97,6 @@ describe('Testing address search bar', () => {
             useQuickSearch: true,
             searchAddressByLevel: false,
           },
-          requiredAddressFields: [],
         },
       } as RegistrationConfig['fieldConfigurations'],
     });
@@ -82,60 +105,229 @@ describe('Testing address search bar', () => {
       isLoadingFieldOrder: false,
       errorFetchingFieldOrder: null,
     });
-    mockUseFormikContext.mockReturnValue({
-      setFieldValue,
-    });
   });
 
-  it('should render the search bar', () => {
+  it('renders the search bar', async () => {
     mockUseAddressHierarchy.mockReturnValue({
       addresses: [],
       error: null,
       isLoading: false,
     });
 
-    renderAddressHierarchy();
+    await renderAddressSearchWithFormik();
 
-    const searchbox = screen.getByRole('searchbox');
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
     expect(searchbox).toBeInTheDocument();
 
     const ul = screen.queryByRole('list');
     expect(ul).not.toBeInTheDocument();
   });
 
-  it("should render only the results for the search term matched address' parents", async () => {
+  it('displays search results when user types a search term', async () => {
     const user = userEvent.setup();
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: mockedAddressOptions,
+      error: null,
+      isLoading: false,
+    });
 
+    await renderAddressSearchWithFormik();
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    await user.type(searchbox, 'nea');
+
+    await waitFor(() => {
+      expect(screen.getByRole('list')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByRole('listitem').length).toBeGreaterThan(0);
+    });
+  });
+
+  it('updates form values when user selects an address option', async () => {
+    const user = userEvent.setup();
     mockUseAddressHierarchy.mockReturnValue({
       addresses: mockedAddressOptions,
       error: null,
       isLoading: false,
     });
 
-    renderAddressHierarchy();
+    const { getFormValues } = await renderAddressSearchWithFormik();
 
-    const searchString = 'nea';
-    const separator = ' > ';
-    const options: Set<string> = new Set();
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    await user.type(searchbox, 'nea');
 
-    mockedAddressOptions.forEach((address) => {
-      const values = address.split(separator);
-      values.forEach((val, index) => {
-        if (val.toLowerCase().includes(searchString.toLowerCase())) {
-          options.add(values.slice(0, index + 1).join(separator));
-        }
-      });
+    // Wait for results to appear
+    await waitFor(() => {
+      expect(screen.getByRole('list')).toBeInTheDocument();
     });
 
-    const addressOptions = [...options];
-    addressOptions.forEach(async (address) => {
-      const optionElement = screen.getByText(address);
-      expect(optionElement).toBeInTheDocument();
-      await user.click(optionElement);
-      const values = address.split(separator);
-      allFields.map(({ name }, index) => {
-        expect(setFieldValue).toHaveBeenCalledWith(`address.${name}`, values?.[index]);
+    // Find and click an address option
+    const addressOptions = screen.getAllByRole('listitem');
+    const firstOption = addressOptions[0];
+    const addressText = firstOption.textContent || '';
+
+    await user.click(firstOption);
+
+    // Verify form values were updated
+    const addressValues = addressText.split(' > ');
+    for (let index = 0; index < allFields.length; index++) {
+      const { name } = allFields[index];
+      await waitFor(() => {
+        const formValues = getFormValues();
+        expect(formValues.address[name]).toBe(addressValues[index] || '');
       });
+    }
+  });
+
+  it('clears search results when user clicks outside the component', async () => {
+    const user = userEvent.setup();
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: mockedAddressOptions,
+      error: null,
+      isLoading: false,
+    });
+
+    await renderAddressSearchWithFormik();
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    await user.type(searchbox, 'nea');
+
+    await waitFor(() => {
+      expect(screen.getByRole('list')).toBeInTheDocument();
+    });
+
+    // Mock empty addresses when searchString is cleared
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: [],
+      error: null,
+      isLoading: false,
+    });
+
+    // Click outside - component listens for mousedown events
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    });
+  });
+
+  it('clears search input when an address is selected', async () => {
+    const user = userEvent.setup();
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: mockedAddressOptions,
+      error: null,
+      isLoading: false,
     });
+
+    await renderAddressSearchWithFormik();
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i }) as HTMLInputElement;
+    await user.type(searchbox, 'nea');
+
+    await waitFor(() => {
+      expect(screen.getByRole('list')).toBeInTheDocument();
+    });
+
+    const addressOptions = screen.getAllByRole('listitem');
+    await user.click(addressOptions[0]);
+
+    // Search input should be cleared
+    await waitFor(() => {
+      expect(searchbox.value).toBe('');
+    });
+  });
+
+  it('shows a loading message while search results are being fetched', async () => {
+    const user = userEvent.setup();
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: [],
+      error: null,
+      isLoading: true,
+    });
+
+    await renderAddressSearchWithFormik();
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    await user.type(searchbox, 'nea');
+
+    expect(screen.getByText(/searching/i)).toBeInTheDocument();
+  });
+
+  it('shows an error message when the address search fails', async () => {
+    const user = userEvent.setup();
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: [],
+      error: new Error('Network error'),
+      isLoading: false,
+    });
+
+    await renderAddressSearchWithFormik();
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    await user.type(searchbox, 'nea');
+
+    expect(screen.getByText(/error fetching address results/i)).toBeInTheDocument();
+  });
+
+  it('shows a no results message when the search returns no matches', async () => {
+    const user = userEvent.setup();
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: [],
+      error: null,
+      isLoading: false,
+    });
+
+    await renderAddressSearchWithFormik();
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    await user.type(searchbox, 'nonexistent');
+
+    expect(screen.getByText(/no matching addresses found/i)).toBeInTheDocument();
+  });
+
+  it('does not submit the form when pressing Enter in the search field', async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+
+    mockUseAddressHierarchy.mockReturnValue({
+      addresses: [],
+      error: null,
+      isLoading: false,
+    });
+
+    const defaultValues = { address: {} };
+    const formValuesRef = { ...initialFormValues, ...defaultValues } as FormValues;
+    const mockResourcesContextValue = { addressTemplate: mockedAddressTemplate } as unknown as Resources;
+
+    await renderWithContext(
+      <Formik initialValues={defaultValues} onSubmit={onSubmit}>
+        <Form>
+          <PatientRegistrationContextProvider
+            value={{
+              identifierTypes: [],
+              values: formValuesRef,
+              validationSchema: null,
+              inEditMode: false,
+              setFieldValue: vi.fn() as any,
+              setCapturePhotoProps: vi.fn(),
+              setFieldTouched: vi.fn().mockResolvedValue(undefined),
+              currentPhoto: '',
+              isOffline: false,
+              initialFormValues: formValuesRef,
+            }}>
+            <AddressSearchComponent addressLayout={allFields} />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    const searchbox = screen.getByRole('searchbox', { name: /search address/i });
+    await user.type(searchbox, 'test{Enter}');
+
+    expect(onSubmit).not.toHaveBeenCalled();
   });
 });

package/src/patient-registration/field/address/custom-address-field.component.tsx

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Input } from '../../input/basic-input/input/input.component';
-import styles from '../field.scss';
 import { type FieldDefinition } from '../../../config-schema';
+import styles from '../field.scss';
 
 export interface AddressFieldProps {
   fieldDefinition: FieldDefinition;

package/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx

@@ -59,7 +59,7 @@ export const CauseOfDeathField: React.FC = () => {
                     id="deathCause"
                     invalid={errors.deathCause && touched.deathCause}
                     invalidText={errors.deathCause?.message}
-                    labelText={t('causeOfDeathInputLabel', 'Cause of Death')}
+                    labelText={t('causeOfDeathInputLabel', 'Cause of death')}
                     name="deathCause"
                     required={required}>
                     <SelectItem id="empty-default-option" value={null} text={t('selectAnOption', 'Select an option')} />

package/src/patient-registration/field/cause-of-death/cause-of-death.test.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { render, screen, waitFor } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
+import { useConceptAnswers } from '../field.resource';
+import { CauseOfDeathField } from './cause-of-death.component';
+import { PatientRegistrationContextProvider } from '../../patient-registration-context';
+import { initialFormValues } from '../../patient-registration.component';
+import { type FormValues } from '../../patient-registration.types';
+
+const mockUseConfig = vi.mocked(useConfig<RegistrationConfig>);
+const mockUseConceptAnswers = vi.mocked(useConceptAnswers);
+
+vi.mock('../field.resource', async () => ({
+  ...((await vi.importActual('../field.resource')) as object),
+  useConceptAnswers: vi.fn(),
+}));
+
+const mockConceptAnswers = [
+  { display: 'Cardiac Arrest', uuid: 'cardiac-uuid' },
+  { display: 'Pneumonia', uuid: 'pneumonia-uuid' },
+  { display: 'Other', uuid: 'other-uuid' },
+];
+
+/**
+ * Helper to render CauseOfDeathField with Formik render props for state-dependent tests.
+ */
+const renderCauseOfDeathFieldWithFormik = (
+  initialValues: Partial<FormValues> = {},
+  options?: { enableReinitialize?: boolean },
+) => {
+  const defaultValues = {
+    deathCause: '',
+    nonCodedCauseOfDeath: '',
+    ...initialValues,
+  };
+
+  let formValuesRef: FormValues = { ...initialFormValues, ...defaultValues } as FormValues;
+
+  const utils = render(
+    <Formik initialValues={defaultValues} onSubmit={() => {}} enableReinitialize={options?.enableReinitialize}>
+      {({ setFieldValue, values, setFieldTouched }) => {
+        formValuesRef = { ...initialFormValues, ...values } as FormValues;
+        return (
+          <Form>
+            <PatientRegistrationContextProvider
+              value={{
+                identifierTypes: [],
+                values: formValuesRef,
+                validationSchema: null,
+                inEditMode: false,
+                setFieldValue: setFieldValue as any,
+                setCapturePhotoProps: vi.fn(),
+                setFieldTouched: setFieldTouched as any,
+                currentPhoto: '',
+                isOffline: false,
+                initialFormValues: formValuesRef,
+              }}>
+              <CauseOfDeathField />
+            </PatientRegistrationContextProvider>
+          </Form>
+        );
+      }}
+    </Formik>,
+  );
+
+  return {
+    ...utils,
+    getFormValues: () => formValuesRef,
+  };
+};
+
+describe('CauseOfDeathField', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        causeOfDeath: {
+          conceptUuid: 'cause-of-death-uuid',
+          required: false,
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+      freeTextFieldConceptUuid: 'other-uuid',
+    } as RegistrationConfig);
+    mockUseConceptAnswers.mockReturnValue({
+      data: mockConceptAnswers,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  it('renders the cause of death field with label', () => {
+    renderCauseOfDeathFieldWithFormik();
+
+    expect(screen.getByRole('heading', { name: /cause of death/i })).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /cause of death/i })).toBeInTheDocument();
+  });
+
+  it('displays loading skeleton when concept answers are loading', () => {
+    mockUseConceptAnswers.mockReturnValue({
+      data: null,
+      isLoading: true,
+      error: null,
+    });
+
+    renderCauseOfDeathFieldWithFormik();
+
+    // SelectSkeleton renders as a skeleton element, check for the skeleton class
+    expect(screen.getByText(/cause of death/i)).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+  });
+
+  it('displays error notification when concept UUID is not configured', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        causeOfDeath: {
+          conceptUuid: null,
+          required: false,
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+
+    renderCauseOfDeathFieldWithFormik();
+
+    expect(screen.getByText(/error fetching coded causes of death/i)).toBeInTheDocument();
+  });
+
+  it('displays error notification when there is an error loading concept answers', () => {
+    mockUseConceptAnswers.mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: new Error('Failed to load'),
+    });
+
+    renderCauseOfDeathFieldWithFormik();
+
+    expect(screen.getByText(/error fetching coded causes of death/i)).toBeInTheDocument();
+  });
+
+  describe('Cause of death selection', () => {
+    it('renders all available cause of death options', () => {
+      renderCauseOfDeathFieldWithFormik();
+
+      expect(screen.getByRole('option', { name: /cardiac arrest/i })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: /pneumonia/i })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: /other/i })).toBeInTheDocument();
+    });
+
+    it('updates form value when user selects a cause of death', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderCauseOfDeathFieldWithFormik();
+
+      const select = screen.getByRole('combobox', { name: /cause of death/i }) as HTMLSelectElement;
+      await user.selectOptions(select, 'cardiac-uuid');
+
+      await waitFor(() => {
+        expect(getFormValues().deathCause).toBe('cardiac-uuid');
+      });
+      expect(select.value).toBe('cardiac-uuid');
+    });
+
+    it('shows non-coded cause of death input when "Other" is selected', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderCauseOfDeathFieldWithFormik();
+
+      const select = screen.getByRole('combobox', { name: /cause of death/i }) as HTMLSelectElement;
+      await user.selectOptions(select, 'other-uuid');
+
+      await waitFor(() => {
+        expect(getFormValues().deathCause).toBe('other-uuid');
+      });
+
+      await waitFor(() => {
+        expect(screen.getByRole('textbox', { name: /non-coded cause of death/i })).toBeInTheDocument();
+      });
+    });
+
+    it('hides non-coded cause of death input when non-other option is selected', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderCauseOfDeathFieldWithFormik(
+        { deathCause: 'other-uuid' },
+        { enableReinitialize: true },
+      );
+
+      // Wait for non-coded input to appear (component checks deathCause.value)
+      await waitFor(() => {
+        expect(screen.getByRole('textbox', { name: /non-coded cause of death/i })).toBeInTheDocument();
+      });
+
+      // Select a different option
+      const select = screen.getByRole('combobox', { name: /cause of death/i }) as HTMLSelectElement;
+      await user.selectOptions(select, 'cardiac-uuid');
+
+      await waitFor(() => {
+        expect(getFormValues().deathCause).toBe('cardiac-uuid');
+      });
+
+      // Non-coded input should be hidden
+      await waitFor(() => {
+        expect(screen.queryByRole('textbox', { name: /non-coded cause of death/i })).not.toBeInTheDocument();
+      });
+    });
+
+    it('allows user to enter non-coded cause of death text', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderCauseOfDeathFieldWithFormik(
+        { deathCause: 'other-uuid' },
+        { enableReinitialize: true },
+      );
+
+      // Wait for non-coded input to appear
+      const textInput = await screen.findByRole('textbox', { name: /non-coded cause of death/i });
+      await user.type(textInput, 'Unknown cause');
+
+      await waitFor(() => {
+        expect(getFormValues().nonCodedCauseOfDeath).toBe('Unknown cause');
+      });
+    });
+  });
+
+  describe('Required field', () => {
+    it('renders as required when configured', () => {
+      mockUseConfig.mockReturnValue({
+        ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+        fieldConfigurations: {
+          causeOfDeath: {
+            conceptUuid: 'cause-of-death-uuid',
+            required: true,
+          },
+        } as RegistrationConfig['fieldConfigurations'],
+        freeTextFieldConceptUuid: 'other-uuid',
+      } as RegistrationConfig);
+
+      renderCauseOfDeathFieldWithFormik();
+
+      const select = screen.getByRole('combobox', { name: /cause of death/i });
+      expect(select).toBeRequired();
+    });
+
+    it('renders as optional when not required', () => {
+      renderCauseOfDeathFieldWithFormik();
+
+      const select = screen.getByRole('combobox', { name: /cause of death/i });
+      expect(select).not.toBeRequired();
+    });
+  });
+});

package/src/patient-registration/field/custom-field.component.tsx

@@ -11,7 +11,7 @@ export interface CustomFieldProps {
 
 export function CustomField({ name }: CustomFieldProps) {
   const config = useConfig<RegistrationConfig>();
-  const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
+  const fieldDefinition = config.fieldDefinitions.filter((def) => def.id === name)[0];
 
   if (fieldDefinition.type === 'person attribute') {
     return <PersonAttributeField fieldDefinition={fieldDefinition} />;

package/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx

@@ -14,7 +14,7 @@ export const DateAndTimeOfDeathField: React.FC = () => {
 
   return (
     <div className={classNames(styles.dodField, styles.halfWidthInDesktopView)}>
-      <h4 className={styles.productiveHeading02Light}>{t('deathDateInputLabel', 'Date of Death')}</h4>
+      <h4 className={styles.productiveHeading02Light}>{t('deathDateInputLabel', 'Date of death')}</h4>
       <span>
         <DeathDateField />
         <DeathTimeField />