@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2128 → 5.4.2-pre.2135

package/src/family-partner-history/family-relationship.workspace.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonSet, Column, ComboBox, DatePicker, DatePickerInput, Form, Stack, TextArea } from '@carbon/react';
+import { Button, ButtonSet, Column, ComboBox, DatePicker, DatePickerInput, Form, Stack } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useConfig, useSession } from '@openmrs/esm-framework';
 import React, { useMemo } from 'react';
@@ -6,8 +6,11 @@ import { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-for
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { ConfigObject } from '../config-schema';
+import { saveContact } from '../contact-list/contact-list.resource';
+import usePersonAttributes from '../hooks/usePersonAttributes';
+import RelationshipBaselineInfoFormSection from '../relationships/forms/baseline-info-form-section.component';
 import PatientSearchCreate from '../relationships/forms/patient-search-create-form';
-import { relationshipFormSchema, saveRelationship } from '../relationships/relationship.resources';
+import { relationshipFormSchema } from '../relationships/relationship.resources';
 import { uppercaseText } from '../utils/expression-helper';
 import styles from './family-relationship.scss';
 import { useMappedRelationshipTypes } from './relationships.resource';
@@ -57,12 +60,14 @@ const FamilyRelationshipForm: React.FC<RelationshipFormProps> = ({ closeWorkspac
     },
     resolver: zodResolver(schema),
   });
+  const personUuid = form.watch('personB');
+  const { attributes } = usePersonAttributes(personUuid);
 
   const { control, handleSubmit } = form;
 
   const onSubmit: SubmitHandler<FormData> = async (data) => {
     try {
-      await saveRelationship(data, config, session, []); /// Remove notes from payload since endpoint doesn't expect it to avoid 400 error
+      await saveContact(data, config, session, attributes); /// Remove notes from payload since endpoint doesn't expect it to avoid 400 error
       closeWorkspace();
     } catch (error) {}
   };
