From 4849960245246ec9a447ffa6a6413d3ded9617b0 Mon Sep 17 00:00:00 2001
From: Severin Beauvais <severin.beauvais@gov.bc.ca>
Date: Wed, 23 Oct 2024 13:04:15 -0700
Subject: [PATCH] WIP

---
 .../AuthorizationInformation.vue              |  4 +-
 ...limitedLiabilityCorporationInformation.vue | 70 +++++++--------
 .../ContinuationInAuthorization.vue           | 88 +++++++++++--------
 tests/unit/AuthorizationInformation.spec.ts   |  6 +-
 .../unit/ContinuationInAuthorization.spec.ts  | 19 +++-
 .../ContinuationInUploadAffidavit.spec.ts     | 54 ------------
 tests/unit/ExtraproRegistration.spec.ts       |  5 --
 ...tedLiabilityCorporationInformation.spec.ts | 59 +++++++++----
 8 files changed, 149 insertions(+), 156 deletions(-)
 delete mode 100644 tests/unit/ContinuationInUploadAffidavit.spec.ts

diff --git a/src/components/ContinuationIn/AuthorizationInformation.vue b/src/components/ContinuationIn/AuthorizationInformation.vue
index 21b2f04f..345f21ae 100644
--- a/src/components/ContinuationIn/AuthorizationInformation.vue
+++ b/src/components/ContinuationIn/AuthorizationInformation.vue
@@ -130,7 +130,7 @@
 
       <!-- Unlimited Liability Corporation Information -->
       <v-row
-        v-if="getExistingBusinessInfo.affidavitFileName"
+        v-if="getExistingBusinessInfo.affidavitFile"
         no-gutters
       >
         <v-col
@@ -163,7 +163,7 @@
       </v-row>
 
       <v-divider
-        v-if="getExistingBusinessInfo.affidavitFileName"
+        v-if="getExistingBusinessInfo.affidavitFile"
         class="my-6"
       />
 
diff --git a/src/components/ContinuationIn/UnlimitedLiabilityCorporationInformation.vue b/src/components/ContinuationIn/UnlimitedLiabilityCorporationInformation.vue
index f3bc7fe3..5bf81490 100644
--- a/src/components/ContinuationIn/UnlimitedLiabilityCorporationInformation.vue
+++ b/src/components/ContinuationIn/UnlimitedLiabilityCorporationInformation.vue
@@ -1,10 +1,13 @@
 <template>
-  <div id="unlimited-liability-corporation-information">
+  <div
+    v-if="getExistingBusinessInfo"
+    id="unlimited-liability-corporation-information"
+  >
     <!-- Upload Files -->
     <v-card
       flat
       class="py-8 px-6"
-      :class="{ 'invalid-section': getShowErrors && !affidavitFileValid }"
+      :class="{ 'invalid-section': getShowErrors && !componentValid }"
     >
       <!-- Upload File -->
       <v-row no-gutters>
@@ -21,7 +24,7 @@
           sm="9"
           class="pt-4 pt-sm-0"
         >
-          <p :class="{ 'error-text': getShowErrors && !affidavitFileValid }">
+          <p :class="{ 'error-text': getShowErrors && !componentValid }">
             You are required to provide either a <strong>Director's Affidavit</strong> or a
             <strong>Court Order</strong>. This will be reviewed by BC Registries.
           </p>
@@ -36,7 +39,7 @@
             outlined
             color="primary"
             class="btn-outlined-primary mt-4"
-            :disabled="affidavitFileValid"
+            :disabled="componentValid"
             :loading="isDocumentLoading"
             @click="onClickAddDocumentButton()"
           >
@@ -62,13 +65,13 @@
           />
 
           <div
-            v-if="affidavitFileValid"
+            v-if="getExistingBusinessInfo.affidavitFile"
             class="dk-gray-background rounded d-flex justify-space-between align-center mt-5 px-2 py-2"
           >
             <v-icon>mdi-paperclip</v-icon>
             <div class="document-details mr-auto pl-2">
