24657 - Notice of Withdrawal filing

src/components/Dashboard/FilingHistoryList.vue

@@ -151,6 +151,7 @@ export default class FilingHistoryList extends Mixins(FilingMixin) {
       case EnumUtilities.isTypeRestorationLimited(filing): return 'limited-restoration'
       case EnumUtilities.isTypeRestorationLimitedExtension(filing): return 'limited-restoration-extension'
       case EnumUtilities.isTypeRestorationLimitedToFull(filing): return 'limited-restoration-conversion'
+      case EnumUtilities.isTypeNoticeOfWithdrawal(filing): return 'notice-of-withdrawal'
       case EnumUtilities.isTypeRegistration(filing): return 'registration-filing'
       case EnumUtilities.isTypeStaff(filing): return 'staff-filing' // includes several filing types
       default: return 'default-filing'

src/components/EntityInfo.vue

@@ -77,6 +77,7 @@ export default class EntityInfo extends Vue {
       this.$route?.name === Routes.ANNUAL_REPORT ||
       this.$route?.name === Routes.CONSENT_CONTINUATION_OUT ||
       this.$route?.name === Routes.CONTINUATION_OUT ||
+      this.$route?.name === Routes.NOTICE_OF_WITHDRAWAL ||
       this.$route?.name === Routes.STANDALONE_ADDRESSES ||
       this.$route?.name === Routes.STANDALONE_DIRECTORS
     )

src/components/NoticeOfWithdraw/PlanOfArrangement.vue

@@ -0,0 +1,134 @@
+<template>
+  <div id="withdrawal-poa">
+    <v-row no-gutters>
+      <v-col
+        cols="12"
+        sm="3"
+        class="pr-4"
+      >
+        <label id="poa-label">Plan of Arrangement</label>
+      </v-col>
+      <v-col
+        cols="12"
+        :sm="9"
+      >
+        <v-checkbox
+          id="plan-of-arrangement-checkbox"
+          v-model="planOfArrangement"
+          class="mt-0 pt-0"
+          hide-details
+          label="The record to be withdrawn was filed as part of an arrangement."
+        />
+      </v-col>
+    </v-row>
+    <v-row
+      no-gutters
+      class="pt-4"
+    >
+      <v-col
+        cols="12"
+        sm="3"
+        class="pr-4"
+      />
+      <v-col
+        cols="12"
+        :sm="9"
+      >
+        <v-checkbox
+          id="come-into-effect-checkbox"
+          v-model="comeIntoEffect"
+          class="mt-0 pt-0"
+          hide-details
+          label="One or more of the provisions of the arrangement have come into effect."
+          :disabled="!planOfArrangement"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Emit, Prop, Watch } from 'vue-property-decorator'
+
+  @Component({})
+export default class PlanOfArrangement extends Vue {
+    /** Prompt the validations. Used for global validations. */
+    @Prop({ default: false }) readonly autoValidation!: boolean
+
+    /** Draft plan of arrangement. */
+    @Prop({ default: false }) readonly hasDraftPlanOfArrangement!: boolean
+
+    /** Draft come into effect. */
+    @Prop({ default: false }) readonly hasDraftComeIntoEffect!: boolean
+
+    /** Prompt Error. */
+    @Prop({ default: false }) readonly invalidSection!: boolean
+
+    // Local properties
+    private planOfArrangement = false
+    private comeIntoEffect = false
+    private valid = false
+
+    /** Called when component is mounted. */
+    mounted (): void {
+      // Set default draft values if they exist
+      if (this.hasDraftPlanOfArrangement) this.planOfArrangement = this.hasDraftPlanOfArrangement
+      if (this.hasDraftComeIntoEffect) this.comeIntoEffect = this.hasDraftComeIntoEffect
+    }
+
+    @Watch('planOfArrangement')
+    private onPlanOfArrangementChange (newVal: boolean): void {
+      // If planOfArrangement is false, reset comeIntoEffect to false
+      if (!newVal) {
+        this.comeIntoEffect = false
+      }
+    }
+
+    /** Emit plan of arrangement. */
+    @Watch('planOfArrangement')
+    @Emit('emitPoa')
+    private emitPoa (): boolean {
+      return this.planOfArrangement
+    }
+
+    /** Emit come into effect. */
+    @Watch('comeIntoEffect')
+    @Emit('emitEffect')
+    private emitEffect (): boolean {
+      return this.comeIntoEffect
+    }
+
+    @Watch('valid')
+    @Emit('emitValid')
+    private emitValid (): boolean {
+      return this.valid
+    }
+}
+</script>
+
+  <style lang="scss" scoped>
+  @import '@/assets/styles/theme.scss';
+
+  #poa-label {
+    font-size: $px-16;
+    font-weight: bold;
+    color: $gray9;
+  }
+
+  :deep() {
+    .v-card__actions {
+      justify-content: flex-end;
+    }
+
+    .v-input .v-label {
+      font-weight: normal;
+      color: $gray7;
+    }
+
+    .theme--light.v-input input {
+      font-weight: normal;
+      color: $gray7;
+    }
+  }
+  </style>