@@ -83,7 +88,7 @@ const FamilyRelationshipForm: React.FC<RelationshipFormProps> = ({ closeWorkspac
                   titleText={t('relationship', 'Relationship')}
                   placeholder="Relationship to patient"
                   items={relationshipTypes}
-                  itemToString={(item) => (item ? uppercaseText(item.text) : '')}
+                  itemToString={(item) => item?.text ?? ''}
                   onChange={(e) => field.onChange(e.selectedItem?.id)}
                   invalid={!!fieldState.error}
                   invalidText={fieldState.error?.message}
@@ -142,6 +147,7 @@ const FamilyRelationshipForm: React.FC<RelationshipFormProps> = ({ closeWorkspac
               )}
             />
           </Column>
+          <RelationshipBaselineInfoFormSection />
         </Stack>
 
         <ButtonSet className={styles.buttonSet}>

package/src/family-partner-history/relationships.resource.tsx

@@ -4,45 +4,8 @@ import { type FetchResponse, openmrsFetch, FHIRResource, restBaseUrl, useConfig
 import useSWRImmutable from 'swr/immutable';
 import { RelationshipTypeResponse } from '../case-management/workspace/case-management.resource';
 import { ConfigObject } from '../config-schema';
-
-interface RelationshipsResponse {
-  results: Array<Relationship>;
-}
-
-interface ExtractedRelationship {
-  uuid: string;
-  display: string;
-  relativeAge: number;
-  name: string;
-  dead: boolean;
-  causeOfDeath: string;
-  relativeUuid: string;
-  relationshipType: string;
-  relationshipTypeDisplay: string;
-  relationshipTypeUUID: string;
-  patientUuid: string;
-}
-
-export interface Relationship {
-  display: string;
-  uuid: string;
-  personA: Person;
-  personB: Person;
-  relationshipType: {
-    uuid: string;
-    display: string;
-    aIsToB: string;
-    bIsToA: string;
-  };
-}
-
-interface Person {
-  uuid: string;
-  age: number;
-  dead: boolean;
-  display: string;
-  causeOfDeath: string;
-}
+import { extractContactData } from '../hooks/useContacts';
+import { Relationship } from '../types';
 
 type FHIRResourceResponse = {
   total: number;
@@ -124,78 +87,41 @@ export const useMappedRelationshipTypes = () => {
 };
 
 export function usePatientRelationships(patientUuid: string) {
-  const customRepresentation =
-    'custom:(display,uuid,personA:(uuid,age,display,dead,causeOfDeath),personB:(uuid,age,display,dead,causeOfDeath),relationshipType:(uuid,display,description,aIsToB,bIsToA))';
+  const customeRepresentation =
+    'custom:(display,uuid,personA:(uuid,age,display,dead,causeOfDeath,gender,attributes:(uuid,display,value,attributeType:(uuid,display))),personB:(uuid,age,display,dead,causeOfDeath,gender,attributes:(uuid,display,value,attributeType:(uuid,display))),relationshipType:(uuid,display,description,aIsToB,bIsToA),startDate)';
+  const url = patientUuid ? `/ws/rest/v1/relationship?v=${customeRepresentation}&person=${patientUuid}` : null;
 
-  const relationshipsUrl = patientUuid
-    ? `/ws/rest/v1/relationship?person=${patientUuid}&v=${customRepresentation}`
-    : null;
+  const config = useConfig<ConfigObject>();
 
-  const { data, error, isLoading, isValidating } = useSWR<FetchResponse<RelationshipsResponse>, Error>(
-    relationshipsUrl,
+  const { data, error, isLoading, isValidating } = useSWR<FetchResponse<{ results: Array<Relationship> }>, Error>(
+    url,
     openmrsFetch,
     {
       revalidateOnFocus: false,
     },
   );
+  const familyRelationships = useMemo(
+    () => config.relationshipTypesList.filter((rl) => rl.category.some((c) => c === 'family')),
+    [config],
+  );
 
   const relationships = useMemo(() => {
-    return data?.data?.results?.length ? extractRelationshipData(patientUuid, data?.data?.results) : [];
-  }, [data?.data?.results, patientUuid]);
+    return data?.data?.results?.length
+      ? extractContactData(
+          patientUuid,
+          data?.data?.results.filter((rel) =>
+            familyRelationships.some((famRel) => famRel.uuid === rel.relationshipType.uuid),
+          ),
+          config,
+        )
+      : [];
+  }, [data?.data?.results, patientUuid, config, familyRelationships]);
 
   return {
-    relationships,
+    relationships: relationships ?? [],
     error,
     isLoading,
     isValidating,
-    relationshipsUrl,
+    relationshipsUrl: url,
   };
 }
-
-function extractRelationshipData(
-  patientIdentifier: string,
-  relationships: Array<Relationship>,
-): Array<ExtractedRelationship> {
-  const relationshipsData = [];
-  for (const r of relationships) {
-    if (patientIdentifier === r.personA.uuid) {
-      relationshipsData.push({
-        uuid: r.uuid,
-        name: extractName(r.personB.display),
-        display: r.personB.display,
-        relativeAge: r.personB.age,
-        dead: r.personB.dead,
-        causeOfDeath: r.personB.causeOfDeath,
-        relativeUuid: r.personB.uuid,
-        relationshipType: r.relationshipType.bIsToA,
-        relationshipTypeDisplay: r.relationshipType.display,
-        relationshipTypeUUID: r.relationshipType.uuid,
-        patientUuid: r.personB.uuid,
-      });
-    } else {
-      relationshipsData.push({
-        uuid: r.uuid,
-        name: extractName(r.personA.display),
-        display: r.personA.display,
-        relativeAge: r.personA.age,
-        causeOfDeath: r.personA.causeOfDeath,
-        relativeUuid: r.personA.uuid,
-        dead: r.personA.dead,
-        relationshipType: r.relationshipType.aIsToB,
-        relationshipTypeDisplay: r.relationshipType.display,
-        relationshipTypeUUID: r.relationshipType.uuid,
-        patientUuid: r.personA.uuid,
-      });
-    }
-  }
-  return relationshipsData;
-}
-
-function extractName(display: string) {
-  const pattern = /-\s*(.*)$/;
-  const match = display.match(pattern);
-  if (match && match.length > 1) {
-    return match[1].trim();
-  }
-  return display.trim();
-}

package/src/hooks/useContacts.ts

@@ -84,7 +84,7 @@ function getContact(relationship: Relationship, config: ConfigObject, person: 'p
     endDate: !relationship.endDate ? null : formatDate(parseDate(relationship.endDate)),
   } as Contact;
 }
-function extractContactData(
+export function extractContactData(
   patientIdentifier: string,
   relationships: Array<Relationship>,
   config: ConfigObject,

package/src/hooks/usePersonAttributes.ts

@@ -0,0 +1,15 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { Person } from '../types';
+
+const usePersonAttributes = (personUuid?: string) => {
+  const url = `${restBaseUrl}/person/${personUuid}/attribute`;
+  const { data, error, isLoading, mutate } = useSWR<
+    FetchResponse<{
+      results: Person['attributes'];
+    }>
+  >(personUuid ? url : null, openmrsFetch);
+  return { error, isLoading, mutate, attributes: data?.data?.results ?? [] };
+};
+
+export default usePersonAttributes;

package/src/index.ts

@@ -44,8 +44,6 @@ import CaseManagementForm from './case-management/workspace/case-management.work
 import Relationships from './relationships/relationships.component';
 import CaseEncounterOverviewComponent from './case-management/encounters/case-encounter-overview.component';
 import FamilyRelationshipForm from './family-partner-history/family-relationship.workspace';
-import { OtherRelationships } from './other-relationships/other-relationships.component';
-import { OtherRelationshipsForm } from './other-relationships/other-relationships.workspace';
 import InPatient from './in-patient/in-patient.component';
 import { inPatientMeta } from './in-patient/in-patient.meta';
 import PeerCalendar from './peer-calendar/peer-calendar.component';
@@ -98,9 +96,7 @@ export const familyHistoryLink = getSyncLifecycle(createDashboardLink(familyHist
 export const familyRelationshipForm = getSyncLifecycle(FamilyRelationshipForm, options);
 
 // Dashboard links for Other relationships and the corresponding view in the patient chart
-export const otherRelationships = getSyncLifecycle(OtherRelationships, options);
 export const otherRelationshipsLink = getSyncLifecycle(createDashboardLink(otherRelationshipsDashboardMeta), options);
-export const otherRelationshipsForm = getSyncLifecycle(OtherRelationshipsForm, options);
 
 // Relationships links for Family History and the corresponding view in the patient chart
 export const relationshipsLink = getSyncLifecycle(createDashboardLink(relationshipsDashboardMeta), options);

package/src/relationships/forms/baseline-info-form-section.component.tsx

@@ -0,0 +1,315 @@
+import { Column, Dropdown, RadioButton, RadioButtonGroup, SelectSkeleton } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import React, { useEffect, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { ConfigObject } from '../../config-schema';
+import { contactListConceptMap } from '../../contact-list/contact-list-concept-map';
+import { contactIPVOutcomeOptions } from '../../contact-list/contact-list.resource';
+import usePersonAttributes from '../../hooks/usePersonAttributes';
+import { BOOLEAN_NO, BOOLEAN_YES, relationshipFormSchema } from '../relationship.resources';
+import {
+  LIVING_WITH_PATIENT_CONCEPT_UUID,
+  PARTNER_HIV_STATUS_CONCEPT_UUID,
+  PNS_APROACH_CONCEPT_UUID,
+} from '../relationships-constants';
+import styles from './form.scss';
+
+const RelationshipBaselineInfoFormSection = () => {
+  const form = useFormContext<z.infer<typeof relationshipFormSchema>>();
+  const { t } = useTranslation();
+  const personUuid = form.watch('personB');
+  const config = useConfig<ConfigObject>();
+  const { setValue } = form;
+  const { attributes, isLoading } = usePersonAttributes(personUuid);
+
+  const hivStatus = useMemo(
+    () =>
+      Object.entries(contactListConceptMap[PARTNER_HIV_STATUS_CONCEPT_UUID].answers).map(([uuid, display]) => ({
+        label: display,
+        value: uuid,
+      })),
+    [],
+  );
+
+  const pnsAproach = useMemo(
+    () =>
+      Object.entries(contactListConceptMap[PNS_APROACH_CONCEPT_UUID].answers).map(([uuid, display]) => ({
+        label: display,
+        value: uuid,
+      })),
+    [],
+  );
+
+  const contactLivingWithPatient = useMemo(
+    () =>
+      Object.entries(contactListConceptMap[LIVING_WITH_PATIENT_CONCEPT_UUID].answers).map(([uuid, display]) => ({
+        label: display,
+        value: uuid,
+      })),
+    [],
+  );
+
+  const observableRelationship = form.watch('relationshipType');
+  const observablePhysicalAssault = form.watch('physicalAssault');
+  const observableThreatened = form.watch('threatened');
+  const observableSexualAssault = form.watch('sexualAssault');
+  const showIPVRelatedFields =
+    config.relationshipTypesList.findIndex(
+      (r) => r.uuid === observableRelationship && r.category.some((c) => c === 'sexual'),
+    ) !== -1;
+
+  useEffect(() => {
+    if ([observablePhysicalAssault, observableThreatened, observableSexualAssault].includes(BOOLEAN_YES)) {
+      form.setValue('ipvOutCome', 'True');
+    } else if (
+      [observablePhysicalAssault, observableThreatened, observableSexualAssault].every((v) => v === BOOLEAN_NO)
+    ) {
+      form.setValue('ipvOutCome', 'False');
+    }
+    if (!showIPVRelatedFields) {
+      form.setValue('ipvOutCome', undefined);
+    }
+  }, [
+    observablePhysicalAssault,
+    observableThreatened,
+    observableSexualAssault,
+    observableRelationship,
+    form,
+    showIPVRelatedFields,
+  ]);
+
+  useEffect(() => {
+    if (attributes.length) {
+      // HIV Status
+      const hivStatusAttribute = attributes.find(
+        (a) => a.attributeType.uuid === config.contactPersonAttributesUuid.baselineHIVStatus,
+      );
+      if (hivStatusAttribute) {
+        const value = hivStatus.find((r) => r.value.startsWith(hivStatusAttribute.value))?.value;
+        if (value) {
+          setValue('baselineStatus', value);
+        }
+      }
+
+      const pnsAproachAttribute = attributes.find(
+        (a) => a.attributeType.uuid === config.contactPersonAttributesUuid.preferedPnsAproach,
+      );
+      if (pnsAproachAttribute) {
+        const value = pnsAproach.find((r) => r.value.startsWith(pnsAproachAttribute.value))?.value;
+        if (value) {
+          setValue('preferedPNSAproach', value);
+        }
+      }
+
+      const livingWithPatientAttribute = attributes.find(
+        (a) => a.attributeType.uuid === config.contactPersonAttributesUuid.livingWithContact,
+      );
+      if (livingWithPatientAttribute) {
+        const value = contactLivingWithPatient.find((r) => r.value.startsWith(livingWithPatientAttribute.value))?.value;
+        if (value) {
+          setValue('livingWithClient', value);
+        }
+      }
+
+      const ipvAttr = attributes.find(
+        (a) => a.attributeType.uuid === config.contactPersonAttributesUuid.contactIPVOutcome,
+      );
+      if (ipvAttr) {
+        const value = contactIPVOutcomeOptions.find((r) => r.value.startsWith(ipvAttr.value))?.value;
+        if (value) {
+          setValue('ipvOutCome', value as any);
+        }
+      }
+    }
+  }, [attributes, setValue, config, hivStatus, pnsAproach, contactLivingWithPatient]);
+
+  return (
+    <>
+      {showIPVRelatedFields && (
+        <>
+          <span className={styles.sectionHeader}>{t('ipvQuestions', 'IPV Questions')}</span>
+          <Column>
+            <Controller
+              control={form.control}
+              name="physicalAssault"
+              render={({ field, fieldState: { error } }) => (
+                <RadioButtonGroup
+                  id="physicalAssault"
+                  legendText={t(
+                    'physicalAssault',
+                    '1. Has he/she ever hit, kicked, slapped, or otherwise physically hurt you?',
+                  )}
+                  {...field}
+                  invalid={error?.message}
+                  invalidText={error?.message}
+                  className={styles.billingItem}>
+                  <RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="physicalAssault_yes" />
+                  <RadioButton labelText={t('no', 'No')} value={BOOLEAN_NO} id="physicalAssault_no" />
+                </RadioButtonGroup>
+              )}
+            />
+          </Column>
+          <Column>
+            <Controller
+              control={form.control}
+              name="threatened"
+              render={({ field, fieldState: { error } }) => (
+                <RadioButtonGroup
+                  id="threatened"
+                  legendText={t('threatened', '2. Has he/she ever threatened to hurt you?')}
+                  {...field}
+                  invalid={error?.message}
+                  invalidText={error?.message}
+                  className={styles.billingItem}>
+                  <RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="threatened_yes" />
+                  <RadioButton labelText={t('no', 'No')} value={BOOLEAN_NO} id="threatened_no" />
+                </RadioButtonGroup>
+              )}
+            />
+          </Column>
+          <Column>
+            <Controller
+              control={form.control}
+              name="sexualAssault"
+              render={({ field, fieldState: { error } }) => (
+                <RadioButtonGroup
+                  id="sexualAssault"
+                  legendText={t(
+                    'sexualAssault',
+                    '3.Has he/she ever forced you to do something sexually that made you feel uncomfortable?',
+                  )}
+                  {...field}
+                  invalid={error?.message}
+                  invalidText={error?.message}
+                  className={styles.billingItem}>
+                  <RadioButton labelText={t('yes', 'Yes')} value={BOOLEAN_YES} id="sexualAssault_yes" />
+                  <RadioButton labelText={t('no', 'No')} value={BOOLEAN_NO} id="sexualAssault_no" />
+                </RadioButtonGroup>
+              )}
+            />
+          </Column>
+          <span className={styles.sectionHeader}>{t('ipvOutcome', 'IPV Outcome')}</span>
+          <Column>
+            <Controller
+              control={form.control}
+              name="ipvOutCome"
+              render={({ field, fieldState: { error } }) => (
+                <>
+                  {isLoading ? (
+                    <SelectSkeleton />
+                  ) : (
+                    <Dropdown
+                      ref={field.ref}
+                      invalid={error?.message}
+                      invalidText={error?.message}
+                      id="ipvOutCome"
+                      titleText={t('ipvOutCome', 'IPV Outcome')}
+                      onChange={(e) => {
+                        field.onChange(e.selectedItem);
+                      }}
+                      selectedItem={field.value}
+                      label="Choose option"
+                      items={contactIPVOutcomeOptions.map((r) => r.value)}
+                      itemToString={(item) => {
+                        return contactIPVOutcomeOptions.find((r) => r.value === item)?.label ?? '';
+                      }}
+                    />
+                  )}
+                </>
+              )}
+            />
+          </Column>
+        </>
+      )}
+      <Column>
+        <Controller
+          control={form.control}
+          name="livingWithClient"
+          render={({ field, fieldState: { error } }) => (
+            <>
+              {isLoading ? (
+                <SelectSkeleton />
+              ) : (
+                <Dropdown
+                  ref={field.ref}
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  id="livingWithClient"
+                  titleText={t('livingWithClient', 'Living with client')}
+                  onChange={(e: { selectedItem: string }) => {
+                    field.onChange(e.selectedItem);
+                  }}
+                  selectedItem={field.value}
+                  label="Select"
+                  items={contactLivingWithPatient.map((r) => r.value)}
+                  itemToString={(item: string) => contactLivingWithPatient.find((r) => r.value === item)?.label ?? ''}
+                />
+              )}
+            </>
+          )}
+        />
+      </Column>
+      <span className={styles.sectionHeader}>{t('baselineInformation', 'Baseline Information')}</span>
+      <Column>
+        <Controller
+          control={form.control}
+          name="baselineStatus"
+          render={({ field, fieldState: { error } }) => (
+            <>
+              {isLoading ? (
+                <SelectSkeleton />
+              ) : (
+                <Dropdown
+                  ref={field.ref}
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  id="baselineStatus"
+                  titleText={t('baselineStatus', 'HIV Status')}
+                  onChange={(e: { selectedItem: string }) => {
+                    field.onChange(e.selectedItem);
+                  }}
+                  selectedItem={field.value}
+                  label="Select HIV Status"
+                  items={hivStatus.map((r) => r.value)}
+                  itemToString={(item: string) => hivStatus.find((r) => r.value === item)?.label ?? ''}
+                />
+              )}
+            </>
+          )}
+        />
+      </Column>
+      <Column>
+        <Controller
+          control={form.control}
+          name="preferedPNSAproach"
+          render={({ field, fieldState: { error } }) => (
+            <>
+              {isLoading ? (
+                <SelectSkeleton />
+              ) : (
+                <Dropdown
+                  ref={field.ref}
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  id="preferedPNSAproach"
+                  titleText={t('preferedPNSAproach', 'Prefered PNS Aproach')}
+                  onChange={(e: { selectedItem: string }) => {
+                    field.onChange(e.selectedItem);
+                  }}
+                  selectedItem={field.value}
+                  label="Select Aproach"
+                  items={pnsAproach.map((r) => r.value)}
+                  itemToString={(item: string) => pnsAproach.find((r) => r.value === item)?.label ?? ''}
+                />
+              )}
+            </>
+          )}
+        />
+      </Column>
+    </>
+  );
+};
+
+export default RelationshipBaselineInfoFormSection;

package/src/relationships/forms/patient-search-create-form.tsx

@@ -11,7 +11,7 @@ import {
   TextInput,
 } from '@carbon/react';
 import { Calculator } from '@carbon/react/icons';
-import { showModal } from '@openmrs/esm-framework';
+import { showModal, useConfig } from '@openmrs/esm-framework';
 import React, { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +23,7 @@ import { fetchPerson, relationshipFormSchema } from '../relationship.resources';
 import styles from './form.scss';
 import { MARITAL_STATUS_CONCEPT_UUID } from '../relationships-constants';
 import PatientSearchInfo from '../../autosuggest/patient-search-info.component';
+import { ConfigObject } from '../../config-schema';
 
 type PatientSearchCreateProps = {};
 
@@ -33,6 +34,7 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
     const abortController = new AbortController();
     return await fetchPerson(query, abortController);
   };
+  const { requireMaritalStatusOnAgeGreaterThanOrEqualTo } = useConfig<ConfigObject>();
 
   const handleAdd = () => form.setValue('mode', 'create');
   const maritalStatus = useMemo(
@@ -52,6 +54,17 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
   };
 
   const mode = form.watch('mode');
+  const dobObservable = form.watch('personBInfo.birthdate');
+  const age = useMemo(() => {
+    if (!dobObservable) {
+      return '';
+    }
+    const dob = new Date(dobObservable);
+    const today = new Date();
+    const ageInMs = today.getTime() - dob.getTime();
+    const ageInYears = Math.floor(ageInMs / (1000 * 60 * 60 * 24 * 365.25));
+    return ageInYears.toString();
+  }, [dobObservable]);
 
   return (
     <>
@@ -198,28 +211,30 @@ const PatientSearchCreate: React.FC<PatientSearchCreateProps> = () => {
               {t('fromAge', 'From Age')}
             </Button>
           </Column>
-          <Column>
-            <Controller
-              control={form.control}
-              name="personBInfo.maritalStatus"
-              render={({ field, fieldState: { error } }) => (
-                <Dropdown
-                  ref={field.ref}
-                  invalid={error?.message}
-                  invalidText={error?.message}
-                  id="maritalStatus"
-                  titleText={t('maritalStatus', 'Marital status')}
-                  onChange={(e) => {
-                    field.onChange(e.selectedItem);
-                  }}
-                  initialSelectedItem={field.value}
-                  label="Choose option"
-                  items={maritalStatus.map((r) => r.value)}
-                  itemToString={(item) => maritalStatus.find((r) => r.value === item)?.label ?? ''}
-                />
-              )}
-            />
-          </Column>
+          {age && Number(age) >= requireMaritalStatusOnAgeGreaterThanOrEqualTo && (
+            <Column>
+              <Controller
+                control={form.control}
+                name="personBInfo.maritalStatus"
+                render={({ field, fieldState: { error } }) => (
+                  <Dropdown
+                    ref={field.ref}
+                    invalid={error?.message}
+                    invalidText={error?.message}
+                    id="maritalStatus"
+                    titleText={t('maritalStatus', 'Marital status')}
+                    onChange={(e) => {
+                      field.onChange(e.selectedItem);
+                    }}
+                    initialSelectedItem={field.value}
+                    label="Choose option"
+                    items={maritalStatus.map((r) => r.value)}
+                    itemToString={(item) => maritalStatus.find((r) => r.value === item)?.label ?? ''}
+                  />
+                )}
+              />
+            </Column>
+          )}
           <span className={styles.sectionHeader}>{t('contact', 'Contact')}</span>
           <Column>
             <Controller