- app version = 5.12.1 (#742)

- changed page blurb to 18px - deleted authorization date entry from AuthorizationProof component - misc text updates and layout improvements - renamed misc properties (ie, identifier -> registrationNumber and "home" -> "previous") - moved business number entry above date of incorporation - updated misc hints - moved extrapro data from summary component into new summary component - updated UploadAffidavit invalid logic and styling - updated UploadAffidavit by adding button and hiding FileUploadPreview (same as auth files) - fixed misc icon alignments - updated Business Contact Info label - moved common method to document mixin - more text updates - added/updated unit tests Co-authored-by: Severin Beauvais <[email protected]>
bcgov · Oct 4, 2024 · 3eb9e4c · 3eb9e4c
1 parent b841af3
commit 3eb9e4c
Show file tree

Hide file tree

Showing 28 changed files with 615 additions and 593 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.12.0",
+  "version": "5.12.1",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",

diff --git a/src/App.vue b/src/App.vue
@@ -168,7 +168,7 @@
 
               <p
                 v-if="getPageBlurb"
-                class="mt-4"
+                class="mt-4 font-18"
               >
                 {{ getPageBlurb }}
               </p>

diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss
@@ -249,6 +249,10 @@ p {
   font-size: $px-16;
 }
 
+.font-18 {
+  font-size: $px-18;
+}
+
 .error-text {
   color: $app-red !important;
 }

diff --git a/src/components/ContinuationIn/AuthorizationProof.vue b/src/components/ContinuationIn/AuthorizationProof.vue
@@ -1,68 +1,30 @@
 <template>
-  <!--
-    Don't render this component until authorization object is initialized, so that we mount
-    FileUploadPreview with existing files, because its "inputFile" prop is not reactive.
-  -->
+  <!-- Don't render this component until authorization object is initialized. -->
   <div
     v-if="authorization"
     id="authorization-proof"
   >
-    <!-- Authorization Date -->
+    <!-- Upload Files -->
     <v-card
       flat
       class="py-8 px-6"
-      :class="{ 'invalid-section': getShowErrors && !authorizationDateValid }"
-    >
-      <v-row no-gutters>
-        <v-col
-          cols="12"
-          sm="3"
-        >
-          <label>Authorization Date</label>
-        </v-col>
-
-        <v-col
-          cols="12"
-          sm="9"
-        >
-          <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-card>
-
-    <!-- Upload Documents -->
-    <v-card
-      flat
-      class="mt-6 py-8 px-6"
       :class="{ 'invalid-section': getShowErrors && !authorizationFilesValid }"
     >
       <v-row no-gutters>
         <v-col
           cols="12"
           sm="3"
+          class="pr-4"
         >
-          <label>Upload Documents</label>
+          <label>Upload File</label>
         </v-col>
 
         <v-col
           cols="12"
           sm="9"
         >
           <p :class="{ 'error-text': getShowErrors && !authorizationFilesValid }">
-            Upload one or more documents that show proof of authorization to continue out of your
+            Upload one or more files that show proof of authorization to continue out of your
             previous jursidiction.
           </p>
 
@@ -100,7 +62,7 @@
 
           <FileUploadPreview
             ref="fileUploadPreview"
-            class="d-none mt-6"
+            class="d-none"
             :maxSize="MAX_FILE_SIZE"
             :customErrorMessage.sync="customErrorMessage"
             :isRequired="false"
@@ -111,9 +73,10 @@
       </v-row>
 
       <v-row
-        v-for="(num, index) in numFiles"
-        :key="authorization.files[index].fileKey"
-        class="upload-file-row mt-5 mb-n2"
+        v-for="(document, index) in authorization.files"
+        :key="document.fileKey"
+        class="upload-file-row mt-5"
+        :class="{ 'mb-n2': (index < numFiles) }"
         no-gutters
       >
         <v-col
@@ -126,12 +89,12 @@
         <v-col
           cols="12"
           sm="9"
-          class="dk-gray-background rounded d-flex justify-space-between px-2 py-1"
+          class="dk-gray-background rounded d-flex justify-space-between align-center px-2 py-2"
         >
-          <div class="document-details">
-            <v-icon>mdi-paperclip</v-icon>
-            <span class="pl-2">{{ authorization.files[index]?.file.name }}</span>
-            <span class="pl-2">({{ friendlyFileSize(authorization.files[index]?.file.size) }})</span>
+          <v-icon>mdi-paperclip</v-icon>
+          <div class="document-details mr-auto pl-2">
+            {{ document.file.name }}
+            <span class="pl-2">({{ friendlyFileSize(document.file) }})</span>
           </div>
           <v-btn
             class="remove-document-button"
@@ -156,6 +119,7 @@
         <v-col
           cols="12"
           sm="3"
+          class="pr-4"
         >
           <!-- empty column -->
         </v-col>
@@ -202,15 +166,12 @@ import { useStore } from '@/store/store'
 import { DocumentMixin } from '@/mixins'
 import { AuthorizationProofIF, ExistingBusinessInfoIF, PresignedUrlIF } from '@/interfaces'
 import { FilingStatus } from '@/enums'
-import { VuetifyRuleFunction } from '@/types'
 import FileUploadPreview from '@/components/common/FileUploadPreview.vue'
-import { DatePicker as DatePickerShared } from '@bcrs-shared-components/date-picker'
 import AutoResize from 'vue-auto-resize'
 import MessageBox from '@/components/common/MessageBox.vue'
 
 @Component({
   components: {
-    DatePickerShared,
     FileUploadPreview,
     MessageBox
   },
@@ -221,12 +182,10 @@ import MessageBox from '@/components/common/MessageBox.vue'
 export default class AuthorizationProof extends Mixins(DocumentMixin) {
   // Refs
   $refs!: {
-    authorizationDateRef: DatePickerShared,
     fileUploadPreview: FileUploadPreview
   }
 
   @Getter(useStore) getContinuationInAuthorizationProof!: AuthorizationProofIF
-  @Getter(useStore) getCurrentDate!: string
   @Getter(useStore) getExistingBusinessInfo!: ExistingBusinessInfoIF
   @Getter(useStore) getFilingStatus!: FilingStatus
   @Getter(useStore) getKeycloakGuid!: string
@@ -236,40 +195,11 @@ export default class AuthorizationProof extends Mixins(DocumentMixin) {
 
   // Local properties
   authorization = null as AuthorizationProofIF
-  authorizationDateValid = false
   fileValidity = false
   customErrorMessage = ''
   isFileAdded = false
   isDocumentLoading = false
 
-  /**
-   * The minimum date for the Authorization Date:
-   * - the BC Founding Date (if it exists, ie, expro business)
-   * - else the Home Jurisdiction Incorporation Date (ie, manual entry)
-   * - else fall back to null (not undefined)
-   */
-  get minAuthorizationDate (): string {
-    return (
-      this.getExistingBusinessInfo.bcFoundingDate ||
-      this.getExistingBusinessInfo.homeIncorporationDate ||
-      null
-    )
-  }
-
-  get authorizationDateRules (): Array<VuetifyRuleFunction> {
-    const bcFoundingDate = this.getExistingBusinessInfo.bcFoundingDate
-    const homeIncorporationDate = this.getExistingBusinessInfo.homeIncorporationDate
-
-    return [
-      (v) => !!v || 'Authorization Date is required',
-      () => (this.authorization.date <= this.getCurrentDate) || 'Authorization Date cannot be in the future',
-      () => (!bcFoundingDate || (this.authorization.date >= bcFoundingDate)) ||
-        'Authorization Date cannot be before Date of Registration in B.C.',
-      () => (!homeIncorporationDate || (this.authorization.date >= homeIncorporationDate)) ||
-        'Authorization Date cannot be before Date of Incorporation in Home Jurisdiction'
-    ]
-  }
-
   /** Whether filing status is Change Requested. */
   get isStatusChangeRequested (): boolean {
     return (this.getFilingStatus === FilingStatus.CHANGE_REQUESTED)
@@ -302,6 +232,7 @@ export default class AuthorizationProof extends Mixins(DocumentMixin) {
 
   /** Called when this component is mounted. */
   mounted (): void {
+    // initialize the authorization object if needed
     this.authorization = this.getContinuationInAuthorizationProof ||
       { files: [], date: null } as AuthorizationProofIF
   }
@@ -311,15 +242,6 @@ export default class AuthorizationProof extends Mixins(DocumentMixin) {
     this.$refs.fileUploadPreview.clickFileInput()
   }
 
-  /** Converts a file size to a string in MB, KB or bytes. */
-  friendlyFileSize (size: number): string {
-    const sizeKB = size / 1024
-    const sizeMB = sizeKB / 1024
-    if (sizeMB > 1) return `${sizeMB.toFixed(1)} MB`
-    if (sizeKB > 1) return `${sizeKB.toFixed(0)} KB`
-    return `${size} bytes`
-  }
-
   /**
    * Called when FileUploadPreview tells us whether a file is valid.
    * This is called right before the File Selected event.
@@ -351,7 +273,7 @@ export default class AuthorizationProof extends Mixins(DocumentMixin) {
 
       // verify file name encoding
       if (!isValidLatin1(file.name)) {
-        // put file uploader into manual error mode by setting custom error message
+        // set error message
         this.customErrorMessage = 'Invalid character in file name.'
         return // don't add to array
       }
@@ -402,27 +324,14 @@ export default class AuthorizationProof extends Mixins(DocumentMixin) {
     }
   }
 
-  @Watch('getShowErrors')
-  @Watch('minAuthorizationDate') // because Authorization Date depends on this
-  @Watch('authorization.date') // in case this changes
-  private async onGetShowErrors (): Promise<void> {
-    if (this.getShowErrors) {
-      // wait for form to finish rendering
-      await this.$nextTick()
-      // validate date component
-      this.authorizationDateValid = this.$refs.authorizationDateRef.validateForm()
-    }
-  }
-
   @Watch('authorizationFilesValid') // re-validate when the Authorization Files validity changes
-  @Watch('authorizationDateValid') // re-validate when the Authorization Date validity changes
   @Watch('authorization.files') // update store when files are added or removed
   @Emit('valid')
   private onComponentValid (): boolean {
     // sync local object to the store
     this.setContinuationAuthorization(this.authorization)
 
-    return (this.authorizationDateValid && this.authorizationFilesValid)
+    return this.authorizationFilesValid
   }
 }
 </script>
@@ -440,24 +349,6 @@ label {
   color: $gray9;
 }
 
-// add whitespace between the first and second columns
-.col-sm-3 {
-  padding-right: 1rem !important;
-}
-
-#authorization-date {
-  // show pointer on hover
-  :deep(.v-input__slot) {
-    pointer-events: auto;
-    cursor: pointer;
-  }
-
-  // set icon color
-  :deep(.v-input__icon--append .v-icon) {
-    color: $app-blue !important;
-  }
-}
-
 textarea {
   color: $gray7;
   width: 100%;
@@ -469,21 +360,9 @@ textarea {
   height: unset;
 }
 
-// align the checkbox with its label
-:deep(.v-input--checkbox .v-input__slot) {
-  align-items: flex-start;
-}
-
-// style the checkbox label
-:deep(.v-input--checkbox label) {
-  margin-top: 2px;
-  font-size: $px-14;
-  color: $gray9;
-}
-
+// style the upload file bullets
 ul {
   list-style: none;
-  color: $gray7;
 
   li::before {
     content: "\2022";
@@ -494,7 +373,8 @@ ul {
   }
 }
 
-.document-details {
-  padding-top: 6px;
+// align the remove icon with the button label
+.v-icon.mdi-close {
+  padding-top: 1px;
 }
 </style>