Merge pull request bcgov#227 from shaangill025/fix_23751

UI - Validation Updates - QA Feedback

strr-web/components/bcros/form-section/contact-information/ContactDetails.vue

@@ -47,6 +47,7 @@
         <UFormGroup name="faxNumber" class="flex-grow">
           <UInput
             v-model="faxNumber"
+            type="tel"
             :placeholder="t('createAccount.contactForm.faxNumber')"
             aria-label="fax number"
           />

strr-web/components/bcros/form-section/property-manager/BusinessDetails.vue

@@ -2,22 +2,28 @@
   <div data-test-id="property-manager-business-details" class="with-divider">
     <BcrosFormSection :title="t('createAccount.propertyManagerForm.businessDetails')">
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:flex-col mobile:mb-[16px]">
-        <UFormGroup name="businessName" class="flex-grow">
+        <UFormGroup name="businessName" class="flex-grow" :error="errors.businessLegalName">
           <UInput
             v-model="businessName"
             type="text"
             :placeholder="t('createAccount.propertyManagerForm.businessName')"
             data-test-id="property-manager-business-name-input"
+            @input="emit('resetFieldError', 'businessLegalName')"
+            @blur="emit('validateField', 'businessLegalName')"
+            @change="emit('validateField', 'businessLegalName')"
           />
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:flex-col mobile:mb-[16px]">
-        <UFormGroup name="businessNumber" class="flex-grow">
+        <UFormGroup name="businessNumber" class="flex-grow" :error="errors.businessNumber">
           <UInput
             v-model="businessNumber"
             type="text"
             :placeholder="t('createAccount.propertyManagerForm.businessNumber')"
             data-test-id="property-manager-business-number-input"
+            @input="emit('resetFieldError', 'businessNumber')"
+            @blur="emit('validateField', 'businessNumber')"
+            @change="emit('validateField', 'businessNumber')"
           />
         </UFormGroup>
       </div>
@@ -30,5 +36,12 @@ const { t } = useTranslation()
 
 const businessName = defineModel<string>('businessName')
 const businessNumber = defineModel<string>('businessNumber')
+const emit = defineEmits<{
+    validateField: [field: string]
+    resetFieldError: [field: string]
+}>()
 
+const { errors = {} } = defineProps<{
+  errors: Record<string, string>
+}>()
 </script>

strr-web/components/bcros/form-section/property-manager/ContactDetails.vue

@@ -17,20 +17,27 @@
             @change="emit('validateField', 'phoneNumber')"
           />
         </UFormGroup>
-        <UFormGroup name="extension" class="flex-grow">
+        <UFormGroup name="extension" class="flex-grow" :error="errors.extension">
           <UInput
             v-model="extension"
             :placeholder="t('createAccount.propertyManagerForm.extension')"
             data-test-id="property-manager-extension"
+            @input="emit('resetFieldError', 'extension')"
+            @blur="emit('validateField', 'extension')"
+            @change="emit('validateField', 'extension')"
           />
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="faxNumber" class="flex-grow">
+        <UFormGroup name="faxNumber" class="flex-grow" :error="errors.faxNumber">
           <UInput
             v-model="faxNumber"
+            type="tel"
             :placeholder="t('createAccount.propertyManagerForm.faxNumber')"
             data-test-id="property-manager-fax-number"
+            @input="emit('resetFieldError', 'faxNumber')"
+            @blur="emit('validateField', 'faxNumber')"
+            @change="emit('validateField', 'faxNumber')"
           />
         </UFormGroup>
       </div>

strr-web/components/bcros/form-section/property-manager/ContactName.vue

@@ -12,11 +12,14 @@
             @change="emit('validateField', 'firstName')"
           />
         </UFormGroup>
-        <UFormGroup name="middleName" class="d:pr-[16px] flex-grow mobile:mb-[16px]">
+        <UFormGroup name="middleName" class="d:pr-[16px] flex-grow mobile:mb-[16px]" :error="errors.middleName">
           <UInput
             v-model="middleName"
             :placeholder="t('createAccount.propertyManagerForm.middleName')"
             data-test-id="property-manager-middle-name-input"
