From af7f7b6a9dab70507ebf34a52c764f37508a9163 Mon Sep 17 00:00:00 2001
From: CynthiaKamau <cynthiakamau54@gmail.com>
Date: Sat, 14 Oct 2023 17:17:42 +0300
Subject: [PATCH] O3-2495 Add required attributes to address hierarchy fields
 (#846)

* O3-2495 Add required attributes to address hierarchy fields

* (fix) fix broken unit test

---------

Co-authored-by: Donald Kibet <chelashawdonald@yahoo.com>
---
 .../field/address/address-field.component.tsx  | 18 ++++++++++++------
 .../address-hierarchy-levels.component.tsx     |  5 ++++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
index b7f892a83..b8253767b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
@@ -22,14 +22,18 @@ export const AddressComponent: React.FC = () => {
     if (!addressTemplate?.lines) {
       return [];
     }
+
     const allFields = addressTemplate?.lines?.flat();
     const fields = allFields?.filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
-
-    return fields.map(({ displayText, codeName }) => ({
-      id: codeName,
-      name: codeName,
-      label: displayText,
-    }));
+    const allRequiredFields = Object.fromEntries(addressTemplate?.requiredElements?.map((curr) => [curr, curr]) || []);
+    return fields.map(({ displayText, codeName }) => {
+      return {
+        id: codeName,
+        name: codeName,
+        label: displayText,
+        required: Boolean(allRequiredFields[codeName]),
+      };
+    });
   }, [addressTemplate]);
 
   const { t } = useTranslation();
@@ -83,6 +87,7 @@ export const AddressComponent: React.FC = () => {
             labelText={t(attributes.label)}
             id={attributes.name}
             selected={selected}
+            required={attributes.required}
           />
         ))}
       </AddressComponentContainer>
@@ -123,6 +128,7 @@ export const AddressComponent: React.FC = () => {
             labelText={t(attributes.label)}
             id={attributes.name}
             selected={selected}
+            required={attributes.required}
           />
         ))
       )}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx
index bc627d0ec..23ac24895 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx
@@ -28,6 +28,7 @@ interface AddressComboBoxProps {
     name: string;
     value: string;
     label: string;
+    required?: boolean;
   };
 }
 
@@ -36,6 +37,7 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
   const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
   const { entries } = useAddressEntries(fetchEntriesForField, searchString);
+  const label = t(attribute.label) + (attribute?.required ? '' : ` (${t('optional', 'optional')})`);
 
   const handleInputChange = useCallback(
     (newValue) => {
@@ -62,7 +64,8 @@ const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
       fieldProps={{
         ...field,
         id: attribute.name,
-        labelText: `${t(attribute.label)} (${t('optional', 'optional')})`,
+        labelText: label,
+        required: attribute?.required,
       }}
       handleInputChange={handleInputChange}
     />