Early Action Protocols

app/package.json

@@ -51,6 +51,8 @@
         "@togglecorp/toggle-request": "^1.0.0-beta.3",
         "@turf/bbox": "^6.5.0",
         "@turf/buffer": "^6.5.0",
+        "@types/diff-match-patch": "^1.0.36",
+        "diff-match-patch": "^1.0.5",
         "exceljs": "^4.4.0",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",

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/ExplanatoryNote/index.tsx

@@ -0,0 +1,34 @@
+import { InformationLineIcon } from '@ifrc-go/icons';
+
+import InfoModal from '#components/domain/InfoModal';
+
+import styles from './styles.module.css';
+
+interface Props {
+    content: React.ReactNode;
+    heading: string;
+    ariaLabel: string;
+    title: string;
+}
+
+function ExplanatoryNote(props: Props) {
+    const {
+        content,
+        heading,
+        ariaLabel,
+        title,
+    } = props;
+
+    return (
+        <InfoModal
+            name={undefined}
+            heading={heading}
+            modalContent={content}
+            icon={<InformationLineIcon className={styles.icon} />}
+            ariaLabel={ariaLabel}
+            title={title}
+        />
+    );
+}
+
+export default ExplanatoryNote;

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

@@ -0,0 +1,4 @@
+.icon {
+    /* FIXME: use variables */
+    font-size: 1rem;
+}

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;