+            @input="emit('resetFieldError', 'middleName')"
+            @blur="emit('validateField', 'middleName')"
+            @change="emit('validateField', 'middleName')"
           />
         </UFormGroup>
         <UFormGroup name="lastName" class="flex-grow mobile:mb-[16px]" :error="errors.lastName">
@@ -31,12 +34,15 @@
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="preferredName" class=" flex-grow">
+        <UFormGroup name="preferredName" class=" flex-grow" :error="errors.preferredName">
           <UInput
             v-model="preferredName"
             type="name"
             :placeholder="t('createAccount.propertyManagerForm.preferredName')"
             data-test-id="property-manager-preferred-name-input"
+            @input="emit('resetFieldError', 'preferredName')"
+            @blur="emit('validateField', 'preferredName')"
+            @change="emit('validateField', 'preferredName')"
           />
         </UFormGroup>
       </div>

strr-web/components/bcros/form-section/property-manager/Form.vue

@@ -40,6 +40,9 @@
             <BcrosFormSectionPropertyManagerBusinessDetails
               v-model:business-name="formState.propertyManager.businessLegalName"
               v-model:business-number="formState.propertyManager.businessNumber"
+              :errors="errorRefs"
+              @reset-field-error="resetFieldError"
+              @validate-field="validateField"
             />
             <BcrosFormSectionPropertyManagerBusinessMailingAddress
               id="propertyManagerBusinessAddress"
