feat(field-report): add consent checkbox above situational overview

Author: AdityaKhatri

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),
+            });
         },
     });