From 2750b60a6495f92b89b6b9f58f8adec9ff03ceb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9verin=20Beauvais?=
 <severinbeauvais@users.noreply.github.com>
Date: Wed, 31 Jul 2024 15:08:10 -0700
Subject: [PATCH] - app version = 5.11.10 (#723)

- enable validation right away if filing is Change Requested
- added label props to effective data time component
- updated continuation authorization layout per designs
- now manage authorization files validity separately
- passed in custom values for radio button labels
- updated unit tests

Co-authored-by: Severin Beauvais <severin.beauvais@gov.bc.ca>
---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/App.vue                                   |   6 +
 .../ContinuationAuthorization.vue             | 273 +++++++++++-------
 src/components/common/EffectiveDateTime.vue   |   7 +-
 .../ContinuationInBusinessHome.vue            |  12 +-
 .../ContinuationInReviewConfirm.vue           |   2 +
 tests/unit/ContinuationAuthorization.spec.ts  |  60 +++-
 tests/unit/ContinuationInBusinessHome.spec.ts |   3 +-
 9 files changed, 231 insertions(+), 138 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f5e2634d1..1a0c74b0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "business-create-ui",
-  "version": "5.11.9",
+  "version": "5.11.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "business-create-ui",
-      "version": "5.11.9",
+      "version": "5.11.10",
       "dependencies": {
         "@babel/compat-data": "^7.21.5",
         "@bcrs-shared-components/approval-type": "1.0.19",
diff --git a/package.json b/package.json
index 36360c80d..8655fb043 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.11.9",
+  "version": "5.11.10",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",
diff --git a/src/App.vue b/src/App.vue
index 09cb126b2..8a84599e4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -297,6 +297,7 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
   @Getter(useStore) getEntityIdentifier!: string
   @Getter(useStore) getFilingData!: Array<FilingDataIF>
   @Getter(useStore) getFilingName!: FilingNames
+  @Getter(useStore) getFilingStatus!: FilingStatus
   @Getter(useStore) getFilingType!: FilingTypes
   @Getter(useStore) getHaveChanges!: boolean
   @Getter(useStore) getOrgInformation!: OrgInformationIF
@@ -1364,6 +1365,11 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
     ) {
       this.setShowErrors(true)
     }
+
+    // enable validation right away if user is changing a submitted filing
+    if (this.getFilingStatus === FilingStatus.CHANGE_REQUESTED) {
+      this.setShowErrors(true)
+    }
   }
 
   /** Whether the old webchat should be enabled. */
diff --git a/src/components/ContinuationIn/ContinuationAuthorization.vue b/src/components/ContinuationIn/ContinuationAuthorization.vue
index 1d63952ec..5697df250 100644
--- a/src/components/ContinuationIn/ContinuationAuthorization.vue
+++ b/src/components/ContinuationIn/ContinuationAuthorization.vue
@@ -7,121 +7,160 @@
     v-if="authorization"
     id="continuation-authorization"
   >
-    <v-form
-      ref="formRef"
-      lazy-validation
-      @submit.prevent
+    <v-card
+      flat
+      class="py-8 px-6"
+      :class="{ 'invalid-section': getShowErrors && !authorizationDateValid }"
     >
-      <!-- Authorization Date -->
+      <v-form
+        ref="formRef"
+        lazy-validation
+        @submit.prevent
+      >
+        <!-- Authorization Date -->
+        <v-row no-gutters>
+          <v-col
+            cols="12"
+            sm="3"
+          >
+            <label>Authorization Date</label>
+          </v-col>
+
+          <v-col
+            cols="12"
+            sm="9"
+            class="pl-8"
+          >
+            <DatePickerShared
+              id="authorization-date"
+              ref="authorizationDateRef"
+              title="Authorization Date"
+              :nudgeRight="40"
+              :nudgeTop="85"
+              hint="The date the authorization was issued"
+              :persistentHint="true"
+              :initialValue="authorization.date"
+              :inputRules="getShowErrors ? authorizationDateRules : []"
+              :minDate="minAuthorizationDate"
+              :maxDate="getCurrentDate"
+              @emitDateSync="authorization.date = $event"
+            />
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card>
+
+    <v-card
+      flat
+      class="mt-6 py-8 px-6"
+      :class="{ 'invalid-section': getShowErrors && !authorizationFilesValid }"
+    >
+      <!-- Upload File -->
       <v-row no-gutters>
         <v-col
           cols="12"
           sm="3"
         >
