UI - business number form hint / validation

Signed-off-by: Kial Jinnah <[email protected]>
bcgov · Dec 13, 2024 · 50a541c · 50a541c
1 parent 7f89aba
commit 50a541c
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 10 deletions.
diff --git a/strr-base-web/app/composables/useStrrBaseBusiness.ts b/strr-base-web/app/composables/useStrrBaseBusiness.ts
@@ -1,14 +1,12 @@
-// TODO: move to strr-base-web layer
 import { z } from 'zod'
-import { getRequiredAddress, getRequiredNonEmptyString, optionalOrEmptyString } from '~/utils/connect-validation'
 
 export const useStrrBaseBusiness = <T extends StrrBusiness>() => {
   const { t } = useI18n()
   const getBaseBusinessSchema = () => {
     return z.object({
       legalName: getRequiredNonEmptyString(t('validation.business.legalName')),
       homeJurisdiction: optionalOrEmptyString,
-      businessNumber: optionalOrEmptyString,
+      businessNumber: getOptionalBn15(t('validation.business.bn15')),
       mailingAddress: getRequiredAddress(
         t('validation.address.street'),
         t('validation.address.city'),

diff --git a/strr-base-web/app/locales/en-CA.ts b/strr-base-web/app/locales/en-CA.ts
@@ -433,6 +433,7 @@ export default {
       site: 'Please enter a valid full url for this brand (i.e. https://www.bcregistry.gov.bc.ca)'
     },
     business: {
+      bn15: 'Please enter a valid 15-character business number (e.g., 123456789BC0001)',
       legalName: 'Please enter the legal name',
       jurisdiction: 'Please enter the business home jurisdiction',
       cpbc: 'Please enter a valid CPBC number'
@@ -492,7 +493,7 @@ export default {
     hint: {
       businessLegalNamePlatform: 'The full legal name of the platform service provider',
       businessLegalNameStrataHotel: 'The full legal name of the business that is operating the strata-titled hotel or motel. Include corporate designations (e.g., “Ltd.”, “Inc.”, “LLC.”)',
-      businessNumber: 'Canada Revenue Agency (CRA) Business Number',
+      businessNumber: '15-character business number (e.g., 123456789BC0001)',
       humeJurisdiction: 'The regional or federal jurisdiction where the business was incorporated or registered, if applicable',
       position: 'Enter your current job title or position'
     },

diff --git a/strr-base-web/app/utils/connect-validation/business-number.ts b/strr-base-web/app/utils/connect-validation/business-number.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+
+export const bn15Rgx = /^\d{9}[A-Za-z]{2}\d{4}$/
+
+export const getOptionalBn15 = (message: string) => z
+  .string()
+  .refine(val => val === '' || bn15Rgx.test(val), message)
+  .optional()
+
+export const getRequiredBn15 = (message: string) => z
+  .string()
+  .refine(val => bn15Rgx.test(val), message)
diff --git a/strr-base-web/app/utils/connect-validation/index.ts b/strr-base-web/app/utils/connect-validation/index.ts
@@ -1,6 +1,7 @@
 import { z } from 'zod'
 
 export * from './address'
+export * from './business-number'
 export * from './email'
 export * from './folio-number'
 export * from './name'

diff --git a/strr-host-pm-web/app/components/form/AddOwners/input/Business.vue b/strr-host-pm-web/app/components/form/AddOwners/input/Business.vue
@@ -55,6 +55,8 @@ defineEmits<{
           :aria-label="$t('label.busNumOpt')"
           name="businessNumber"
           :placeholder="$t('label.busNumOpt')"
+          :help="$t('strr.hint.businessNumber')"
+          mask="#########@@####"
         />
       </ConnectFormSection>
       <ConnectFormSection

diff --git a/strr-host-pm-web/app/components/form/AddOwners/input/Person.vue b/strr-host-pm-web/app/components/form/AddOwners/input/Person.vue
@@ -66,7 +66,7 @@ watch(isCompParty, (val) => {
       :title="$t('strr.section.subTitle.individualName')"
       :error="showErrors && hasFormErrors(ownerFormRef, ['firstName', 'middleName', 'lastName'])"
     >
-      <div class="max-w-bcGovInput flex flex-col gap-3 sm:flex-row">
+      <div class="flex max-w-bcGovInput flex-col gap-3 sm:flex-row">
         <ConnectFormFieldGroup
           id="host-owner-first-name"
           v-model="owner.firstName"

diff --git a/strr-host-pm-web/app/components/form/DefineYourRental/UnitAddress.vue b/strr-host-pm-web/app/components/form/DefineYourRental/UnitAddress.vue
@@ -86,7 +86,7 @@ onMounted(async () => {
           ])"
         >
           <ConnectTransitionCollapse>
-            <div v-if="!reqStore.hasReqs && !reqStore.hasReqError" class="max-w-bcGovInput flex flex-col gap-10">
+            <div v-if="!reqStore.hasReqs && !reqStore.hasReqError" class="flex max-w-bcGovInput flex-col gap-10">
               <div class="flex flex-col gap-3">
                 <p>{{ $t('text.unitAddressIntro') }}</p>
                 <p>{{ $t('text.unitAddressIntroNote') }}</p>
@@ -146,7 +146,7 @@ onMounted(async () => {
                   :form-ref="unitAddressFormRef"
                   :unit-number-required="propStore.isUnitNumberRequired"
                 />
-                <div class="max-w-bcGovInput flex w-full justify-end gap-4">
+                <div class="flex w-full max-w-bcGovInput justify-end gap-4">
                   <UButton
                     :label="$t('btn.cancel')"
                     size="bcGov"

diff --git a/strr-host-pm-web/app/stores/hostOwner.ts b/strr-host-pm-web/app/stores/hostOwner.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import { getOptionalBn15 } from '../../../strr-base-web/app/utils/connect-validation/business-number'
 
 export const useHostOwnerStore = defineStore('host/owner', () => {
   // TODO: pull common pieces of this and useStrrContactStore into base composable
@@ -28,7 +29,7 @@ export const useHostOwnerStore = defineStore('host/owner', () => {
       businessLegalName: type === OwnerType.BUSINESS
         ? getRequiredNonEmptyString(t('validation.business.legalName'))
         : optionalOrEmptyString,
-      businessNumber: optionalOrEmptyString,
+      businessNumber: getOptionalBn15(t('validation.business.bn15')),
       dateOfBirth: type === OwnerType.INDIVIDUAL && role === OwnerRole.HOST
         ? getRequiredNonEmptyString(t('validation.dateOfBirth'))
         : optionalOrEmptyString,

diff --git a/strr-platform-web/app/components/form/platform/BusinessDetails.vue b/strr-platform-web/app/components/form/platform/BusinessDetails.vue
@@ -103,6 +103,8 @@ onMounted(async () => {
               :aria-label="$t('label.busNumOpt')"
               name="businessNumber"
               :placeholder="$t('label.busNumOpt')"
+              :help="$t('strr.hint.businessNumber')"
+              mask="#########@@####"
             />
             <UFormGroup id="platform-business-hasCpbc" name="hasCpbc">
               <URadioGroup

diff --git a/strr-platform-web/package.json b/strr-platform-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-platform-web",
   "private": true,
   "type": "module",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

diff --git a/strr-strata-web/app/components/form/BusinessDetails.vue b/strr-strata-web/app/components/form/BusinessDetails.vue
@@ -97,6 +97,8 @@ onMounted(async () => {
               :aria-label="$t('label.busNumOpt')"
               name="businessNumber"
               :placeholder="$t('label.busNumOpt')"
+              :help="$t('strr.hint.businessNumber')"
+              mask="#########@@####"
             />
           </div>
         </ConnectFormSection>

diff --git a/strr-strata-web/package.json b/strr-strata-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-strata-web",
   "private": true,
   "type": "module",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",