feat: preview generated title for field report

Author: samshara

app/env.ts

@@ -16,7 +16,7 @@ export default defineConfig({
         return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
     },
     APP_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
-    APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true }),
+    APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
     APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
     APP_TINY_API_KEY: Schema.string(),
     APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),

app/src/views/FieldReportForm/ContextFields/TitlePreview/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "fieldReportForm",
+    "strings": {
+        "titlePreview": "Title Preview",
+        "failedToGenerateTitle": "Failed To Generate the Field Report Title"
+    }
+}
+

app/src/views/FieldReportForm/ContextFields/TitlePreview/index.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { TextOutput } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import useAlert from '#hooks/useAlert';
+import { useRequest } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+
+interface Props {
+    country: number;
+    disasterType: number;
+    event?: number;
+    isCovidReport?: boolean;
+    startDate?: string;
+    title: string;
+}
+
+function TitlePreview(props: Props) {
+    const {
+        country,
+        disasterType,
+        event,
+        isCovidReport,
+        startDate,
+        title,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const alert = useAlert();
+
+    const variables = useMemo(() => ({
+        countries: [country],
+        is_covid_report: isCovidReport,
+        start_date: startDate,
+        dtype: disasterType,
+        event,
+        title,
+    }), [country, isCovidReport, startDate, disasterType, event, title]);
+
+    const {
+        response: genereateTitleResponse,
+    } = useRequest({
+        url: '/api/v2/field-report/generate-title/',
+        method: 'POST',
+        body: variables,
+        preserveResponse: true,
+        onFailure: () => {
+            alert.show(
+                strings.failedToGenerateTitle,
+                {
+                    variant: 'danger',
+                },
+            );
+        },
+    });
+
+    return (
+        <TextOutput
+            value={genereateTitleResponse?.title}
+            label={strings.titlePreview}
+            strongLabel
+        />
+    );
+}
+
+export default TitlePreview;

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

@@ -33,7 +33,8 @@
         "fieldReportFormContextTitle": "Context",
         "fieldReportFormSearchTitle": "Search for existing emergency",
         "fieldReportFormSearchDescription": "Type the name of the country you want to report on in the box above to begin the search.",
-        "originalTitleSecondaryLabel": "Original Title"
+        "originalTitle": "Original Title",
+        "generatedTitlePreview": "Title Preview"
     }
 }
 

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

@@ -2,16 +2,19 @@ import {
     useCallback,
     useMemo,
 } from 'react';
+import { useParams } from 'react-router-dom';
 import {
     BooleanInput,
     Container,
     DateInput,
     InputSection,
     RadioInput,
     TextInput,
+    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
+    isDefined,
     isNotDefined,
     isTruthyString,
 } from '@togglecorp/fujs';
@@ -36,6 +39,7 @@ import {
 } from '#utils/constants';
 
 import { type PartialFormValue } from '../common';
+import TitlePreview from './TitlePreview';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -70,6 +74,7 @@ function ContextFields(props: Props) {
     } = props;
 
     const strings = useTranslation(i18n);
+    const { fieldReportId } = useParams<{ fieldReportId: string }>();
 
     const {
         api_field_report_status,
@@ -298,16 +303,27 @@ function ContextFields(props: Props) {
                             disabled={disabled}
                             withAsterisk
                         />
-                        {isTruthyString(value.summary) && (
-                            <TextInput
-                                label={strings.originalTitleSecondaryLabel}
-                                name="summary"
-                                value={value.summary}
-                                onChange={onValueChange}
-                                error={error?.summary}
-                                disabled
-                            />
-                        )}
+                        {isDefined(value.country)
+                            && isDefined(value.dtype)
+                            && isDefined(value.title)
+                            && isTruthyString(value.title.trim())
+                            ? (
+                                <TitlePreview
+                                    country={value.country}
+                                    disasterType={value.dtype}
+                                    event={value.event}
+                                    isCovidReport={value.is_covid_report}
+                                    startDate={value.start_date}
+                                    title={value.title}
+                                />
+                            ) : (
+                                <TextOutput
+                                    value={value.summary}
+                                    label={isDefined(fieldReportId)
+                                        ? strings.originalTitle : strings.generatedTitlePreview}
+                                    strongLabel
+                                />
+                            )}
                     </>
                 )}
             </InputSection>

app/src/views/FieldReportForm/common.ts

@@ -275,7 +275,7 @@ export const reportSchema: FormSchema = {
             country: { required: true },
             districts: { defaultValue: [] },
             dtype: { required: true },
-            title: { required: true },
+            title: { required: true, requiredValidation: requiredStringCondition },
             start_date: { required: true },
             request_assistance: {},
             ns_request_assistance: {},