@ampath/esm-patient-registration-app 6.0.1-pre.24 → 6.0.1-pre.241

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhoto","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"name":"client-registry-modal","component":"clientRegistryModal"}],"version":"6.0.1-pre.24"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"6.0.1-pre.241"}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@ampath/esm-patient-registration-app",
-  "version": "6.0.1-pre.24",
+  "version": "6.0.1-pre.241",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/ampath-esm-patient-registration-app.js",
   "main": "src/index.ts",
   "source": true,
   "license": "MPL-2.0",
-  "homepage": "https://github.com/ampath/ampath-esm-3.x#readme",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
   "scripts": {
-    "start": "openmrs develop ",
+    "start": "openmrs develop",
     "serve": "webpack serve --mode=development",
     "debug": "npm run serve",
     "build": "webpack --mode production",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts'"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -31,18 +31,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ampath/ampath-esm-3.x.git"
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-management.git"
   },
   "bugs": {
-    "url": "https://github.com/ampath/ampath-esm-3.x/issues"
+    "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
     "@carbon/react": "~1.37.0",
-    "core-js-pure": "^3.34.0",
     "formik": "^2.1.5",
-    "geopattern": "^1.2.3",
     "lodash-es": "^4.17.15",
-    "react-avatar": "^5.0.3",
     "uuid": "^8.3.2",
     "yup": "^0.29.1"
   },
@@ -57,5 +54,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "6.0.0"
+  "stableVersion": "6.0.1-pre.1.0.6"
 }

package/src/config-schema.ts

@@ -19,6 +19,11 @@ export interface FieldDefinition {
   };
   answerConceptSetUuid?: string;
   customConceptAnswers?: Array<CustomConceptAnswer>;
