From db0085cb49ac359666ea7865212b595f795cb27e Mon Sep 17 00:00:00 2001
From: Kial <kialj876@gmail.com>
Date: Thu, 7 Dec 2023 14:20:43 -0800
Subject: [PATCH] QA fixes (#74)

* QA fixes

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>

* updates

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>

* test fixes

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>

---------

Signed-off-by: Kial Jinnah <kialjinnah@gmail.com>
---
 .../components/bcros/inputs/DateSelect.vue         |  4 ++--
 btr-web/btr-layouts/layouts/business.vue           |  8 ++++----
 .../components/individual-person/AddNew.vue        |  9 +++++++--
 .../components/individual-person/SummaryTable.vue  |  4 ++--
 .../individual-person/tax-info/TaxResidency.vue    |  2 +-
 .../cypress/e2e/pages/reviewConfirm.cy.ts          | 14 ++++++--------
 btr-web/btr-main-app/lang/en.json                  |  4 ++++
 btr-web/btr-main-app/pages/ownerChange.vue         | 12 +++++++++---
 btr-web/btr-main-app/pages/reviewConfirm.vue       |  2 +-
 .../btr-main-app/stores/significant-individuals.ts |  2 +-
 .../tests/stores/significant-individual.spec.ts    |  5 +++++
 11 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/btr-web/btr-common-components/components/bcros/inputs/DateSelect.vue b/btr-web/btr-common-components/components/bcros/inputs/DateSelect.vue
index 807dd9cb..d0784ba9 100644
--- a/btr-web/btr-common-components/components/bcros/inputs/DateSelect.vue
+++ b/btr-web/btr-common-components/components/bcros/inputs/DateSelect.vue
@@ -4,7 +4,7 @@
       <UInput
         :model-value="selectedDateDisplay"
         icon="i-mdi-calendar"
-        :placeholder="$t('placeholders.dateSelect')"
+        :placeholder="placeholder || ''"
         trailing
         type="text"
         variant="bcGov"
@@ -34,7 +34,7 @@
 import { ComputedRef, Ref, computed, ref, watch } from 'vue'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 
-defineProps<{ maxDate?: Date }>()
+defineProps<{ maxDate?: Date, placeholder?: string }>()
 
 const emit = defineEmits<{(e: 'selection', value: Date | null): void }>()
 
diff --git a/btr-web/btr-layouts/layouts/business.vue b/btr-web/btr-layouts/layouts/business.vue
index 3eb7a4ff..4606ca19 100644
--- a/btr-web/btr-layouts/layouts/business.vue
+++ b/btr-web/btr-layouts/layouts/business.vue
@@ -3,12 +3,12 @@
     <BcrosHeader />
     <BcrosBreadcrumb v-if="crumbConstructors.length > 0" :crumb-constructors="crumbConstructors" />
     <BcrosBusinessDetails />
-    <div class="mx-auto p-4 w-full max-w-bcroslg flex justify-center items-start">
-      <div class="max-w-bcrosmd p-4">
+    <div class="mx-auto px-4 w-full max-w-bcroslg flex">
+      <div>
         <slot />
       </div>
-      <div class="hidden bcroslg:block p-4 sticky top-0">
-        <BcrosWidgetsFee :fees="payFeesWidget.fees" data-cy="pay-fees-widget">
+      <div class="flex-none ml-8 mt-10">
+        <BcrosWidgetsFee class="sticky top-10" :fees="payFeesWidget.fees" data-cy="pay-fees-widget">
           <template #emptyFees>
             <div
               class="bg-white p-3 border-gray-300 border-b-[1px] flex"
diff --git a/btr-web/btr-main-app/components/individual-person/AddNew.vue b/btr-web/btr-main-app/components/individual-person/AddNew.vue
index 056c9679..c5c8dcb0 100644
--- a/btr-web/btr-main-app/components/individual-person/AddNew.vue
+++ b/btr-web/btr-main-app/components/individual-person/AddNew.vue
@@ -133,6 +133,7 @@
           id="addNewPersonBirthdate"
           class="mt-3"
           :max-date="new Date()"
+          :placeholder="$t('placeholders.dateSelect.birthdate')"
           @selection="significantIndividual.profile.birthDate = dateToString($event, 'YYYY-MM-DD')"
         />
       </div>
@@ -218,7 +219,7 @@ import { z } from 'zod'
 
 const { t } = useI18n()
 const emits = defineEmits<{ add: [value: SignificantIndividualI], cancel: [value: any]}>()
-const props = defineProps<{ setSignificantIndividual?: SignificantIndividualI }>()
+const props = defineProps<{ setSignificantIndividual?: SignificantIndividualI, startDate?: string }>()
 const defaultSI = {
   profile: {
     fullName: '',
@@ -262,12 +263,16 @@ const defaultSI = {
   missingInfoReason: undefined,
   percentOfShares: '',
   percentOfVotes: '',
-  startDate: useSignificantIndividuals().currentSIFiling?.effectiveDate || '',
+  startDate: props.startDate || '',
   action: FilingActionE.ADD
 }
 // NOTE: not setting this as modelValue because it is a nested object so mutating it gets complicated
 const significantIndividual: Ref<SignificantIndividualI> = ref(props.setSignificantIndividual || defaultSI)
 
+watch(() => props.startDate, (val) => {
+  significantIndividual.value.startDate = val
+})
+
 function addSignificantIndividual () {
   // FUTURE: validate form / scroll to 1st error
   // emit significantIndividual so it gets added to the filing
diff --git a/btr-web/btr-main-app/components/individual-person/SummaryTable.vue b/btr-web/btr-main-app/components/individual-person/SummaryTable.vue
index ba239a11..0eddaa2d 100644
--- a/btr-web/btr-main-app/components/individual-person/SummaryTable.vue
+++ b/btr-web/btr-main-app/components/individual-person/SummaryTable.vue
@@ -33,8 +33,8 @@
       <template #significanceDates-data="{ row }">
         <div data-cy="summary-table-dates">
           {{ $t('texts.dateRange', {
-            start: row.startDate ? datetimeStringToDateString(row.startDate) : $t('labels.unknown'),
-            end: row.endDate ? datetimeStringToDateString(row.endDate) : $t('labels.current') }) }}
+            start: row.startDate ? row.startDate : $t('labels.unknown'),
+            end: row.endDate ? row.endDate : $t('labels.current') }) }}
         </div>
       </template>
 
