Merge pull request #1951 from IFRCGo/feature/add-crisis-category-history

feat(emergency): add last updated date for crisis categorization

Author: frozenhelium

.changeset/solid-clubs-care.md

@@ -0,0 +1,6 @@
+---
+"go-web-app": minor
+---
+
+- Added updated date for crisis categorization in emergency page.
+- Added consent checkbox over situational overview in field report form.

app/src/components/domain/HighlightedOperations/OperationCard/index.tsx

@@ -54,6 +54,7 @@ function OperationCard(props: Props) {
             id,
             name,
             ifrc_severity_level,
+            ifrc_severity_level_update_date,
             ifrc_severity_level_display,
             updated_at,
             appeals,
@@ -139,15 +140,26 @@ function OperationCard(props: Props) {
                     <Tooltip
                         description={(
                             <>
-                                <TextOutput
-                                    label={(
-                                        <SeverityIndicator
-                                            level={ifrc_severity_level}
+                                <div className={styles.severityContainer}>
+                                    <TextOutput
+                                        label={(
+                                            <SeverityIndicator
+                                                level={ifrc_severity_level}
+                                            />
+                                        )}
+                                        value={ifrc_severity_level_display}
+                                        withoutLabelColon
+                                    />
+                                    {ifrc_severity_level_update_date && ','}
+                                    {ifrc_severity_level_update_date && (
+                                        <TextOutput
+                                            className={styles.date}
+                                            value={ifrc_severity_level_update_date}
+                                            valueType="date"
+                                            withoutLabelColon
                                         />
                                     )}
-                                    value={ifrc_severity_level_display}
-                                    withoutLabelColon
-                                />
+                                </div>
                                 <TextOutput
                                     label={<FocusLineIcon />}
                                     value={countriesInfoDisplay}

app/src/components/domain/HighlightedOperations/OperationCard/styles.module.css

@@ -40,3 +40,12 @@
         }
     }
 }
+
+.severity-container {
+    display: flex;
+
+    .date {
+        padding-left: var(--go-ui-spacing-xs);
+    }
+}
+

app/src/views/EmergencyDetails/i18n.json

@@ -14,6 +14,7 @@
         "situationalOverviewTitle": "Situational Overview",
         "linksTitle": "Links",
         "emergencyMapTitle": "Affected Provinces",
+        "severityLevelUpdateDateLabel": "Updated date",
         "exportMap": "Export",
         "contactsTitle": "Contacts",
         "sourceLabel": "Source {source}"

app/src/views/EmergencyDetails/index.tsx

@@ -3,6 +3,7 @@ import { useOutletContext } from 'react-router-dom';
 import {
     Container,
     HtmlOutput,
+    InfoPopup,
     KeyFigure,
     TextOutput,
 } from '@ifrc-go/ui';
@@ -193,6 +194,20 @@ export function Component() {
                                 <SeverityIndicator
                                     level={emergencyResponse.ifrc_severity_level}
                                 />
+                                {emergencyResponse.ifrc_severity_level_update_date && (
+                                    <InfoPopup
+                                        description={(
+                                            <TextOutput
+                                                label={strings.severityLevelUpdateDateLabel}
+                                                value={
+                                                    emergencyResponse
+                                                        .ifrc_severity_level_update_date
+                                                }
+                                                valueType="date"
+                                            />
+                                        )}
+                                    />
+                                )}
                             </>
                         )}
                         valueClassName={styles.disasterCategoryValue}

app/src/views/FieldReportForm/SituationFields/i18n.json

@@ -47,7 +47,9 @@
         "fieldsStep2SituationFieldsEVTMissingDescription": "Number of people missing.",
         "fieldsStep2SituationFieldsEVTMissingLabel": "Missing",
         "fieldsStep2SourceOfFiguresLabel": "Source (of figures)",
-        "fieldReportFormNumericDetails": "Numeric Details (People)"
+        "fieldReportFormNumericDetails": "Numeric Details (People)",
+        "fieldReportOverviewConsentLabel": "All content published on IFRC platforms must adhere to the {fundamentalPrinciples} and align with the relevant Movement language and communications guidelines. Where content does not meet these standards, the IFRC will collaborate with the respective National Society to revise it accordingly.",
+        "fieldReportFundamentalPrinciplesLabel": "Fundamental Principles"
     }
 }
 