-              {{ business.affidavitFile.name }}
-              <span class="pl-2">({{ friendlyFileSize(business.affidavitFile) }})</span>
+              {{ getExistingBusinessInfo.affidavitFile.name }}
+              <span class="pl-2">({{ friendlyFileSize(getExistingBusinessInfo.affidavitFile) }})</span>
             </div>
             <v-btn
               class="remove-document-button"
@@ -121,21 +124,14 @@ export default class UnlimitedLiabilityCorporationInformation extends Mixins(Dat
   @Action(useStore) setHaveChanges!: (x: boolean) => void
 
   // Local properties
-  business = {} as ExistingBusinessInfoIF
   customErrorMessage = ''
   fileValidity = false
   isDocumentLoading = false
 
-  /** Called when this component is mounted. */
-  mounted (): void {
-    // point business variable to Existing Business Info object from the store, if it exists
-    if (this.getExistingBusinessInfo) this.business = this.getExistingBusinessInfo
-  }
-
-  /** Whether the affidavit file is valid. */
-  get affidavitFileValid (): boolean {
+  /** Whether this component is valid. */
+  get componentValid (): boolean {
     // assume valid if file object is present
-    return !!this.business.affidavitFile
+    return !!this.getExistingBusinessInfo.affidavitFile
   }
 
   /** When user has clicked the Add button, opens the file selection dialog. */
@@ -187,40 +183,44 @@ export default class UnlimitedLiabilityCorporationInformation extends Mixins(Dat
       }
 
       // add properties reactively to business object
-      // (it is the same object the parent is working with)
-      this.$set(this.business, 'affidavitFile', {
+      this.$set(this.getExistingBusinessInfo, 'affidavitFile', {
         name: file.name,
         lastModified: file.lastModified,
         size: file.size
       } as File)
-      this.$set(this.business, 'affidavitFileKey', psu.key)
-      this.$set(this.business, 'affidavitFileName', file.name)
+      this.$set(this.getExistingBusinessInfo, 'affidavitFileKey', psu.key)
+      this.$set(this.getExistingBusinessInfo, 'affidavitFileName', file.name)
+
+      // user has changed something
+      this.setHaveChanges(true)
     }
   }
 
-  /** Called when user clicks a Remove button. */
+  /**
+   * Called when user clicks Remove button.
+   * May also be called by parent component to remove the file info.
+   */
   onRemoveClicked (): void {
     // delete file from Minio, not waiting for response and ignoring errors
-    this.deleteDocument(this.business.affidavitFileKey).catch(() => null)
+    this.deleteDocument(this.getExistingBusinessInfo.affidavitFileKey).catch(() => null)
+
     // delete properties reactively
-    this.$delete(this.business, 'affidavitFile')
-    this.$delete(this.business, 'affidavitFileKey')
-    this.$delete(this.business, 'affidavitFileName')
+    this.$delete(this.getExistingBusinessInfo, 'affidavitFile')
+    this.$delete(this.getExistingBusinessInfo, 'affidavitFileKey')
+    this.$delete(this.getExistingBusinessInfo, 'affidavitFileName')
+
     // clear any existing error message
     this.customErrorMessage = ''
+
+    // user has changed something
+    this.setHaveChanges(true)
   }
 
-  /** Emits form validity. */
-  @Watch('business', { deep: true })
-  @Watch('getShowErrors')
-  @Watch('affidavitFileValid')
+  /** Watches for changes to affidavit file object and emits form validity. */
+  @Watch('getExistingBusinessInfo.affidavitFile', { deep: true, immediate: true })
   @Emit('valid')
   private onComponentValid (): boolean {
-    // if we're here it's because the user has changed something
-    this.setHaveChanges(true)
-
-    // this component is valid if we have the affidavit file
-    return (this.getShowErrors && this.affidavitFileValid)
+    return this.componentValid
   }
 }
 </script>
diff --git a/src/views/ContinuationIn/ContinuationInAuthorization.vue b/src/views/ContinuationIn/ContinuationInAuthorization.vue
index f527af4b..755f4a15 100644
--- a/src/views/ContinuationIn/ContinuationInAuthorization.vue
+++ b/src/views/ContinuationIn/ContinuationInAuthorization.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- *** TODO: should I check for existence of some object, like "business"? -->
   <div id="continuation-in-authorization">
     <!-- Name -->
     <section
@@ -107,36 +106,36 @@
       />
     </section>
 
-    <!-- *** TODO: wrap this in a transition -->
     <!-- Unlimited Liability Corporation Information -->
-    <section
-      v-if="isContinuationInAffidavitRequired"
-      id="ulc-information-section"
-      class="mt-10"
-    >
-      <header>
-        <h2>Unlimited Liability Corporation Information</h2>
-        <p>
-          Additional information is required for an Unlimited Liability Corporation from Alberta.
-        </p>
-      </header>
-
-      <ExpandableHelp
-        class="mt-4"
-        helpLabel="Help with Unlimited Liability Corporation Information"
+    <v-expand-transition>
+      <section
+        v-if="isUlcInfoRequired"
+        id="ulc-information-section"
+        class="mt-10"
       >
-        <template #content>
-          <UnlimitedLiabilityCorporationHelp />
-        </template>
-      </ExpandableHelp>
+        <header>
+          <h2>Unlimited Liability Corporation Information</h2>
+          <p>
+            Additional information is required for an Unlimited Liability Corporation from Alberta.
+          </p>
+        </header>
 
-      <!-- *** TODO: should I pass "business" to this component? -->
-      <!-- *** what does Authorization Proof do? -->
-      <UnlimitedLiabilityCorporationInformation
-        class="mt-6"
-        @valid="ulcInformationValid = $event"
-      />
-    </section>
+        <ExpandableHelp
+          class="mt-4"
+          helpLabel="Help with Unlimited Liability Corporation Information"
+        >
+          <template #content>
+            <UnlimitedLiabilityCorporationHelp />
+          </template>
+        </ExpandableHelp>
+
+        <UnlimitedLiabilityCorporationInformation
+          ref="ulcInformation"
+          class="mt-6"
+          @valid="ulcInformationValid = $event"
+        />
+      </section>
+    </v-expand-transition>
   </div>
 </template>
 
@@ -173,6 +172,11 @@ import UnlimitedLiabilityCorporationHelp from '@/components/ContinuationIn/Unlim
   }
 })
 export default class ContinuationInAuthorization extends Mixins(CommonMixin, NameRequestMixin) {
+  // Refs
+  $refs!: {
+    ulcInformation: UnlimitedLiabilityCorporationInformation
+  }
+
   @Getter(useStore) getBusinessContact!: ContactPointIF
   @Getter(useStore) getExistingBusinessInfo!: ExistingBusinessInfoIF
   @Getter(useStore) getNameRequestNumber!: string
@@ -218,10 +222,10 @@ export default class ContinuationInAuthorization extends Mixins(CommonMixin, Nam
   }
 
   /**
-   * Whether a Continuation In Director's Affidavit or Court Order is required.
+   * Whether additional ULC information is required.
    * Is true if the business is a Continued In ULC from Alberta.
    */
-  get isContinuationInAffidavitRequired (): boolean {
+  get isUlcInfoRequired (): boolean {
     const previousJurisdiction = this.getExistingBusinessInfo?.previousJurisdiction
     return (
       this.isEntityUlcContinueIn &&
@@ -246,19 +250,31 @@ export default class ContinuationInAuthorization extends Mixins(CommonMixin, Nam
     })
   }
 
-  /** Watch all components on this page and set validity in store accordingly. */
+  /** When ULC Info is no longer required, remove existing file info. */
+  @Watch('isUlcInfoRequired')
+  private onUlcInfoRequiredChanged (val: boolean): void {
+    if (!val) {
+      this.$refs.ulcInformation.onRemoveClicked()
+    }
+  }
+
+  /**
+   * Watch all components on this page and set validity in the store accordingly.
+   * Note: Only need 1 immediate watcher for initial update.
+   */
   @Watch('getNameTranslationsValid', { immediate: true })
-  @Watch('existingBusinessInformationValid', { immediate: true })
-  @Watch('businessContactInfoValid', { immediate: true })
-  @Watch('authorizationProofValid', { immediate: true })
-  @Watch('ulcInformationValid', { immediate: true })
+  @Watch('existingBusinessInformationValid')
+  @Watch('businessContactInfoValid')
+  @Watch('authorizationProofValid')
+  @Watch('isUlcInfoRequired')
+  @Watch('ulcInformationValid')
   private onComponentValidityChanged () {
     this.setContinuationAuthorizationPageValid(
       this.getNameTranslationsValid &&
       this.existingBusinessInformationValid &&
       this.businessContactInfoValid &&
       this.authorizationProofValid &&
-      (!this.isContinuationInAffidavitRequired || this.ulcInformationValid)
+      (!this.isUlcInfoRequired || this.ulcInformationValid)
     )
   }
 
diff --git a/tests/unit/AuthorizationInformation.spec.ts b/tests/unit/AuthorizationInformation.spec.ts
index 95d510ae..32de1abb 100644
--- a/tests/unit/AuthorizationInformation.spec.ts
+++ b/tests/unit/AuthorizationInformation.spec.ts
@@ -7,13 +7,11 @@ describe('Authorization Information component', () => {
     const wrapper = wrapperFactory(
       AuthorizationInformation,
       null,
-      null,
+      { continuationIn: { existingBusinessInfo: { affidavitFile: {} } } },
       null,
       null,
       // declare computed property to override computed property:
-      {
-        isExpro: () => true
-      }
+      { isExpro: () => true }
     )
     await Vue.nextTick()
 
diff --git a/tests/unit/ContinuationInAuthorization.spec.ts b/tests/unit/ContinuationInAuthorization.spec.ts
index be117f94..b5ba918a 100644
--- a/tests/unit/ContinuationInAuthorization.spec.ts
+++ b/tests/unit/ContinuationInAuthorization.spec.ts
@@ -6,10 +6,20 @@ import BusinessContactInfo from '@/components/common/BusinessContactInfo.vue'
 import AuthorizationProof from '@/components/ContinuationIn/AuthorizationProof.vue'
 import NameRequestInfo from '@/components/common/NameRequestInfo.vue'
 import NameTranslations from '@/components/common/NameTranslations.vue'
+import { ExpandableHelp } from '@bcrs-shared-components/expandable-help'
+import UnlimitedLiabilityCorporationInformation
+  from '@/components/ContinuationIn/UnlimitedLiabilityCorporationInformation.vue'
 
 describe('Continuation In Authorization component', () => {
   it('renders the component correctly', async () => {
-    const wrapper = wrapperFactory(ContinuationInAuthorization)
+    const wrapper = wrapperFactory(
+      ContinuationInAuthorization,
+      null,
+      null,
+      null,
+      null,
+      { isUlcInfoRequired: () => true }
+    )
     await Vue.nextTick()
 
     // verify main component exists
@@ -41,6 +51,13 @@ describe('Continuation In Authorization component', () => {
     expect(fourthSection.find('header p').text()).toContain('You must provide proof')
     expect(fourthSection.findComponent(AuthorizationProof).exists()).toBe(true)
 
+    const fifthSection = wrapper.findAll('section').at(4)
+    expect(fifthSection.find('header').exists()).toBe(true)
+    expect(fifthSection.find('header h2').text()).toBe('Unlimited Liability Corporation Information')
+    expect(fifthSection.find('header p').text()).toContain('Additional information is')
+    expect(fifthSection.findComponent(ExpandableHelp).exists()).toBe(true)
+    expect(fifthSection.findComponent(UnlimitedLiabilityCorporationInformation).exists()).toBe(true)
+
     wrapper.destroy()
   })
 })
diff --git a/tests/unit/ContinuationInUploadAffidavit.spec.ts b/tests/unit/ContinuationInUploadAffidavit.spec.ts
deleted file mode 100644
index 7df6403e..00000000
--- a/tests/unit/ContinuationInUploadAffidavit.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import UploadAffidavit from '@/components/ContinuationIn/UploadAffidavit.vue'
-import FileUploadPreview from '@/components/common/FileUploadPreview.vue'
-import { ExpandableHelp } from '@bcrs-shared-components/expandable-help'
-import { ExistingBusinessInfoIF } from '@/interfaces'
-
-// Create a mock business object
-const businessMock: ExistingBusinessInfoIF = {
-  affidavitFile: null,
-  affidavitFileKey: null,
-  affidavitFileName: null,
-  previousJurisdiction: {
-    country: 'CA',
-    region: 'AB'
-  },
-  prevIncorporationNumber: '',
-  prevIncorporationDate: '',
-  prevBusinessName: '',
-  mode: 'EXPRO'
-}
-
-describe('Upload Affidavit component', () => {
-  it('renders the component correctly', async () => {
-    const wrapper = shallowMount(UploadAffidavit, {
-      propsData: {
-        business: businessMock
-      },
-      stubs: {
-        FileUploadPreview: true
-      }
-    })
-
-    await Vue.nextTick()
-
-    // Verify that main component exists
-    expect(wrapper.findComponent(UploadAffidavit).exists()).toBe(true)
-
-    // Verify that text content is rendered correctly
-    expect(wrapper.text()).toContain('There is additional information required by the Registrar')
-    expect(wrapper.text()).toContain('for an unlimited liability corporation from Alberta.')
-
-    expect(wrapper.find('ul').text()).toContain('Use a white background and a legible font')
-    expect(wrapper.find('ul').text()).toContain('PDF file type (maximum 30 MB file size)')
-
-    // Verify that FileUploadPreview component is rendered
-    expect(wrapper.findComponent(FileUploadPreview).exists()).toBe(true)
-
-    // Verify that ExpandableHelp component is rendered
-    expect(wrapper.findComponent(ExpandableHelp).exists()).toBe(true)
-
-    wrapper.destroy()
-  })
-})
diff --git a/tests/unit/ExtraproRegistration.spec.ts b/tests/unit/ExtraproRegistration.spec.ts
index 5552ff8c..74db748a 100644
--- a/tests/unit/ExtraproRegistration.spec.ts
+++ b/tests/unit/ExtraproRegistration.spec.ts
@@ -1,12 +1,7 @@
 import Vue from 'vue'
-import { createPinia, setActivePinia } from 'pinia'
-import { useStore } from '@/store/store'
 import { wrapperFactory } from '../vitest-wrapper-factory'
 import ExtraproRegistration from '@/components/ContinuationIn/ExtraproRegistration.vue'
 
-setActivePinia(createPinia())
-const store = useStore()
-
 describe('Extrapro Registration component', () => {
   it('renders the component correctly', async () => {
     const wrapper = wrapperFactory(ExtraproRegistration)
diff --git a/tests/unit/UnlimitedLiabilityCorporationInformation.spec.ts b/tests/unit/UnlimitedLiabilityCorporationInformation.spec.ts
index d1fe6694..afc31dd7 100644
--- a/tests/unit/UnlimitedLiabilityCorporationInformation.spec.ts
+++ b/tests/unit/UnlimitedLiabilityCorporationInformation.spec.ts
@@ -6,46 +6,67 @@ import { ExistingBusinessInfoIF } from '@/interfaces'
 import { CorpTypeCd } from '@bcrs-shared-components/corp-type-module'
 import UnlimitedLiabilityCorporationInformation
   from '@/components/ContinuationIn/UnlimitedLiabilityCorporationInformation.vue'
-import UploadAffidavit from '@/components/ContinuationIn/UploadAffidavit.vue'
 
 setActivePinia(createPinia())
 const store = useStore()
 
-describe('Unlimited Liability Corporation component', () => {
-  it('renders the component correctly', async () => {
+describe('Unlimited Liability Corporation Information component', () => {
+  it('renders the component correctly with no file', async () => {
+    // set some store values
+    store.stateModel.continuationIn.existingBusinessInfo = {} as ExistingBusinessInfoIF
+    store.stateModel.entityType = CorpTypeCd.ULC_CONTINUE_IN
+
     const wrapper = wrapperFactory(UnlimitedLiabilityCorporationInformation)
     await Vue.nextTick()
 
-    // verify component main exists
+    // verify component exists
     expect(wrapper.findComponent(UnlimitedLiabilityCorporationInformation).exists()).toBe(true)
     expect(wrapper.find('#unlimited-liability-corporation-information').exists()).toBe(true)
 
+    // verify initial validity
+    const valid = wrapper.emitted().valid
+    expect(valid[0][0]).toBe(false)
+
+    // verify misc content
+    expect(wrapper.find('label').text()).toBe('Upload File')
+    expect(wrapper.find('p').text()).toContain('You are required to provide')
+    expect(wrapper.find('ul').text()).toContain('Use a white background')
+    expect(wrapper.find('ul').text()).toContain('PDF file type')
+    expect(wrapper.find('#add-affidavit-button').text()).toBe('Add a Document')
+    expect(wrapper.find('#add-affidavit-button').attributes('disabled')).toBeUndefined()
+    expect(wrapper.find('.document-details').exists()).toBe(false)
+    expect(wrapper.find('.remove-document-button').exists()).toBe(false)
+    expect(wrapper.find('.info-text').text()).toContain('Uploaded files will be')
+
     wrapper.destroy()
   })
 
-  it('renders the UploadAffidavit component correctly', async () => {
+  it('renders the component correctly with existing file', async () => {
     // set some store values
     store.stateModel.continuationIn.existingBusinessInfo = {
-      affidavitFile: null,
-      affidavitFileKey: null,
-      affidavitFileName: null,
-      previousJurisdiction: {
-        country: 'CA',
-        region: 'AB'
-      },
-      prevIncorporationNumber: '',
-      prevIncorporationDate: '',
-      prevBusinessName: '',
-      mode: 'EXPRO',
-      status: 'ACTIVE'
+      affidavitFile: { name: 'test.pdf', size: 123456 } as File,
+      affidavitFileKey: 'abc-123',
+      affidavitFileName: 'test.pdf'
     } as ExistingBusinessInfoIF
     store.stateModel.entityType = CorpTypeCd.ULC_CONTINUE_IN
 
     const wrapper = wrapperFactory(UnlimitedLiabilityCorporationInformation)
     await Vue.nextTick()
 
-    // Verify the Upload Affidavit component was rendered
-    expect(wrapper.findComponent(UploadAffidavit).exists()).toBe(true)
+    // verify component exists
+    expect(wrapper.findComponent(UnlimitedLiabilityCorporationInformation).exists()).toBe(true)
+    expect(wrapper.find('#unlimited-liability-corporation-information').exists()).toBe(true)
+
+    // verify initial validity
+    const valid = wrapper.emitted().valid
+    expect(valid[0][0]).toBe(true)
+
+    // verify misc content
+    expect(wrapper.find('#add-affidavit-button').attributes('disabled')).toBe('disabled')
+    expect(wrapper.find('.document-details').exists()).toBe(true)
+    expect(wrapper.find('.document-details').text()).toBe('test.pdf (121 KB)')
+    expect(wrapper.find('.remove-document-button').exists()).toBe(true)
+    expect(wrapper.find('.remove-document-button').text()).toBe('Remove')
 
     wrapper.destroy()
   })