-          <label>Authorization Date</label>
+          <label>Upload File</label>
         </v-col>
 
         <v-col
           cols="12"
           sm="9"
-          class="pl-8"
         >
-          <DatePickerShared
-            id="authorization-date"
-            ref="authorizationDateRef"
-            title="Authorization Date"
-            :nudgeRight="40"
-            :nudgeTop="85"
-            hint="The date the authorization was issued"
-            :persistentHint="true"
-            :initialValue="authorization.date"
-            :inputRules="getShowErrors ? authorizationDateRules : []"
-            :minDate="minAuthorizationDate"
-            :maxDate="getCurrentDate"
-            @emitDateSync="authorization.date = $event"
-          />
+          <p>
+            Upload documents that support proof of authorization from your home jursidiction.
+          </p>
+
+          <ul>
+            <li>
+              Use a white background and a legible font with contrasting font colour
+            </li>
+            <li>
+              PDF file type (maximum 30 MB file size)
+            </li>
+            <li>
+              Maximum 5 files
+            </li>
+          </ul>
         </v-col>
       </v-row>
-    </v-form>
 
-    <v-divider class="mt-4 mb-8" />
+      <!-- file upload components -->
+      <v-row
+        v-for="(num, index) in numUploads"
+        :key="authorization.files[index]?.fileKey"
+        :class="(index === 0) ? 'mt-6' : 'mt-4'"
+        class="upload-file-row mb-n2"
+        no-gutters
+      >
+        <v-col
+          cols="12"
+          sm="3"
+        >
+          <!-- empty column -->
+        </v-col>
 
-    <MessageBox
-      v-if="isShowMessageBox"
-      color="red"
-    >
-      <v-icon color="error">
-        mdi-alert
-      </v-icon>
+        <v-col
+          cols="12"
+          sm="9"
+        >
+          <FileUploadPreview
+            inputFileLabel="Continuation authorization"
+            :maxSize="MAX_FILE_SIZE"
+            :pdfPageSize="PdfPageSize.LETTER_SIZE"
+            :hint="authorization.files[index]?.file ? 'File uploaded' : undefined"
+            :inputFile="authorization.files[index]?.file"
+            :showErrors="getShowErrors"
+            :customErrorMessage.sync="customErrorMessage[index]"
+            :isRequired="getShowErrors && (index === 0)"
+            @fileValidity="onFileValidity($event)"
+            @fileSelected="onFileSelected(index, $event)"
+          />
+        </v-col>
+      </v-row>
 
-      <label
-        class="font-16"
-        for="textarea-message"
+      <!-- Change Requested message box -->
+      <v-row
+        v-if="isShowMessageBox"
+        class="mt-6"
+        no-gutters
       >
-        Change Requested:
-      </label>
-
-      <textarea
-        id="textarea-message"
-        v-auto-resize
-        class="font-16 font-italic ml-8"
-        readonly
-        rows="1"
-        :value="latestReviewComment"
-      />
-    </MessageBox>
-
-    <header
-      :class="{ 'mt-6': isShowMessageBox }"
-    >
-      <p>
-        Upload documents that support proof of authorization from your home jursidiction.
-      </p>
-
-      <ul>
-        <li>
-          Use a white background and a legible font with contrasting font colour
-        </li>
-        <li>
-          PDF file type (maximum 30 MB file size)
-        </li>
-      </ul>
-    </header>
-
-    <div class="pt-4" />
-
-    <!-- file upload components -->
-    <v-row
-      v-for="(num, index) in numUploads"
-      :key="authorization.files[index]?.fileKey"
-      class="upload-file-row mt-4 mb-n2"
-      no-gutters
-    >
-      <v-col
-        cols="12"
-        sm="3"
-      >
-        <label v-if="index === 0">Upload File (Maximum 5)</label>
-      </v-col>
+        <v-col
+          cols="12"
+          sm="3"
+        >
+          <!-- empty column -->
+        </v-col>
 
