Merge pull request #1329 from bcgov/stories/ecer-2939

ECER-2939: Colour fixes and content changes

Author: pcatkins

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

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <h1 v-if="isLaborMobility">{{ `Transfer certification to ${certificationType}` }}</h1>
-    <h1 v-else-if="isRenewal">{{ `Application to renew ${certificationType} certification` }}</h1>
-    <h1 v-else>{{ `Application for ${certificationType} certification` }}</h1>
-    <div v-if="certificationTypes.includes(CertificationType.FIVE_YEAR)" role="doc-subtitle">
+    <h1 class="white" v-if="isLaborMobility">{{ `Transfer certification to ${certificationType}` }}</h1>
+    <h1 class="white" v-else-if="isRenewal">{{ `Application to renew ${certificationType} certification` }}</h1>
+    <h1 class="white" v-else>{{ `Application for ${certificationType} certification` }}</h1>
+    <div class="white" v-if="certificationTypes.includes(CertificationType.FIVE_YEAR)" role="doc-subtitle">
       {{ certificationTypeSubtitleForFiveYear }}
     </div>
   </div>

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

@@ -9,10 +9,10 @@
       <v-card-text>
         <div class="d-flex" :class="[smAndUp ? 'space-between align-center' : 'flex-column']">
           <v-row>
-            <v-col cols="12"><h3>Step 1</h3></v-col>
-            <v-col cols="12"><h3>Submit application</h3></v-col>
+            <v-col cols="12"><h3 :class="currentStep === 1 ? 'white' : ''">Step 1</h3></v-col>
+            <v-col cols="12"><h3 :class="currentStep === 1 ? 'white' : ''">Submit application</h3></v-col>
           </v-row>
-          <p class="large">
+          <p class="large" :class="currentStep === 1 ? 'white' : ''">
             <v-icon icon="mdi-check" />
             Complete
           </p>
@@ -30,10 +30,10 @@
       <v-card-text>
         <div class="d-flex" :class="[smAndUp ? 'space-between align-center' : 'flex-column']">
           <v-row>
-            <v-col cols="12"><h3>Step 2</h3></v-col>
-            <v-col cols="12"><h3>References and documents</h3></v-col>
+            <v-col cols="12"><h3 :class="currentStep === 2 ? 'white' : ''">Step 2</h3></v-col>
+            <v-col cols="12"><h3 :class="currentStep === 2 ? 'white' : ''">References and documents</h3></v-col>
           </v-row>
-          <p class="large">
+          <p class="large" :class="currentStep === 2 ? 'white' : ''">
             <v-icon v-if="stepTwoIcon" :icon="stepTwoIcon" />
             {{ stepTwoStatusText }}
           </p>
@@ -128,10 +128,10 @@
       <v-card-text>
         <div class="d-flex" :class="[smAndUp ? 'space-between align-center' : 'flex-column']">
           <v-row>
-            <v-col cols="12"><h3>Step 3</h3></v-col>
-            <v-col cols="12"><h3>ECE Registry assessment</h3></v-col>
+            <v-col cols="12"><h3 :class="currentStep === 3 ? 'white' : ''">Step 3</h3></v-col>
+            <v-col cols="12"><h3 :class="currentStep === 3 ? 'white' : ''">ECE Registry assessment</h3></v-col>
           </v-row>
-          <p class="large">
+          <p class="large" :class="currentStep === 3 ? 'white' : ''">
             <v-icon v-if="stepThreeIcon" :icon="stepThreeIcon" />
             {{ stepThreeStatusText }}
           </p>

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

@@ -32,7 +32,7 @@
             value="InternationalCredentialEvaluationService"
           ></v-radio>
           <v-radio
-            label="The ECE Registry already has my Comprehensive Report on file for the course or program relevant to this application and certificate type."
+            :label="`The ECE Registry already has my Comprehensive Report on file for the ${applicationStatus?.certificationTypes?.includes('EceAssistant') ? 'course' : 'program'} relevant to this application and certificate type.`"
             value="RegistryAlreadyHas"
           ></v-radio>
         </v-radio-group>
