From dff26a50b76969e5824600e99162cbcb18fbe25d Mon Sep 17 00:00:00 2001
From: Parker Atkins <parker.cattell.atkins@gmail.com>
Date: Mon, 22 Jan 2024 11:08:14 -1000
Subject: [PATCH 1/3] UI roughed in for certification type selection

---
 .../src/components/ECEAssistantContent.vue    | 26 +++++++++
 .../src/components/ECEFiveYearContent.vue     | 37 ++++++++++++
 .../src/components/ECEOneYearContent.vue      | 28 +++++++++
 .../src/components/ExpandSelect.vue           | 38 +++++++++++++
 .../components/pages/CertificationType.vue    | 57 +++++++++++++++++++
 .../src/components/pages/Dashboard.vue        |  4 +-
 .../src/router.ts                             |  6 +-
 .../src/types/expand-select.ts                |  7 +++
 8 files changed, 200 insertions(+), 3 deletions(-)
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantContent.vue
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearContent.vue
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantContent.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantContent.vue
new file mode 100644
index 000000000..77248b1e2
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantContent.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <p class="small">
+          ECE Assistant certification requires completion of at least one early childhood education course in child guidance, child health, safety, nutrition or
+          child development, completed within the last 5 years at a recognized educational institution.
+          <br />
+          <br />
+          As an ECE Assistant you can work in a licensed facility with children 0 to 5 years old under the supervision of a certified EC
+        </p>
+      </v-col>
+    </v-row>
+  </v-container>
+  <p></p>
+  <br />
+  <p></p>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ECEAssistantContent",
+});
+</script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
new file mode 100644
index 000000000..6074677de
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <p class="small">
+          Five Year Certification requires completion of an early childhood education program from a recognized educational institution or an equivalent
+          program, or equivalent certification/registration in another province or territory. You must have completed 500 hours of supervised work experience.
+          <br />
+          <br />
+          This certification allows you to work alone and/or as the primary educator in licensed child care programs for children 3 to 5 years of age and may
+          work alongside an Infant Toddler Educator in licensed programs for children under 36-months.
+        </p>
+      </v-col>
+      <v-col cols="12">
+        <div class="d-flex flex-row align-center">
+          <v-icon class="mr-2" size="large" icon="mdi-alert-circle-outline" />
+          <p class="small">
+            NOTE: If you are eligible for an ECE Five Year Certificate, the Registry will assess you for one or both specialized certificates below as part of
+            your application for the ECE Five Year Certificate. You only need to submit one application.
+          </p>
+        </div>
+      </v-col>
+      <v-col cols="11" offset="1">
+        <v-checkbox label="Infant and Toddler Educator (ITE)"></v-checkbox>
+        <v-checkbox label="Special Needs Educator (SNE)"></v-checkbox>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ECEFiveYearContent",
+});
+</script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearContent.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearContent.vue
new file mode 100644
index 000000000..d6de27603
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearContent.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <p class="small">
+          ECE One Year certification requires successful completion of a basic early childhood education training program recognized by the ECE Registry.
+          <br />
+          <br />
+          This certification, allows you to work in the position of a fully certified ECE while working towards your 500 hours of work experience.
+        </p>
+      </v-col>
+      <v-col cols="12">
+        <div class="d-flex flex-row align-center">
+          <v-icon class="mr-2" size="large" icon="mdi-alert-circle-outline" />
+          <p class="small">NOTE: This certificate may only be renewed ONCE.</p>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ECEOneYearContent",
+});
+</script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
new file mode 100644
index 000000000..6aa8614b8
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-row class="ga-4">
+    <v-expansion-panels v-for="option in options" :key="option.id">
+      <v-expansion-panel class="rounded-lg">
+        <v-expansion-panel-title>
+          <v-radio :label="option.title" :value="option.id"></v-radio>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <Component :is="option.contentComponent" />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import type { ExpandSelectOption } from "@/types/expand-select";
+
+export default defineComponent({
+  name: "ExpandSelect",
+  props: {
+    selected: {
+      type: Array as () => string[],
+      default: () => [],
+    },
+    multiselect: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Array as () => ExpandSelectOption[],
+      default: () => [],
+    },
+  },
+});
+</script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
new file mode 100644
index 000000000..cf4ab0762
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
@@ -0,0 +1,57 @@
+<template>
+  <PageContainer>
+    <v-row class="ga-4">
+      <v-col cols="1">
+        <v-btn variant="text" @click="$router.back()">
+          <v-icon start icon="mdi-arrow-left"></v-icon>
+          Back
+        </v-btn>
+      </v-col>
+      <v-col cols="12">
+        <h2>What certificate type(s) are you applying for?</h2>
+      </v-col>
+      <v-col cols="12" md="8" lg="8" xl="8">
+        <ExpandSelect :options="options" :multiselect="multiselect" :selected="selectedOptions"></ExpandSelect>
+      </v-col>
+    </v-row>
+  </PageContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import ECEAssistantContent from "@/components/ECEAssistantContent.vue";
+import ECEFiveYearContent from "@/components/ECEFiveYearContent.vue";
+import ECEOneYearContent from "@/components/ECEOneYearContent.vue";
+import ExpandSelect from "@/components/ExpandSelect.vue";
+import PageContainer from "@/components/PageContainer.vue";
+import type { ExpandSelectOption } from "@/types/expand-select";
+
+export default defineComponent({
+  name: "CertificationType",
+  components: { ExpandSelect, PageContainer },
+  data() {
+    return {
+      multiselect: false,
+      options: [
+        {
+          id: "1",
+          title: "ECE Assistant",
+          contentComponent: ECEAssistantContent,
+        },
+        {
+          id: "2",
+          title: "ECE One Year",
+          contentComponent: ECEOneYearContent,
+        },
+        {
+          id: "3",
+          title: "ECE Five Year",
+          contentComponent: ECEFiveYearContent,
+        },
+      ] as ExpandSelectOption[],
+      selectedOptions: [] as string[],
+    };
+  },
+});
+</script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Dashboard.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Dashboard.vue
index 345c1cd8e..90e0729ff 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Dashboard.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Dashboard.vue
@@ -42,7 +42,7 @@
                 <p class="small">Complete and submit your application for certification in early childhood education.</p>
               </v-card-item>
               <v-card-actions class="ma-4">
