Show latest form fields changes for local unit validations

app/src/components/domain/BaseMapPointInput/index.tsx

@@ -56,6 +56,10 @@ interface Props<NAME> extends BaseMapProps {
     readOnly?: boolean;
     required?: boolean;
     error?: ObjectError<Value>;
+    baseMapFormFieldsChanges: {
+        lat: boolean | undefined;
+        lng: boolean | undefined;
+    } | undefined;
 }
 
 function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
@@ -74,6 +78,7 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
         country,
         required,
         error,
+        baseMapFormFieldsChanges,
         ...otherProps
     } = props;
 
@@ -183,6 +188,10 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
         <div className={_cs(styles.baseMapPointInput, className)}>
             <div className={styles.locationInputs}>
                 <NumberInput
+                    inputSectionClassName={_cs(
+                        baseMapFormFieldsChanges?.lat
+                            && styles.changes,
+                    )}
                     className={styles.input}
                     name="lat"
                     label={strings.latitude}
@@ -193,6 +202,10 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
                     required={required}
                 />
                 <NumberInput
+                    inputSectionClassName={_cs(
+                        baseMapFormFieldsChanges?.lng
+                            && styles.changes,
+                    )}
                     className={styles.input}
                     name="lng"
                     label={strings.longitude}

app/src/components/domain/BaseMapPointInput/styles.module.css

@@ -3,6 +3,10 @@
     flex-direction: column;
     gap: var(--go-ui-spacing-md);
 
+    .changes {
+        background-color: var(--go-ui-color-semantic-yellow) !important;
+    }
+
     .location-inputs {
         display: flex;
         gap: var(--go-ui-spacing-sm);

app/src/utils/common.ts

@@ -1,5 +1,9 @@
 import { DEFAULT_INVALID_TEXT } from '@ifrc-go/ui/utils';
-import { isTruthyString } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isNotDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
 
 import type { GoApiResponse } from '#utils/restRequest';
 
@@ -54,11 +58,20 @@ export function getFirstTruthyString(
 }
 
 // TODO: write tests for the function
-export function doArraysContainSameElements(newArray: unknown[], oldArray: unknown[]): boolean {
-    if (newArray.length !== oldArray.length) {
-        return false;
+export function doArraysContainSameElements(
+    newArray: unknown[] | undefined,
+    oldArray: unknown[] | undefined,
+): boolean {
+    if (isNotDefined(newArray) && isNotDefined(oldArray)) {
+        return true;
     }
-    return newArray.every((id) => oldArray.includes(id));
+    if (isDefined(newArray) && isDefined(oldArray)) {
+        if (newArray.length !== oldArray.length) {
+            return false;
+        }
+        return newArray.every((id) => oldArray.includes(id));
+    }
+    return false;
 }
 
 // TODO: write tests for the function

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json

@@ -83,7 +83,8 @@
         "revertChangesModalHeading": "Revert the Changes",
         "revertChangesContentQuestion": "Are you sure you want to have these changes revert in this project?",
         "confirmChangesModalHeading": "Confirm the Changes",
-        "confirmChangesContentQuestion": "Are you sure you want to have these changes in this project?",
+        "confirmChangesContentQuestion": "Are you sure you want to have these changes in this local unit?",
+        "newLocalUnitDescription": "New local unit",
         "latitude": "Latitude",
         "longitude": "Longitude"
     }