project: Early Action Protocols

app/src/App/routes/index.tsx

@@ -701,6 +701,19 @@ const accountMyFormsDref = customWrapRoute({
     },
 });
 
+const earlyActionProtocols = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap',
+    component: {
+        render: () => import('#views/EarlyActionProtocols'),
+        props: {},
+    },
+    context: {
+        title: 'Early Action Protocols',
+        visibility: 'anything',
+    },
+});
+
 const accountMyFormsThreeW = customWrapRoute({
     parent: accountMyFormsLayout,
     path: 'three-w',
@@ -715,6 +728,50 @@ const accountMyFormsThreeW = customWrapRoute({
     },
 });
 
+const accountMyFormsEap = customWrapRoute({
+    parent: accountMyFormsLayout,
+    path: 'eap-applications',
+    component: {
+        render: () => import('#views/EapApplications'),
+        props: {},
+    },
+    context: {
+        title: 'Account - EAP Applications',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapFullForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-full-form',
+    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: 'simplified-eap-form',
+    component: {
+        render: () => import('#views/SimplifiedEapForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Forms',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
 const accountNotifications = customWrapRoute({
     parent: accountLayout,
     path: 'notifications',
@@ -1145,6 +1202,21 @@ const newPerOverviewForm = customWrapRoute({
     },
 });
 
+const eapDevelopmentRegistration = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-registration/new',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Development Registration',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
 const perOverviewForm = customWrapRoute({
     parent: perProcessLayout,
     path: ':perId/overview',
@@ -1316,6 +1388,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1352,6 +1425,9 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
+    eapDevelopmentRegistration,
+    eapFullForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
@@ -1362,6 +1438,7 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
+    earlyActionProtocols,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

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

@@ -351,6 +351,13 @@ function Navbar(props: Props) {
                                 >
                                     {strings.myDrefApplications}
                                 </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    type="link"
+                                    to="earlyActionProtocols"
+                                    variant="tertiary"
+                                >
+                                    {strings.earlyActionProtocols}
+                                </DropdownMenuItem>
                                 <DropdownMenuItem
                                     type="link"
                                     to="newDrefApplicationForm"

app/src/views/AccountMyFormsLayout/i18n.json

@@ -4,6 +4,7 @@
         "fieldReportTabTitle": "Field Report",
         "perTabTitle": "PER",
         "drefTabTitle": "DREF",
-        "threeWTabTitle": "3W"
+        "threeWTabTitle": "3W",
+        "eapApplications": "EAP Applications"
     }
 }

app/src/views/AccountMyFormsLayout/index.tsx

@@ -35,6 +35,11 @@ export function Component() {
                 >
                     {strings.threeWTabTitle}
                 </NavigationTab>
+                <NavigationTab
+                    to="accountMyFormsEap"
+                >
+                    {strings.eapApplications}
+                </NavigationTab>
             </NavigationTabList>
             <Outlet />
         </div>

app/src/views/EapApplications/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "eapApplication",
+    "strings": {
+        "eapRegistrationLink": "EAP In Process? Let Us Know",
+        "eapFormLink": "Start Full EAP",
+        "simplifiedEapLink": "Start sEAP"
+    }
+}

app/src/views/EapApplications/index.tsx

@@ -0,0 +1,39 @@
+import { Container } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            childrenContainerClassName={styles.eapFormLinks}
+        >
+            {/* FIXME: Add eap registration link */}
+            <Link
+                to="home"
+                variant="secondary"
+            >
+                {strings.eapRegistrationLink}
+            </Link>
+            <Link
+                to="eapFullForm"
+                variant="secondary"
+            >
+                {strings.eapFormLink}
+            </Link>
+            <Link
+                to="simplifiedEapForm"
+                variant="secondary"
+            >
+                {strings.simplifiedEapLink}
+            </Link>
+        </Container>
+    );
+}

app/src/views/EapApplications/styles.module.css

@@ -0,0 +1,6 @@
+.eap-form-links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--go-ui-spacing-sm);
+}

app/src/views/EapFullForm/index.tsx

@@ -0,0 +1,12 @@
+import Page from '#components/Page';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    return (
+        <Page>
+            {/* TODO: Add EAP form */}
+            Full EAP Form
+        </Page>
+    );
+}

app/src/views/EapRegistration/i18n.json

@@ -0,0 +1,7 @@
+{
+    "namespace": "eapRegistration",
+    "strings": {
+        "eapRegistrationHeading": "EAP Development Registration",
+        "eapRegistrationDescription": "The purpose of this form is for you to notify the IFRC team of the start of your EAP process. If you need assistance with the initiation of the process, send us a message."
+    }
+}

app/src/views/EapRegistration/index.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Page from '#components/Page';
+
+import i18n from './i18n.json';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Page
+            heading={strings.eapRegistrationHeading}
+            description={strings.eapRegistrationDescription}
+        >
+            {/* TODO: Add the form */}
+            Application Details
+        </Page>
+    );
+}

app/src/views/EarlyActionProtocols/i18n.json

@@ -0,0 +1,17 @@
+{
+    "namespace": "earlyActionProtocols",
+    "strings": {
+        "eapHeading": "Disaster Response Emergency Fund (DREF)",
+        "eapDescription": "The IFRC's Disaster Emergency Fund (DREF): rapid, reliable funding for life-saving action.",
+        "eapTitle": "Early Action Protocols (EAP)",
+        "eapRegistrationLink": "EAP in Progress? Let Us Know",
+        "eapContent": "What is an EAP?",
+        "eapContentHeading": "Early Action Protocols (EAPs) are a core mechanism of the IFRC's Forecast-based Financing (FbF) approach, designed to ensure that humanitarian action happens before a disaster strikes, rather than only responding afterwards.",
+        "eapContentSubHeadingOne": "An EAP is a pre-agreed plan developed by a Nation Society together with partners, which outlines:",
+        "eapDescriptionOne": "The triggers (based on scientific forecasts and risk analysis) that indicate when a hazard is likely to impact communities.",
+        "eapDescriptionTwo": "The early actions to be implemented once those triggers are met - practical, life-saving measures that reduce the impacts of the forecasted disaster.",
+        "eapDescriptionThree": "The roles, responsibilities, and budget required to carry out these actions quickly and effectively.",
+        "eapContentSubHeadingTwo": "Why are the EAPs Important?",
+        "eapContentSubHeadingThree": "What is the EAP Application Process?"
+    }
+}

app/src/views/EarlyActionProtocols/index.tsx

@@ -0,0 +1,66 @@
+import {
+    Container,
+    ExpandableContainer,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+import Page from '#components/Page';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Page
+            heading={strings.eapHeading}
+            description={strings.eapDescription}
+        >
+            <Container
+                heading={strings.eapTitle}
+                actions={(
+                    <Link
+                        to="eapDevelopmentRegistration"
+                        variant="primary"
+                    >
+                        {strings.eapRegistrationLink}
+                    </Link>
+                )}
+                childrenContainerClassName={styles.earlyActionProtocols}
+            >
+                <ExpandableContainer
+                    heading={strings.eapContent}
+                >
+                    <p>
+                        {strings.eapContentHeading}
+                    </p>
+                    <p>
+                        {strings.eapContentSubHeadingOne}
+                        <ul>
+                            <li>
+                                {strings.eapDescriptionOne}
+                            </li>
+                            <li>
+                                {strings.eapDescriptionTwo}
+                            </li>
+                            <li>
+                                {strings.eapDescriptionThree}
+                            </li>
+                        </ul>
+                    </p>
+                </ExpandableContainer>
+                {/* TODO: Add remaining content */}
+                <ExpandableContainer
+                    heading={strings.eapContentSubHeadingTwo}
+                />
+                <ExpandableContainer
+                    heading={strings.eapContentSubHeadingThree}
+                />
+            </Container>
+        </Page>
+    );
+}

app/src/views/EarlyActionProtocols/styles.module.css

@@ -0,0 +1,5 @@
+.early-action-protocols {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-lg);
+}

app/src/views/SimplifiedEapForm/index.tsx

@@ -0,0 +1,12 @@
+import Page from '#components/Page';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    return (
+        <Page>
+            {/* TODO: Add Simplified EAP form */}
+            Simplified EAP form
+        </Page>
+    );
+}