@kenyaemr/esm-patient-registration-app 5.2.2 → 6.0.0

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

@@ -1,28 +1,31 @@
 import React from 'react';
+import { Form, Formik } from 'formik';
 import { render, screen } from '@testing-library/react';
-import { Field } from './field.component';
 import { useConfig } from '@openmrs/esm-framework';
+import { Field } from './field.component';
+import type { AddressTemplate, FormValues } from '../patient-registration.types';
+import { type Resources, ResourcesContext } from '../../offline.resources';
 import { PatientRegistrationContext } from '../patient-registration-context';
-import { Resources, ResourcesContext } from '../../offline.resources';
-import { Form, Formik } from 'formik';
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
   useConfig: jest.fn(),
 }));
+
 const predefinedAddressTemplate = {
-  results: [
-    {
-      value:
-        '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
-    },
-  ],
+  uuid: 'test-address-template-uuid',
+  property: 'layout.address.format',
+  description: 'Test Address Template',
+  display:
+    'Layout - Address Format = <org.openmrs.layout.address.AddressTemplate>\n     <nameMappings class="properties">\n       <property name="postalCode" value="Location.postalCode"/>\n       <property name="address2" value="Location.address2"/>\n       <property name="address1" value="Location.address1"/>\n       <property name="country" value="Location.country"/>\n       <property name="stateProvince" value="Location.stateProvince"/>\n       <property name="cityVillage" value="Location.cityVillage"/>\n     </nameMappings>\n     <sizeMappings class="properties">\n       <property name="postalCode" value="10"/>\n       <property name="address2" value="40"/>\n       <property name="address1" value="40"/>\n       <property name="country" value="10"/>\n       <property name="stateProvince" value="10"/>\n       <property name="cityVillage" value="10"/>\n     </sizeMappings>\n     <lineByLineFormat>\n       <string>address1</string>\n       <string>address2</string>\n       <string>cityVillage stateProvince country postalCode</string>\n     </lineByLineFormat>\n   </org.openmrs.layout.address.AddressTemplate>',
+  value:
+    '<org.openmrs.layout.address.AddressTemplate>\r\n     <nameMappings class="properties">\r\n       <property name="postalCode" value="Location.postalCode"/>\r\n       <property name="address2" value="Location.address2"/>\r\n       <property name="address1" value="Location.address1"/>\r\n       <property name="country" value="Location.country"/>\r\n       <property name="stateProvince" value="Location.stateProvince"/>\r\n       <property name="cityVillage" value="Location.cityVillage"/>\r\n     </nameMappings>\r\n     <sizeMappings class="properties">\r\n       <property name="postalCode" value="4"/>\r\n       <property name="address1" value="40"/>\r\n       <property name="address2" value="40"/>\r\n       <property name="country" value="10"/>\r\n       <property name="stateProvince" value="10"/>\r\n       <property name="cityVillage" value="10"/>\r\n       <asset name="cityVillage" value="10"/>\r\n     </sizeMappings>\r\n     <lineByLineFormat>\r\n       <string>address1 address2</string>\r\n       <string>cityVillage stateProvince postalCode</string>\r\n       <string>country</string>\r\n     </lineByLineFormat>\r\n     <elementDefaults class="properties">\r\n            <property name="country" value=""/>\r\n     </elementDefaults>\r\n     <elementRegex class="properties">\r\n            <property name="address1" value="[a-zA-Z]+$"/>\r\n     </elementRegex>\r\n     <elementRegexFormats class="properties">\r\n            <property name="address1" value="Countries can only be letters"/>\r\n     </elementRegexFormats>\r\n   </org.openmrs.layout.address.AddressTemplate>',
 };
 
 const mockedIdentifierTypes = [
   {
     fieldName: 'openMrsId',
-    format: null,
+    format: '',
     identifierSources: [
       {
         uuid: '8549f706-7e85-4c1d-9424-217d50a2988b',
@@ -35,22 +38,22 @@ const mockedIdentifierTypes = [
     isPrimary: true,
     name: 'OpenMRS ID',
     required: true,
-    uniquenessBehavior: 'UNIQUE',
+    uniquenessBehavior: 'UNIQUE' as const,
     uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
   },
   {
     fieldName: 'idCard',
-    format: null,
+    format: '',
     identifierSources: [],
     isPrimary: false,
     name: 'ID Card',
     required: false,
-    uniquenessBehavior: 'UNIQUE',
+    uniquenessBehavior: 'UNIQUE' as const,
     uuid: 'b4143563-16cd-4439-b288-f83d61670fc8',
   },
   {
     fieldName: 'legacyId',
-    format: null,
+    format: '',
     identifierSources: [],
     isPrimary: false,
     name: 'Legacy ID',
@@ -79,8 +82,9 @@ const mockedIdentifierTypes = [
     uuid: '8d793bee-c2cc-11de-8d13-0010c6dffd0f',
   },
 ];
-const mockResourcesContextValue = {
-  addressTemplate: predefinedAddressTemplate,
+
+const mockResourcesContextValue: Resources = {
+  addressTemplate: predefinedAddressTemplate as unknown as AddressTemplate,
   currentSession: {
     authenticated: true,
     sessionId: 'JSESSION',
@@ -88,10 +92,39 @@ const mockResourcesContextValue = {
   },
   relationshipTypes: [],
   identifierTypes: [...mockedIdentifierTypes],
-} as Resources;
+};
+
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {} as FormValues,
+};
 
 describe('Field', () => {
+  let ContextWrapper;
+
   beforeEach(() => {
+    ContextWrapper = ({ children }) => (
+      <ResourcesContext.Provider value={mockResourcesContextValue}>
+        <Formik initialValues={{}} onSubmit={jest.fn()}>
+          <Form>
+            <PatientRegistrationContext.Provider value={initialContextValues}>
+              {children}
+            </PatientRegistrationContext.Provider>
+          </Form>
+        </Formik>
+      </ResourcesContext.Provider>
+    );
+  });
+
+  afterEach(() => {
     jest.clearAllMocks();
   });
 
@@ -106,22 +139,9 @@ describe('Field', () => {
         },
       },
     }));
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik initialValues={{}} onSubmit={null}>
-          <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                setInitialFormValues: jest.fn(),
-                values: {},
-              }}>
-              <Field name="name" />
-            </PatientRegistrationContext.Provider>
-          </Form>
-        </Formik>
-      </ResourcesContext.Provider>,
-    );
+
+    render(<Field name="name" />, { wrapper: ContextWrapper });
+
     expect(screen.getByText('Full Name')).toBeInTheDocument();
   });
 
