feat(eap): Add Early Action Protocal form and views

- Add EAP Application tab in account page
- Add EAP Registration Form
- Add simplified EAP form
- Add export for simplified EAP
- Add full EAP form
- Add full EAP export
- Add full EAP summary export
- Add Admin2 input component
- Add obsolete resolution modal for both EAP forms
- Add save and submit functionality in both EAP forms
- Add share functionality in both EAP forms and table
- Make minor enhancements in various UI components
    - Add form variant in Heading
    - Add option to show border in container
    - Restructure radio icon size
    - Improve info popup icon size
    - Add TextBadge component for text limit counter
    - Update styling of TabLayout
        - Update 'step' variant TabLayout to match the designs
        - Add 'form' variant to Container
        - Fix styling of info popup
        - Update styling of InputLabel

Author: barshathakuri

app/package.json

@@ -52,6 +52,7 @@
         "@turf/bbox": "^6.5.0",
         "@turf/buffer": "^6.5.0",
         "exceljs": "^4.4.0",
+        "diff": "^8.0.2",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",
         "mapbox-gl": "^1.13.0",

app/src/App/routes/index.tsx

@@ -319,6 +319,50 @@ const emergencyAdditionalInfo = customWrapRoute({
     },
 });
 
+type DefaultDrefDetailChild = 'dref-detail';
+const drefProcessLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'dref-process',
+    forwardPath: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefProcess'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'DREF Process',
+        visibility: 'anything',
+    },
+});
+
+const drefDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefDetail'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Response and Imminent DREF',
+        visibility: 'anything',
+    },
+});
+
+const eapDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'eap-detail',
+    component: {
+        render: () => import('#views/EarlyActionProtocols'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Early Action Protocols',
+        visibility: 'anything',
+    },
+});
+
 type DefaultPreparednessChild = 'global-summary';
 const preparednessLayout = customWrapRoute({
     parent: rootLayout,
@@ -715,6 +759,49 @@ const accountMyFormsThreeW = customWrapRoute({
     },
 });
 
+const accountMyFormsEap = customWrapRoute({
+    parent: accountMyFormsLayout,
+    path: 'eap-applications',
+    component: {
+        render: () => import('#views/AccountMyFormsEap'),
+        props: {},
+    },
+    context: {
+        title: 'Account - EAP Applications',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const fullEapForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/full',
+    component: {
+        render: () => import('#views/EapFullForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Full Forms',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const simplifiedEapForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/simplified',
+    component: {
+        render: () => import('#views/EapSimplifiedForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Form',
+        visibility: 'is-authenticated',
+    },
+});
+
 const accountNotifications = customWrapRoute({
     parent: accountLayout,
     path: 'notifications',
@@ -1094,6 +1181,93 @@ const fieldReportDetails = customWrapRoute({
     },
 });
 
+type DefaultEapRegistrationChild = 'new';
+const eapRegistrationLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-registration',
+    forwardPath: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Process',
+        visibility: 'is-authenticated',
+    },
+});
+
+const newEapDevelopmentRegistration = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'New EAP Development Registration',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapDevelopmentRegistrationForm = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: ':eapId/',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'View EAP',
+        visibility: 'is-authenticated',
+    },
+});
+
+const eapFullExport = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/export/full',
+    component: {
+        render: () => import('#views/EapFullExport'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Export',
+        visibility: 'is-authenticated',
+    },
+});
+
+const eapSimplifiedExport = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/export/simplified',
+    component: {
+        render: () => import('#views/EapSimplifiedExport'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Export',
+        visibility: 'is-authenticated',
+    },
+});
+
+const eapSummaryExport = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/export/summary',
+    component: {
+        render: () => import('#views/EapSummaryExport'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Full Summary Export',
+        visibility: 'is-authenticated',
+    },
+});
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1317,6 +1491,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1353,6 +1528,9 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
+    newEapDevelopmentRegistration,
+    fullEapForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
@@ -1363,6 +1541,14 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
+    drefDetail,
+    eapDetail,
+    drefProcessLayout,
+    eapRegistrationLayout,
+    eapDevelopmentRegistrationForm,
+    eapFullExport,
+    eapSimplifiedExport,
+    eapSummaryExport,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

app/src/components/GoMapContainer/index.tsx