-      <v-col
-        cols="12"
-        sm="9"
-      >
-        <FileUploadPreview
-          inputFileLabel="Continuation authorization"
-          :maxSize="MAX_FILE_SIZE"
-          :pdfPageSize="PdfPageSize.LETTER_SIZE"
-          :hint="authorization.files[index]?.file ? 'File uploaded' : undefined"
-          :inputFile="authorization.files[index]?.file"
-          :showErrors="getShowErrors"
-          :customErrorMessage.sync="customErrorMessage[index]"
-          :isRequired="getShowErrors && (index === 0)"
-          @fileValidity="onFileValidity($event)"
-          @fileSelected="onFileSelected(index, $event)"
-        />
-      </v-col>
-    </v-row>
+        <v-col
+          cols="12"
+          sm="9"
+        >
+          <MessageBox color="red">
+            <v-icon color="error">
+              mdi-alert
+            </v-icon>
+
+            <label
+              class="font-16"
+              for="textarea-message"
+            >
+              Change Requested:
+            </label>
+
+            <textarea
+              id="textarea-message"
+              v-auto-resize
+              class="font-16 font-italic ml-8"
+              readonly
+              rows="1"
+              :value="latestReviewComment"
+            />
+          </MessageBox>
+        </v-col>
+      </v-row>
+    </v-card>
   </div>
 </template>
 
@@ -172,6 +211,7 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
   authorizationDateValid = false
   fileValidity = false
   customErrorMessage = ['', '', '', '', ''] // max 5 files
+  isFileAdded = false
 
   /**
    * The minimum date for the Authorization Date:
@@ -201,16 +241,19 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
     ]
   }
 
+  /** Whether filing status is Change Requested. */
+  get isStatusChangeRequested (): boolean {
+    return (this.getFilingStatus === FilingStatus.CHANGE_REQUESTED)
+  }
+
   /** The latest review comment. Only used when filing is in Change Requested status. */
   get latestReviewComment (): string {
     return this.getExistingBusinessInfo.latestReviewComment
   }
 
+  /** Whether to show the message box. */
   get isShowMessageBox (): boolean {
-    return (
-      (this.getFilingStatus === FilingStatus.CHANGE_REQUESTED) &&
-      !!this.latestReviewComment
-    )
+    return (this.isStatusChangeRequested && !!this.latestReviewComment)
   }
 
   /** The number of file upload components to display (max 5). */
@@ -218,6 +261,17 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
     return Math.min((this.authorization.files.length + 1), 5)
   }
 
+  /** Whether authorization files section is valid. */
+  get authorizationFilesValid (): boolean {
+    // must have at least one file uploaded
+    // AND this must a draft filing or if it's a Change Requested filing
+    // then a new file must have been added
+    return (
+      (this.authorization?.files.length >= 1) &&
+      (!this.isStatusChangeRequested || this.isFileAdded)
+    )
+  }
+
   /** Called when this component is mounted. */
   mounted (): void {
     this.authorization = this.getContinuationAuthorization ||
@@ -275,6 +329,8 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
         fileKey: psu.key,
         fileName: file.name
       })
+
+      this.isFileAdded = true
     } else {
       // delete file from Minio; ignore errors
       await this.deleteDocument(this.authorization.files[index].fileKey).catch(() => null)
@@ -296,19 +352,14 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
     }
   }
 
-  @Watch('authorization', { deep: true })
+  @Watch('authorizationFilesValid') // re-validate when the Authorization Files validity changes
   @Watch('authorizationDateValid') // re-validate when the Authorization Date validity changes
   @Emit('valid')
   private onComponentValid (): boolean {
     // sync local object to the store
     this.setContinuationAuthorization(this.authorization)
 
-    // this component is valid if we have the valid authorization date
-    // and at least one file uploaded
-    return (
-      this.authorizationDateValid &&
-      (this.authorization.files.length >= 1)
-    )
+    return (this.authorizationDateValid && this.authorizationFilesValid)
   }
 }
 </script>
