#3697 - View Assessment Updates

sources/packages/web/src/components/common/AssessmentAwardDetails.vue

@@ -5,7 +5,7 @@
       v-if="isSecondDisbursementAvailable"
       class="category-header-medium secondary-color my-3"
     >
-      First Payment
+      First disbursement
     </h3>
     <v-row>
       <v-col>
@@ -141,7 +141,9 @@
   </div>
   <!-- Estimated and actual award details of second disbursement. -->
   <div v-if="isSecondDisbursementAvailable">
-    <h3 class="category-header-medium secondary-color my-3">Second Payment</h3>
+    <h3 class="category-header-medium secondary-color my-3">
+      Second disbursement
+    </h3>
     <v-row>
       <v-col>
         <content-group>

sources/packages/web/src/components/common/AwardTable.vue

@@ -9,7 +9,7 @@
     <tbody>
       <tr v-for="award in awards" :key="award.awardType">
         <td>
-          {{ award.awardType }}
+          {{ award.awardTypeDisplay }}
           <tooltip-icon>{{ award.description }}</tooltip-icon>
         </td>
         <td>
@@ -24,6 +24,7 @@ import { PropType, defineComponent, computed } from "vue";
 import { OfferingIntensity } from "@/types";
 import { AWARDS, AwardDetail } from "@/constants/award-constants";
 import { DynamicAwardValue } from "@/services/http/dto";