-                <v-btn variant="flat" rounded="lg" color="primary">Apply Now</v-btn>
+                <v-btn variant="flat" rounded="lg" color="primary" @click="$router.push('/certification-type')">Apply Now</v-btn>
               </v-card-actions>
             </v-card>
           </v-col>
@@ -52,7 +52,7 @@
                 <p class="small">Not sure which certificate to apply for? Fill out a quick self-assessment to see your certification options.</p>
               </v-card-item>
               <v-card-actions class="ma-4">
-                <v-btn variant="flat" rounded="lg" color="warning">Check Elegibility</v-btn>
+                <v-btn variant="flat" rounded="lg" color="warning">Check Eligibility</v-btn>
               </v-card-actions>
             </v-card>
           </v-col>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts
index 2ad785747..3dbdb4646 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts
@@ -40,7 +40,11 @@ const router = createRouter({
         },
       ],
     },
-
+    {
+      path: "/certification-type",
+      component: () => import("./components/pages/CertificationType.vue"),
+      meta: { requiresAuth: true },
+    },
     {
       path: "/login",
       component: () => import("./components/pages/Login.vue"),
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts
new file mode 100644
index 000000000..ec921a786
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts
@@ -0,0 +1,7 @@
+import type { Component } from "vue";
+
+export type ExpandSelectOption = {
+  id: string;
+  title: string;
+  contentComponent: Component;
+};

From 77480e26dd696074bbbb019e6ee146a97ad1abce Mon Sep 17 00:00:00 2001
From: Parker Atkins <parker.cattell.atkins@gmail.com>
Date: Tue, 23 Jan 2024 07:39:43 -1000
Subject: [PATCH 2/3] Move configuration and complete ExpandSelect state
 handling

---
 .../src/components/ECEFiveYearContent.vue     | 19 +++++++-
 .../src/components/ExpandSelect.vue           | 43 +++++++++++--------
 .../components/pages/CertificationType.vue    | 34 +++++----------
 .../src/config/certification-types.ts         | 24 +++++++++++
 4 files changed, 76 insertions(+), 44 deletions(-)
 create mode 100644 src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
index 6074677de..3a0532cf4 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
@@ -21,8 +21,23 @@
         </div>
       </v-col>
       <v-col cols="11" offset="1">
-        <v-checkbox label="Infant and Toddler Educator (ITE)"></v-checkbox>
-        <v-checkbox label="Special Needs Educator (SNE)"></v-checkbox>
+        <v-checkbox label="Infant and Toddler Educator (ITE)">
+          <template #details>
+            <div class="ml-10">
+              An Infant and Toddler specialization requires successful completion of an infant and toddler educator training program recognized by the ECE
+              Registry.
+            </div>
+          </template>
+        </v-checkbox>
+
+        <v-checkbox label="Special Needs Educator (SNE)">
+          <template #details>
+            <div class="ml-10">
+              A Special Needs specialization requires successful completion of a special needs early childhood educator training program recognized by the ECE
+              Registry.
+            </div>
+          </template>
+        </v-checkbox>
       </v-col>
     </v-row>
   </v-container>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
index 6aa8614b8..0cb77758b 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
@@ -1,16 +1,16 @@
 <template>
-  <v-row class="ga-4">
-    <v-expansion-panels v-for="option in options" :key="option.id">
-      <v-expansion-panel class="rounded-lg">
-        <v-expansion-panel-title>
+  <v-expansion-panels :model-value="selected" @update:model-value="handlePanelChange">
+    <v-expansion-panel v-for="option in options" :key="option.id" :value="option.id" class="rounded-lg">
+      <v-expansion-panel-title>
+        <v-radio-group :mandatory="true" :hide-details="true" :model-value="selected" @update:model-value="handleRadioChange">
           <v-radio :label="option.title" :value="option.id"></v-radio>
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <Component :is="option.contentComponent" />
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-    </v-expansion-panels>
-  </v-row>
+        </v-radio-group>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text>
+        <Component :is="option.contentComponent" />
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script lang="ts">
@@ -21,18 +21,23 @@ import type { ExpandSelectOption } from "@/types/expand-select";
 export default defineComponent({
   name: "ExpandSelect",
   props: {
-    selected: {
-      type: Array as () => string[],
-      default: () => [],
-    },
-    multiselect: {
-      type: Boolean,
-      default: false,
-    },
     options: {
       type: Array as () => ExpandSelectOption[],
       default: () => [],
     },
+    selected: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ["selection"],
+  methods: {
+    handleRadioChange(selected: string | null) {
+      this.$emit("selection", selected);
+    },
+    handlePanelChange(selected: unknown) {
+      this.$emit("selection", selected);
+    },
   },
 });
 </script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
index cf4ab0762..8bf6e4115 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
@@ -11,7 +11,7 @@
         <h2>What certificate type(s) are you applying for?</h2>
       </v-col>
       <v-col cols="12" md="8" lg="8" xl="8">
-        <ExpandSelect :options="options" :multiselect="multiselect" :selected="selectedOptions"></ExpandSelect>
+        <ExpandSelect :options="certificationTypes" :selected="selected" @selection="handleExpandSelectSelection"></ExpandSelect>
       </v-col>
     </v-row>
   </PageContainer>
@@ -20,38 +20,26 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import ECEAssistantContent from "@/components/ECEAssistantContent.vue";
-import ECEFiveYearContent from "@/components/ECEFiveYearContent.vue";
-import ECEOneYearContent from "@/components/ECEOneYearContent.vue";
 import ExpandSelect from "@/components/ExpandSelect.vue";
 import PageContainer from "@/components/PageContainer.vue";
-import type { ExpandSelectOption } from "@/types/expand-select";
+import certificationTypes from "@/config/certification-types";
 
 export default defineComponent({
   name: "CertificationType",
   components: { ExpandSelect, PageContainer },
+  setup() {
+    return { certificationTypes };
+  },
   data() {
     return {
       multiselect: false,
-      options: [
-        {
-          id: "1",
-          title: "ECE Assistant",
-          contentComponent: ECEAssistantContent,
-        },
-        {
-          id: "2",
-          title: "ECE One Year",
-          contentComponent: ECEOneYearContent,
-        },
-        {
-          id: "3",
-          title: "ECE Five Year",
-          contentComponent: ECEFiveYearContent,
-        },
-      ] as ExpandSelectOption[],
-      selectedOptions: [] as string[],
+      selected: "",
     };
   },
+  methods: {
+    handleExpandSelectSelection(selected: string) {
+      this.selected = selected;
+    },
+  },
 });
 </script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts
new file mode 100644
index 000000000..16febdc78
--- /dev/null
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts
@@ -0,0 +1,24 @@
+import ECEAssistantContent from "@/components/ECEAssistantContent.vue";
+import ECEFiveYearContent from "@/components/ECEFiveYearContent.vue";
+import ECEOneYearContent from "@/components/ECEOneYearContent.vue";
+import type { ExpandSelectOption } from "@/types/expand-select";
+
+const certificationTypes: ExpandSelectOption[] = [
+  {
+    id: "1",
+    title: "ECE Assistant",
+    contentComponent: ECEAssistantContent,
+  },
+  {
+    id: "2",
+    title: "ECE One Year",
+    contentComponent: ECEOneYearContent,
+  },
+  {
+    id: "3",
+    title: "ECE Five Year",
+    contentComponent: ECEFiveYearContent,
+  },
+];
+
+export default certificationTypes;

From fe5beb25dca42c867e380fd3bd9b9f96bce86dc3 Mon Sep 17 00:00:00 2001
From: Parker Atkins <parker.cattell.atkins@gmail.com>
Date: Tue, 23 Jan 2024 09:45:48 -1000
Subject: [PATCH 3/3] Connect sub selection for ECEFiveYearContent component

---
 .../src/components/ECEFiveYearContent.vue     | 17 +++++++++++--
 .../src/components/ExpandSelect.vue           | 23 ++++++++++++++----
 .../components/pages/CertificationType.vue    | 24 +++++++++++++++----
 .../src/config/certification-types.ts         |  3 +++
 .../src/types/expand-select.ts                |  1 +
 5 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
index 3a0532cf4..61d920a05 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearContent.vue
@@ -21,7 +21,7 @@
         </div>
       </v-col>
       <v-col cols="11" offset="1">
-        <v-checkbox label="Infant and Toddler Educator (ITE)">
+        <v-checkbox v-model="selection" label="Infant and Toddler Educator (ITE)" value="ITE">
           <template #details>
             <div class="ml-10">
               An Infant and Toddler specialization requires successful completion of an infant and toddler educator training program recognized by the ECE
@@ -30,7 +30,7 @@
           </template>
         </v-checkbox>
 
-        <v-checkbox label="Special Needs Educator (SNE)">
+        <v-checkbox v-model="selection" label="Special Needs Educator (SNE)" value="SNE">
           <template #details>
             <div class="ml-10">
               A Special Needs specialization requires successful completion of a special needs early childhood educator training program recognized by the ECE
@@ -48,5 +48,18 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "ECEFiveYearContent",
+  emits: {
+    selection: (_selected: Array<string>) => true,
+  },
+  data() {
+    return {
+      selection: [] as Array<string>,
+    };
+  },
+  watch: {
+    selection(selected: Array<string>) {
+      this.$emit("selection", selected);
+    },
+  },
 });
 </script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