@@ -135,7 +138,13 @@ const errorRefs = reactive({
   emailAddress: '',
   phoneNumber: '',
   firstName: '',
-  lastName: ''
+  lastName: '',
+  businessLegalName: '',
+  businessNumber: '',
+  middleName: '',
+  preferredName: '',
+  extension: '',
+  faxNumber: ''
 })
 
 const resetFieldError = (field: keyof typeof errorRefs) => {

strr-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strr-web",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "description": "Short Term Rental Registration UI - Mono repo workspace",
   "scripts": {
     "preinstall": "npx only-allow pnpm",

strr-web/stores/strr.ts

@@ -92,6 +92,18 @@ const optionalOrEmptyString = z
   .optional()
   .transform(e => (e === '' ? undefined : e))
 const requiredNonEmptyString = z.string().refine(e => e !== '', 'Field cannot be empty')
+const requiredNonEmptyString15 = z
+  .string()
+  .max(15, { message: 'Maximum length is 15 characters' })
+  .refine(e => e !== '', 'Field cannot be empty')
+const requiredNonEmptyString100 = z
+  .string()
+  .max(100, { message: 'Maximum length is 100 characters' })
+  .refine(e => e !== '', 'Field cannot be empty')
+const requiredNonEmptyString50 = z
+  .string()
+  .max(50, { message: 'Maximum length is 50 characters' })
+  .refine(e => e !== '', 'Field cannot be empty')
 
 export const finalizationSchema = z.object({
   phone: requiredPhone,
@@ -106,22 +118,46 @@ export const propertyManagerSchema = z.object({
   businessMailingAddress: z.object({
     address: requiredNonEmptyString,
     addressLineTwo: optionalOrEmptyString,
-    city: requiredNonEmptyString,
-    postalCode: requiredNonEmptyString,
+    city: requiredNonEmptyString100,
+    postalCode: requiredNonEmptyString15,
     province: requiredNonEmptyString,
     country: requiredNonEmptyString
   }),
   contact: z.object({
-    firstName: requiredNonEmptyString,
+    firstName: requiredNonEmptyString50,
     middleName: optionalOrEmptyString,
-    lastName: requiredNonEmptyString,
+    lastName: requiredNonEmptyString50,
     preferredName: optionalOrEmptyString,
     phoneNumber: requiredPhone,
     extension: optionalOrEmptyString,
     faxNumber: optionalPhone,
     emailAddress: requiredEmail
   })
-})
+}).refine(
+  data => !data.businessLegalName || data.businessLegalName.length <= 50,
+  {
+    message: 'Business Legal Name must not exceed 50 characters',
+    path: ['businessLegalName']
+  }
+).refine(
+  data => !data.contact.middleName || data.contact.middleName.length <= 50,
+  {
+    message: 'Middle Name must not exceed 50 characters',
+    path: ['contact', 'middleName']
+  }
+).refine(
+  data => !data.contact.preferredName || data.contact.preferredName.length <= 50,
+  {
+    message: 'Preferred Name must not exceed 50 characters',
+    path: ['contact', 'preferredName']
+  }
+).refine(
+  data => !data.contact.extension || data.contact.extension.length <= 15,
+  {
+    message: 'Extension must not exceed 15 characters',
+    path: ['contact', 'extension']
+  }
+)
 
 export const primaryContactSchema = z.object({
   preferredName: optionalOrEmptyString,
@@ -134,9 +170,9 @@ export const primaryContactSchema = z.object({
   address: requiredNonEmptyString,
   country: requiredNonEmptyString,
   addressLineTwo: optionalOrEmptyString,
-  city: requiredNonEmptyString,
+  city: requiredNonEmptyString100,
   province: requiredNonEmptyString,
-  postalCode: requiredNonEmptyString,
+  postalCode: requiredNonEmptyString15,
   birthDay: requiredNumber
     .refine(day => day.length === 2, 'Day must be two digits')
     .refine(day => Number(day) <= 31, 'Date must be less than or equal to 31')
@@ -149,9 +185,9 @@ export const primaryContactSchema = z.object({
 })
 
 export const secondaryContactSchema = z.object({
-  firstName: requiredNonEmptyString,
-  lastName: requiredNonEmptyString,
-  middleName: requiredNonEmptyString,
+  firstName: requiredNonEmptyString50,
+  lastName: requiredNonEmptyString50,
+  middleName: requiredNonEmptyString50,
   socialInsuranceNumber: optionalSin,
   businessNumber: optionalOrEmptyString,
   preferredName: optionalOrEmptyString,
@@ -162,9 +198,9 @@ export const secondaryContactSchema = z.object({
   address: requiredNonEmptyString,
   country: requiredNonEmptyString,
   addressLineTwo: optionalOrEmptyString,
-  city: requiredNonEmptyString,
+  city: requiredNonEmptyString100,
   province: requiredNonEmptyString,
-  postalCode: requiredNonEmptyString,
+  postalCode: requiredNonEmptyString15,
   birthDay: optionalNumber
     .refine(day => day?.length === 2, 'Day must be two digits')
     .refine(day => Number(day) <= 31, 'Must be less than or equal to 31')

strr-web/tests/unit/components/form-section/property-manager/BusinessDetails.spec.ts

@@ -6,41 +6,42 @@ import { BcrosFormSectionPropertyManagerBusinessDetails } from '#components'
 const i18n = createI18n({
   // vue-i18n options here ...
 })
+let wrapper: any
 
 it('can mount Business Details component', async () => {
-  const businessDetails = await mountSuspended(BcrosFormSectionPropertyManagerBusinessDetails,
+  wrapper = await mountSuspended(BcrosFormSectionPropertyManagerBusinessDetails,
     {
       global: { plugins: [i18n] }
     })
-  expect(businessDetails.find('[data-test-id="property-manager-business-details"]').exists()).toBe(true)
-  expect(businessDetails.find('[data-test-id="property-manager-business-name-input"]').exists()).toBe(true)
-  expect(businessDetails.find('[data-test-id="property-manager-business-number-input"]').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-business-details').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-business-name-input').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-business-number-input').exists()).toBe(true)
 })
 
 it('has correct input placeholders', async () => {
   const { t } = useTranslation()
-  const businessDetails = await mountSuspended(BcrosFormSectionPropertyManagerBusinessDetails,
+  wrapper = await mountSuspended(BcrosFormSectionPropertyManagerBusinessDetails,
     {
       global: { plugins: [i18n] }
     })
-  const businessNameInput = businessDetails.find('[data-test-id="property-manager-business-name-input"]')
-  const businessNumberInput = businessDetails.find('[data-test-id="property-manager-business-number-input"]')
+  const businessNameInput = wrapper.findTestId('property-manager-business-name-input')
+  const businessNumberInput = wrapper.findTestId('property-manager-business-number-input')
 
   expect(businessNameInput.attributes('placeholder')).toBe(t('createAccount.propertyManagerForm.businessName'))
   expect(businessNumberInput.attributes('placeholder')).toBe(t('createAccount.propertyManagerForm.businessNumber'))
 })
 
 it('uses defineModel for businessName and businessNumber', async () => {
-  const wrapper = await mountSuspended(BcrosFormSectionPropertyManagerBusinessDetails, {
+  wrapper = await mountSuspended(BcrosFormSectionPropertyManagerBusinessDetails, {
     global: { plugins: [i18n] },
     props: {
       businessName: 'Test Business',
       businessNumber: '123456'
     }
   })
 
-  const businessNameInput = wrapper.find('[data-test-id="property-manager-business-name-input"]')
-  const businessNumberInput = wrapper.find('[data-test-id="property-manager-business-number-input"]')
+  const businessNameInput = wrapper.findTestId('property-manager-business-name-input')
+  const businessNumberInput = wrapper.findTestId('property-manager-business-number-input')
 
   expect((businessNameInput.element as HTMLInputElement).value).toBe('Test Business')
   expect((businessNumberInput.element as HTMLInputElement).value).toBe('123456')

strr-web/tests/unit/components/form-section/property-manager/BusinessMailingAddress.spec.ts

@@ -7,9 +7,10 @@ import { BcrosFormSectionPropertyManagerBusinessMailingAddress } from '#componen
 const i18n = createI18n({
   // vue-i18n options here ...
 })
+let wrapper: any
 
 it('can mount Business Mailing Address component', async () => {
-  const businessMailingAddress = await mountSuspended(BcrosFormSectionPropertyManagerBusinessMailingAddress,
+  wrapper = await mountSuspended(BcrosFormSectionPropertyManagerBusinessMailingAddress,
     {
       global: { plugins: [i18n] },
       props: {
@@ -19,16 +20,16 @@ it('can mount Business Mailing Address component', async () => {
         errors: {}
       }
     })
-  expect(businessMailingAddress.find('[data-test-id="property-manager-business-address"]').exists()).toBe(true)
-  expect(businessMailingAddress.find('[data-test-id="property-manager-country-select"]').exists()).toBe(true)
-  expect(businessMailingAddress.find('[data-test-id="property-manager-address-input"]').exists()).toBe(true)
-  expect(businessMailingAddress.find('[data-test-id="property-manager-address-line-two-input"]').exists()).toBe(true)
-  expect(businessMailingAddress.find('[data-test-id="property-manager-city-input"]').exists()).toBe(true)
-  expect(businessMailingAddress.find('[data-test-id="property-manager-postal-code-input"]').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-business-address').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-country-select').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-address-input').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-address-line-two-input').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-city-input').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-postal-code-input').exists()).toBe(true)
 })
 
 it('shows province select for CA and US', async () => {
-  const businessMailingAddress = await mountSuspended(BcrosFormSectionPropertyManagerBusinessMailingAddress,
+  wrapper = await mountSuspended(BcrosFormSectionPropertyManagerBusinessMailingAddress,
     {
       global: { plugins: [i18n] },
       props: {
@@ -38,12 +39,12 @@ it('shows province select for CA and US', async () => {
         errors: {}
       }
     })
-  expect(businessMailingAddress.find('[data-test-id="property-manager-province-select"]').exists()).toBe(true)
-  expect(businessMailingAddress.find('[data-test-id="property-manager-province-input"]').exists()).toBe(false)
+  expect(wrapper.findTestId('property-manager-province-select').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-province-input').exists()).toBe(false)
 })
 
 it('shows province input for other countries', async () => {
-  const businessMailingAddress = await mountSuspended(BcrosFormSectionPropertyManagerBusinessMailingAddress,
+  wrapper = await mountSuspended(BcrosFormSectionPropertyManagerBusinessMailingAddress,
     {
       global: { plugins: [i18n] },
       props: {
@@ -53,6 +54,6 @@ it('shows province input for other countries', async () => {
         errors: {}
       }
     })
-  expect(businessMailingAddress.find('[data-test-id="property-manager-province-select"]').exists()).toBe(false)
-  expect(businessMailingAddress.find('[data-test-id="property-manager-province-input"]').exists()).toBe(true)
+  expect(wrapper.findTestId('property-manager-province-select').exists()).toBe(false)
+  expect(wrapper.findTestId('property-manager-province-input').exists()).toBe(true)
 })