ecer-4779 eligibility requirements page

Author: SoLetsDev

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Breadcrumb.vue

@@ -370,6 +370,13 @@ export default defineComponent({
         case "manageApplication":
           return [...this.baseItems, { title: "Application", disabled: true, href: `/manage-application/${params.applicationId}` }];
 
+        case "icra-eligibility-requirements":
+          return [
+            ...this.baseItems,
+            { title: "Apply with international certificate", disabled: false, href: "/icra/eligibility" },
+            { title: "Requirements", disabled: true, href: "/icra/eligibility/requirements" },
+          ];
+
         default:
           return this.baseItems;
       }

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/IcraEligibilityRequirements.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-container>
+    <Breadcrumb />
+    <v-row>
+      <v-col>
+        <h1>Check if you are eligible to apply with international certification</h1>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <ECEHeader title="International certification" />
+        <p>Your certificates(s) must:</p>
+        <ul class="ml-10">
+          <li>Be issued by a country or region that regulates the early childhood education profession</li>
+          <li>Be in good standing</li>
+          <li>Be valid (you can provide expired certification, but you must also provide at least one valid certification)</li>
+        </ul>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <ECEHeader title="Employment experience" />
+        <p>
+          You need to have completed 2 years of independent ECE practice and be able to provide references to verify your employment experience. If you worked
+          at multiple locations, you can provide multiple references.
+        </p>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <p>Important information about employment experience:</p>
+        <ul class="ml-10">
+          <li>Only include employment experience completed within the last 5 years</li>
+          <li>Must have held valid ECE certification at the time the employment experience was completed</li>
+        </ul>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <!-- prettier-ignore -->
+        <p>
+          If you do not meet these requirements, you can
+          <a href="/">apply for certification through another pathway</a>.
+        </p>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-btn class="mt-6" rounded="lg" color="primary" @click="router.push({ name: 'not-found' })" id="btnContinue">Continue (not implemented)</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import Breadcrumb from "@/components/Breadcrumb.vue";
+import ECEHeader from "@/components/ECEHeader.vue";
+import { useRouter } from "vue-router";
+
+export default {
+  name: "IcraEligibilityRequirements",
+  components: { Breadcrumb, ECEHeader },
+  setup() {
+    const router = useRouter();
+
+    return { router };
+  },
+};
+</script>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts

@@ -228,6 +228,12 @@ const router = createRouter({
       component: () => import("./components/pages/Application.vue"),
       meta: { requiresAuth: true, requiresVerification: true },
     },
+    {
+      path: "/icra/eligibility/requirements",
+      name: "icra-eligibility-requirements",
+      component: () => import("./components/IcraEligibilityRequirements.vue"),
+      meta: { requiresAuth: true, requiresVerification: true, requiresICRAFeature: true },
+    },
     {
       path: "/new-user",
       component: () => import("./components/pages/NewUser.vue"),