ccfri-3756 - add relock AFS to submit appication payload and more code refactor

Author: vietle-cgi

frontend/src/components/SummaryDeclaration.vue

@@ -441,9 +441,11 @@ import { useAppStore } from '@/store/app.js';
 import { useOrganizationStore } from '@/store/ccof/organization.js';
 import { useSummaryDeclarationStore } from '@/store/summaryDeclaration.js';
 import { useApplicationStore } from '@/store/application.js';
+import { useCcfriAppStore } from '@/store/ccfriApp.js';
 import { useReportChangesStore } from '@/store/reportChanges.js';
 
 import {
+  AFS_STATUSES,
   PATHS,
   CHANGE_REQUEST_TYPES,
   PROGRAM_YEAR_LANGUAGE_TYPES,
@@ -529,6 +531,7 @@ export default {
       'isEceweComplete',
       'applicationMap',
     ]),
+    ...mapState(useCcfriAppStore, ['approvableFeeSchedules']),
     ...mapState(useReportChangesStore, ['changeRequestStore', 'isCREceweComplete', 'isCRLicenseComplete']),
     languageYearLabel() {
       return this.getLanguageYearLabel;
@@ -809,14 +812,22 @@ export default {
           unlockCcfri: facility.unlockCcfri,
           unlockNmf: facility.unlockNmf,
           unlockRfi: facility.unlockRfi,
+          unlockAfs: facility.unlockAfs,
         };
         // Create payload with only unlock propteries set to 1.
-
         unlockPayload = Object.fromEntries(Object.entries(unlockPayload).filter(([_, v]) => v == 1));
         // Update payload unlock properties from 1 to 0.
         Object.keys(unlockPayload).forEach((key) => {
           unlockPayload[key] = '0';
         });
+
+        const afs = this.approvableFeeSchedules?.find(
+          (item) => item.ccfriApplicationId === facility.ccfriApplicationId,
+        );
+        if (afs?.afsStatus === AFS_STATUSES.UPLOAD_DOCUMENTS) {
+          unlockPayload.enableAfs = '0';
+        }
+
         if (Object.keys(unlockPayload).length > 0) {
           ccrfiRelockPayload.push({ ...applicationIdPayload, ...unlockPayload });
         }

frontend/src/components/ccfriApplication/AFS/AfsDecisionCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-card elevation="2" class="pa-4">
+    <div class="mb-2">Please select one of the following options regarding the approvable fee schedule:</div>
+    <v-radio-group v-model="updatedValue" :rules="rules.required" :disabled="readonly" color="primary">
+      <v-radio label="I accept" :value="AFS_STATUSES.ACCEPT" />
+      <div v-if="updatedValue === AFS_STATUSES.ACCEPT" class="text-body-2 pl-2">
+        After submission please wait to receive notification confirming your approval to participate in CCFRI.
+      </div>
+      <v-radio label="I want to upload supporting documents" :value="AFS_STATUSES.UPLOAD_DOCUMENTS" />
+      <v-radio label="I decline" :value="AFS_STATUSES.DECLINE" />
+      <div v-if="updatedValue === AFS_STATUSES.DECLINE" class="text-body-2 pl-2">
+        After submission please wait to receive confirmation from the ministry on the results of your CCFRI application.
+      </div>
+    </v-radio-group>
+  </v-card>
+</template>
+
+<script>
+import { AFS_STATUSES } from '@/utils/constants.js';
+import rules from '@/utils/rules.js';
+
+export default {
+  name: 'AfsDecisionCard',
+  props: {
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Number,
+      default: null,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      updatedValue: null,
+    };
+  },
+  watch: {
+    modelValue: {
+      handler(value) {
+        this.updatedValue = value;
+      },
+    },
+    updatedValue: {
+      handler(value) {
+        this.$emit('update:modelValue', value);
+      },
+    },
+  },
+  created() {
+    this.updatedValue = this.modelValue;
+    this.AFS_STATUSES = AFS_STATUSES;
+    this.rules = rules;
+  },
+};
+</script>
+<style scoped>
+:deep(.v-label) {
+  opacity: 1;
+}
+</style>

frontend/src/components/ccfriApplication/AFS/ApprovableFeeSchedule.vue

@@ -67,29 +67,13 @@
           </div>
           <v-skeleton-loader :loading="isEmpty(afs)" type="table-tbody">
             <v-container fluid class="pa-0">
-              <v-card elevation="2" class="pa-4">
-                <div class="mb-2">
-                  Please select one of the following options regarding the approvable fee schedule:
-                </div>
-                <v-radio-group v-model="afs.afsStatus" :rules="rules.required" :disabled="isReadOnly" color="primary">
-                  <v-radio label="I accept" :value="AFS_STATUSES.ACCEPT" />
-                  <div v-if="afs?.afsStatus === AFS_STATUSES.ACCEPT" class="text-body-2 pl-2">
-                    After submission please wait to receive notification confirming your approval to participate in
-                    CCFRI.
-                  </div>
-                  <v-radio label="I want to upload supporting documents" :value="AFS_STATUSES.UPLOAD_DOCUMENTS" />
-                  <v-radio label="I decline" :value="AFS_STATUSES.DECLINE" />
-                  <div v-if="afs?.afsStatus === AFS_STATUSES.DECLINE" class="text-body-2 pl-2">
-                    After submission please wait to receive confirmation from the ministry on the results of your CCFRI
-                    application.
-                  </div>
-                </v-radio-group>
-              </v-card>
+              <AfsDecisionCard v-model="afs.afsStatus" />
               <AppDocumentUpload
                 v-if="afs?.afsStatus === AFS_STATUSES.UPLOAD_DOCUMENTS"
                 :loading="isLoading"
                 :uploaded-documents="filteredUploadedDocuments"
                 :document-type="DOCUMENT_TYPES.APPLICATION_AFS"