@@ -316,10 +367,8 @@ export default class ExtraproRegistration extends Mixins(DocumentMixin) {
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 
-header {
-  p, li {
-    color: $gray7;
-  }
+p, li {
+  color: $gray7;
 }
 
 // set style for all labels
@@ -353,6 +402,8 @@ textarea {
   // FUTURE: use field-sizing instead of "v-auto-resize" directive
   // ref: https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
   // field-sizing: content;
+  // unset height as it's sometimes 0 initially
+  height: unset !important;
 }
 
 // align the checkbox with its label
diff --git a/src/components/common/EffectiveDateTime.vue b/src/components/common/EffectiveDateTime.vue
index ebe880597..b6dacb2cb 100644
--- a/src/components/common/EffectiveDateTime.vue
+++ b/src/components/common/EffectiveDateTime.vue
@@ -22,11 +22,11 @@
           class="radio-group"
         >
           <v-radio
-            label="Immediate (Upon Filing)"
+            :label="immediateLabel"
             value="isImmediate"
           />
           <v-radio
-            label="A date / time in the future"
+            :label="futureEffectiveLabel"
             value="isFutureEffective"
           />
         </v-radio-group>
@@ -164,8 +164,9 @@ export default class EffectiveDateTime extends Mixins(DateMixin) {
   }
 
   @Prop({ required: true }) readonly effectiveDateTime!: EffectiveDateTimeIF
-
   @Prop({ default: 'Incorporation Date and Time' }) readonly label!: string
+  @Prop({ default: 'Immediate (Upon Filing)' }) readonly immediateLabel!: string
+  @Prop({ default: 'A date / time in the future' }) readonly futureEffectiveLabel!: string
 
   // Local properties
   isImmediate = false
diff --git a/src/views/ContinuationIn/ContinuationInBusinessHome.vue b/src/views/ContinuationIn/ContinuationInBusinessHome.vue
index c7c38e836..78ba847f0 100644
--- a/src/views/ContinuationIn/ContinuationInBusinessHome.vue
+++ b/src/views/ContinuationIn/ContinuationInBusinessHome.vue
@@ -45,15 +45,9 @@
         </p>
       </header>
 
-      <v-card
-        flat
-        class="py-8 px-6"
-        :class="{ 'invalid-section': getShowErrors && !continuationAuthorizationValid }"
-      >
-        <ContinuationAuthorization
-          @valid="continuationAuthorizationValid = $event"
-        />
-      </v-card>
+      <ContinuationAuthorization
+        @valid="continuationAuthorizationValid = $event"
+      />
     </section>
   </div>
 </template>
diff --git a/src/views/ContinuationIn/ContinuationInReviewConfirm.vue b/src/views/ContinuationIn/ContinuationInReviewConfirm.vue
index 137a664c6..1d0eaa744 100644
--- a/src/views/ContinuationIn/ContinuationInReviewConfirm.vue
+++ b/src/views/ContinuationIn/ContinuationInReviewConfirm.vue
@@ -92,6 +92,8 @@
         :class="{ 'invalid-section': isEffectiveDateTimeInvalid }"
         :effectiveDateTime="getEffectiveDateTime"
         label="Incorporation Date and Time"
+        immediateLabel="Immediately upon approval"
+        futureEffectiveLabel="A date / time in the future (subject to approval)"
         @valid="setEffectiveDateTimeValid($event)"
         @effectiveDate="setEffectiveDate($event)"
         @isFutureEffective="setIsFutureEffective($event)"
diff --git a/tests/unit/ContinuationAuthorization.spec.ts b/tests/unit/ContinuationAuthorization.spec.ts
index 87be57185..d5437f817 100644
--- a/tests/unit/ContinuationAuthorization.spec.ts
+++ b/tests/unit/ContinuationAuthorization.spec.ts
@@ -3,9 +3,11 @@ import { wrapperFactory } from '../vitest-wrapper-factory'
 import ContinuationAuthorization from '@/components/ContinuationIn/ContinuationAuthorization.vue'
 import FileUploadPreview from '@/components/common/FileUploadPreview.vue'
 import { DatePicker as DatePickerShared } from '@bcrs-shared-components/date-picker'
+import { FilingStatus } from '@/enums'
+import MessageBox from '@/components/common/MessageBox.vue'
 
 describe('Continuation Authorization component', () => {
-  it('renders the component correctly', async () => {
+  it('renders the component correctly - draft filing', async () => {
     const wrapper = wrapperFactory(ContinuationAuthorization)
     await Vue.nextTick()
 
@@ -14,17 +16,55 @@ describe('Continuation Authorization component', () => {
     expect(wrapper.find('#continuation-authorization').exists()).toBe(true)
 
     // spot check some content (structure / text)
-    const formRows = wrapper.findAll('form > .row')
-    expect(formRows.at(0).find('.col-sm-3 label').text()).toBe('Authorization Date')
-    expect(formRows.at(0).find('.col-sm-9').findComponent(DatePickerShared).exists()).toBe(true)
+    const firstVcard = wrapper.findAll('.v-card').at(0)
+    expect(firstVcard.find('form').exists()).toBe(true)
+    expect(firstVcard.find('form > .row').exists()).toBe(true)
+    expect(firstVcard.find('form > .row > .col-sm-3 > label').text()).toBe('Authorization Date')
+    expect(firstVcard.find('form > .row > .col-sm-9').findComponent(DatePickerShared).exists()).toBe(true)
 
-    expect(wrapper.find('header').exists()).toBe(true)
-    expect(wrapper.find('header p').text()).toContain('Upload documents that support proof of')
-    expect(wrapper.findAll('header li').at(0).text()).toContain('Use a white background')
-    expect(wrapper.findAll('header li').at(1).text()).toContain('PDF file type')
+    const secondVcard = wrapper.findAll('.v-card').at(1)
+    const rows = secondVcard.findAll('.row')
+    expect(rows.length).toBe(2)
 
-    expect(wrapper.find('.upload-file-row .col-sm-3 label').text()).toBe('Upload File (Maximum 5)')
-    expect(wrapper.find('.upload-file-row .col-sm-9').findComponent(FileUploadPreview).exists()).toBe(true)
+    expect(rows.at(0).find('.col-sm-3 > label').text()).toBe('Upload File')
+    expect(rows.at(0).find('.col-sm-9 > p').text()).toContain('Upload documents that support')
+    expect(rows.at(0).find('.col-sm-9 > ul').text()).toContain('Use a white background')
+    expect(rows.at(0).find('.col-sm-9 > ul').text()).toContain('PDF file type')
+    expect(rows.at(0).find('.col-sm-9 > ul').text()).toContain('Maximum 5 files')
+
+    expect(rows.at(1).classes()).toContain('upload-file-row')
+    expect(rows.at(1).find('.col-sm-9').findComponent(FileUploadPreview).exists()).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('renders the component correctly - change-requested filing', async () => {
+    const wrapper = wrapperFactory(
+      ContinuationAuthorization,
+      null,
+      {
+        tombstone: { filingStatus: FilingStatus.CHANGE_REQUESTED },
+        continuationIn: { existingBusinessInfo: { latestReviewComment: 'comment' } }
+      }
+    )
+    await Vue.nextTick()
+
+    // verify main component exists
+    expect(wrapper.findComponent(ContinuationAuthorization).exists()).toBe(true)
+    expect(wrapper.find('#continuation-authorization').exists()).toBe(true)
+
+    // spot check some content (structure / text)
+    const firstVcard = wrapper.findAll('.v-card').at(0)
+    expect(firstVcard.find('form').exists()).toBe(true)
+    expect(firstVcard.find('form > .row').exists()).toBe(true)
+    expect(firstVcard.find('form > .row > .col-sm-3 > label').text()).toBe('Authorization Date')
+    expect(firstVcard.find('form > .row > .col-sm-9').findComponent(DatePickerShared).exists()).toBe(true)
+
+    const secondVcard = wrapper.findAll('.v-card').at(1)
+    const rows = secondVcard.findAll('.row')
+    expect(rows.length).toBe(3)
+
+    expect(rows.at(2).find('.col-sm-9').findComponent(MessageBox).exists()).toBe(true)
 
     wrapper.destroy()
   })
diff --git a/tests/unit/ContinuationInBusinessHome.spec.ts b/tests/unit/ContinuationInBusinessHome.spec.ts
index ef6dace06..5280e1d0f 100644
--- a/tests/unit/ContinuationInBusinessHome.spec.ts
+++ b/tests/unit/ContinuationInBusinessHome.spec.ts
@@ -23,8 +23,7 @@ describe('Continuation In Business Home component', () => {
     expect(secondSection.find('header').exists()).toBe(true)
     expect(secondSection.find('header h2').text()).toBe('Continuation Authorization')
     expect(secondSection.find('header p').text()).toContain('You must provide proof')
-    expect(secondSection.find('.v-card').exists()).toBe(true)
-    expect(secondSection.find('.v-card #continuation-authorization').exists()).toBe(true)
+    expect(secondSection.find('#continuation-authorization').exists()).toBe(true)
 
     wrapper.destroy()
   })