index 0cb77758b..4898334ff 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ExpandSelect.vue
@@ -7,7 +7,8 @@
         </v-radio-group>
       </v-expansion-panel-title>
       <v-expansion-panel-text>
-        <Component :is="option.contentComponent" />
+        <Component :is="option.contentComponent" v-if="option.hasSubSelection" @selection="handleSubSelectionChange" />
+        <Component :is="option.contentComponent" v-else />
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
@@ -25,18 +26,30 @@ export default defineComponent({
       type: Array as () => ExpandSelectOption[],
       default: () => [],
     },
+    subSelected: {
+      type: Array<string>,
+      default: () => [],
+    },
     selected: {
       type: String,
-      default: null,
+      default: "-1",
     },
   },
-  emits: ["selection"],
+  emits: {
+    selection: (_selected: string) => true,
+    subSelection: (_selected: Array<string>) => true,
+  },
   methods: {
+    handleSubSelectionChange(selected: Array<string>) {
+      this.$emit("subSelection", selected);
+    },
     handleRadioChange(selected: string | null) {
-      this.$emit("selection", selected);
+      typeof selected === "string" ? this.$emit("selection", selected) : this.$emit("selection", "-1");
+      this.$emit("subSelection", []);
     },
     handlePanelChange(selected: unknown) {
-      this.$emit("selection", selected);
+      typeof selected === "string" ? this.$emit("selection", selected) : this.$emit("selection", "-1");
+      this.$emit("subSelection", []);
     },
   },
 });
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
index 8bf6e4115..2465ecbdc 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/CertificationType.vue
@@ -11,7 +11,16 @@
         <h2>What certificate type(s) are you applying for?</h2>
       </v-col>
       <v-col cols="12" md="8" lg="8" xl="8">
