21824 Used textareas for latest review comments to preserve formatting (

#688)

* - app version = 7.3.19
- added vue-auto-resize package (for textareas)
- awaited async function in FilingHistoryList.vue
- replaced paragraph with textarea in TodoList.vue
- replaced paragraph with textarea in ContinuationIn.vue

* - fixed unit tests

---------

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

package.json

@@ -1,6 +1,6 @@
 {
  "name": "business-filings-ui",
- "version": "7.3.18",
+ "version": "7.3.19",
  "private": true,
  "appName": "Filings UI",
  "sbcName": "SBC Common Components",
@@ -50,6 +50,7 @@
  "sbc-common-components": "3.0.13",
  "vue": "2.7.14",
  "vue-affix": "^0.5.2",
+ "vue-auto-resize": "^1.0.1",
  "vue-hotjar": "^1.4.0",
  "vue-router": "^3.6.5",
  "vue2-filters": "^0.14.0",

src/components/Dashboard/FilingHistoryList.vue

@@ -196,12 +196,12 @@ export default class FilingHistoryList extends Mixins(FilingMixin) {
  * If there is a filing ID to highlight then it finds it and expands its panel.
  */
  @Watch('getFilings', { immediate: true })
- onFilingsChange (): void {
+ async onFilingsChange (): Promise<void> {
  // if needed, highlight a specific filing
  if (this.highlightId) {
  const index = this.getFilings.findIndex(f => (f.filingId === this.highlightId))
  if (index >= 0) { // safety check
- this.toggleFilingHistoryItem(index)
+ await this.toggleFilingHistoryItem(index)
  }
  }
  }

src/components/Dashboard/FilingHistoryList/filings/ContinuationIn.vue

@@ -46,9 +46,15 @@
  <p class="mt-0">
  This {{ filing.displayName }} is rejected for the following reasons:
  </p>
- <p class="font-italic">
- {{ filing.latestReviewComment || '[undefined staff rejection message]' }}
- </p>
+ <textarea
+ v-if="isShowTextarea"
+ v-auto-resize
+ class="font-16 font-italic"
+ readonly
+ rows="1"
+ :value="filing.latestReviewComment || '[undefined staff change request message]'"
+ />
+
  <p>
  You will receive a refund within 10 business days. Please submit a new application if you would
  like to continue your business into B.C.
@@ -95,6 +101,7 @@ import SubtitleFutureEffectivePaid from '../subtitles/SubtitleFutureEffectivePai
 import BodyFutureEffectivePending from '../bodies/BodyFutureEffectivePending.vue'
 import { useBusinessStore, useConfigurationStore, useFilingHistoryListStore } from '@/stores'
 import SubtitleRejected from '../subtitles/SubtitleRejected.vue'
+import AutoResize from 'vue-auto-resize'
 
 @Component({
  components: {
@@ -104,6 +111,9 @@ import SubtitleRejected from '../subtitles/SubtitleRejected.vue'
  SubtitleFiledAndPendingPaid,
  SubtitleFutureEffectivePaid,
  SubtitleRejected
+ },
+ directives: {
+ AutoResize
  }
 })
 export default class ContinuationIn extends Vue {
@@ -114,7 +124,10 @@ export default class ContinuationIn extends Vue {
  @Getter(useBusinessStore) getLegalName!: string
  @Getter(useConfigurationStore) getDashboardUrl!: string
 
- @Action(useFilingHistoryListStore) setPanel!: (x: number) => void
+ @Action(useFilingHistoryListStore) toggleFilingHistoryItem!: (x: number) => Promise<void>
+
+ // local variable(s)
+ isShowTextarea = false
 
  /** The Temporary Registration Number string (may be null). */
  get tempRegNumber (): string {
@@ -162,12 +175,15 @@ export default class ContinuationIn extends Vue {
  return 'Unknown Name'
  }
 
- mounted (): void {
+ async mounted (): Promise<void> {
  if (this.tempRegNumber) {
  // auto-expand bootstrap filing
  // assumes this the only filing in the Filing History list (which it should be)
- this.setPanel(0)
+ await this.toggleFilingHistoryItem(0)
  }
+
+ // work-around because textarea sometimes doesn't initially auto-resize
+ this.isShowTextarea = true
  }
 
  /** Reloads Filings UI using business id instead of temporary registration number. */
@@ -192,4 +208,13 @@ p {
  font-size: $px-15;
  margin-top: 1rem !important;
 }
+
+textarea {
+ color: $gray7;
+ width: 100%;
+ resize: none;
+ // 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;
+}
 </style>

src/components/Dashboard/TodoList.vue

@@ -609,9 +609,13 @@
  <p class="list-item__subtitle">
  This {{ item.title }} is paid but requires you to make the following changes:
  </p>
- <p class="list-item__subtitle font-italic">
- {{ item.latestReviewComment || '[undefined staff change request message]' }}
- </p>
+ <textarea
+ v-auto-resize
+ class="font-16 font-italic"
+ readonly
+ rows="1"
+ :value="item.latestReviewComment || '[undefined staff change request message]'"
+ />
  </div>
  </template>
 
@@ -686,6 +690,7 @@ import {
 import { GetCorpFullDescription } from '@bcrs-shared-components/corp-type-module'
 import { useAuthenticationStore, useBusinessStore, useConfigurationStore, useFilingHistoryListStore,
  useRootStore } from '@/stores'
+import AutoResize from 'vue-auto-resize'
 
 @Component({
  components: {
@@ -706,6 +711,9 @@ import { useAuthenticationStore, useBusinessStore, useConfigurationStore, useFil
  PaymentPending,
  PaymentPendingOnlineBanking,
  PaymentUnsuccessful
+ },
+ directives: {
+ AutoResize
  }
 })
 export default class TodoList extends Mixins(AllowableActionsMixin, DateMixin) {
@@ -2465,4 +2473,13 @@ export default class TodoList extends Mixins(AllowableActionsMixin, DateMixin) {
 .pay-error {
  border-top: solid #a94442 3px;
 }
+
+textarea {
+ color: $gray7;
+ width: 100%;
+ resize: none;
+ // 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;
+}
 </style>

tests/unit/ContinuationIn.spec.ts

@@ -112,7 +112,7 @@ describe('Continuation In - in To Do list', () => {
  // verify expansion panel content
  expect(wrapper.find('.v-expansion-panel-content').text()).toContain('This BC Limited Company Continuation Application is')
  expect(wrapper.find('.v-expansion-panel-content').text()).toContain('paid but requires you to make the following changes:')
- expect(wrapper.find('.v-expansion-panel-content').text()).toContain('Authorization document is not legible.')
+ expect((wrapper.find('textarea').element as any)._value).toBe('Authorization document is not legible.')
 
  // cleanup
  wrapper.destroy()
@@ -279,7 +279,8 @@ describe('Continuation In - in Recent Filing History list', () => {
  // verify expansion panel content
  expect(wrapper.find('.v-expansion-panel-content').text()).toContain('This BC Limited Company Continuation Application is')
  expect(wrapper.find('.v-expansion-panel-content').text()).toContain('rejected for the following reasons:')
- expect(wrapper.find('.v-expansion-panel-content').text()).toContain('Authorization is invalid.')
+ expect((wrapper.find('textarea').element as any)._value).toBe('Authorization is invalid.')
+
  expect(wrapper.find('.v-expansion-panel-content').text()).toContain('You will receive a refund within 10 business days.')
  expect(wrapper.find('.v-expansion-panel-content').text()).toContain('Please submit a new application if you would like to')
  expect(wrapper.find('.v-expansion-panel-content').text()).toContain('continue your business into B.C.')