17042 Fixed draft restoration bug + fixed validation flags error (bcg…

…ov#563)

* - app version = 4.7.17
- added check before restoring approval type from state filing
- misc cleanup/comments
- fixed some Action declarations
- fixed some filing data typing
- set state filing before parsing draft restoration (which depends on it)

* - fixed scrollToTop async (and callers)
- fixed scrollToTop typing
- added validation flags comments
- fixed incorrect validation flag order in state model
- fixed mockImplementation variable issue

---------

Co-authored-by: Severin Beauvais <severin.beauvais@gov.bc.ca>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "business-edit-ui",
- "version": "4.7.16",
+ "version": "4.7.17",
  "private": true,
  "appName": "Edit UI",
  "sbcName": "SBC Common Components",

src/components/ViewWrapper.vue

@@ -220,7 +220,7 @@ export default class ViewWrapper extends Mixins(CommonMixin, FilingTemplateMixin
  switch (action) {
  case FeeSummaryActions.BACK:
  this.setSummaryMode(false)
- await this.scrollToTop(document.getElementById('app'))
+ this.scrollToTop(document.getElementById('app'))
  break
  case FeeSummaryActions.SAVE_RESUME_LATER:
  // Save filing and return to dashboard.
@@ -283,11 +283,14 @@ export default class ViewWrapper extends Mixins(CommonMixin, FilingTemplateMixin
 
  /** Perform high level component validations before proceeding to summary page. */
  private async validateCompanyInfoPage (): Promise<void> {
- // awaited so watch hooks can run before it executes validateAndScroll.
- await this.setComponentValidate(true)
+ // Prompt component validations.
+ this.setComponentValidate(true)
+
+ // Wait to allow component validation to complete.
+ await this.$nextTick()
 
  // Evaluate valid flags. Scroll to invalid components or continue to review.
- if (await this.validateAndScroll(this.getFlagsCompanyInfo, ComponentsCompanyInfo)) {
+ if (this.validateAndScroll(this.getFlagsCompanyInfo, ComponentsCompanyInfo)) {
  // show summary page
  this.setSummaryMode(true)
 
@@ -301,7 +304,7 @@ export default class ViewWrapper extends Mixins(CommonMixin, FilingTemplateMixin
  await this.$nextTick()
 
  // We don't change views, just interchange components, so scroll to top for better UX.
- await this.scrollToTop(document.getElementById('app'))
+ this.scrollToTop(document.getElementById('app'))
  }
  }
 
@@ -310,11 +313,11 @@ export default class ViewWrapper extends Mixins(CommonMixin, FilingTemplateMixin
  // Prompt app validations.
  this.setAppValidate(true)
 
- // Wait to allow app validation.
+ // Wait to allow app validation to complete.
  await this.$nextTick()
 
  // Evaluate valid flags. Scroll to invalid components or file alteration.
- if (await this.validateAndScroll(this.getFlagsReviewCertify, ComponentsReviewCertify)) {
+ if (this.validateAndScroll(this.getFlagsReviewCertify, ComponentsReviewCertify)) {
  await this.onClickSave(false)
  }
  }

src/components/common/PeopleAndRoles/PeopleAndRoles.vue

@@ -667,7 +667,7 @@ export default class PeopleAndRoles extends Mixins(CommonMixin, DateMixin, OrgPe
  * Resets state properties after a change is completed (or to cancel).
  * @param restore whether to restore the replaced-removed item (if any)
  */
- async reset (restore = false): Promise<void> {
+ reset (restore = false): void {
  if (restore) {
  // make a copy so Vue reacts when we set the new list
  const tempList = cloneDeep(this.getOrgPeople)
@@ -687,7 +687,7 @@ export default class PeopleAndRoles extends Mixins(CommonMixin, DateMixin, OrgPe
  this.isAddingEditingOrgPerson = false
 
  // as Vue has updated the visible sections, scroll back to the top of this component
- await this.scrollToTop(this.$el)
+ this.scrollToTop(this.$el)
  }
 
  /**

src/components/common/YourCompany/OfficeAddresses.vue

@@ -967,7 +967,7 @@ export default class OfficeAddresses extends Mixins(CommonMixin) {
  /**
  * When Done is clicked, stores updated addresses.
  */
- protected async acceptChanges (): Promise<void> {
+ acceptChanges (): void {
  if (this.formValid) {
  // set store value
  // NB: this will cause setLocalProperties() to be called to reset local properties
@@ -976,20 +976,20 @@ export default class OfficeAddresses extends Mixins(CommonMixin) {
  this.isEditing = false
  }
  // as Vue has updated the visible sections, scroll back to the top of this component
- await this.scrollToTop(this.$el)
+ this.scrollToTop(this.$el)
  }
 
  /**
  * When Cancel is clicked, discards changes.
  */
- protected async discardChanges (): Promise<void> {
+ discardChanges (): void {
  // reset local properties from store
  this.setLocalProperties()
 
  this.isEditing = false
 
  // as Vue has updated the visible sections, scroll back to the top of this component
- await this.scrollToTop(this.$el)
+ this.scrollToTop(this.$el)
  }
 
  /**

src/enums/componentsCompanyInfo.ts

@@ -1,7 +1,8 @@
 /**
  * List of components on Company Info page. Note:
- * - these values MUST match component IDs to scroll correctly
+ * - these values must match component IDs to scroll correctly
  * - order this according to component layout
+ * - order must match stateModel.validationFlags.flagsCompanyInfo
  * - this list must match `FlagsCompanyInfoIF`
  */
 export enum ComponentsCompanyInfo {

src/interfaces/store-interfaces/state-interfaces/flags-company-info-interface.ts

@@ -1,8 +1,8 @@
 /**
  * Validity flags for Company Info page components. Note:
  * - order doesn't matter in an object
- * - this list must match `ComponentsCompanyInfo`
  * - add any new components that need validation before proceeding to Review and Confirm page
+ * - this list must match `ComponentsCompanyInfo`
  */
 export interface FlagsCompanyInfoIF {
  isValidCompanyName: boolean

src/mixins/common-mixin.ts

@@ -16,9 +16,9 @@ export default class CommonMixin extends Vue {
  * Scrolls the window to the top of the specified element.
  * @param element the element to scroll to the top of
  */
- async scrollToTop (element: any): Promise<void> {
+ scrollToTop (element: Element): void {
  // don't call window.scrollTo during Vitest tests because jsdom doesn't implement it
- if (!this.isVitestRunning) await element.scrollIntoView({ behavior: 'smooth' })
+ if (!this.isVitestRunning) element.scrollIntoView({ behavior: 'smooth' })
  }
 
  /**
@@ -27,7 +27,7 @@ export default class CommonMixin extends Vue {
  * @param components list of current component IDs
  * @return whether all components are valid
  */
- async validateAndScroll (flags: object, components: object): Promise<boolean> {
+ validateAndScroll (flags: object, components: object): boolean {
  // Create an array of the _ordered_ validity flags
  const validFlagArray = Object.keys(flags).map(key => flags[key])
 
@@ -37,7 +37,7 @@ export default class CommonMixin extends Vue {
  // If there is an invalid component, scroll to it
  if (component) {
  const element = document.getElementById(component)
- await this.scrollToTop(element)
+ this.scrollToTop(element)
  return false
  }
  return true

src/mixins/filing-template-mixin.ts

@@ -971,9 +971,11 @@ export default class FilingTemplateMixin extends DateMixin {
 
  // store Approval Type
  if (filing.restoration.approvalType) {
+ // get approval type from draft
  this.setRestorationApprovalType(filing.restoration.approvalType)
- } else {
- this.setRestorationApprovalType(this.getStateFilingRestoration?.approvalType)
+ } else if (this.getStateFilingRestoration?.approvalType) {
+ // get approval type from state filing
+ this.setRestorationApprovalType(this.getStateFilingRestoration.approvalType)
  }
 
  // store Court Order data

src/store/state/state-model.ts

@@ -38,7 +38,6 @@ export const stateModel: StateModelIF = {
  componentValidate: false,
  flagsCompanyInfo: {
  // NB: this must be in same order as ComponentsCompanyInfo enum!
- isValidRelationship: true,
  isValidCompanyName: true,
  isValidBusinessType: true,
  isValidNameTranslation: true,
@@ -57,6 +56,7 @@ export const stateModel: StateModelIF = {
  isValidSpecialResolution: true,
  isValidSpecialResolutionSignature: true,
  isValidApprovalType: true,
+ isValidRelationship: true,
  isValidExtensionTime: true
  },
  flagsReviewCertify: {

src/store/store.ts

@@ -1247,7 +1247,7 @@ export const useStore = defineStore('store', {
  * Only applicable to limited restoration extension filing.
  */
  getRestorationExpiryDate (): string {
- return this.stateModel.restoration?.expiry
+ return this.getRestoration.expiry
  },
 
  /** The restoration expiry text. */
@@ -1265,15 +1265,16 @@ export const useStore = defineStore('store', {
 
  /** The court order draft file number. */
  getCourtOrderNumberText (): string {
- return this.stateModel.restoration.courtOrder?.fileNumber || ''
+ // NB: although initialized in the state, courtOrder may be absent in a draft restoration filing
+ return this.getRestoration.courtOrder?.fileNumber || ''
  },
 
  getRelationships (): RelationshipTypes[] {
- return this.stateModel.restoration.relationships
+ return this.getRestoration.relationships
  },
 
  getIsRestorationTypeCourtOrder (): boolean {
- return !!this.stateModel.restoration.courtOrder?.fileNumber
+ return !!this.getCourtOrderNumberText
  },
 
  /** The special resolution object. */
@@ -1596,14 +1597,15 @@ export const useStore = defineStore('store', {
  this.stateModel.restoration.approvalType = approvalType
  },
  setStateFilingRestoration (): Promise<any> {
+ // need to return a promise because action is called via dispatch
  return new Promise((resolve, reject) => {
  LegalServices.fetchFiling(this.getStateFilingUrl)
- .then((response) => {
- const stateFilingRestoration = response.restoration
+ .then(filing => {
+ const restoration = filing.restoration
  // commit data to store
- this.stateModel.stateFilingRestoration = stateFilingRestoration
+ this.stateModel.stateFilingRestoration = restoration
  // return the state filing restoration object
- resolve(stateFilingRestoration)
+ resolve(restoration)
  })
  .catch(error => {
  // eslint-disable-next-line no-console

src/views/LimitedRestorationExtension.vue

@@ -131,6 +131,7 @@ import ExtendTimeLimit from '@/components/Restoration/ExtendTimeLimit.vue'
 import ViewWrapper from '@/components/ViewWrapper.vue'
 import { AuthServices, LegalServices } from '@/services'
 import { useStore } from '@/store/store'
+import { FilingDataIF } from '@bcrs-shared-components/interfaces'
 
 @Component({
  components: {
@@ -176,7 +177,7 @@ export default class LimitedRestorationExtension extends Mixins(
  @Action(useStore) setFilingId!: (x: number) => void
  @Action(useStore) setHaveUnsavedChanges!: (x: boolean) => void
  @Action(useStore) setResource!: (x: ResourceIF) => void
- @Action(useStore) setStateFilingRestoration!: (x: Promise<any>) => void
+ @Action(useStore) setStateFilingRestoration!: () => Promise<void>
 
  /** Whether App is ready. */
  @Prop({ default: false }) readonly appReady!: boolean
@@ -262,16 +263,22 @@ export default class LimitedRestorationExtension extends Mixins(
 
  this.setEntitySnapshot(entitySnapshot)
 
- // Please refer to ticket# 15862 for more information (Reactivity issue)
+ // Please refer to ticket# 15862 for more information (Reactivity issue).
  if (!restorationFiling.restoration.expiry) {
- // new limited restoration extension
+ // this is a new limited restoration extension
+
  // set the previously filed limited restoration in the store
  // (will throw on error)
  await this.setStateFilingRestoration()
+
  // parse draft restoration filing into store
  this.parseRestorationFiling(restorationFiling)
  } else {
+ // this is an extension for a previous limited restoration extension
+
+ // parse draft restoration filing into store
  this.parseRestorationFiling(restorationFiling)
+
  // set the previously filed limited restoration in the store
  // (will throw on error)
  await this.setStateFilingRestoration()
@@ -285,7 +292,7 @@ export default class LimitedRestorationExtension extends Mixins(
  this.setResource(this.restorationResource)
 
  // initialize Fee Summary data
- this.setFilingData([this.restorationResource.filingData])
+ this.setFilingData([this.restorationResource.filingData as unknown as FilingDataIF])
 
  // update the current fees for this filing
  await this.setCurrentFeesFromFilingData()

src/views/LimitedRestorationToFull.vue

@@ -46,7 +46,7 @@
  :isCourtOrderOnly="isCourtOrderOnly"
  :isCourtOrderRadio="showCourtOrderRadio"
  :invalidSection="!getApprovalTypeValid"
- @courtNumberChange="setRestorationCourtOrder({ 'fileNumber': $event })"
+ @courtNumberChange="setRestorationCourtOrder({ fileNumber: $event })"
  @valid="setValidComponent({ key: 'isValidApprovalType', value: $event })"
  />
  </QuestionWrapper>
@@ -159,6 +159,7 @@ import { ApprovalType } from '@bcrs-shared-components/approval-type'
 import { FeeSummary as FeeSummaryShared } from '@bcrs-shared-components/fee-summary/'
 import ViewWrapper from '@/components/ViewWrapper.vue'
 import { useStore } from '@/store/store'
+import { FilingDataIF } from '@bcrs-shared-components/interfaces'
 
 @Component({
  components: {
@@ -210,7 +211,7 @@ export default class LimitedRestorationToFull extends Mixins(
  @Action(useStore) setFilingId!: (x: number) => void
  @Action(useStore) setHaveUnsavedChanges!: (x: boolean) => void
  @Action(useStore) setResource!: (x: ResourceIF) => void
- @Action(useStore) setStateFilingRestoration!: (x: Promise<any>) => void
+ @Action(useStore) setStateFilingRestoration!: () => Promise<void>
  @Action(useStore) setValidComponent!: (x: ActionKvIF) => void
 
  /** Whether App is ready. */
@@ -297,13 +298,13 @@ export default class LimitedRestorationToFull extends Mixins(
 
  this.setEntitySnapshot(entitySnapshot)
 
- // parse draft restoration filing into store
- this.parseRestorationFiling(restorationFiling)
-
  // set the previously filed limited restoration in the store
  // (will throw on error)
  await this.setStateFilingRestoration()
 
+ // parse draft restoration filing into store
+ this.parseRestorationFiling(restorationFiling)
+
  if (!this.restorationResource) {
  throw new Error(`Invalid restoration resource entity type = ${this.getEntityType}`)
  }
@@ -312,7 +313,7 @@ export default class LimitedRestorationToFull extends Mixins(
  this.setResource(this.restorationResource)
 
  // initialize Fee Summary data
- this.setFilingData([this.restorationResource.filingData])
+ this.setFilingData([this.restorationResource.filingData as unknown as FilingDataIF])
 
  // update the current fees for this filing
  await this.setCurrentFeesFromFilingData()

tests/unit/PeopleAndRoles.spec.ts

@@ -314,7 +314,8 @@ describe('People And Roles component for Change of Registration', () => {
  vuetify
  })
  const vm = wrapper.vm as any
- const mockScrollToTop = vi.spyOn(vm, 'scrollToTop').mockImplementation()
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const mockScrollToTop = vi.spyOn(vm, 'scrollToTop').mockImplementation(x => {})
 
  // call reset, restoring the removed-replaced item
  await vm.reset(true)

tests/unit/state-getters.spec.ts

@@ -564,22 +564,22 @@ describe('test restoration expiry date', () => {
 })
 
 describe('test getIsRestorationTypeCourtOrder', () => {
- it('getIsRestorationTypeCourtOrder returns true when set', () => {
+ it('getIsRestorationTypeCourtOrder returns true when file number is set', () => {
  store.stateModel.restoration.courtOrder.fileNumber = '1234'
  expect(store.getIsRestorationTypeCourtOrder).toBe(true)
  })
 
- it('getIsRestorationTypeCourtOrder returns false when empty', () => {
+ it('getIsRestorationTypeCourtOrder returns false when file number is empty', () => {
  store.stateModel.restoration.courtOrder.fileNumber = ''
  expect(store.getIsRestorationTypeCourtOrder).toBe(false)
  })
 
- it('getIsRestorationTypeCourtOrder returns false when null', () => {
+ it('getIsRestorationTypeCourtOrder returns false when file number is null', () => {
  store.stateModel.restoration.courtOrder.fileNumber = null
  expect(store.getIsRestorationTypeCourtOrder).toBe(false)
  })
 
- it('getIsRestorationTypeCourtOrder returns false when courtOrder property missing', () => {
+ it('getIsRestorationTypeCourtOrder returns false when courtOrder property is absent', () => {
  store.stateModel.restoration = {
  approvalType: ApprovalTypes.VIA_REGISTRAR,
  approvalTypeValid: true,