diff --git a/btr-web/btr-main-app/components/individual-person/tax-info/TaxResidency.vue b/btr-web/btr-main-app/components/individual-person/tax-info/TaxResidency.vue
index 30bb26f5..a2076fd2 100644
--- a/btr-web/btr-main-app/components/individual-person/tax-info/TaxResidency.vue
+++ b/btr-web/btr-main-app/components/individual-person/tax-info/TaxResidency.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   id: { type: String, required: true },
diff --git a/btr-web/btr-main-app/cypress/e2e/pages/reviewConfirm.cy.ts b/btr-web/btr-main-app/cypress/e2e/pages/reviewConfirm.cy.ts
index 6bae4e75..df9e85d1 100644
--- a/btr-web/btr-main-app/cypress/e2e/pages/reviewConfirm.cy.ts
+++ b/btr-web/btr-main-app/cypress/e2e/pages/reviewConfirm.cy.ts
@@ -1,3 +1,4 @@
+import { dateToString } from '../../../../btr-common-components/utils/date'
 import payFeesForBtrRegsigin from '../../fixtures/payFeeForBtrRegsigin.json'
 
 describe('pages -> Review and Confirm', () => {
@@ -72,12 +73,10 @@ describe('pages -> Review and Confirm', () => {
       // verify the url changes to /review-confirm
       cy.url().should('include', '/review-confirm')
 
-      // TO-DO: uncomment the following section when the bug in date picker is fixed
-
-      // // check the significant individual change date is correct
-      // const today = new Date()
-      // const expectedDate = today.toISOString().split('T')[0]
-      // cy.get('[data-cy=effective-date-select]').contains(expectedDate)
+      // check the significant individual change date is correct
+      const today = new Date()
+      const expectedDate = dateToString(today, 'YYYY-MM-DD')
+      cy.get('[data-cy=effective-date-select]').contains(expectedDate)
 
       // check if the summary table contain the correct data
       const summaryTable = cy.get('[data-cy="individualsSummaryTable"]')
@@ -93,8 +92,7 @@ describe('pages -> Review and Confirm', () => {
       summaryTable.get('[data-cy=summary-table-details]').contains(testData.summaryTable.citizenship)
       summaryTable.get('[data-cy=summary-table-details]').contains(testData.summaryTable.taxResidency)
 
-      // TO-DO: uncomment the following section when the bug in date picker is fixed
-      // summaryTable.get('[data-cy=summary-table-dates]').contains(expectedDate)
+      summaryTable.get('[data-cy=summary-table-dates]').contains(expectedDate)
 
       summaryTable.get('[data-cy=summary-table-controls]').contains(testData.summaryTable.shareControl)
       summaryTable.get('[data-cy=summary-table-controls]').contains(testData.summaryTable.directorControl)
diff --git a/btr-web/btr-main-app/lang/en.json b/btr-web/btr-main-app/lang/en.json
index fc63b5e4..22d29dae 100644
--- a/btr-web/btr-main-app/lang/en.json
+++ b/btr-web/btr-main-app/lang/en.json
@@ -121,6 +121,10 @@
     "reviewConfirm": "Review the information in your registration. If you need to change anything, return to the previous step to make the necessary change."
   },
   "placeholders": {
+    "dateSelect": {
+      "birthdate": "Select Date",
+      "significantIndividualChange": "Significant Individual Change Date"
+    },
     "taxNumber": "CRA Tax Number (SIN, ITN, or TTN)"
   },
   "errors": {
diff --git a/btr-web/btr-main-app/pages/ownerChange.vue b/btr-web/btr-main-app/pages/ownerChange.vue
index 40bfa16f..6b5e56bb 100644
--- a/btr-web/btr-main-app/pages/ownerChange.vue
+++ b/btr-web/btr-main-app/pages/ownerChange.vue
@@ -11,6 +11,7 @@
       <div class="ml-8 flex-auto">
         <BcrosInputsDateSelect
           :max-date="new Date()"
+          :placeholder="$t('placeholders.dateSelect.significantIndividualChange')"
           @selection="significantIndividualChangeDate($event)"
         />
       </div>
@@ -27,7 +28,12 @@
     />
     <div v-else class="mt-10 p-10 bg-white rounded flex flex-row">
       <label class="font-bold text-lg min-w-[190px]">{{ $t('labels.addIndividual') }}</label>
-      <IndividualPersonAddNew class="ml-8" @cancel="expandNewSI = false" @add="addNewSI($event)" />
+      <IndividualPersonAddNew
+        class="ml-8"
+        :start-date="currentSIFiling.effectiveDate"
+        @cancel="expandNewSI = false"
+        @add="addNewSI($event)"
+      />
     </div>
     <IndividualPersonSummaryTable class="mt-10" :individuals="currentSIFiling.significantIndividuals || []" />
   </div>
@@ -41,8 +47,8 @@ const { currentSIFiling } = storeToRefs(significantIndividuals)
 
 const expandNewSI = ref(false)
 
-const significantIndividualChangeDate = (event) => {
-  currentSIFiling.value.effectiveDate = datetimeStringToDateString(event)
+const significantIndividualChangeDate = (event: Date) => {
+  currentSIFiling.value.effectiveDate = dateToString(event, 'YYYY-MM-DD')
   addBtrPayFees()
 }
 
diff --git a/btr-web/btr-main-app/pages/reviewConfirm.vue b/btr-web/btr-main-app/pages/reviewConfirm.vue
index 403414c0..1b110c49 100644
--- a/btr-web/btr-main-app/pages/reviewConfirm.vue
+++ b/btr-web/btr-main-app/pages/reviewConfirm.vue
@@ -12,7 +12,7 @@
     <div class="mt-10 p-10 bg-white rounded flex" data-cy="effective-date-select">
       <label class="font-bold text-lg w-[200px]">{{ $t('labels.significantIndividualChangeDate') }}</label>
       <div class="ml-10 text-lg">
-        {{ datetimeStringToDateString (currentSIFiling.effectiveDate) }}
+        {{ currentSIFiling.effectiveDate }}
       </div>
     </div>
     <div class="bg-white rounded-[5px] mt-10">
diff --git a/btr-web/btr-main-app/stores/significant-individuals.ts b/btr-web/btr-main-app/stores/significant-individuals.ts
index 9f7151ca..fa51aa5b 100644
--- a/btr-web/btr-main-app/stores/significant-individuals.ts
+++ b/btr-web/btr-main-app/stores/significant-individuals.ts
@@ -17,7 +17,7 @@ export const useSignificantIndividuals = defineStore('significantIndividuals', (
 
   /** Add currentSI to the currentSIFiling. */
   function filingAddSI (significantIndividual: SignificantIndividualI) {
-    currentSIFiling.value.significantIndividuals.push(significantIndividual)
+    currentSIFiling.value.significantIndividuals.unshift(significantIndividual)
   }
 
   /** Initialize a new significant individual filing */
diff --git a/btr-web/btr-main-app/tests/stores/significant-individual.spec.ts b/btr-web/btr-main-app/tests/stores/significant-individual.spec.ts
index c70591ea..11365496 100644
--- a/btr-web/btr-main-app/tests/stores/significant-individual.spec.ts
+++ b/btr-web/btr-main-app/tests/stores/significant-individual.spec.ts
@@ -30,5 +30,10 @@ describe('Business Store Tests', () => {
     significantIndividuals.filingAddSI(testSI)
     // FUTURE: call mocked and returning a list of existing SIs
     expect(currentSIFiling.value.significantIndividuals).toEqual([testSI])
+    // add another one and ensure it is first
+    const newTestSI = { ...testSI }
+    newTestSI.profile.fullName = 'Test Name 2'
+    significantIndividuals.filingAddSI(newTestSI)
+    expect(currentSIFiling.value.significantIndividuals).toEqual([newTestSI, testSI])
   })
 })