@@ -137,22 +157,9 @@ describe('Field', () => {
         ],
       },
     }));
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik initialValues={{}} onSubmit={null}>
-          <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                setInitialFormValues: jest.fn(),
-                values: {},
-              }}>
-              <Field name="gender" />
-            </PatientRegistrationContext.Provider>
-          </Form>
-        </Formik>
-      </ResourcesContext.Provider>,
-    );
+
+    render(<Field name="gender" />, { wrapper: ContextWrapper });
+
     expect(screen.getByLabelText('Male')).toBeInTheDocument();
   });
 
@@ -165,22 +172,7 @@ describe('Field', () => {
         },
       },
     }));
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik initialValues={{}} onSubmit={null}>
-          <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                setInitialFormValues: jest.fn(),
-                values: {},
-              }}>
-              <Field name="dob" />
-            </PatientRegistrationContext.Provider>
-          </Form>
-        </Formik>
-      </ResourcesContext.Provider>,
-    );
+    render(<Field name="dob" />, { wrapper: ContextWrapper });
     expect(screen.getByText('Birth')).toBeInTheDocument();
   });
 
@@ -200,22 +192,9 @@ describe('Field', () => {
         },
       },
     }));
-    render(
-      <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik initialValues={{}} onSubmit={null}>
-          <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                setInitialFormValues: jest.fn(),
-                values: {},
-              }}>
-              <Field name="address" />
-            </PatientRegistrationContext.Provider>
-          </Form>
-        </Formik>
-      </ResourcesContext.Provider>,
-    );
+
+    render(<Field name="address" />, { wrapper: ContextWrapper });
+
     expect(screen.getByText('Address')).toBeInTheDocument();
   });
 
