Add diff viewer utilities and components

app/package.json

@@ -48,6 +48,7 @@
         "@togglecorp/toggle-request": "^1.0.0-beta.3",
         "@turf/bbox": "^6.5.0",
         "@turf/buffer": "^6.5.0",
+        "diff": "^8.0.2",
         "exceljs": "^4.3.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,50 @@ 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 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',
@@ -1094,6 +1182,51 @@ 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',
+    },
+});
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1317,6 +1450,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1353,6 +1487,9 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
+    newEapDevelopmentRegistration,
+    eapFullForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
@@ -1363,6 +1500,11 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
+    drefDetail,
+    eapDetail,
+    drefProcessLayout,
+    eapRegistrationLayout,
+    eapDevelopmentRegistrationForm,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

app/src/components/InlineDiffView/index.tsx

@@ -0,0 +1,64 @@
+import {
+    Fragment,
+    useMemo,
+} from 'react';
+import { diffWordsWithSpace } from 'diff';
+
+import styles from './styles.module.css';
+
+interface Props {
+    value: string;
+    oldValue: string;
+}
+
+function InlineDiffView(props: Props) {
+    const {
+        value,
+        oldValue,
+    } = props;
+
+    const diff = useMemo(() => (
+        diffWordsWithSpace(value, oldValue)
+    ), [value, oldValue]);
+
+    return (
+        <div className={styles.inlineDiffView}>
+            {diff.map((part, index) => {
+                const { added, removed, value: partValue } = part;
+
+                if (added) {
+                    return (
+                        <span
+                            className={styles.added}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {partValue}
+                        </span>
+                    );
+                }
+
+                if (removed) {
+                    return (
+                        <span
+                            className={styles.removed}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {partValue}
+                        </span>
+                    );
+                }
+
+                return (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <Fragment key={index}>
+                        {partValue}
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
+}
+
+export default InlineDiffView;

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

@@ -0,0 +1,12 @@
+.inline-diff-view {
+    .added {
+        background-color: color-mix(in srgb, var(--go-ui-color-green) 10%, transparent);
+        color: var(--go-ui-color-green);
+    }
+
+    .removed {
+        background-color: color-mix(in srgb, var(--go-ui-color-red) 10%, transparent);
+        text-decoration: line-through;
+        color: var(--go-ui-color-red);
+    }
+}

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

@@ -367,12 +367,20 @@ function Navbar(props: Props) {
                                         </Description>
                                         <DropdownMenuItem
                                             type="link"
-                                            to="accountMyFormsDref"
+                                            to="drefDetail"
                                             styleVariant="action"
                                             withoutFullWidth
                                         >
                                             {strings.myDrefApplications}
                                         </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            type="link"
+                                            to="eapDetail"
+                                            styleVariant="action"
+                                            withoutFullWidth
+                                        >
+                                            {strings.earlyActionProtocols}
+                                        </DropdownMenuItem>
                                         <DropdownMenuItem
                                             type="link"
                                             to="newDrefApplicationForm"

app/src/utils/constants.ts

@@ -199,3 +199,6 @@ export const multiMonthSelectDefaultValue = listToMap(
 export const ERU_READINESS_READY = 1;
 export const ERU_READINESS_CAN_CONTRIBUTE = 2;
 export const ERU_READINESS_NO_CAPACITY = 3;
+
+export const EAP_TYPE_SIMPLIFIED = 20;
+export const EAP_TYPE_FULL = 10;

app/src/views/AccountMyFormsEap/EapTableActions/i18n.json

@@ -0,0 +1,9 @@
+{
+    "namespace":"accountMyFormsEap",
+    "strings":{
+        "eapViewLabel": "View",
+        "eapEditLabel": "Edit",
+        "eapFormLink": "Start Full EAP",
+        "simplifiedEapLink": "Start sEAP"
+    }
+}

app/src/views/AccountMyFormsEap/EapTableActions/index.tsx

@@ -0,0 +1,61 @@
+import { TableActions } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+
+export interface Props {
+    eapId: number;
+}
+
+function EapTableActions(props: Props) {
+    const { eapId } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <TableActions
+            extraActions={(
+                <>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'view' }}
+                    >
+                        {strings.eapViewLabel}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'edit' }}
+                    >
+                        {strings.eapEditLabel}
+                    </DropdownMenuItem>
+                </>
+            )}
+        >
+            <Link
+                to="eapFullForm"
+                urlParams={{ eapId }}
+                styleVariant="outline"
+                colorVariant="primary"
+            >
+                {strings.eapFormLink}
+            </Link>
+            <Link
+                to="simplifiedEapForm"
+                urlParams={{ eapId }}
+                styleVariant="outline"
+                colorVariant="primary"
+            >
+                {strings.simplifiedEapLink}
+            </Link>
+        </TableActions>
+    );
+}
+
+export default EapTableActions;

app/src/views/AccountMyFormsEap/Filters/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "accountMyFormsEap",
+    "strings": {
+        "filterStatusPlaceholder": "Select Status"
+    }
+}