@@ -50,6 +50,7 @@ interface Props {
     presentationModeAdditionalAfterContent?: React.ReactNode;
     onPresentationModeChange?: (newPresentationMode: boolean) => void;
     children?: React.ReactNode;
+    withFullHeight?: boolean;
 }
 
 function GoMapContainer(props: Props) {
@@ -63,6 +64,7 @@ function GoMapContainer(props: Props) {
         presentationModeAdditionalAfterContent,
         onPresentationModeChange,
         children,
+        withFullHeight,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -161,6 +163,7 @@ function GoMapContainer(props: Props) {
                 styles.goMapContainer,
                 printMode && styles.printMode,
                 presentationMode && styles.presentationMode,
+                withFullHeight && styles.withFullHeight,
                 className,
             )}
             headingLevel={2}
@@ -236,12 +239,15 @@ function GoMapContainer(props: Props) {
             withPadding={presentationMode}
         >
             <ListView
+                className={styles.viewContainer}
                 layout="block"
                 spacing={presentationMode ? 'lg' : 'none'}
             >
                 {presentationMode && presentationModeAdditionalBeforeContent}
                 <div className={styles.relativeWrapper}>
-                    <MapContainer className={styles.map} />
+                    <MapContainer
+                        className={styles.map}
+                    />
                     <InfoPopup
                         infoLabel={strings.infoLabel}
                         className={styles.mapDisclaimer}

app/src/components/GoMapContainer/styles.module.css

@@ -66,6 +66,23 @@
         }
     }
 
+    &.with-full-height {
+        flex-grow: 1;
+        height: 100%;
+
+        .view-container {
+            height: 100%;
+
+            .relative-wrapper {
+                height: 100%;
+
+                .map {
+                    height: 100%;
+                }
+            }
+        }
+    }
+
     &.presentation-mode {
         background-color: var(--go-ui-color-background);
         width: 100vw;

app/src/components/Navbar/i18n.json

@@ -40,6 +40,7 @@
         "userMenuDrefProcessDescription":"Disaster Response Emergency Fund (DREF) is the quickest way of getting funding directly to local humanitarian actors. Use one of the links below to submit a DREF Application or an update.",
         "userMenuCreateDrefApplication":"Create DREF Application",
         "myDrefApplications": "My DREF Applications",
+        "earlyActionProtocols": "Early Action Protocols (EAP)",
         "userMenuSurge":"The section displays the summary of deployments within current and ongoing emergencies. Login to see available details",
         "userMenuSurgeGlobalOverview":"Surge Global Overview",
         "userMenuOperationalToolbox":"Operational Toolbox",

app/src/components/Navbar/index.tsx

@@ -353,6 +353,14 @@ function Navbar(props: Props) {
                                 >
                                     {strings.myDrefApplications}
                                 </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    type="link"
+                                    to="accountMyFormsEap"
+                                    styleVariant="action"
+                                    withoutFullWidth
+                                >
+                                    {strings.earlyActionProtocols}
+                                </DropdownMenuItem>
                             </NavDropdownTabDetails>
                             <NavDropdownTabDetails
                                 name="surge"

app/src/components/NonFieldError/index.tsx

@@ -49,10 +49,11 @@ function NonFieldError<T>(props: Props<T>) {
     }
 
     return (
-        <div className={_cs(
-            styles.nonFieldError,
-            className,
-        )}
+        <div
+            className={_cs(
+                styles.nonFieldError,
+                className,
+            )}
         >
             <AlertLineIcon className={styles.icon} />
             <div>

app/src/components/NonFieldError/styles.module.css

@@ -5,7 +5,6 @@
     animation-delay: var(--go-ui-duration-animation-slow);
     gap: var(--go-ui-spacing-sm);
     color: var(--go-ui-color-red);
-    font-weight: var(--go-ui-font-weight-medium);
 
     .icon {
         flex-shrink: 0;

app/src/components/PerExportModal/index.tsx

@@ -14,11 +14,15 @@ import {
 
 import Link from '#components/Link';
 import { type components } from '#generated/types';
-import { useRequest } from '#utils/restRequest';
+import {
+    type GoApiBody,
+    useRequest,
+} from '#utils/restRequest';
 
 import i18n from './i18n.json';
 
 type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum'];
+type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>;
 
 const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum;
 const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum;
@@ -45,8 +49,11 @@ function PerExportModal(props: Props) {
             export_id: Number(perId),
             export_type: 'per' as const,
             per_country: Number(countryId),
-            is_pga: false,
-        }),
+            is_pga: undefined,
+            summary: undefined,
+            version: undefined,
+            diff: undefined,
+        } satisfies ExportBody),
         [perId, countryId],
     );