@@ -223,7 +202,7 @@ describe('Field', () => {
     (useConfig as jest.Mock).mockImplementation(() => ({
       defaultPatientIdentifierTypes: ['OpenMRS ID'],
     }));
-    // initial value for the identifiers field
+
     const openmrsID = {
       name: 'OpenMRS ID',
       fieldName: 'openMrsId',
@@ -249,21 +228,41 @@ describe('Field', () => {
           },
         },
       ],
+      identifierUuid: 'openmrs-identifier-uuid',
+      identifierTypeUuid: 'openmrs-id-identifier-type-uuid',
+      initialValue: '12345',
+      identifierValue: '12345',
+      identifierName: 'OpenMRS ID',
+      preferred: true,
+      selectedSource: {
+        uuid: 'openmrs-id-selected-source-uuid',
+        name: 'Generator 1 for OpenMRS ID',
+        autoGenerationOption: {
+          manualEntryEnabled: false,
+          automaticGenerationEnabled: true,
+        },
+      },
       autoGenerationSource: null,
     };
+
+    const updatedContextValues = {
+      currentPhoto: 'data:image/png;base64,1234567890',
+      identifierTypes: [],
+      inEditMode: false,
+      initialFormValues: { identifiers: { openmrsID } } as unknown as FormValues,
+      isOffline: false,
+      setCapturePhotoProps: jest.fn(),
+      setFieldValue: jest.fn(),
+      setInitialFormValues: jest.fn(),
+      validationSchema: null,
+      values: { identifiers: { openmrsID } } as unknown as FormValues,
+    };
+
     render(
       <ResourcesContext.Provider value={mockResourcesContextValue}>
-        <Formik initialValues={{}} onSubmit={null}>
+        <Formik initialValues={{}} onSubmit={jest.fn()}>
           <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                initialFormValues: { identifiers: { openmrsID } },
-                setInitialFormValues: jest.fn(),
-                values: {
-                  identifiers: { openmrsID },
-                },
-              }}>
+            <PatientRegistrationContext.Provider value={updatedContextValues}>
               <Field name="id" />
             </PatientRegistrationContext.Provider>
           </Form>
@@ -274,18 +273,22 @@ describe('Field', () => {
   });
 
   it('should return null and report an error for an invalid field name', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+
     (useConfig as jest.Mock).mockImplementation(() => ({
       fieldDefinitions: [{ id: 'weight' }],
     }));
     let error = null;
+
     try {
       render(<Field name="invalidField" />);
     } catch (err) {
       error = err;
     }
-    expect(error).toBe(
-      "Invalid field name 'invalidField'. Valid options are 'weight', 'name', 'gender', 'dob', 'address', 'id', 'phone & email'.",
-    );
+
+    expect(error).toMatch(/Invalid field name 'invalidField'. Valid options are /);
     expect(screen.queryByTestId('invalid-field')).not.toBeInTheDocument();
+
+    consoleError.mockRestore();
   });
 });

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

@@ -4,7 +4,7 @@ import styles from '../field.scss';
 import { useTranslation } from 'react-i18next';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { useField } from 'formik';