app/src/views/FieldReportForm/SituationFields/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import {
+    Checkbox,
     Container,
     DateInput,
     InputSection,
@@ -8,12 +9,14 @@ import {
     TextArea,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { resolveToComponent } from '@ifrc-go/ui/utils';
 import {
     type EntriesAsList,
     type Error,
     getErrorObject,
 } from '@togglecorp/toggle-form';
 
+import Link from '#components/Link';
 import RichTextArea from '#components/RichTextArea';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import { type ReportType } from '#utils/constants';
@@ -53,6 +56,20 @@ function SituationFields(props: Props) {
 
     const sectionHeading = strings.fieldReportFormNumericDetails;
 
+    const overviewConsentLabel = resolveToComponent(
+        strings.fieldReportOverviewConsentLabel,
+        {
+            fundamentalPrinciples: (
+                <Link
+                    href="https://www.ifrc.org/who-we-are/international-red-cross-and-red-crescent-movement/fundamental-principles"
+                    external
+                >
+                    {strings.fieldReportFundamentalPrinciplesLabel}
+                </Link>
+            ),
+        },
+    );
+
     if (reportType === 'COVID') {
         return (
             <Container
@@ -500,12 +517,20 @@ function SituationFields(props: Props) {
                 title={strings.fieldsStep2DescriptionEVTLabel}
                 description={strings.fieldsStep2DescriptionEVTDescription}
             >
+                <Checkbox
+                    label={overviewConsentLabel}
+                    name="situationalOverviewConsented"
+                    value={value.situationalOverviewConsented}
+                    onChange={onValueChange}
+                    disabled={disabled}
+                    error={error?.situationalOverviewConsented}
+                />
                 <RichTextArea
                     name="description"
                     value={value.description}
                     onChange={onValueChange}
                     error={error?.description}
-                    disabled={disabled}
+                    disabled={disabled || !value.situationalOverviewConsented}
                     placeholder={strings.fieldsStep2DescriptionEVTPlaceholder}
                 />
             </InputSection>

app/src/views/FieldReportForm/common.ts

@@ -2,6 +2,8 @@ import { type DeepReplace } from '@ifrc-go/ui/utils';
 import {
     isDefined,
     isNotDefined,
+    isTruthyString,
+    type Maybe,
 } from '@togglecorp/fujs';
 import {
     addCondition,
@@ -31,6 +33,12 @@ import {
 } from '#utils/form';
 import { type GoApiResponse } from '#utils/restRequest';
 
+function isTrueValue(value: Maybe<boolean>) {
+    // FIXME: use translations
+    return (isNotDefined(value) || value === false)
+        ? 'This field must be consented to if situational overview is filled.'
+        : undefined;
+}
 // FORM
 
 type FieldReportResponse = GoApiResponse<'/api/v2/field-report/{id}/'>;
@@ -50,6 +58,8 @@ export type FormValue = Omit<
     // FIXME: Why do we need to change countries to country
     // Fix this in the server later
     country: number,
+    // NOTE: This is not sent to server, only used from frontend validation
+    situationalOverviewConsented: boolean,
 };
 
 export type PartialFormValue = PurgeNull<PartialForm<FormValue, 'uuid' | 'ctype' | 'organization'>>;
@@ -155,6 +165,7 @@ const fieldsInContext = [
 ] satisfies (keyof PartialFormValue)[];
 const fieldsInSituation = [
     'affected_pop_centres',
+    'situationalOverviewConsented',
     'description',
     'epi_cases',
     'epi_cases_since_last_fr',
@@ -314,6 +325,7 @@ export const reportSchema: FormSchema = {
         const situationFields = [
             'affected_pop_centres',
             'description',
+            'situationalOverviewConsented',
             'epi_cases',
             'epi_cases_since_last_fr',
             'epi_confirmed_cases',
@@ -354,13 +366,15 @@ export const reportSchema: FormSchema = {
         baseSchema = addCondition(
             baseSchema,
             value,
-            ['status', 'is_covid_report', 'dtype'],
+            ['status', 'is_covid_report', 'dtype', 'description'],
             situationFields,
             (val): SituationSchema => {
                 const reportType = getReportType(val?.status, val?.is_covid_report, val?.dtype);
+                const consentRequired = isTruthyString(val?.description);
 
                 const baseSchemaTwo: SituationSchema = {
                     description: {},
+                    situationalOverviewConsented: {},
                     other_sources: {},
 
                     affected_pop_centres: { forceValue: nullValue },
@@ -402,6 +416,11 @@ export const reportSchema: FormSchema = {
                 if (reportType === 'EW') {
                     return {
                         ...baseSchemaTwo,
+                        situationalOverviewConsented: {
+                            validations: [
+                                consentRequired ? isTrueValue : undefined,
+                            ].filter(isDefined),
+                        },
                         num_potentially_affected: { validations: [positiveIntegerCondition] },
                         gov_num_potentially_affected: { validations: [positiveIntegerCondition] },
                         other_num_potentially_affected: { validations: [positiveIntegerCondition] },
@@ -443,6 +462,11 @@ export const reportSchema: FormSchema = {
                 // SITUATION - EVT
                 return {
                     ...baseSchemaTwo,
+                    situationalOverviewConsented: {
+                        validations: [
+                            consentRequired ? isTrueValue : undefined,
+                        ].filter(isDefined),
+                    },
                     num_injured: { validations: [positiveIntegerCondition] },
                     gov_num_injured: { validations: [positiveIntegerCondition] },
                     other_num_injured: { validations: [positiveIntegerCondition] },

app/src/views/FieldReportForm/index.tsx

@@ -21,6 +21,7 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     isDefined,
     isNotDefined,
+    isTruthyString,
     listToGroupList,
 } from '@togglecorp/fujs';
 import {
@@ -210,7 +211,12 @@ export function Component() {
                     : [],
             );
             setDistrictOptions(response?.districts_details);
-            onValueSet(formValue);
+            // NOTE: We are setting situationalOverviewConsented here because its only-client
+            // value and if the field it filled it means that user consented to it
+            onValueSet({
+                ...formValue,
+                situationalOverviewConsented: isTruthyString(formValue.description),
+            });
         },
     });
 

translationMigrations/000043-1754048543774.json

@@ -0,0 +1,23 @@
+{
+    "parent": "000042-1754038716022.json",
+    "actions": [
+        {
+            "action": "add",
+            "key": "severityLevelUpdateDateLabel",
+            "namespace": "emergencyDetails",
+            "value": "Updated date"
+        },
+        {
+            "action": "add",
+            "key": "fieldReportFundamentalPrinciplesLabel",
+            "namespace": "fieldReportForm",
+            "value": "Fundamental Principles"
+        },
+        {
+            "action": "add",
+            "key": "fieldReportOverviewConsentLabel",
+            "namespace": "fieldReportForm",
+            "value": "All content published on IFRC platforms must adhere to the {fundamentalPrinciples} and align with the relevant Movement language and communications guidelines. Where content does not meet these standards, the IFRC will collaborate with the respective National Society to revise it accordingly."
+        }
+    ]
+}