24941 - Update to SIN / Tax Number collection (#219)

* 24941 - Update to SIN / Tax Number collection * update tests
bcgov · Jan 20, 2025 · cfe26e6 · cfe26e6
1 parent 18a3042
commit cfe26e6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 29 deletions.
diff --git a/btr-web/btr-main-app/components/individual-person/add-new/index.vue b/btr-web/btr-main-app/components/individual-person/add-new/index.vue
@@ -347,8 +347,8 @@
           </p>
           <IndividualPersonTaxInfoTaxNumber
             id="addNewPersonTaxNumber"
-            v-model:hasTaxNumber="inputFormSi.tax.hasTaxNumber"
-            v-model:taxNumber="inputFormSi.tax.taxNumber"
+            v-model:has-tax-number="inputFormSi.tax.hasTaxNumber"
+            v-model:tax-number="inputFormSi.tax.taxNumber"
             name="tax"
             variant="bcGov"
             :is-editing="isEditing"

diff --git a/btr-web/btr-main-app/components/individual-person/tax-info/TaxNumber.vue b/btr-web/btr-main-app/components/individual-person/tax-info/TaxNumber.vue
@@ -1,21 +1,10 @@
 <template>
   <div class="flex flex-col py-5">
     <div class="flex flex-row mb-2 py-1">
-      <UFormGroup name="doNothingJustWatch">
-        <URadio
-          id="taxNumberRadioButton4"
-          v-model="hasTaxNumber"
-          class="mt-3"
-          :value="true"
-          :aria-label="$t('placeholders.taxNumber')"
-          @change="emit('has-tax-number-changed')"
-        />
-      </UFormGroup>
       <UFormGroup
         ref="taxNumberInputGroupRef"
         v-slot="{ error }"
         :name="name+'.taxNumber'"
-        class="ml-5"
       >
         <UInput
           v-model="taxNumber"
@@ -25,7 +14,7 @@
           :placeholder="$t('placeholders.taxNumber')"
           class="w-80"
           @focusout="formatInput"
-          @change="taxNumberChanged=true; emit('tax-number-changed', taxNumber)"
+          @change="handleInput"
           @focus="focusTaxNumber"
           @blur="revertUnchangedTaxNumber"
         />
@@ -34,12 +23,13 @@
 
     <UFormGroup v-slot="{ error }" :name="name + '.hasTaxNumber'">
       <div class="flex flex-row items-center mb-2 py-2">
-        <URadio
+        <UCheckbox
           id="noTaxNumberRadioButton"
-          v-model="hasTaxNumber"
+          v-model="noTaxNumber"
+          data-cy="no-tax-number-checkbox"
           :value="false"
           :variant="error ? 'error' : variant"
-          @change="clearTaxNumber; emit('has-tax-number-changed')"
+          @change="toggleCheckbox"
         />
         <label for="noTaxNumberRadioButton" class="ml-5" :class="{ 'text-red-500': error}">
           {{ $t('labels.noTaxNumberLabel') }}
@@ -70,9 +60,12 @@ const formatInput = () => {
 const taxNumberFieldUuid = getRandomUuid()
 const taxNumberChanged = ref(false)
 
+const noTaxNumber = ref(hasTaxNumber.value === false)
+
 const focusTaxNumber = () => {
   emit('clear-errors', props.name + '.hasTaxNumber')
   hasTaxNumber.value = true
+  noTaxNumber.value = false
   if (props.isEditing) {
     setFieldOriginalValue(taxNumberFieldUuid, taxNumber.value)
     taxNumber.value = ''
@@ -117,4 +110,15 @@ const formatTaxNumber = (taxNumber: string | undefined): string | undefined => {
 
   return formattedNumber
 }
+
+const handleInput = () => {
+  taxNumberChanged.value = true
+  emit('tax-number-changed', taxNumber.value)
+}
+
+const toggleCheckbox = () => {
+  hasTaxNumber.value = !noTaxNumber.value
+  clearTaxNumber()
+  emit('has-tax-number-changed')
+}
 </script>
diff --git a/btr-web/btr-main-app/cypress/e2e/pages/add-individual/tax-number.cy.ts b/btr-web/btr-main-app/cypress/e2e/pages/add-individual/tax-number.cy.ts
@@ -11,12 +11,24 @@ describe('pages -> Add individual', () => {
   })
 
   it('verify Tax Number component is working', () => {
-    cy.get('[data-cy=add-new-btn]').trigger('click')
-    // cy.get('[data-cy="showAddIndividualPersonManually"]').trigger('click')
+    cy.get('[data-cy="add-new-btn"]').trigger('click')
+
+    // ensure the input box and the checkbox are visible
+    cy.get('[data-cy="tax-number-input"]').should('exist')
+    cy.get('[data-cy="no-tax-number-checkbox"]').should('exist')
+
+    // check the no-tax-number checkbox
+    cy.get('[data-cy="no-tax-number-checkbox"]').check()
+    cy.get('[data-cy="no-tax-number-checkbox"]').should('be.checked')
 
-    const radioGroup = cy.get('[data-cy="testTaxNumber"]').should('exist')
+    // when some value is entered in the tax number input box, the checkbox should be unchecked
+    cy.get('[data-cy="tax-number-input"]').type('000').blur()
+    cy.get('[data-cy="no-tax-number-checkbox"]').should('not.be.checked')
 
-    radioGroup.get('[type="radio"][value="false"]').check().should('be.checked')
+    // checking the checkbox again should clear the input box
+    cy.get('[data-cy="no-tax-number-checkbox"]').check()
+    cy.get('[data-cy="no-tax-number-checkbox"]').should('be.checked')
+    cy.get('[data-cy="tax-number-input"]').should('have.value', '')
   })
 
   it('test the error message for tax number length', () => {
@@ -25,11 +37,9 @@ describe('pages -> Add individual', () => {
       return false
     })
 
-    cy.get('[data-cy=add-new-btn]').trigger('click')
-    // cy.get('[data-cy="showAddIndividualPersonManually"]').trigger('click')
+    cy.get('[data-cy="add-new-btn"]').trigger('click')
     cy.get('[data-cy="tax-number-input"]').type('00').blur()
     cy.contains(en.errors.validation.taxNumber.invalidLength).should('exist')
-    cy.get('[type="radio"][value="true"]').should('be.checked')
   })
 
   it('test the error message for special characters in tax number', () => {
@@ -38,11 +48,9 @@ describe('pages -> Add individual', () => {
       return false
     })
 
-    cy.get('[data-cy=add-new-btn]').trigger('click')
-    // cy.get('[data-cy="showAddIndividualPersonManually"]').trigger('click')
+    cy.get('[data-cy="add-new-btn"]').trigger('click')
     cy.get('[data-cy="tax-number-input"]').type('a').blur()
     cy.contains(en.errors.validation.taxNumber.specialCharacter).should('exist')
-    cy.get('[type="radio"][value="true"]').should('be.checked')
   })
 
   it('test the error message for invalid tax number', () => {
@@ -52,9 +60,7 @@ describe('pages -> Add individual', () => {
     })
 
     cy.get('[data-cy=add-new-btn]').trigger('click')
-    // cy.get('[data-cy="showAddIndividualPersonManually"]').trigger('click')
     cy.get('[data-cy="tax-number-input"]').type('111222333').blur()
     cy.contains(en.errors.validation.taxNumber.invalidNumber).should('exist')
-    cy.get('[type="radio"][value="true"]').should('be.checked')
   })
 })