+import { useFormatters } from "@/composables";
 
 export default defineComponent({
   props: {
@@ -47,17 +48,22 @@ export default defineComponent({
         (award) => award.offeringIntensity === props.offeringIntensity,
       ),
     );
+    const { getFormattedMoneyValue } = useFormatters();
 
     const getAwardValue = (awardType: string): string | number | Date => {
-      const awardValue =
-        props.awardDetails[`${props.identifier}${awardType.toLowerCase()}`];
+      const awardValue = props.awardDetails[
+        `${props.identifier}${awardType.toLowerCase()}`
+      ] as number;
       // If the award is defined but no values are present it means that a receipt value is missing.
       if (awardValue === null) {
         return "-";
       }
       // If the award in not defined at all it means that the award is not eligible and it was not
       // part of the disbursement calculations output.
-      return awardValue ?? "(Not eligible)";
+      if (awardValue === undefined) {
+        return "(Not eligible)";
+      }
+      return getFormattedMoneyValue(awardValue);
     };
 
     return {

sources/packages/web/src/components/common/students/applicationDetails/AssessmentAward.vue

@@ -1,7 +1,7 @@
 <template>
   <body-header
-    title="Summary"
-    subTitle="Below is the summary from your assessment. To view your entire assessment, click on View assessment."
+    title="Funding summary"
+    subTitle="Below is the summary from your assessment. To view your Notice of Assessment, click on view assessment."
   >
     <template #actions>
       <v-btn

sources/packages/web/src/composables/useFormatters.ts

@@ -396,6 +396,17 @@ export function useFormatters() {
     return "No disability funding types included on assessment.";
   };
 
+  /**
+   * Format the money value to the form ##,###.00
+   * @param moneyValue money value to be formatted.
+   * @returns the formatted money value.
+   */
+  const getFormattedMoneyValue = (moneyValue: number): string => {
+    return `$${moneyValue.toLocaleString("en-CA", {
+      minimumFractionDigits: 2,
+    })}`;
+  };
+
   return {
     dateOnlyLongString,
     dateOnlyLongPeriodString,
@@ -418,5 +429,6 @@ export function useFormatters() {
     isBeforeDateOnly,
     disabilityStatusToDisplay,
     applicationDisabilityStatusToDisplay,
+    getFormattedMoneyValue,
   };
 }

sources/packages/web/src/constants/award-constants.ts

@@ -2,6 +2,7 @@ import { OfferingIntensity } from "@/types";
 
 export interface AwardDetail {
   awardType: FullTimeAwardTypes | PartTimeAwardTypes;
+  awardTypeDisplay: string;
   description: string;
   offeringIntensity: OfferingIntensity;
 }
@@ -30,77 +31,92 @@ export enum PartTimeAwardTypes {
 export const AWARDS: AwardDetail[] = [
   {
     awardType: FullTimeAwardTypes.CSLF,
+    awardTypeDisplay: FullTimeAwardTypes.CSLF,
     description: "Canada Student Loan for Full-time Studies",
     offeringIntensity: OfferingIntensity.fullTime,
   },
   {
     awardType: FullTimeAwardTypes.CSGP,
+    awardTypeDisplay: FullTimeAwardTypes.CSGP,
     description: "Canada Student Grant for Student with Permanent Disability",
     offeringIntensity: OfferingIntensity.fullTime,
   },
   {
     awardType: FullTimeAwardTypes.CSGD,
+    awardTypeDisplay: FullTimeAwardTypes.CSGD,
     description: "Canada Student Grant for Students with Dependents",
     offeringIntensity: OfferingIntensity.fullTime,
   },
   {
     awardType: FullTimeAwardTypes.CSGF,
+    awardTypeDisplay: FullTimeAwardTypes.CSGF,
     description: "Canada Student Grant for Full-time Studies",
     offeringIntensity: OfferingIntensity.fullTime,
   },
   {
     awardType: FullTimeAwardTypes.CSGT,
+    awardTypeDisplay: FullTimeAwardTypes.CSGT,
     description: "Canada Student Grant for Full-time Top-up",
     offeringIntensity: OfferingIntensity.fullTime,
   },
-  {
-    awardType: PartTimeAwardTypes.CSLP,
-    description: "Canada Student Loan for Part-time Studies",
-    offeringIntensity: OfferingIntensity.partTime,
-  },
-  {
-    awardType: PartTimeAwardTypes.CSGP,
-    description: "Canada Student Grant for Student with Permanent Disability",
-    offeringIntensity: OfferingIntensity.partTime,
-  },
-  {
-    awardType: PartTimeAwardTypes.CSPT,
-    description: "Canada Student Grant for Part-time Studies",
-    offeringIntensity: OfferingIntensity.partTime,
-  },
-  {
-    awardType: PartTimeAwardTypes.CSGD,
-    description: "Canada Student Grant for Students with Dependents",
-    offeringIntensity: OfferingIntensity.partTime,
-  },
   {
     awardType: FullTimeAwardTypes.BCSL,
+    awardTypeDisplay: FullTimeAwardTypes.BCSL,
     description: "B.C. Student Loan",
     offeringIntensity: OfferingIntensity.fullTime,
   },
   {
     awardType: FullTimeAwardTypes.BCAG,
+    awardTypeDisplay: FullTimeAwardTypes.BCAG,
     description: "B.C. Access Grant",
     offeringIntensity: OfferingIntensity.fullTime,
   },
   {
     awardType: FullTimeAwardTypes.BGPD,
+    awardTypeDisplay: FullTimeAwardTypes.BGPD,
     description: "B.C. Permanent Disability Grant",
     offeringIntensity: OfferingIntensity.fullTime,
   },
   {
     awardType: FullTimeAwardTypes.SBSD,
+    awardTypeDisplay: FullTimeAwardTypes.SBSD,
     description: "B.C. Supplemental Bursary with Disabilities",
     offeringIntensity: OfferingIntensity.fullTime,
   },
+  {
+    awardType: PartTimeAwardTypes.CSGP,
+    awardTypeDisplay: "CSG-PD",
+    description: "Canada Student Grant for Students with Disabilities",
+    offeringIntensity: OfferingIntensity.partTime,
+  },
+  {
+    awardType: PartTimeAwardTypes.CSPT,
+    awardTypeDisplay: "CSG-PT",
+    description: "Canada Student Grant for Part-time Students",
+    offeringIntensity: OfferingIntensity.partTime,
+  },
+  {
+    awardType: PartTimeAwardTypes.CSGD,
+    awardTypeDisplay: "CSG-PTDEP",
+    description: "Canada Student Grant for Students with Dependants",
+    offeringIntensity: OfferingIntensity.partTime,
+  },
   {
     awardType: PartTimeAwardTypes.BCAG,
-    description: "B.C. Access Grant",
+    awardTypeDisplay: "BCAG-PT",
+    description: "B.C. Access Grant for Part-time Studies",
+    offeringIntensity: OfferingIntensity.partTime,
+  },
+  {
+    awardType: PartTimeAwardTypes.CSLP,
+    awardTypeDisplay: "CSL-PT",
+    description: "Canada Student Loan for Part-time Students",
     offeringIntensity: OfferingIntensity.partTime,
   },
   {
     awardType: PartTimeAwardTypes.SBSD,
-    description: "B.C. Supplemental Bursary with Disabilities",
+    awardTypeDisplay: PartTimeAwardTypes.SBSD,
+    description: "B.C. Supplemental Bursary for Students with Disabilities",
     offeringIntensity: OfferingIntensity.partTime,
   },
 ];