#3574 - Add edit notification checkbox and warning (#3750)

Add a required acceptance checkbox for the student application edit modal, and a warning if within 42 days of the end date. <img width="749" alt="Screenshot 2024-09-27 at 11 00 15 AM" src="https://github.com/user-attachments/assets/6a71965f-0761-4107-857f-e03c4f18ed7e"> <img width="743" alt="Screenshot 2024-09-27 at 11 01 33 AM" src="https://github.com/user-attachments/assets/c4b0da03-079f-404b-822e-a21fb6d16f2d">
bcgov · Oct 2, 2024 · b5352c5 · b5352c5
1 parent 17f7371
commit b5352c5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 26 deletions.
diff --git a/sources/packages/web/src/components/students/modals/ConfirmEditApplication.vue b/sources/packages/web/src/components/students/modals/ConfirmEditApplication.vue
@@ -1,17 +1,13 @@
 <template>
   <modal-dialog-base title="Edit application" :showDialog="showDialog">
-    <template #content v-if="isBeforeApplicationEdit">
+    <template #content>
       Any edits made to your application may require the resubmission of
       supporting information, potentially delaying your application. Are you
       sure you want to proceed?
     </template>
-    <template #content v-else>
-      Any edits made to your application may result in a new assessment,
-      potentially delaying your application. Are you sure you want to proceed?
-    </template>
     <template #footer>
       <footer-buttons
-        :primaryLabel="isBeforeApplicationEdit ? 'Edit application' : 'Submit'"
+        primaryLabel="Edit application"
         secondaryLabel="No"
         @primaryClick="editApplication"
         @secondaryClick="dialogClosed"
@@ -26,13 +22,6 @@ import { useModalDialog } from "@/composables";
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  props: {
-    isBeforeApplicationEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
   components: {
     ModalDialogBase,
   },

diff --git a/sources/packages/web/src/views/student/StudentApplicationDetails.vue b/sources/packages/web/src/views/student/StudentApplicationDetails.vue
@@ -57,10 +57,7 @@
     <student-assessment-details :applicationId="id" v-if="showViewAssessment" />
   </student-page-container>
 
-  <confirm-edit-application
-    ref="editApplicationModal"
-    :is-before-application-edit="true"
-  />
+  <confirm-edit-application ref="editApplicationModal" />
   <cancel-application ref="cancelApplicationModal" />
 
   <!-- Submitted date footer. -->

diff --git a/sources/packages/web/src/views/student/StudentApplicationSummary.vue b/sources/packages/web/src/views/student/StudentApplicationSummary.vue
@@ -19,10 +19,7 @@
       </v-col>
     </v-row>
   </student-page-container>
-  <confirm-edit-application
-    ref="editApplicationModal"
-    :isBeforeApplicationEdit="true"
-  />
+  <confirm-edit-application ref="editApplicationModal" />
   <cancel-application ref="cancelApplicationModal" />
 </template>
 <script lang="ts">

diff --git a/sources/packages/web/src/views/student/financial-aid-application/FullTimeApplication.vue b/sources/packages/web/src/views/student/financial-aid-application/FullTimeApplication.vue
@@ -44,10 +44,43 @@
       :notDraft="notDraft"
     />
   </student-page-container>
-  <ConfirmEditApplication
+  <confirm-modal
+    title="Edit application"
     ref="editApplicationModal"
-    @confirmEditApplication="editApplication"
-  />
+    okLabel="Submit"
+    cancelLabel="No"
+    :disable-primary-button="!conditionsAccepted"
+    ><template #content>
+      <div class="m-4">
+        <v-checkbox
+          color="primary"
+          v-model="conditionsAccepted"
+          label="I acknowledge that by editing my application, I may be required to
+        resubmit previously approved exception requests. My institution may be
+        required to resubmit program information, and my parent or partner may be
+        required to resubmit supporting information."
+          hide-details="auto"
+        ></v-checkbox>
+      </div>
+      <div class="m-4">
+        <banner v-if="isStudyEndDateWithinDeadline" :type="BannerTypes.Warning">
+          <template #content
+            >Please note your application has now passed the six week deadline
+            for completed applications to be received by StudentAid BC. All
+            edits to your application will require additional review from
+            StudentAid BC to be considered for funding. Please see the following
+            link for information on the
+            <a
+              rel="noopener"
+              target="_blank"
+              href="https://studentaidbc.ca/sites/all/files/form-library/appeal_fundingafterenddate.pdf"
+              >funding after end date appeal</a
+            >.
+          </template>
+        </banner>
+      </div>
+    </template></confirm-modal
+  >
 </template>
 
 <script lang="ts">
@@ -66,21 +99,22 @@ import {
   FormIOCustomEventTypes,
   ApplicationStatus,
   ApiProcessError,
+  BannerTypes,
 } from "@/types";
 import { ApplicationDataAPIOutDTO } from "@/services/http/dto";
 import { StudentRoutesConst } from "@/constants/routes/RouteConstants";
-import ConfirmEditApplication from "@/components/students/modals/ConfirmEditApplication.vue";
 import {
   STUDY_DATE_OVERLAP_ERROR,
   ACTIVE_STUDENT_RESTRICTION,
 } from "@/constants";
 import StudentApplication from "@/components/common/StudentApplication.vue";
 import { AppConfigService } from "@/services/AppConfigService";
+import ConfirmModal from "@/components/common/modals/ConfirmModal.vue";
 
 export default defineComponent({
   components: {
     StudentApplication,
-    ConfirmEditApplication,
+    ConfirmModal,
   },
   props: {
     id: {
@@ -107,6 +141,7 @@ export default defineComponent({
     } = useFormatters();
     const router = useRouter();
     const initialData = ref({});
+    const isStudyEndDateWithinDeadline = ref(true);
     const formioUtils = useFormioUtils();
     const snackBar = useSnackBar();
     const savingDraft = ref(false);
@@ -118,6 +153,7 @@ export default defineComponent({
     const notDraft = ref(false);
     const existingApplication = ref({} as ApplicationDataAPIOutDTO);
     const editApplicationModal = ref({} as ModalDialog<boolean>);
+    const conditionsAccepted = ref(false);
 
     const checkProgramYear = async () => {
       // check program year, if not active allow only readonly mode with a snackBar
@@ -265,20 +301,28 @@ export default defineComponent({
     const confirmEditApplication = async () => {
       if (await editApplicationModal.value.showModal()) {
         editApplication();
+      } else {
+        conditionsAccepted.value = false;
       }
     };
 
     const wizardSubmit = async () => {
       if (
         existingApplication.value.applicationStatus !== ApplicationStatus.Draft
       ) {
+        isStudyEndDateWithinDeadline.value =
+          applicationWizard.submission.data
+            .studyEndDateBeforeSixWeeksFromToday ||
+          applicationWizard.submission.data
+            .selectedStudyEndDateBeforeSixWeeksFromToday;
         await confirmEditApplication();
       } else {
         applicationWizard.submit();
       }
     };
     return {
       initialData,
+      isStudyEndDateWithinDeadline,
       loadForm,
       wizardSubmit,
       saveDraft,
@@ -294,6 +338,8 @@ export default defineComponent({
       pageChanged,
       isFirstPage,
       isLastPage,
+      conditionsAccepted,
+      BannerTypes,
     };
   },
 });