feat(status-update): add reason in local unit view and update errors

Author: shreeyash07

app/src/utils/localUnits.ts

@@ -23,8 +23,6 @@ export function getFormFields(value: LocalUnitResponse | PartialLocalUnits) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         modified_by_details,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        is_locked,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         status,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         version_id,

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

@@ -89,13 +89,15 @@ function LocalUnitBulkUploadModal(props: Props) {
         || isLocalUnitRegionValidatorByType(countryResponse?.region, localUnitType);
 
     const { response: localUnitsOptions } = useRequest({ url: '/api/v2/local-units-options/' });
+
     const { response: bulkUploadHealthTemplate } = useRequest({
         url: '/api/v2/bulk-upload-local-unit/get-bulk-upload-template/',
-        pathVariables: { bulk_upload_template: 'health_care' },
+        query: { bulk_upload_template: 'health_care' },
     });
+
     const { response: bulkUploadDefaultTemplate } = useRequest({
         url: '/api/v2/bulk-upload-local-unit/get-bulk-upload-template/',
-        pathVariables: { bulk_upload_template: 'local_unit' },
+        query: { bulk_upload_template: 'local_unit' },
     });
 
     const {
@@ -213,6 +215,10 @@ function LocalUnitBulkUploadModal(props: Props) {
                     error={permissionError}
                 />
             )}
+            <NonFieldError
+                className={styles.nonFieldError}
+                error={importSummaryResponse?.error_message}
+            />
             {isNotDefined(importSummaryResponse) && (
                 <Container
                     className={styles.uploadSummary}

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

@@ -68,14 +68,14 @@
         "localUnitViewLocalUnitDeleteButtonLabel": "Delete",
         "localUnitViewDoneButtonLabel": "Done",
         "localUnitViewRevertButtonLabel": "Revert",
-        "localUnitViewReasonLabel": "Reason",
         "localUnitViewRevertChangesModalHeading": "Revert the Changes",
         "localUnitViewRevertChangesContentQuestion": "Are you sure you want to have these changes revert in this project?",
         "localUnitViewConfirmChangesModalHeading": "Confirm the Changes",
         "localUnitViewConfirmChangesContentQuestion": "Are you sure you want to have these changes in this local unit?",
         "localUnitViewNewLocalUnitDescription": "New local unit",
         "localUnitViewLatitude": "Latitude",
         "localUnitViewLongitude": "Longitude",
+        "localUnitViewUpdateReason": "Edit reason",
         "localUnitViewNoChanges": "No changes found"
     }
 }

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

@@ -33,6 +33,7 @@ import {
 } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 type VisibilityOptions = NonNullable<GoApiResponse<'/api/v2/global-enums/'>['api_visibility_choices']>[number]
 type LocalUnitResponse = NonNullable<GoApiResponse<'/api/v2/local-units/{id}/'>>;
@@ -104,6 +105,21 @@ function LocalUnitView(props: Props) {
             emptyMessage={strings.localUnitViewNoChanges}
             contentViewType="grid"
             numPreferredGridContentColumns={3}
+            footerContentClassName={styles.localUnitViewFooter}
+            footerContent={(
+                <DiffWrapper
+                    hideOnPristine
+                    diffViewEnabled
+                    value={newValue?.update_reason_overview}
+                    previousValue={oldValue?.update_reason_overview}
+                >
+                    <TextOutput
+                        strongValue
+                        value={newValue?.update_reason_overview}
+                        label={strings.localUnitViewUpdateReason}
+                    />
+                </DiffWrapper>
+            )}
         >
             <SelectDiffWrapper
                 showOnlyDiff

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

@@ -0,0 +1,5 @@
+.local-unit-view-footer {
+    border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+    padding-top: var(--go-ui-spacing-md);
+    font-style: italic;
+}

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

@@ -402,6 +402,7 @@ function LocalUnitsForm(props: Props) {
 
     const showChanges = !isNewLocalUnit
         && isLocked
+        && showValueChanges
         && !isExternallyManaged;
 
     const showViewChanges = !isNewLocalUnit
@@ -550,7 +551,7 @@ function LocalUnitsForm(props: Props) {
                                 onChange={setFieldValue}
                                 keySelector={numericIdSelector}
                                 labelSelector={stringNameSelector}
-                                readOnly={readOnly}
+                                readOnly={readOnlyFromProps || isLocked}
                                 error={error?.type}
                                 nonClearable
                             />
@@ -1842,7 +1843,6 @@ function LocalUnitsForm(props: Props) {
                         value={updateReason}
                         onChange={setUpdateReason}
                     />
-
                 </LocalUnitViewModal>
             )}
             {showValidateLocalUnitModal

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

@@ -71,6 +71,7 @@ import {
 import type { FilterValue } from '../Filters';
 import LocalUnitsFormModal from '../LocalUnitsFormModal';
 import { TYPE_HEALTH_CARE } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
+import LocalUnitStatus from '../LocalUnitStatus';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -467,6 +468,7 @@ function LocalUnitsMap(props: Props) {
                             popupClassName={styles.mapPopup}
                             coordinates={clickedPointProperties.center}
                             onCloseButtonClick={handlePointClose}
+                            headingContainerClassName={styles.headingDescription}
                             heading={(
                                 <Button
                                     name=""
@@ -477,6 +479,12 @@ function LocalUnitsMap(props: Props) {
                                     {localUnitName}
                                 </Button>
                             )}
+                            headingDescription={(
+                                <LocalUnitStatus
+                                    value={localUnitDetail?.status}
+                                    valueDisplay={localUnitDetail?.status_details}
+                                />
+                            )}
                             contentViewType="vertical"
                             pending={localUnitDetailPending}
                             errored={isDefined(localUnitDetailError)}

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

@@ -38,6 +38,10 @@
     }
 }
 
+.heading-description {
+    flex-direction: column;
+}
+
 .map-popup {
     height: 16rem;
 }

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

@@ -10,6 +10,7 @@ import {
 import { isDefined } from '@togglecorp/fujs';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
+import { environment } from '#config';
 import useAuth from '#hooks/domain/useAuth';
 import useCountry from '#hooks/domain/useCountry';
 import usePermissions from '#hooks/domain/usePermissions';
@@ -157,7 +158,7 @@ function LocalUnitsTableActions(props: Props) {
         <>
             <TableActions
                 persistent
-                extraActions={(
+                extraActions={environment !== 'production' && (
                     <>
                         <DropdownMenuItem
                             type="button"
@@ -188,7 +189,7 @@ function LocalUnitsTableActions(props: Props) {
                     </>
                 )}
             >
-                {hasValidatePermission && (
+                {hasValidatePermission && (environment !== 'production') && (
                     <LocalUnitValidateButton
                         onClick={handleValidateLocalUnitClick}
                         status={status}

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

@@ -34,6 +34,7 @@ import {
 } from '@togglecorp/fujs';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
+import { environment } from '#config';
 import useAuth from '#hooks/domain/useAuth';
 import usePermissions from '#hooks/domain/usePermissions';
 import useFilterState from '#hooks/useFilterState';
@@ -249,7 +250,7 @@ function NationalSocietyLocalUnits(props: Props) {
                         filtered={filtered}
                     />
                 )}
-                actions={isAuthenticated && (
+                actions={isAuthenticated && (environment !== 'production') && (
                     <>
                         <Button
                             name={undefined}