UI - hosts step 2 first cut

strr-base-web/app/app.config.ts

@@ -21,6 +21,10 @@ export default defineAppConfig({
       },
       gap: { sm: 'gap-x-2.5' }
     },
+    checkbox: {
+      wrapper: 'space-x-0',
+      base: 'size-5 cursor-pointer m-0'
+    },
     input: {
       file: {
         base: 'file:text-gray-700 file:pt-2'
@@ -37,6 +41,9 @@ export default defineAppConfig({
         }
       }
     },
+    radio: {
+      base: 'size-5 cursor-pointer'
+    },
     radioGroup: {
       wrapper: 'max-w-bcGovInput'
     },

strr-base-web/app/components/connect/InfoWithIcon.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string,
+  iconClass?: string,
+  content?: string,
+  contentClass?: string,
+  wrapperClass?: string
+}>()
+</script>
+<template>
+  <div :class="wrapperClass || 'flex space-x-2'">
+    <UIcon :name="icon" :class="iconClass || 'size-5'" />
+    <div :class="contentClass || 'space-y-3'">
+      <slot>
+        <p>{{ content || '' }}</p>
+      </slot>
+    </div>
+  </div>
+</template>

strr-base-web/app/components/connect/form/address/Display.vue

@@ -7,11 +7,10 @@ const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
 
 const addressData = computed((): string[] => {
   return [
-    [
+    props.address.street || [
       [props.address.unitNumber, props.address.streetNumber].filter(val => !!val).join('-'),
-      props.address.street
+      props.address.streetName
     ].filter(val => !!val).join(' ') || '',
-    props.address.street || '',
     props.address.streetAdditional || '',
     [props.address.city, props.address.region, props.address.postalCode].filter(val => !!val).join(' ') || '',
     regionNamesInEnglish.of(props.address.country || '') || props.address.country || ''

strr-base-web/app/components/connect/form/address/Index.vue

@@ -23,10 +23,15 @@ const props = defineProps<{
   disabledFields?: AddressField[],
   excludedFields?: AddressField[],
   // TODO: cleanup below strategies
+  hideStreetHint?: boolean,
   locationDescLabel?: boolean,
   unitNumbRequired?: boolean
 }>()
 
+const checkFieldsExcluded = (fields: AddressField[]) => {
+  return fields.every(field => props.excludedFields?.includes(field))
+}
+
 const { address: canadaPostAddress, enableAddressComplete } = useCanadaPostAddress()
 
 const countries = iscCountriesListSortedByName
@@ -105,7 +110,7 @@ const addId = useId()
   <div class="space-y-3">
     <!-- country menu -->
     <UFormGroup
-      v-if="!excludedFields?.includes('country')"
+      v-if="!checkFieldsExcluded(['country'])"
       :name="schemaPrefix + 'country'"
       class="grow"
     >
@@ -136,10 +141,13 @@ const addId = useId()
       </template>
     </UFormGroup>
     <!-- street number / name / unit number -->
-    <div class="flex flex-col gap-3 sm:flex-row">
+    <div
+      v-if="!checkFieldsExcluded(['streetNumber', 'streetName', 'unitNumber'])"
+      class="flex flex-col gap-3 sm:flex-row"
+    >
       <!-- street number input -->
       <ConnectFormFieldGroup
-        v-if="!excludedFields?.includes('streetNumber')"
+        v-if="!checkFieldsExcluded(['streetNumber'])"
         :id="id + '-streetNumber'"
         v-model="streetNumber"
         class="w-full grow"
@@ -154,7 +162,7 @@ const addId = useId()
       />
       <!-- street name input -->
       <ConnectFormFieldGroup
-        v-if="!excludedFields?.includes('streetName')"
+        v-if="!checkFieldsExcluded(['streetName'])"
         :id="id + '-streetName'"
         v-model="streetName"
         class="w-full grow"
@@ -169,7 +177,7 @@ const addId = useId()
       />
       <!-- unit number input -->
       <ConnectFormFieldGroup
-        v-if="!excludedFields?.includes('unitNumber')"
+        v-if="!checkFieldsExcluded(['unitNumber'])"
         :id="schemaPrefix + 'unitNumber'"
         v-model="unitNumber"
         class="w-full grow"
@@ -183,7 +191,7 @@ const addId = useId()
     </div>
     <!-- street input -->
     <UFormGroup
-      v-if="!excludedFields?.includes('street')"
+      v-if="!checkFieldsExcluded(['street'])"
       :name="schemaPrefix + 'street'"
       class="grow"
     >
@@ -204,7 +212,7 @@ const addId = useId()
         />
       </template>
       <template #help>
-        <span :id="schemaPrefix + 'street-' + addId">
+        <span v-if="!hideStreetHint" :id="schemaPrefix + 'street-' + addId">
           {{ $t('text.streetHint') }}
         </span>
       </template>
@@ -217,7 +225,7 @@ const addId = useId()
     </UFormGroup>
     <!-- street line 2 -->
     <UFormGroup
-      v-if="!excludedFields?.includes('streetAdditional')"
+      v-if="!checkFieldsExcluded(['streetAdditional'])"
       :name="schemaPrefix + 'streetAdditional'"
       class="grow"
     >
@@ -230,10 +238,10 @@ const addId = useId()
         :disabled="disabledFields?.includes('streetAdditional')"
       />
     </UFormGroup>
-    <div class="flex flex-col gap-3 sm:flex-row">
+    <div v-if="!checkFieldsExcluded(['city', 'region', 'postalCode'])" class="flex flex-col gap-3 sm:flex-row">
       <!-- city input -->
       <ConnectFormFieldGroup
-        v-if="!excludedFields?.includes('city')"
+        v-if="!checkFieldsExcluded(['city'])"
         :id="schemaPrefix + 'city'"
         v-model="city"
         class="w-full grow"
@@ -246,7 +254,7 @@ const addId = useId()
       />
       <!-- region input/menu -->
       <UFormGroup
-        v-if="!excludedFields?.includes('region')"
+        v-if="!checkFieldsExcluded(['region'])"
         :name="schemaPrefix + 'region'"
         class="w-full grow"
       >
@@ -291,7 +299,7 @@ const addId = useId()
       </UFormGroup>
       <!-- postal code input -->
       <ConnectFormFieldGroup
-        v-if="!excludedFields?.includes('postalCode')"
+        v-if="!checkFieldsExcluded(['postalCode'])"
         :id="schemaPrefix + 'postalCode'"
         v-model="postalCode"
         class="w-full grow"
@@ -306,7 +314,7 @@ const addId = useId()
     </div>
     <!-- delivery details input -->
     <UFormGroup
-      v-if="!excludedFields?.includes('locationDescription')"
+      v-if="!checkFieldsExcluded(['locationDescription'])"
       :name="schemaPrefix + 'locationDescription'"
     >
       <UTextarea

strr-base-web/app/locales/en-CA.ts

@@ -8,6 +8,7 @@ export default {
     inactiveAccount: 'INACTIVE ACCOUNT'
   },
   btn: {
+    done: 'Done',
     getStarted: 'Get Started',
     goHome: 'Go Home',
     goBack: 'Go Back',
@@ -117,9 +118,13 @@ export default {
     genericLogin: 'Generic Login Image'
   },
   label: {
+    additionalInfo: 'Additional Information',
     applicationDate: 'Application Date',
+    born: 'Born',
+    details: 'Details',
     expiryDate: 'Expiry Date',
     registrationDate: 'Registration Date',
+    role: 'Role',
     note: 'Note',
     optional: 'Optional',
     characters: 'characters',
@@ -177,16 +182,20 @@ export default {
     },
     socialInsuranceNumber: 'Social Insurance Number (SIN)',
     taxNumber: 'Tax Number',
+    craBusTaxNumber: 'CRA Business Tax Number',
+    craTaxNumber: 'CRA Tax Number',
+    craTaxNumberExtra: 'CRA Tax Number (SIN, ITN, or TTN)',
     busName: 'Business Name',
-    busNameLegal: 'Legal Name',
+    busNameLegal: 'Business Legal Name',
     corpNum: 'Incorporation Number',
     busNum: 'Business Number',
-    busNumOpt: 'Business Number (Optional)',
+    busNumOpt: 'Canada Revenue Agency Business Number (Optional)',
     cpbcLicNum: 'CPBC Licence Number',
     registrationNum: 'Registration Number',
     applicationNum: 'Application Number',
     homeJurisdiction: 'Home Jurisdiction',
     homeJurisdictionOpt: 'Home Jurisdiction (Optional)',
+    legalName: 'Legal Name',
     name: 'Name',
     mailingAddress: 'Mailing Address',
     deliveryAddress: 'Delivery Address',

strr-base-web/app/utils/connect-validation/phone.ts

@@ -2,6 +2,7 @@ import { z } from 'zod'
 import { getRequiredNonEmptyString, optionalOrEmptyString } from '.'
 
 export const getRequiredPhone = (countryCodeMessage: string, numberMessage: string) => z.object({
+  countryIso2: optionalOrEmptyString,
   countryCode: getRequiredNonEmptyString(countryCodeMessage),
   number: getRequiredNonEmptyString(numberMessage),
   extension: optionalOrEmptyString

strr-host-pm-web/app/components/form/AddOwners.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+defineProps<{ isComplete: boolean }>()
+
+const contactStore = useHostOwnerStore()
+const { hostOwners, hasHost, hasCoHost, hasCompParty, hasPropertyManager } = storeToRefs(contactStore)
+
+const editingIndex = ref<number | undefined>(undefined)
+const addingNewType = ref<OwnerType | undefined>(undefined)
+
+</script>
+
+<template>
+  <div data-testid="add-owner" class="space-y-10">
+    <div>
+      <p class="font-bold">
+        {{ $t('strr.text.applicationMustInclude') }}
+      </p>
+      <!-- TODO: move to generic component as 'ConnectList' -->
+      <ul class="mt-5 list-outside list-disc space-y-3 pl-10">
+        <li
+          :class="hasCompParty || (!hasCompParty && isComplete)
+            ? '-ml-6 flex list-none space-x-1'
+            : ''"
+        >
+          <UIcon v-if="hasCompParty" name="i-mdi-check" class="size-5 text-green-600" />
+          <UIcon v-else-if="!hasCompParty && isComplete" name="i-mdi-close" class="mt-[2px] size-5 text-red-600" />
+          <span>{{ $t('strr.text.includeCompletingParty') }}</span>
+        </li>
+        <li
+          :class="hasHost || (!hasHost && isComplete)
+            ? '-ml-6 flex list-none space-x-1'
+            : ''"
+        >
+          <UIcon v-if="hasHost" name="i-mdi-check" class="size-5 text-green-600" />
+          <UIcon v-else-if="!hasHost && isComplete" name="i-mdi-close" class="mt-[2px] size-5 text-red-600" />
+          <span>{{ $t('strr.text.includeHost') }}</span>
+        </li>
+        <li
+          :class="hasPropertyManager || isComplete
+            ? '-ml-6 flex list-none space-x-1'
+            : ''"
+        >
+          <UIcon v-if="hasPropertyManager" name="i-mdi-check" class="size-5 text-green-600" />
+          <UIcon
+            v-else-if="isComplete"
+            name="i-mdi-information-outline"
+            class="mt-[2px] size-5 text-blue-500"
+          />
+          <span>{{ $t('strr.text.includePropertyManager') }}</span>
+        </li>
+      </ul>
+    </div>
+    <div class="flex space-x-5">
+      <UButton
+        :label="$t('strr.label.addIndividual')"
+        class="px-5 py-3"
+        color="primary"
+        icon="i-mdi-account-plus"
+        variant="outline"
+        :disabled="editingIndex !== undefined || !!addingNewType || (hasHost && hasCoHost)"
+        @click="addingNewType = OwnerType.INDIVIDUAL"
+      />
+      <UButton
+        :label="$t('strr.label.addBusiness')"
+        class="px-5 py-3"
+        color="primary"
+        icon="i-mdi-domain-plus"
+        variant="outline"
+        :disabled="editingIndex !== undefined || !!addingNewType || (hasHost && hasPropertyManager)"
+        @click="addingNewType = OwnerType.BUSINESS"
+      />
+    </div>
+    <FormOwner
+      v-if="addingNewType"
+      :owner-type="addingNewType"
+      :is-complete="isComplete"
+      @cancel="addingNewType = undefined"
+      @done="contactStore.addHostOwner($event); addingNewType = undefined"
+    />
+    <SummaryOwners v-if="hostOwners.length" editable :disable-actions="addingNewType !== undefined" />
+  </div>
+</template>