src/components/NoticeOfWithdraw/RecordToBeWithdrawn.vue

@@ -0,0 +1,122 @@
+<template>
+  <VcardTemplate id="record-to-be-withdrawn">
+    <template #icon>
+      mdi-file-document-outline
+    </template>
+
+    <template #title>
+      Record to be Withdrawn
+    </template>
+
+    <template #content>
+      <v-row
+        no-gutters
+        class="px-6 py-7"
+      >
+        <v-col
+          cols="12"
+          sm="3"
+          class="pr-4"
+        >
+          <strong>Filing Type</strong>
+        </v-col>
+        <v-col
+          id="withdrawal-filing-type"
+          cols="12"
+          sm="9"
+        >
+          {{ getFilingToBeWithdrawn().displayName }}
+        </v-col>
+      </v-row>
+
+      <v-row
+        no-gutters
+        class="px-6 py-7"
+      >
+        <v-col
+          cols="12"
+          sm="3"
+        >
+          <strong>Filing Number</strong>
+        </v-col>
+        <v-col
+          id="withdrawal-filing-number"
+          cols="12"
+          sm="9"
+        >
+          {{ filingToBeWithdrawn }}
+        </v-col>
+      </v-row>
+
+      <v-row
+        no-gutters
+        class="px-6 py-7"
+      >
+        <v-col
+          cols="12"
+          sm="3"
+        >
+          <strong>Effective Date and Time</strong>
+        </v-col>
+        <v-col
+          id="withdrawal-filing-date"
+          cols="12"
+          sm="9"
+        >
+          {{ getFormattedFilingDate() }}
+        </v-col>
+      </v-row>
+    </template>
+  </VcardTemplate>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Getter } from 'pinia-class'
+import { VcardTemplate } from '@/components/common'
+import { ApiFilingIF } from '@/interfaces'
+import { useFilingHistoryListStore } from '@/stores/filingHistoryListStore'
+
+  @Component({
+    components: {
+      VcardTemplate
+    }
+  })
+export default class RecordToBeWithdrawn extends Vue {
+    @Prop({ required: true }) readonly filingToBeWithdrawn!: string
+
+    @Getter(useFilingHistoryListStore) getFilings!: Array<ApiFilingIF>
+
+    getFilingToBeWithdrawn (): ApiFilingIF| undefined {
+      const filingId = Number(this.filingToBeWithdrawn)
+      const filings = this.getFilings as ApiFilingIF[]
+      return filings.find(filing => filing.filingId === filingId)
+    }
+
+    getFormattedFilingDate (): string {
+      const filing = this.getFilingToBeWithdrawn()
+      if (filing && filing.effectiveDate) {
+        const date = new Date(filing.effectiveDate)
+        const formattedDate = new Intl.DateTimeFormat('en-US', {
+          timeZone: 'America/Los_Angeles', // Pacific Time
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+          hour12: true
+        }).format(date)
+        return `${formattedDate} Pacific Time`
+      }
+      return 'Invalid date'
+    }
+}
+</script>
+
+  <style lang="scss" scoped>
+  @import '@/assets/styles/theme.scss';
+
+  .col-12 {
+    font-size: $px-16;
+  }
+  </style>