-import { RegistrationConfig } from '../../../config-schema';
+import { type RegistrationConfig } from '../../../config-schema';
 import { useConfig } from '@openmrs/esm-framework';
 
 export const GenderField: React.FC = () => {
@@ -33,10 +33,10 @@ export const GenderField: React.FC = () => {
         <RadioButtonGroup name="gender" orientation="vertical" onChange={setGender} valueSelected={field.value}>
           {fieldConfigs.map((option) => (
             <RadioButton
-              key={option.label}
-              id={option.id}
+              key={option.label ?? option.value}
+              id={`gender-option-${option.value}`}
               value={option.value}
-              labelText={t(`${option.label}`, `${option.label}`)}
+              labelText={t(option.label ?? option.value, option.label ?? option.value)}
             />
           ))}
         </RadioButtonGroup>

package/src/patient-registration/field/gender/gender-field.test.tsx

@@ -1,9 +1,7 @@
-import React, { useContext } from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import '@testing-library/jest-dom';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
-
+import { render } from '@testing-library/react';
 import { GenderField } from './gender-field.component';
 
 jest.mock('@openmrs/esm-framework', () => ({
@@ -12,9 +10,8 @@ jest.mock('@openmrs/esm-framework', () => ({
     fieldConfigurations: {
       gender: [
         {
-          value: 'Male',
+          value: 'male',
           label: 'Male',
-          id: 'male',
         },
       ],
       name: {
@@ -50,17 +47,13 @@ describe('GenderField', () => {
     );
   };
 
-  it('renders', () => {
-    expect(renderComponent()).not.toBeNull();
-  });
-
   it('has a label', () => {
     expect(renderComponent().getAllByText('Sex')).toBeTruthy();
   });
 
-  it('checks an option', () => {
+  it('checks an option', async () => {
+    const user = userEvent.setup();
     const component = renderComponent();
-    fireEvent.click(component.getByLabelText('Male'));
-    expect(component.getByLabelText('Male')).toBeChecked();
+    expect(component.getByLabelText('Male').getAttribute('value')).toBe('male');
   });
 });

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

@@ -7,10 +7,10 @@ import IdentifierSelectionOverlay from './identifier-selection-overlay.component
 import { IdentifierInput } from '../../input/custom-input/identifier/identifier-input.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import {
-  FormValues,
-  IdentifierSource,
-  PatientIdentifierType,
-  PatientIdentifierValue,
+  type FormValues,
+  type IdentifierSource,
+  type PatientIdentifierType,
+  type PatientIdentifierValue,
 } from '../../patient-registration.types';
 import { ResourcesContext } from '../../../offline.resources';
 import styles from '../field.scss';
@@ -31,8 +31,8 @@ export function setIdentifierSource(
     identifierValue: autoGeneration
       ? 'auto-generated'
       : identifierValue !== 'auto-generated'
-      ? identifierValue
-      : initialValue,
+        ? identifierValue
+        : initialValue,
   };
 }
 

package/src/patient-registration/field/id/id-field.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { Identifiers } from './id-field.component';
-import { Resources, ResourcesContext } from '../../../offline.resources';
+import { type Resources, ResourcesContext } from '../../../offline.resources';
 import { Form, Formik } from 'formik';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { openmrsID } from '../__mocks__/identifiers.mock';
-import { mockedIdentifierTypes } from '../__mocks__/identifier-types.mock';
+import { openmrsID, mockedIdentifierTypes } from '__mocks__';
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
@@ -16,7 +16,7 @@ jest.mock('@openmrs/esm-framework', () => ({
 
 describe('Identifiers', () => {
   const mockResourcesContextValue = {
-    addressTemplate: [],
+    addressTemplate: {},
     currentSession: {
       authenticated: true,
       sessionId: 'JSESSION',
@@ -76,7 +76,9 @@ describe('Identifiers', () => {
     expect(configureButton).toBeEnabled();
   });
 
-  it('should open identifier selection overlay when "Configure" button is clicked', () => {
+  it('should open identifier selection overlay when "Configure" button is clicked', async () => {
+    const user = userEvent.setup();
+
     render(
       <ResourcesContext.Provider value={mockResourcesContextValue}>
         <Formik initialValues={{}} onSubmit={null}>
@@ -98,7 +100,7 @@ describe('Identifiers', () => {
     );
 
     const configureButton = screen.getByRole('button', { name: 'Configure' });
-    fireEvent.click(configureButton);
+    await user.click(configureButton);
 
     expect(screen.getByRole('button', { name: 'Close overlay' })).toBeInTheDocument();
   });

package/src/patient-registration/field/id/identifier-selection-overlay.component.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useEffect, useState, useContext } from 're
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSet, Checkbox, Search, RadioButtonGroup, RadioButton } from '@carbon/react';
 import { isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
-import { FormValues, PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration.types';
+import { type FormValues, type PatientIdentifierType, PatientIdentifierValue } from '../../patient-registration.types';
 import Overlay from '../../ui-components/overlay/overlay.component';
 import { ResourcesContext } from '../../../offline.resources';
 import { PatientRegistrationContext } from '../../patient-registration-context';

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

@@ -6,7 +6,7 @@ import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
 import { Input } from '../../input/basic-input/input/input.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from '../field.scss';
-import { RegistrationConfig } from '../../../config-schema';
+import { type RegistrationConfig } from '../../../config-schema';
 
 export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
 const containsNoNumbers = /^([^0-9]*)$/;

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { ConceptResponse } from '../../patient-registration.types';
-import { FieldDefinition, RegistrationConfig } from '../../../config-schema';
+import { type ConceptResponse } from '../../patient-registration.types';
+import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
@@ -15,8 +15,10 @@ export interface ObsFieldProps {
 }
 
 export function ObsField({ fieldDefinition }: ObsFieldProps) {
+  const { t } = useTranslation();
   const { data: concept, isLoading } = useConcept(fieldDefinition.uuid);
-  const config = useConfig() as RegistrationConfig;
+
+  const config = useConfig<RegistrationConfig>();
 
   if (!config.registrationObs.encounterTypeUuid) {
     console.error(
@@ -30,6 +32,7 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
   if (isLoading) {
     return null;
   }
+
   switch (concept.datatype.display) {
     case 'Text':
       return (
@@ -55,12 +58,17 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
           answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
           label={fieldDefinition.label}
           required={fieldDefinition.validation.required}
+          customConceptAnswers={fieldDefinition.customConceptAnswers}
         />
       );
     default:
       return (
         <InlineNotification kind="error" title="Error">
-          Concept has unknown datatype "{concept.datatype.display}"
+          {t(
+            'obsFieldUnknownDatatype',
+            `Concept for obs field '{{fieldDefinitionId}}' has unknown datatype '{{datatypeName}}'`,
+            { fieldDefinitionId: fieldDefinition.id, datatypeName: concept.datatype.display },
+          )}
         </InlineNotification>
       );
   }
@@ -115,8 +123,6 @@ interface NumericObsFieldProps {
 }
 
 function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
-  const { t } = useTranslation();
-
   const fieldName = `obs.${concept.uuid}`;
 
   return (
@@ -144,40 +150,32 @@ interface CodedObsFieldProps {
   answerConceptSetUuid?: string;
   label?: string;
   required?: boolean;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
 }
 
-function CodedObsField({ concept, answerConceptSetUuid, label, required }: CodedObsFieldProps) {
-  const config = useConfig() as RegistrationConfig;
+function CodedObsField({ concept, answerConceptSetUuid, label, required, customConceptAnswers }: CodedObsFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `obs.${concept.uuid}`;
+
   const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
-    answerConceptSetUuid ?? concept.uuid,
+    customConceptAnswers.length ? '' : answerConceptSetUuid ?? concept.uuid,
   );
 
-  const fieldName = `obs.${concept.uuid}`;
-  const fieldDefinition = config?.fieldDefinitions?.filter((def) => def.type === 'obs' && def.uuid === concept.uuid)[0];
+  const answers = useMemo(
+    () =>
+      customConceptAnswers.length
+        ? customConceptAnswers
+        : isLoadingConceptAnswers
+          ? []
+          : conceptAnswers.map((answer) => ({ ...answer, label: answer.display })),
+    [customConceptAnswers, conceptAnswers, isLoadingConceptAnswers],
+  );
 
   return (
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
       {!isLoadingConceptAnswers ? (
         <Field name={fieldName}>
           {({ field, form: { touched, errors }, meta }) => {
-            if (fieldDefinition?.customConceptAnswers?.length) {
-              return (
-                <Layer>
-                  <Select
-                    id={fieldName}
-                    name={fieldName}
-                    required={required}
-                    labelText={label ?? concept?.display}
-                    invalid={errors[fieldName] && touched[fieldName]}
-                    {...field}>
-                    <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
-                    {fieldDefinition?.customConceptAnswers.map((answer) => (
-                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
-                    ))}
-                  </Select>
-                </Layer>
-              );
-            }
             return (
               <Layer>
                 <Select
@@ -187,9 +185,13 @@ function CodedObsField({ concept, answerConceptSetUuid, label, required }: Coded
                   required={required}
                   invalid={errors[fieldName] && touched[fieldName]}
                   {...field}>
-                  <SelectItem key={`no-answer-select-item-${fieldName}`} value={''} text="" />
-                  {conceptAnswers.map((answer) => (
-                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.display} />
+                  <SelectItem
+                    key={`no-answer-select-item-${fieldName}`}
+                    value={''}
+                    text={t('selectAnOption', 'Select an option')}
+                  />
+                  {answers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
                   ))}
                 </Select>
               </Layer>