+  showWhenExpression?: {
+    field: string;
+    value: string;
+  };
+  renderType?: string;
 }
 export interface CustomConceptAnswer {
   uuid: string;
@@ -32,6 +37,7 @@ export interface Gender {
 export interface RegistrationConfig {
   sections: Array<string>;
   sectionDefinitions: Array<SectionDefinition>;
+
   fieldDefinitions: Array<FieldDefinition>;
   fieldConfigurations: {
     name: {
@@ -60,14 +66,15 @@ export interface RegistrationConfig {
     };
     phone: {
       personAttributeUuid: string;
+      validation?: {
+        required: boolean;
+        matches?: string;
+      };
     };
   };
   links: {
     submitButton: string;
   };
-  concepts: {
-    patientPhotoUuid: string;
-  };
   defaultPatientIdentifierTypes: Array<string>;
   registrationObs: {
     encounterTypeUuid: string | null;
@@ -309,9 +316,17 @@ export const esmPatientRegistrationSchema = {
     phone: {
       personAttributeUuid: {
         _type: Type.UUID,
-        _default: '14d4f066-15f5-102d-96e4-000c29c2a5d7',
+        _default: '72a759a8-1359-11df-a1f1-0026b9348838',
         _description: 'The UUID of the phone number person attribute type',
       },
+      validation: {
+        required: { _type: Type.Boolean, _default: false },
+        matches: {
+          _type: Type.String,
+          _default: null,
+          _description: 'Optional RegEx for testing the validity of the input.',
+        },
+      },
     },
   },
   links: {
@@ -321,12 +336,6 @@ export const esmPatientRegistrationSchema = {
       _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
     },
   },
-  concepts: {
-    patientPhotoUuid: {
-      _type: Type.ConceptUuid,
-      _default: '736e8771-e501-4615-bfa7-570c03f4bef5',
-    },
-  },
   defaultPatientIdentifierTypes: {
     _type: Type.Array,
     _elements: {

package/src/index.ts

@@ -4,9 +4,8 @@ import { moduleName, patientRegistration } from './constants';
 import { setupOffline } from './offline';
 import rootComponent from './root.component';
 import addPatientLinkComponent from './add-patient-link';
-import patientPhotoComponent from './widgets/display-photo.component';
 import editPatientDetailsButtonComponent from './widgets/edit-patient-details-button.component';
-import VerificationModal from './patient-verification/verification.component';
+import { PatientPhotoExtension } from './patient-photo.extension';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -56,7 +55,7 @@ export const cancelPatientEditModal = getAsyncLifecycle(
   options,
 );
 
-export const patientPhoto = getSyncLifecycle(patientPhotoComponent, options);
+export const patientPhotoExtension = getSyncLifecycle(PatientPhotoExtension, options);
 
 export const editPatientDetailsButton = getSyncLifecycle(editPatientDetailsButtonComponent, {
   featureName: 'edit-patient-details',
@@ -68,4 +67,12 @@ export const deleteIdentifierConfirmationModal = getAsyncLifecycle(
   options,
 );
 
-export const clientRegistryModal = getSyncLifecycle(VerificationModal, options);
+export const confirmClientRegistryModal = getAsyncLifecycle(
+  () => import('./patient-verification/verification-modal/confirm-prompt.component'),
+  options,
+);
+
+export const emptyClientRegistryModal = getAsyncLifecycle(
+  () => import('./patient-verification/verification-modal/empty-prompt.component'),
+  options,
+);

package/src/offline.resources.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import find from 'lodash-es/find';
 import camelCase from 'lodash-es/camelCase';
 import escapeRegExp from 'lodash-es/escapeRegExp';
-import { getConfig, messageOmrsServiceWorker, openmrsFetch, type Session } from '@openmrs/esm-framework';
+import { getConfig, messageOmrsServiceWorker, openmrsFetch, restBaseUrl, type Session } from '@openmrs/esm-framework';
 import type {
   PatientIdentifierType,
   FetchedPatientIdentifierType,
@@ -20,17 +20,17 @@ export interface Resources {
 export const ResourcesContext = React.createContext<Resources>(null);
 
 export async function fetchCurrentSession(): Promise<Session> {
-  const { data } = await cacheAndFetch<Session>('/ws/rest/v1/session');
+  const { data } = await cacheAndFetch<Session>(`${restBaseUrl}/session`);
   return data;
 }
 
 export async function fetchAddressTemplate() {
-  const { data } = await cacheAndFetch<AddressTemplate>('/ws/rest/v1/addresstemplate');
+  const { data } = await cacheAndFetch<AddressTemplate>(`${restBaseUrl}/addresstemplate`);
   return data;
 }
 
 export async function fetchAllRelationshipTypes() {
-  const { data } = await cacheAndFetch('/ws/rest/v1/relationshiptype?v=default');
+  const { data } = await cacheAndFetch(`${restBaseUrl}/relationshiptype?v=default`);
   return data;
 }
 
@@ -59,11 +59,11 @@ async function fetchFieldDefinitionType(fieldDefinition) {
   let apiUrl = '';
 
   if (fieldDefinition.type === 'person attribute') {
-    apiUrl = `/ws/rest/v1/personattributetype/${fieldDefinition.uuid}`;
+    apiUrl = `${restBaseUrl}/personattributetype/${fieldDefinition.uuid}`;
   }
 
   if (fieldDefinition.answerConceptSetUuid) {
-    await cacheAndFetch(`/ws/rest/v1/concept/${fieldDefinition.answerConceptSetUuid}`);
+    await cacheAndFetch(`${restBaseUrl}/concept/${fieldDefinition.answerConceptSetUuid}`);
   }
   const { data } = await cacheAndFetch(apiUrl);
   return data;
@@ -93,8 +93,10 @@ export async function fetchPatientIdentifierTypesWithSources(): Promise<Array<Pa
 
 async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdentifierType>> {
   const [patientIdentifierTypesResponse, primaryIdentifierTypeResponse] = await Promise.all([
-    cacheAndFetch('/ws/rest/v1/patientidentifiertype?v=custom:(display,uuid,name,format,required,uniquenessBehavior)'),
-    cacheAndFetch('/ws/rest/v1/metadatamapping/termmapping?v=full&code=emr.primaryIdentifierType'),
+    cacheAndFetch(
+      `${restBaseUrl}/patientidentifiertype?v=custom:(display,uuid,name,format,required,uniquenessBehavior)`,
+    ),
+    cacheAndFetch(`${restBaseUrl}/metadatamapping/termmapping?v=full&code=emr.primaryIdentifierType`),
   ]);
 
   if (patientIdentifierTypesResponse.ok) {
@@ -103,14 +105,7 @@ async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdenti
 
     const primaryIdentifierTypeUuid = primaryIdentifierTypeResponse?.data?.results?.[0]?.metadataUuid;
 
-    let identifierTypes = primaryIdentifierTypeResponse?.ok
-      ? [
-          mapPatientIdentifierType(
-            patientIdentifierTypes?.find((type) => type.uuid === primaryIdentifierTypeUuid),
-            true,
-          ),
-        ]
-      : [];
+    let identifierTypes = [];
 
     patientIdentifierTypes.forEach((type) => {
       if (type.uuid !== primaryIdentifierTypeUuid) {
@@ -124,11 +119,11 @@ async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdenti
 }
 
 async function fetchIdentifierSources(identifierType: string) {
-  return await cacheAndFetch(`/ws/rest/v1/idgen/identifiersource?v=default&identifierType=${identifierType}`);
+  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default&identifierType=${identifierType}`);
 }
 
 async function fetchAutoGenerationOptions(abortController?: AbortController) {
-  return await cacheAndFetch(`/ws/rest/v1/idgen/autogenerationoption?v=full`);
+  return await cacheAndFetch(`${restBaseUrl}/idgen/autogenerationoption?v=full`);
 }
 
 async function cacheAndFetch<T = any>(url?: string) {

package/src/offline.ts

@@ -1,7 +1,9 @@
 import {
+  fhirBaseUrl,
   makeUrl,
   messageOmrsServiceWorker,
   navigate,
+  restBaseUrl,
   setupDynamicOfflineDataHandler,
   setupOfflineSync,
   type SyncProcessOptions,
@@ -54,10 +56,10 @@ export function setupOffline() {
 
 function getPatientUrlsToBeCached(patientUuid: string) {
   return [
-    `/ws/fhir2/R4/Patient/${patientUuid}`,
-    `/ws/rest/v1/relationship?v=${personRelationshipRepresentation}&person=${patientUuid}`,
-    `/ws/rest/v1/person/${patientUuid}/attribute`,
-    `/ws/rest/v1/patient/${patientUuid}/identifier?v=custom:(uuid,identifier,identifierType:(uuid,required,name),preferred)`,
+    `${fhirBaseUrl}/Patient/${patientUuid}`,
+    `${restBaseUrl}/relationship?v=${personRelationshipRepresentation}&person=${patientUuid}`,
+    `${restBaseUrl}/person/${patientUuid}/attribute`,
+    `${restBaseUrl}/patient/${patientUuid}/identifier?v=custom:(uuid,identifier,identifierType:(uuid,required,name),preferred)`,
   ].map((url) => window.origin + makeUrl(url));
 }
 

package/src/patient-photo.extension.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PatientPhoto, type PatientPhotoProps } from '@openmrs/esm-framework';
+
+export function PatientPhotoExtension(props: PatientPhotoProps) {
+  console.warn(
+    'Using the patient-photo extension (or patient-photo-slot slot) is deprecated. Please use the PatientPhoto component from @openmrs/esm-framework.',
+  );
+  return <PatientPhoto {...props} />;
+}

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

@@ -21,6 +21,7 @@ export const AddressField: React.FC<AddressFieldProps> = ({ fieldDefinition }) =
             <Input
               id={fieldDefinition.id}
               labelText={t(`${fieldDefinition.label}`, `${fieldDefinition.label}`)}
+              required={fieldDefinition?.validation?.required ?? false}
               {...field}
             />
           );

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

@@ -4,6 +4,7 @@ import { type RegistrationConfig } from '../../config-schema';
 import { AddressField } from './address/custom-address-field.component';
 import { ObsField } from './obs/obs-field.component';
 import { PersonAttributeField } from './person-attributes/person-attribute-field.component';
+import { useField } from 'formik';
 
 export interface CustomFieldProps {
   name: string;
@@ -13,6 +14,11 @@ export function CustomField({ name }: CustomFieldProps) {
   const config = useConfig() as RegistrationConfig;
   const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
 
+  const [{ value }] = useField(`attributes.${fieldDefinition.showWhenExpression?.field}`);
+  if (fieldDefinition.showWhenExpression && value !== fieldDefinition.showWhenExpression.value) {
+    return null;
+  }
+
   if (fieldDefinition.type === 'person attribute') {
     return <PersonAttributeField fieldDefinition={fieldDefinition} />;
   } else if (fieldDefinition.type === 'obs') {

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

@@ -1,10 +1,10 @@
 import React, { type ChangeEvent, useCallback, useContext } from 'react';
-import { ContentSwitcher, DatePicker, DatePickerInput, Layer, Switch, TextInput } from '@carbon/react';
+import { ContentSwitcher, Layer, Switch, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
-import { generateFormatting } from '../../date-util';
+import { type CalendarDate, getLocalTimeZone } from '@internationalized/date';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
@@ -32,7 +32,6 @@ export const DobField: React.FC = () => {
   const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
   const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
   const { setFieldValue } = useContext(PatientRegistrationContext);
-  const { format, placeHolder, dateFormat } = generateFormatting(['d', 'm', 'Y'], '/');
   const today = new Date();
 
   const onToggle = useCallback(
@@ -46,8 +45,8 @@ export const DobField: React.FC = () => {
   );
 
   const onDateChange = useCallback(
-    (birthdate: Date[]) => {
-      setFieldValue('birthdate', birthdate[0]);
+    (birthdate: CalendarDate) => {
+      setFieldValue('birthdate', birthdate?.toDate(getLocalTimeZone()));
     },
     [setFieldValue],
   );
@@ -101,55 +100,52 @@ export const DobField: React.FC = () => {
       <Layer>
         {!dobUnknown ? (
           <div className={styles.dobField}>
-            <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
-              <DatePickerInput
-                id="birthdate"
-                {...birthdate}
-                placeholder={placeHolder}
-                labelText={t('dateOfBirthLabelText', 'Date of Birth')}
-                invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-                invalidText={birthdateMeta.error && t(birthdateMeta.error)}
-                value={format(birthdate.value)}
-              />
-            </DatePicker>
+            <OpenmrsDatePicker
+              id="birthdate"
+              {...birthdate}
+              onChange={onDateChange}
+              maxDate={today}
+              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              value={birthdate.value}
+            />
+            {!!(birthdateMeta.touched && birthdateMeta.error) && (
+              <div className={styles.radioFieldError}>{birthdateMeta.error && t(birthdateMeta.error)}</div>
+            )}
           </div>
         ) : (
           <div className={styles.grid}>
             <div className={styles.dobField}>
-              <Layer>
-                <TextInput
-                  id="yearsEstimated"
-                  type="number"
-                  name={yearsEstimated.name}
-                  onChange={onEstimatedYearsChange}
-                  labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
-                  invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
-                  invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
-                  value={yearsEstimated.value}
-                  min={0}
-                  required
-                  {...yearsEstimated}
-                  onBlur={updateBirthdate}
-                />
-              </Layer>
+              <TextInput
+                id="yearsEstimated"
+                type="number"
+                name={yearsEstimated.name}
+                onChange={onEstimatedYearsChange}
+                labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
+                invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
+                value={yearsEstimated.value}
+                min={0}
+                required
+                {...yearsEstimated}
+                onBlur={updateBirthdate}
+              />
             </div>
             <div className={styles.dobField}>
-              <Layer>
-                <TextInput
-                  id="monthsEstimated"
-                  type="number"
-                  name={monthsEstimated.name}
-                  onChange={onEstimatedMonthsChange}
-                  labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
-                  invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
-                  invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
-                  value={monthsEstimated.value}
-                  min={0}
-                  {...monthsEstimated}
-                  required={!yearsEstimateMeta.value}
-                  onBlur={updateBirthdate}
-                />
-              </Layer>
+              <TextInput
+                id="monthsEstimated"
+                type="number"
+                name={monthsEstimated.name}
+                onChange={onEstimatedMonthsChange}
+                labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
+                invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
+                invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
+                value={monthsEstimated.value}
+                min={0}
+                {...monthsEstimated}
+                required={!yearsEstimateMeta.value}
+                onBlur={updateBirthdate}
+              />
             </div>
           </div>
         )}

package/src/patient-registration/field/field.resource.ts

@@ -1,11 +1,11 @@
-import { type FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, showSnackbar, restBaseUrl } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
 import { type ConceptAnswers, type ConceptResponse } from '../patient-registration.types';
 
 export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
   const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
   const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
-    shouldFetch ? `/ws/rest/v1/concept/${conceptUuid}` : null,
+    shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
     openmrsFetch,
   );
   if (error) {
@@ -21,7 +21,7 @@ export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoad
 export function useConceptAnswers(conceptUuid: string): { data: Array<ConceptAnswers>; isLoading: boolean } {
   const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
   const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
-    shouldFetch ? `/ws/rest/v1/concept/${conceptUuid}` : null,
+    shouldFetch ? `${restBaseUrl}/concept/${conceptUuid}` : null,
     openmrsFetch,
   );
   if (error) {

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

@@ -158,7 +158,7 @@ function CodedObsField({ concept, answerConceptSetUuid, label, required, customC
   const fieldName = `obs.${concept.uuid}`;
 
   const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
-    customConceptAnswers.length ? '' : answerConceptSetUuid ?? concept.uuid,
+    customConceptAnswers.length ? '' : (answerConceptSetUuid ?? concept.uuid),
   );
 
   const answers = useMemo(

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx

@@ -14,6 +14,7 @@ export interface CodedPersonAttributeFieldProps {
   answerConceptSetUuid: string;
   label?: string;
   customConceptAnswers: Array<{ uuid: string; label?: string }>;
+  required: boolean;
 }
 
 export function CodedPersonAttributeField({
@@ -22,10 +23,12 @@ export function CodedPersonAttributeField({
   answerConceptSetUuid,
   label,
   customConceptAnswers,
+  required,
 }: CodedPersonAttributeFieldProps) {
   const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
     customConceptAnswers.length ? '' : answerConceptSetUuid,
   );
+
   const { t } = useTranslation();
   const fieldName = `attributes.${personAttributeType.uuid}`;
   const [error, setError] = useState(false);
@@ -99,6 +102,7 @@ export function CodedPersonAttributeField({
                     name={`person-attribute-${personAttributeType.uuid}`}
                     labelText={label ?? personAttributeType?.display}
                     invalid={errors[fieldName] && touched[fieldName]}
+                    required={required}
                     {...field}>
                     <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
                     {answers.map((answer) => (

package/src/patient-registration/field/person-attributes/custom-person-attribute-field.component.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Field } from 'formik';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import { useTranslation } from 'react-i18next';
+import styles from './../field.scss';
+import classNames from 'classnames';
+
+type CustomPersonAttributeFieldProps = {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  answerConceptSetUuid: string;
+  label?: string;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
+  required: boolean;
+};
+
+const CustomPersonAttributeField: React.FC<CustomPersonAttributeFieldProps> = ({
+  personAttributeType,
+  required,
+  id,
+  label,
+  customConceptAnswers,
+}) => {
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Layer>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            return (
+              <>
+                <Select
+                  id={id}
+                  name={`person-attribute-${personAttributeType.uuid}`}
+                  labelText={label ?? personAttributeType?.display}
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  required={required}
+                  {...field}>
+                  <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
+                  {customConceptAnswers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.uuid} />
+                  ))}
+                </Select>
+              </>
+            );
+          }}
+        </Field>
+      </Layer>
+    </div>
+  );
+};
+
+export default CustomPersonAttributeField;

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -6,6 +6,7 @@ import { usePersonAttributeType } from './person-attributes.resource';
 import { TextPersonAttributeField } from './text-person-attribute-field.component';
 import { useTranslation } from 'react-i18next';
 import styles from '../field.scss';
+import CustomPersonAttributeField from './custom-person-attribute-field.component';
 
 export interface PersonAttributeFieldProps {
   fieldDefinition: FieldDefinition;
@@ -22,13 +23,26 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
     switch (personAttributeType.format) {
       case 'java.lang.String':
         return (
-          <TextPersonAttributeField
-            personAttributeType={personAttributeType}
-            validationRegex={fieldDefinition.validation?.matches ?? ''}
-            label={fieldDefinition.label}
-            required={fieldDefinition.validation?.required ?? false}
-            id={fieldDefinition?.id}
-          />
+          <>
+            {fieldDefinition.renderType === 'select' ? (
+              <CustomPersonAttributeField
+                personAttributeType={personAttributeType}
+                answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+                label={fieldDefinition.label}
+                id={fieldDefinition?.id}
+                customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
+                required={fieldDefinition.validation?.required ?? false}
+              />
+            ) : (
+              <TextPersonAttributeField
+                personAttributeType={personAttributeType}
+                validationRegex={fieldDefinition.validation?.matches ?? ''}
+                label={fieldDefinition.label}
+                required={fieldDefinition.validation?.required ?? false}
+                id={fieldDefinition?.id}
+              />
+            )}
+          </>
         );
       case 'org.openmrs.Concept':
         return (
@@ -38,6 +52,7 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
             label={fieldDefinition.label}
             id={fieldDefinition?.id}
             customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
+            required={fieldDefinition.validation?.required ?? false}
           />
         );
       default:

package/src/patient-registration/field/person-attributes/person-attributes.resource.ts

@@ -1,4 +1,4 @@
-import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
 import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
 
@@ -8,7 +8,7 @@ export function usePersonAttributeType(personAttributeTypeUuid: string): {
   error: any;
 } {
   const { data, error, isLoading } = useSWRImmutable<FetchResponse<PersonAttributeTypeResponse>>(
-    `/ws/rest/v1/personattributetype/${personAttributeTypeUuid}`,
+    `${restBaseUrl}/personattributetype/${personAttributeTypeUuid}`,
     openmrsFetch,
   );
 

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

@@ -10,6 +10,7 @@ export function PhoneField() {
     id: 'phone',
     type: 'person attribute',
     uuid: config.fieldConfigurations.phone.personAttributeUuid,
+    validation: config.fieldConfigurations.phone.validation,
     showHeading: false,
   };
   return <PersonAttributeField fieldDefinition={fieldDefinition} />;