Merge pull request #1355 from bcgov/stories/ecer-5113

ECER-5113: ICRA Card added to dashboard

Author: farzadnadiri

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

@@ -0,0 +1,39 @@
+<template>
+  <v-card :rounded="!isRounded ? '0' : ''" variant="outlined" class="h-100 d-flex flex-column justify-space-between h-100">
+    <v-card-item class="ma-4">
+      <h2>Apply with international certification</h2>
+      <p class="small mt-4">
+        Apply for
+        <b>ECE Five Year Certification</b>
+        if you are internationally certified in a country that regulates the ECE profession and do not have 500 hours work experience supervised by a
+        Canadian-certified ECE.
+      </p>
+    </v-card-item>
+
+    <div class="d-flex flex-row justify-start ga-3 flex-wrap ma-4">
+      <v-card-actions>
+        <router-link to="test">Learn more</router-link>
+      </v-card-actions>
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useRouter } from "vue-router";
+
+export default defineComponent({
+  name: "IcraCard",
+  props: {
+    isRounded: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup() {
+    const router = useRouter();
+    return { router };
+  },
+});
+</script>

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

@@ -73,6 +73,9 @@
             <v-col v-if="showTransferCard" cols="12" sm="6">
               <TransferCard />
             </v-col>
+            <v-col v-if="showIcraCard" cols="12" sm="6">
+              <IcraCard />
+            </v-col>
           </v-row>
         </v-col>
       </v-row>
@@ -131,37 +134,55 @@
               <ECEHeader title="Need other options?" />
             </v-col>
           </v-row>
-          <v-row>
-            <v-col cols="12" sm="6">
-              <Card>
+          <v-row align="stretch">
+            <v-col class="d-flex" cols="12" sm="6" md="4">
+              <Card class="d-flex flex-column">
                 <h2>Apply for new certification</h2>
                 <p class="mt-4">Start an application for a new certificate level based on your education and work experience.</p>
-                <v-btn
-                  :variant="certificationStore.holdsPostBasicCertification ? 'outlined' : 'flat'"
-                  size="large"
-                  color="primary"
-                  id="btnNeedOtherOptions"
-                  class="mt-12"
-                  @click="handleStartNewApplication"
-                >
-                  Apply now
-                </v-btn>
+                <div class="mt-auto">
+                  <v-btn
+                    :variant="certificationStore.holdsPostBasicCertification ? 'outlined' : 'flat'"
+                    size="large"
+                    class="mt-4"
+                    color="primary"
+                    id="btnNeedOtherOptions"
+                    @click="handleStartNewApplication"
+                  >
+                    Apply now
+                  </v-btn>
+                </div>
               </Card>
             </v-col>
-            <v-col cols="12" sm="6">
-              <Card>
+            <v-col class="d-flex" cols="12" sm="6" md="4">
+              <Card class="d-flex flex-column">
                 <h2>Transfer certification</h2>
                 <p class="mt-4">If you are certified in another province or territory in Canada, you may be eligible to transfer your certification to B.C.</p>
-                <v-btn
-                  :variant="certificationStore.holdsPostBasicCertification ? 'outlined' : 'flat'"
-                  size="large"
-                  color="primary"
-                  id="btnNeedOtherOptions"
-                  class="mt-12"
-                  @click="handleTransfer"
-                >
-                  Transfer
-                </v-btn>
+                <div class="mt-auto">
+                  <v-btn
+                    :variant="certificationStore.holdsPostBasicCertification ? 'outlined' : 'flat'"
+                    size="large"
+                    class="mt-4"
+                    color="primary"
+                    id="btnNeedOtherOptions"
+                    @click="handleTransfer"
+                  >
+                    Transfer
+                  </v-btn>
+                </div>
+              </Card>
+            </v-col>
+            <v-col v-if="configurationStore.applicationConfiguration.icraFeatureEnabled" class="d-flex" cols="12" sm="6" md="4">
+              <Card class="d-flex flex-column">
+                <h2>Apply with international certification</h2>
+                <p class="mt-4">
+                  Apply for
+                  <b>ECE Five Year Certification</b>
+                  if you are internationally certified in a country that regulates the ECE profession and do not have 500 hours work experience supervised by a
+                  Canadian-certified ECE.
+                </p>
+                <div class="mt-auto">
+                  <router-link class="mt-4" to="test">Learn more</router-link>
+                </div>
               </Card>
             </v-col>
           </v-row>
@@ -198,13 +219,15 @@ import ActionCard from "@/components/ActionCard.vue";
 import Alert from "@/components/Alert.vue";
 import ApplicationCard from "@/components/ApplicationCard.vue";
 import TransferCard from "@/components/TransferCard.vue";
+import IcraCard from "@/components/IcraCard.vue";
 import CertificationCard from "@/components/CertificationCard.vue";
 import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
 import ECEHeader from "@/components/ECEHeader.vue";
 import PageContainer from "@/components/PageContainer.vue";
 import UnreadMessages from "@/components/UnreadMessages.vue";
 import { useAlertStore } from "@/store/alert";
 import { useApplicationStore } from "@/store/application";
+import { useConfigStore } from "@/store/config";
 import { useCertificationStore } from "@/store/certification";
 import { useMessageStore } from "@/store/message";
 import { useUserStore } from "@/store/user";
@@ -221,6 +244,7 @@ export default defineComponent({
     PageContainer,
     ApplicationCard,
     TransferCard,
+    IcraCard,
     CertificationCard,
     ECEHeader,
     ActionCard,
@@ -233,6 +257,7 @@ export default defineComponent({
     const userStore = useUserStore();
     const router = useRouter();
     const applicationStore = useApplicationStore();
+    const configurationStore = useConfigStore();
     const certificationStore = useCertificationStore();
     const alertStore = useAlertStore();
     const loadingStore = useLoadingStore();
@@ -243,6 +268,7 @@ export default defineComponent({
       oidcStore,
       userStore,
       applicationStore,
+      configurationStore,
       alertStore,
       loadingStore,
       messageStore,
@@ -296,7 +322,7 @@ export default defineComponent({
       return this.showTransferCard ? "Apply for ECE certification in B.C." : "My ECE Registry dashboard";
     },
     subheading(): string {
-      return this.showTransferCard ? "There are two options to get certified in British Columbia." : "";
+      return this.showTransferCard ? "Review your options to get certified in British Columbia." : "";
     },
     showApplicationCard(): boolean {
       if (this.certificationStore.hasCertifications && this.applicationStore.applicationStatus === undefined) {
@@ -317,6 +343,13 @@ export default defineComponent({
     showTransferCard(): boolean {
       return !this.certificationStore.hasCertifications && !this.applicationStore.hasApplication && !this.applicationStore.hasDraftApplication;
     },
+    showIcraCard(): boolean {
+      return (
+        (this.configurationStore.applicationConfiguration.icraFeatureEnabled ?? false) &&
+        !this.applicationStore.hasApplication &&
+        !this.applicationStore.hasDraftApplication
+      );
+    },
     showLoading(): boolean {
       return (
         this.dataNotFetched ||