@@ -86,7 +86,7 @@ export default defineComponent({
       comprehensiveReportOptions = ref(transcript.comprehensiveReportOptions || undefined);
     }
 
-    return { router, transcript, alertStore, Rules, comprehensiveReportOptions, loadingStore };
+    return { router, transcript, alertStore, Rules, comprehensiveReportOptions, loadingStore, applicationStatus };
   },
   methods: {
     async handleSubmit() {

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

@@ -23,7 +23,7 @@
         <v-radio-group id="courseOutlineRadio" v-model="courseOutlineOptions" :rules="[Rules.required()]" color="primary">
           <v-radio label="I have my course outlines or syllabi and will upload them now." value="UploadNow"></v-radio>
           <v-radio
-            label="The ECE Registry already has my course outlines or syllabi on file for the course or program relevant to this application and certificate type."
+            :label="`The ECE Registry already has my course outlines or syllabi on file for the ${applicationStatus?.certificationTypes?.includes('EceAssistant') ? 'course' : 'program'} relevant to this application and certificate type.`"
             value="RegistryAlreadyHas"
           ></v-radio>
         </v-radio-group>
@@ -101,7 +101,18 @@ export default defineComponent({
       courseOutlineOptions = ref(transcript.courseOutlineOptions || undefined);
     }
 
-    return { router, transcript, alertStore, Rules, courseOutlineOptions, areAttachedFilesValid, isFileUploadInProgress, newFiles, loadingStore };
+    return {
+      router,
+      transcript,
+      alertStore,
+      Rules,
+      courseOutlineOptions,
+      areAttachedFilesValid,
+      isFileUploadInProgress,
+      newFiles,
+      loadingStore,
+      applicationStatus,
+    };
   },
   computed: {
     generateUserPrimaryFileArray() {

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

@@ -17,7 +17,8 @@
       <p>{{ transcript?.educationalInstitutionName }}</p>
     </div>
     <div class="d-flex flex-column ga-3 my-6">
-      <h3>Program or course name</h3>
+      <h3 v-if="applicationStatus?.certificationTypes?.includes('EceAssistant')">Course name</h3>
+      <h3 v-else>Program name</h3>
       <p>{{ transcript?.programName }}</p>
     </div>
     <p class="my-6">We will notify you once we receive your transcript. You will also see this item marked as “Received” in your application summary.</p>
@@ -52,14 +53,13 @@ export default defineComponent({
     const route = useRoute();
 
     const applicationStatus = (await getApplicationStatus(route.params.applicationId.toString()))?.data;
-
     const transcript = applicationStatus?.transcriptsStatus?.find((transcript) => transcript.id === props.transcriptId);
 
     if (!transcript) {
       router.back();
     }
 
-    return { transcript, alertStore };
+    return { transcript, alertStore, applicationStatus };
   },
   methods: {},
 });

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

@@ -4,7 +4,8 @@
       <h1>{{ clientId ? "Edit" : "Add" }} education</h1>
       <br />
       <p>
-        You will need to request an official transcript from your educational institution for this course or program. It must be sent to us directly from them.
+        You will need to request an official transcript from your educational institution for this {{ isDraftApplicationAssistant ? "course" : "program" }}. It
+        must be sent to us directly from them.
       </p>
       <br />
       <p>When we receive your transcript, we will:</p>
@@ -112,16 +113,17 @@
 
         <v-row>
           <v-col>
-            <h3>What program or course did you take?</h3>
+            <h3 v-if="isDraftApplicationAssistant">What course did you take?</h3>
+            <h3 v-else>What program did you take?</h3>
           </v-col>
         </v-row>
         <v-row>
           <v-col md="8" lg="6" xl="4">
             <EceTextField
               id="txtProgramName"
               v-model="program"
-              :rules="[Rules.required('Enter the name of your program or course')]"
-              label="Name of program or course"
+              :rules="[Rules.required(`Enter the name of your ${isDraftApplicationAssistant ? 'course' : 'program'}`)]"
+              :label="`Name of ${isDraftApplicationAssistant ? 'course' : 'program'}`"
               maxlength="100"
             ></EceTextField>
           </v-col>
@@ -139,7 +141,7 @@
                   Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'Start date must be within the last 5 years'),
                 ),
               ]"
-              label="Start date of program or course"
+              :label="`Start date of ${isDraftApplicationAssistant ? 'course' : 'program'}`"
               maxlength="50"
               :max="today"
             ></EceDateInput>
@@ -159,7 +161,7 @@
                   Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'End date must be within the last 5 years'),
                 ),
               ]"
