feat(status-update): update status in localunit table and form and modals

Author: shreeyash07

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/index.tsx

@@ -181,7 +181,7 @@ function LocalUnitBulkUploadModal(props: Props) {
             onClose={onClose}
             headerDescriptionContainerClassName={styles.headerDescriptionContent}
             childrenContainerClassName={styles.bulkUploadContent}
-            headerDescription={importSummaryResponse?.status === BULK_UPLOAD_PENDING
+            headerDescription={!pending
                 ? strings.modalDescription
                 : strings.modalImportPendingDescription}
             contentViewType="vertical"

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/index.tsx

@@ -2,11 +2,13 @@ import {
     CheckboxCircleLineIcon,
     CloseCircleLineIcon,
     EditCircleLineIcon,
+    LockLineIcon,
 } from '@ifrc-go/icons';
 import { Tooltip } from '@ifrc-go/ui';
 import { _cs } from '@togglecorp/fujs';
 
 import {
+    EXTERNALLY_MANAGED,
     PENDING_VALIDATION,
     UNVALIDATED,
     VALIDATED,
@@ -37,6 +39,7 @@ function LocalUnitStatus(props: LocalUnitStatusProps) {
                 value === VALIDATED && styles.validated,
                 value === UNVALIDATED && styles.unvalidated,
                 value === PENDING_VALIDATION && styles.pendingValidation,
+                value === EXTERNALLY_MANAGED && styles.externallyManaged,
                 className,
             )}
         >
@@ -55,6 +58,11 @@ function LocalUnitStatus(props: LocalUnitStatusProps) {
                     className={styles.icon}
                 />
             )}
+            {value === EXTERNALLY_MANAGED && (
+                <LockLineIcon
+                    className={styles.icon}
+                />
+            )}
             {!compact && valueDisplay}
             {compact && valueDisplay && (
                 <Tooltip

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/styles.module.css

@@ -17,4 +17,8 @@
     &.pending-validation {
         color: var(--go-ui-color-blue);
     }
+
+    &.externally-managed {
+        color: var(--go-ui-color-gray-60);
+    }
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx

@@ -65,7 +65,9 @@ import {
 import { transformObjectError } from '#utils/restRequest/error';
 
 import {
+    EXTERNALLY_MANAGED,
     type ManageResponse,
+    UNVALIDATED,
     VALIDATED,
 } from '../../common';
 import FormGrid from '../../FormGrid';
@@ -219,8 +221,20 @@ function LocalUnitsForm(props: Props) {
         pathVariables: isDefined(localUnitId) ? { id: localUnitId } : undefined,
     });
 
+    const isLocked = (
+        isDefined(localUnitDetailsResponse?.status)
+        && !(localUnitDetailsResponse.status === VALIDATED)
+    );
+
+    const isNewLocalUnit = localUnitDetailsResponse?.status === UNVALIDATED;
+
+    const isExternallyManaged = (localUnitDetailsResponse?.status === EXTERNALLY_MANAGED
+        || (isDefined(value.type)
+            && isDefined(manageResponse)
+            && !!manageResponse[value.type]?.enabled));
+
     const readOnly = readOnlyFromProps
-        || localUnitDetailsResponse?.is_locked;
+        || isLocked || isExternallyManaged;
 
     const {
         response: localUnitsOptions,
@@ -322,22 +336,16 @@ function LocalUnitsForm(props: Props) {
         },
     });
 
-    const isExternallyManaged = useMemo(() => {
-        if (isDefined(value.type) && isDefined(manageResponse)) {
-            return manageResponse[value.type]?.enabled;
-        }
-        return false;
-    }, [value.type, manageResponse]);
-
     const hasValidatePermission = isAuthenticated
         && !isExternallyManaged
         && (isSuperUser
             || isLocalUnitGlobalValidatorByType(value.type)
             || isLocalUnitCountryValidatorByType(countryResponse?.id, value.type)
             || isLocalUnitRegionValidatorByType(countryResponse?.region, value.type));
 
-    const hasUpdatePermission = isCountryAdmin(countryResponse?.id)
-        || hasValidatePermission;
+    const hasUpdatePermission = (isCountryAdmin(countryResponse?.id)
+        || hasValidatePermission)
+        && !isExternallyManaged;
 
     const handleFormSubmit = useCallback(
         () => {
@@ -392,13 +400,14 @@ function LocalUnitsForm(props: Props) {
         localUnitPreviousResponse?.previous_data_details as unknown as LocalUnitResponse | undefined
     );
 
-    const showChanges = !localUnitDetailsResponse?.is_new_local_unit
-        && !!localUnitDetailsResponse?.is_locked
-        && isNotDefined(localUnitDetailsResponse.bulk_upload);
+    const showChanges = !isNewLocalUnit
+        && isLocked
+        && !isExternallyManaged;
 
-    const showViewChanges = !localUnitDetailsResponse?.is_new_local_unit
+    const showViewChanges = !isNewLocalUnit
         && isDefined(localUnitId)
-        && !(localUnitDetailsResponse?.status === VALIDATED);
+        && isLocked
+        && !isExternallyManaged;
 
     const permissionError = useMemo(() => {
         if (isExternallyManaged) {
@@ -467,7 +476,7 @@ function LocalUnitsForm(props: Props) {
                                 />
                             )}
                             {readOnlyFromProps
-                                && !localUnitDetailsResponse.is_locked
+                                && !isLocked
                                 && hasUpdatePermission && (
                                 <Button
                                     name={undefined}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx

@@ -1,6 +1,5 @@
 import {
     useCallback,
-    useMemo,
     useState,
 } from 'react';
 import { TableActions } from '@ifrc-go/ui';
@@ -15,7 +14,11 @@ import useAuth from '#hooks/domain/useAuth';
 import useCountry from '#hooks/domain/useCountry';
 import usePermissions from '#hooks/domain/usePermissions';
 
-import { type ManageResponse } from '../../common';
+import {
+    EXTERNALLY_MANAGED,
+    type ManageResponse,
+    VALIDATED,
+} from '../../common';
 import LocalUnitDeleteModal from '../../LocalUnitDeleteModal';
 import LocalUnitsFormModal from '../../LocalUnitsFormModal';
 import LocalUnitValidateButton from '../../LocalUnitValidateButton';
@@ -33,7 +36,6 @@ export interface Props {
     onDeleteActionSuccess: () => void;
     onValidationActionSuccess: () => void;
     manageResponse: ManageResponse;
-    isLocked: boolean;
 }
 
 function LocalUnitsTableActions(props: Props) {
@@ -46,7 +48,6 @@ function LocalUnitsTableActions(props: Props) {
         isBulkUploadLocalUnit,
         onValidationActionSuccess,
         onDeleteActionSuccess,
-        isLocked,
         manageResponse,
     } = props;
 
@@ -64,12 +65,15 @@ function LocalUnitsTableActions(props: Props) {
         isGuestUser,
     } = usePermissions();
 
-    const isExternallyManaged = useMemo(() => {
-        if (isDefined(localUnitType) && isDefined(manageResponse)) {
-            return manageResponse[localUnitType]?.enabled;
-        }
-        return false;
-    }, [localUnitType, manageResponse]);
+    const isLocked = (
+        isDefined(status)
+        && !(status === VALIDATED)
+    );
+
+    const isExternallyManaged = (status === EXTERNALLY_MANAGED
+        || (isDefined(localUnitType)
+            && isDefined(manageResponse)
+            && !!manageResponse[localUnitType]?.enabled));
 
     const hasPermission = isAuthenticated
         && !isExternallyManaged

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/i18n.json

@@ -5,7 +5,8 @@
         "localUnitsTableAddress": "Address",
         "localUnitsTableType": "Type",
         "localUnitsTableFocal": "Focal Person",
+        "localUnitsTableStatus": "Status",
         "localUnitsTablePhoneNumber": "Phone Number",
         "localUnitsTableEmail": "Email"
     }
-}
+}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx

@@ -110,16 +110,6 @@ function LocalUnitsTable(props: Props) {
     const columns = useMemo(() => {
         if (hasAddEditLocalUnitPermission) {
             return [
-                createElementColumn<LocalUnitsTableListItem, number, LocalUnitStatusProps>(
-                    'status',
-                    '',
-                    LocalUnitStatus,
-                    (_, item) => ({
-                        value: item.status,
-                        valueDisplay: item.status_details,
-                        compact: true,
-                    }),
-                ),
                 createStringColumn<LocalUnitsTableListItem, number>(
                     'branch_name',
                     strings.localUnitsTableName,
@@ -157,6 +147,16 @@ function LocalUnitsTable(props: Props) {
                     strings.localUnitsTableEmail,
                     (item) => item.email,
                 ),
+                createElementColumn<LocalUnitsTableListItem, number, LocalUnitStatusProps>(
+                    'status',
+                    strings.localUnitsTableStatus,
+                    LocalUnitStatus,
+                    (_, item) => ({
+                        value: item.status,
+                        valueDisplay: item.status_details,
+                        compact: true,
+                    }),
+                ),
                 createElementColumn<LocalUnitsTableListItem, number, LocalUnitsTableActionsProps>(
                     'actions',
                     '',
@@ -165,7 +165,6 @@ function LocalUnitsTable(props: Props) {
                     (_, item) => ({
                         countryId: item.country,
                         localUnitId: item.id,
-                        isLocked: item.is_locked,
                         status: item.status,
                         localUnitType: item.type,
                         isBulkUploadLocalUnit: isDefined(item.bulk_upload),
@@ -206,7 +205,6 @@ function LocalUnitsTable(props: Props) {
                 (_, item) => ({
                     countryId: item.country,
                     localUnitId: item.id,
-                    isLocked: item.is_locked,
                     status: item.status,
                     isBulkUploadLocalUnit: isDefined(item.bulk_upload),
                     manageResponse,
@@ -230,6 +228,7 @@ function LocalUnitsTable(props: Props) {
         strings.localUnitsTableFocal,
         strings.localUnitsTablePhoneNumber,
         strings.localUnitsTableEmail,
+        strings.localUnitsTableStatus,
         refetchLocalUnits,
     ]);
 

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/common.ts

@@ -13,6 +13,7 @@ export type ManageResponse = Record<number, {
 export const VALIDATED = 1 satisfies ValidationStatusKey;
 export const UNVALIDATED = 2 satisfies ValidationStatusKey;
 export const PENDING_VALIDATION = 3 satisfies ValidationStatusKey;
+export const EXTERNALLY_MANAGED = 4 satisfies ValidationStatusKey;
 
 export const AUTHENTICATED = 'authenticated' satisfies RequestType;
 export const PUBLIC = 'public' satisfies RequestType;