eap(add-eap-link): Add EAP Tab in account page

Author: barshathakuri

app/src/App/routes/index.tsx

@@ -728,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',
@@ -1344,6 +1388,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1381,6 +1426,8 @@ const wrappedRoutes = {
     operationalLearning,
     montandonLandingPage,
     eapDevelopmentRegistration,
+    eapFullForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,

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/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>
+    );
+}