-              label="End date of program or course"
+              :label="`End date of ${isDraftApplicationAssistant ? 'course' : 'program'}`"
               maxlength="50"
               :max="today"
             ></EceDateInput>
@@ -257,8 +259,8 @@
               <callout type="warning">
                 <h3>You will need to provide supporting documents as part of your application.</h3>
                 <p class="mt-3">
-                  The ECE Registry does not recognize the program or course from the educational institution you entered. We will need additional information to
-                  assess if your education is considered equivalent.
+                  The ECE Registry does not recognize the {{ isDraftApplicationAssistant ? "course" : "program" }} from the educational institution you entered.
+                  We will need additional information to assess if your education is considered equivalent.
                 </p>
                 <h3 class="mt-3">
                   You may continue your application. After you submit, you can indicate how you will provide supporting documents in the application summary
@@ -324,8 +326,8 @@
               <div class="d-flex flex-column ga-3">
                 <h3>Comprehensive Report</h3>
                 <p>
-                  You will need to request a Evaluation Report from BCIT’s International Credential Evaluation Service. This is needed for any program or course
-                  completed outside of Canada.
+                  You will need to request a Evaluation Report from BCIT’s International Credential Evaluation Service. This is needed for any
+                  {{ isDraftApplicationAssistant ? "course" : "program" }} completed outside of Canada.
                 </p>
                 <p>
                   You may be eligible for a fee waiver to cover the costs of the report.
@@ -681,10 +683,10 @@ export default defineComponent({
       this.school = educationData.education.educationalInstitutionName ?? "";
       this.program = educationData.education.programName ?? "";
       this.campusLocation = educationData.education.campusLocation ?? "";
-      (this.studentFirstName = educationData.education.studentFirstName ?? null),
+      ((this.studentFirstName = educationData.education.studentFirstName ?? null),
         (this.studentMiddleName = educationData.education.studentMiddleName ?? null),
         (this.studentLastName = educationData.education.studentLastName ?? ""),
-        (this.studentNumber = educationData.education.studentNumber ?? "");
+        (this.studentNumber = educationData.education.studentNumber ?? ""));
       this.isNameUnverified = educationData.education.isNameUnverified ?? false;
       this.startYear = formatDate(educationData.education.startDate || "") ?? "";
       this.endYear = formatDate(educationData.education.endDate || "") ?? "";

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

@@ -10,23 +10,23 @@
         </v-row>
         <v-row>
           <v-col cols="4">
-            <p class="small">Name of program or course</p>
+            <p class="small">Name of {{ applicationStore.isDraftCertificateTypeEceAssistant ? "course" : "program" }}</p>
           </v-col>
           <v-col>
             <p class="small font-weight-bold">{{ education.programName }}</p>
           </v-col>
         </v-row>
         <v-row>
           <v-col cols="4">
-            <p class="small">Start date of program or course</p>
+            <p class="small">Start date of {{ applicationStore.isDraftCertificateTypeEceAssistant ? "course" : "program" }}</p>
           </v-col>
           <v-col>
             <p class="small font-weight-bold">{{ formatDate(education.startDate || "", "LLLL d, yyyy") }}</p>
           </v-col>
         </v-row>
         <v-row>
           <v-col cols="4">
-            <p class="small">End date of program or course</p>
+            <p class="small">End date of {{ applicationStore.isDraftCertificateTypeEceAssistant ? "course" : "program" }}</p>
           </v-col>
           <v-col>
             <p class="small font-weight-bold">{{ formatDate(education.endDate || "", "LLLL d, yyyy") }}</p>

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

@@ -32,7 +32,10 @@
             Your application summary lists the supporting documents you need to submit as your educational institution is not recognized by the ECE Registry
           </strong>
         </li>
-        <li>Once submitted, we will review these documents to determine whether the course or program is considered equivalent</li>
+        <li>
+          Once submitted, we will review these documents to determine whether the {{ applicationIsEceAssistant ? "course" : "program" }} is considered
+          equivalent
+        </li>
       </ul>
       <br />
     </div>
@@ -95,6 +98,9 @@ export default defineComponent({
     applicationHasEducationNotRecognized() {
       return this.applicationStore.application?.transcripts?.some((transcript) => transcript.educationRecognition === "NotRecognized");
     },
+    applicationIsEceAssistant() {
+      return this.applicationStore.application?.certificationTypes?.includes("EceAssistant");
+    },
   },
 });
 </script>