-        <ExpandSelect :options="certificationTypes" :selected="selected" @selection="handleExpandSelectSelection"></ExpandSelect>
+        <ExpandSelect
+          :options="certificationTypes"
+          :selected="selectedCertificationType"
+          @selection="handleExpandSelectSelection"
+          @sub-selection="handleExpandSelectSubSelection"
+        ></ExpandSelect>
+        <v-row justify="end" class="mt-12">
+          <v-btn variant="outlined" class="mr-2" @click="$router.back()">Cancel</v-btn>
+          <v-btn color="primary" :disabled="selectedCertificationType == '-1'" @click="submit">Start Application</v-btn>
+        </v-row>
       </v-col>
     </v-row>
   </PageContainer>
@@ -32,13 +41,20 @@ export default defineComponent({
   },
   data() {
     return {
-      multiselect: false,
-      selected: "",
+      subSelection: [] as Array<string>,
+      selectedCertificationType: "-1" as string,
     };
   },
   methods: {
+    submit() {
+      // TODO handle passing data to application wizard
+      this.$router.push("/application");
+    },
     handleExpandSelectSelection(selected: string) {
-      this.selected = selected;
+      this.selectedCertificationType = selected;
+    },
+    handleExpandSelectSubSelection(selected: Array<string>) {
+      this.subSelection = selected;
     },
   },
 });
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts
index 16febdc78..296d4dfa2 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts
@@ -8,16 +8,19 @@ const certificationTypes: ExpandSelectOption[] = [
     id: "1",
     title: "ECE Assistant",
     contentComponent: ECEAssistantContent,
+    hasSubSelection: false,
   },
   {
     id: "2",
     title: "ECE One Year",
     contentComponent: ECEOneYearContent,
+    hasSubSelection: false,
   },
   {
     id: "3",
     title: "ECE Five Year",
     contentComponent: ECEFiveYearContent,
+    hasSubSelection: true,
   },
 ];
 
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts
index ec921a786..98f758ebf 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts
@@ -4,4 +4,5 @@ export type ExpandSelectOption = {
   id: string;
   title: string;
   contentComponent: Component;
+  hasSubSelection: boolean;
 };