+                :show-error-message="showErrorMessage && !isSupportingDocumentsUploaded"
                 title="Upload Supporting Documents (for example receipts, quotes, invoices and/or budget/finance documents here)."
                 class="mt-8"
                 @update-documents-to-upload="updateDocumentsToUpload"
@@ -118,6 +102,7 @@
 import { mapState, mapActions } from 'pinia';
 import { isEmpty, cloneDeep } from 'lodash';
 
+import AfsDecisionCard from '@/components/ccfriApplication/AFS/AfsDecisionCard.vue';
 import ApprovableParentFeesCards from '@/components/ccfriApplication/AFS/ApprovableParentFeesCards.vue';
 import FacilityHeader from '@/components/guiComponents/FacilityHeader.vue';
 import AppDocumentUpload from '@/components/util/AppDocumentUpload.vue';
@@ -136,33 +121,20 @@ import rules from '@/utils/rules.js';
 
 export default {
   name: 'ApprovableFeeSchedule',
-  components: { AppDocumentUpload, ApprovableParentFeesCards, FacilityHeader, NavButton },
+  components: { AppDocumentUpload, AfsDecisionCard, ApprovableParentFeesCards, FacilityHeader, NavButton },
   mixins: [alertMixin],
   async beforeRouteLeave(_to, _from, next) {
     await this.save(false);
     next();
   },
-  props: {
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    ccfriApplicationId: {
-      type: String,
-      default: '',
-    },
-    facilityId: {
-      type: String,
-      default: '',
-    },
-  },
   data() {
     return {
       afs: {},
       documentsToUpload: [],
       uploadedDocumentsToDelete: [],
       isValidForm: false,
       processing: false,
+      showErrorMessage: false,
     };
   },
   computed: {
@@ -177,9 +149,7 @@ export default {
     ...mapState(useCcfriAppStore, ['approvableFeeSchedules']),
     ...mapState(useNavBarStore, ['navBarList', 'nextPath', 'previousPath']),
     currentFacility() {
-      return this.facilityId
-        ? this.navBarList?.find((el) => el.facilityId === this.facilityId)
-        : this.navBarList?.find((el) => el.ccfriApplicationId === this.$route.params.urlGuid);
+      return this.navBarList?.find((el) => el.ccfriApplicationId === this.$route.params.urlGuid);
     },
     filteredUploadedDocuments() {
       return this.applicationUploadedDocuments?.filter(
@@ -193,7 +163,7 @@ export default {
     },
     // Note: CCFRI-3752 - AFS for change request is not in scope at this time.
     isReadOnly() {
-      return this.readonly || this.isLoading || (this.isApplicationSubmitted && !this.currentFacility?.unlockAfs);
+      return this.isLoading || (this.isApplicationSubmitted && !this.currentFacility?.unlockAfs);
     },
     isSupportingDocumentsUploaded() {
       return this.filteredUploadedDocuments?.length + this.documentsToUpload?.length > 0;
@@ -214,6 +184,7 @@ export default {
     '$route.params.urlGuid': {
       handler() {
         this.reloadAfs();
+        this.$refs.form?.validate();
       },
     },
   },
@@ -230,15 +201,14 @@ export default {
     ...mapActions(useSupportingDocumentUploadStore, ['saveUploadedDocuments']),
     isEmpty,
     reloadAfs() {
-      this.afs = this.ccfriApplicationId
-        ? this.approvableFeeSchedules?.find((item) => item.ccfriApplicationId === this.ccfriApplicationId)
-        : this.approvableFeeSchedules?.find((item) => item.ccfriApplicationId === this.$route.params.urlGuid);
+      this.afs = this.approvableFeeSchedules?.find((item) => item.ccfriApplicationId === this.$route.params.urlGuid);
     },
     next() {
       this.$router.push(this.nextPath);
     },
     validateForm() {
       this.$refs.form?.validate();
+      this.showErrorMessage = true;
     },
     back() {
       this.$router.push(this.previousPath);
@@ -251,9 +221,11 @@ export default {
         const payload = {
           afsStatus: this.afs?.afsStatus,
         };
-        await this.updateApplicationCCFRI(this.$route.params.urlGuid, payload);
-        await this.processDocumentsToUpload();
-        await DocumentService.deleteDocuments(this.uploadedDocumentsToDelete);
+        await Promise.all([
+          this.updateApplicationCCFRI(this.$route.params.urlGuid, payload),
+          this.processDocumentsToUpload(),
+          DocumentService.deleteDocuments(this.uploadedDocumentsToDelete),
+        ]);
         await this.getApplicationUploadedDocuments();
         this.setNavBarAfsComplete({ ccfriId: this.$route.params.urlGuid, complete: this.isFormComplete });
         if (showMessage) {