Host uxa (#408)

* fee widget borders, icon spacing, column date formatting and column width formatting

* button control padding, address lookup width

* requirements spacing

* number of rooms updates

* add missing location description link

* button padding

* fix review paragraphs

* fix nuxt config

* bump version

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

@@ -53,7 +53,8 @@ export default defineAppConfig({
     },
     radioGroup: {
       wrapper: 'max-w-bcGovInput',
-      fieldset: '*:mb-1'
+      fieldset: 'space-y-4 -mt-4',
+      legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-0'
     },
     select: {
       color: {

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

@@ -15,7 +15,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
             <UButton
               v-for="(button, i) in leftButtons"
               :key="'left-button-' + i"
-              class="max-w-fit px-10 py-3"
+              class="max-w-fit px-7 py-3"
               :color="button.color || 'primary'"
               :icon="button.icon || ''"
               :label="button.label"
@@ -33,7 +33,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
             <UButton
               v-for="(button, i) in rightButtons"
               :key="'right-button-' + i"
-              class="max-w-fit px-10 py-3"
+              class="max-w-fit px-7 py-3"
               :class="button.class"
               block
               :color="button.color || 'primary'"

strr-base-web/app/components/connect/fee/Widget.vue

@@ -77,7 +77,7 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
       </template>
     </UButton>
     <div
-      class="text-sm transition-all *:border-b *:border-bcGovGray-300"
+      class="divide-y divide-bcGovGray-300 text-sm transition-all"
       :class="folded ? 'h-[0px] overflow-hidden': 'px-4 pt-1'"
     >
       <div

strr-base-web/app/components/connect/form/field/Group.vue

@@ -21,7 +21,9 @@ const props = defineProps({
   ariaLabel: { type: String, default: undefined },
   type: { type: String, default: 'text' },
   mask: { type: String, default: undefined },
-  maxlength: { type: Number, default: 1000 }
+  maxlength: { type: Number, default: 1000 },
+  min: { type: Number, default: undefined },
+  max: { type: Number, default: undefined }
 })
 
 const inputId = useId()
@@ -48,6 +50,8 @@ const errorId = `${props.name}-error-${inputId}`
           :aria-label="ariaLabel"
           size="lg"
           :maxlength
+          :min
+          :max
         />
       </slot>
     </template>

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

@@ -14,7 +14,9 @@ defineProps({
   ariaLabel: { type: String, default: undefined },
   type: { type: String, default: 'text' },
   mask: { type: String, default: undefined },
-  maxlength: { type: Number, default: 1000 }
+  maxlength: { type: Number, default: 1000 },
+  min: { type: Number, default: undefined },
+  max: { type: Number, default: undefined }
 })
 
 defineExpose({ model })
@@ -38,6 +40,8 @@ defineExpose({ model })
     :aria-describedby="helpId"
     :aria-label="ariaLabel"
     :maxlength
+    :min
+    :max
   />
   <!-- :aria-errormessage="errorId" -->
   <!-- Doesnt look like aria-errormessage is well supported, need to look into this more -->

strr-base-web/app/components/modal/group/HelpAndInfo.vue

@@ -8,6 +8,7 @@ const strrModal = useStrrModals()
       :padded="false"
       icon="i-mdi-help-circle-outline"
       variant="link"
+      :ui="{ gap: { sm: 'gap-x-1' } }"
       @click="strrModal.openHelpRegisterModal()"
     />
 
@@ -21,6 +22,7 @@ const strrModal = useStrrModals()
       :padded="false"
       icon="i-mdi-information-circle-outline"
       variant="link"
+      :ui="{ gap: { sm: 'gap-x-1' } }"
       @click="strrModal.openInfoCollectionNoticeModal()"
     />
   </div>

strr-host-pm-web/app/components/document/list/Item.vue

@@ -39,9 +39,8 @@ defineEmits<{
         </div>
       </div>
       <UButton
-        :label="'Remove'"
+        :label="$t('word.Remove')"
         variant="link"
-        icon="i-mdi-trashcan"
         :disabled="doc.loading"
         @click="$emit('remove', doc)"
       />

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

@@ -60,7 +60,7 @@ const checklistItems = computed<ConnectValidatedChecklistItem[]>(() => [
               :padded="false"
               variant="link"
               target="_blank"
-              class="text-base underline"
+              class="text-base underline italic"
             />
           </template>
         </i18n-t>

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

@@ -78,6 +78,7 @@ defineEmits<{
           v-model:city="owner.mailingAddress.city"
           v-model:region="owner.mailingAddress.region"
           v-model:postal-code="owner.mailingAddress.postalCode"
+          v-model:location-description="owner.mailingAddress.locationDescription"
           class="max-w-bcGovInput"
           :excluded-fields="['streetName', 'streetNumber', 'unitNumber']"
           :schema-prefix="'mailingAddress.'"

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

@@ -167,11 +167,13 @@ watch(isCompParty, (val) => {
           v-model:city="owner.mailingAddress.city"
           v-model:region="owner.mailingAddress.region"
           v-model:postal-code="owner.mailingAddress.postalCode"
+          v-model:location-description="owner.mailingAddress.locationDescription"
           class="max-w-bcGovInput"
           :excluded-fields="['streetName', 'streetNumber', 'unitNumber']"
           :schema-prefix="'mailingAddress.'"
           :form-ref="ownerFormRef"
           hide-street-hint
+          :location-desc-label="owner.role === OwnerRole.HOST"
         />
       </ConnectFormSection>
       <ConnectFormSection

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

@@ -9,14 +9,14 @@ defineEmits<{
   <div class="flex justify-end space-x-5">
     <UButton
       :label="$t('btn.cancel')"
-      class="px-5 py-3"
+      class="px-7 py-3"
       color="primary"
       variant="outline"
       @click="$emit('cancel')"
     />
     <UButton
       :label="$t('btn.done')"
-      class="px-5 py-3"
+      class="px-7 py-3"
       color="primary"
       @click="$emit('done')"
     />

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

@@ -41,7 +41,7 @@ const radioOptions = computed(() => [
       :class="showError && role === undefined ? 'border-red-600 border-2' : ''"
       :options="radioOptions"
       :ui="{ fieldset: 'flex grow' }"
-      :ui-radio="{ wrapper: 'grow justify-center space-x-0', label: 'pl-0' }"
+      :ui-radio="{ wrapper: 'grow justify-start -ml-2 space-x-0', label: 'pl-0' }"
     >
       <template #legend>
         <span class="sr-only">{{ $t('validation.required') }}</span>

strr-host-pm-web/app/components/form/DefineYourRental/UnitAddress.vue

@@ -93,6 +93,7 @@ onMounted(async () => {
               </div>
               <div class="flex flex-col items-start gap-4 xl:flex-row">
                 <FormUnitAddressAutoComplete
+                  class="min-w-80"
                   id="rental-property-address-lookup"
                   v-model:address-input="propStore.unitAddress.address.street"
                   v-model:street-number="propStore.unitAddress.address.streetNumber"
@@ -194,7 +195,6 @@ onMounted(async () => {
                   <template #panel>
                     <UButton
                       class="m-2"
-                      icon="i-mdi-trashcan"
                       :label="$t('word.Remove')"
                       variant="link"
                       @click="hostModal.openConfirmRestartApplicationModal(false)"

strr-host-pm-web/app/components/form/DefineYourRental/UnitDetails.vue

@@ -117,13 +117,16 @@ onMounted(async () => {
               PropertyType.CONDO_OR_APT,
               PropertyType.STRATA_HOTEL
             ].includes(propStore.unitDetails.propertyType)"
-            class="mt-6"
+            class="mt-6 max-w-bcGovInput"
             color="yellow"
             icon="i-mdi-alert"
             :close-button="null"
             variant="subtle"
             :ui="{
               inner: 'pt-0',
+              icon: {
+                base: 'flex-shrink-0 w-5 h-5 self-start'
+              }
             }"
           >
             <template #title>
@@ -189,6 +192,8 @@ onMounted(async () => {
             :placeholder="$t('strr.label.numberOfRooms')"
             :is-required="true"
             type="number"
+            :min="0"
+            :max="5000"
           />
         </ConnectFormSection>
 

strr-host-pm-web/app/components/form/DefineYourRental/UnitRequirements/List.vue

@@ -3,7 +3,7 @@ const reqStore = usePropertyReqStore()
 const config = useRuntimeConfig().public
 </script>
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-4 border-y border-bcGovGray-300 pt-10">
     <span class="font-bold">
       {{ reqStore.overrideApplicationWarning
         ? $t('text.thisPropCouldBeInLocWithReqs')
@@ -14,13 +14,14 @@ const config = useRuntimeConfig().public
       :items="reqStore.requirementsList"
       multiple
       :ui="{
-        item: { padding: 'pt-1.5 pb-3 px-8' }
+        item: { padding: 'pt-1.5 pb-3 px-8' },
+        container: 'border-none'
       }"
     >
       <template #default="{ item, open }">
         <UButton
           variant="ghost"
-          class="justify-between px-2 py-4"
+          class="justify-between pr-2 pl-0 py-4 border-t border-bcGovGray-300"
           :ui="{
             rounded: 'rounded-none'
           }"

strr-host-pm-web/app/components/form/Review/Index.vue

@@ -133,7 +133,7 @@ const getCompPartyName = computed(() => {
         <template #item-1>
           <i18n-t keypath="certify.1" scope="global">
             <template #terms>
-              <strong>{{ $t('certify.tac') }}.</strong>
+              <strong>{{ $t('certify.tac') }}</strong>
             </template>
             <template #link>
               <UButton

strr-host-pm-web/app/components/summary/Owners.vue

@@ -86,7 +86,9 @@ const getPhoneNumber = (phone: ConnectPhone) => {
       </ConnectInfoWithIcon>
     </template>
     <template #details-data="{ row }: { row: HostOwner }">
-      <ConnectInfoWithIcon icon="i-mdi-email">
+      <ConnectInfoWithIcon 
+        :icon="row.role === OwnerRole.HOST ? 'i-mdi-map-marker-outline' : 'i-mdi-email'"
+      >
         <ConnectFormAddressDisplay v-if="row.mailingAddress?.country" :address="row.mailingAddress" />
       </ConnectInfoWithIcon>
       <div v-if="row.ownerType === OwnerType.INDIVIDUAL" class="mt-3 space-y-3">
@@ -141,6 +143,7 @@ const getPhoneNumber = (phone: ConnectPhone) => {
       <div class="space-y-3">
         <p v-if="row.isCompParty">
           {{ $t('label.completingParty') }}
+          ({{ getFullName(row) }})
         </p>
         <p>{{ $t(`strr.label.role.${row.role}`) }}</p>
       </div>
@@ -165,8 +168,7 @@ const getPhoneNumber = (phone: ConnectPhone) => {
           <template #panel>
             <UButton
               class="m-2"
-              icon="i-mdi-trashcan"
-              :label="$t('word.remove')"
+              :label="$t('word.Remove')"
               variant="link"
               @click="ownerStore.removeHostOwner(index)"
             />

strr-host-pm-web/app/locales/en-CA.ts

@@ -22,8 +22,8 @@ export default {
   certify: {
     1: '{terms} I agree to comply with the {link} of registration.',
     2: '{boldStart}Tax Auditing.{boldEnd} I understand that my registration information will be shared with the Ministry of Finance and the Canada Revenue Agency for the purposes of tax auditing.',
-    3: "{boldStart}Principal Residence Declaration.{boldEnd} As required by section 14 (2) of the Short-Term Rental Accommodations Act (the Act), I declare that I will comply with the principal residence requirement in the Act and provide the short-term rental accommodation services described in this registration in one or both of: a. the property host's principal residence, and b. not more than one secondary suite or accessory dwelling unit on the same property. I understand that if I do not comply with the principal residence requirement, I may be subject to enforcement action under Part 4 of the Act, including being ordered to pay an administrative penalty.",
-    4: '{boldStart}Accuracy of Information.{boldEnd} I confirm that the information contained in the application for registration is accurate and true. I understand that if I have knowingly provided inaccurate or false information, I may be subject to enforcement action under Part 4 of the Short-Term Rental Accommodations Act.',
+    3: "{boldStart}Principal Residence Declaration.{boldEnd} As required by section 14 (2) of the {italicStart}Short-Term Rental Accommodations Act{italicEnd} (the Act), I declare that I will comply with the principal residence requirement in the Act and provide the short-term rental accommodation services described in this registration in one or both of: a. the property host's principal residence, and b. not more than one secondary suite or accessory dwelling unit on the same property. I understand that if I do not comply with the principal residence requirement, I may be subject to enforcement action under Part 4 of the Act, including being ordered to pay an administrative penalty.",
+    4: '{boldStart}Accuracy of Information.{boldEnd} I confirm that the information contained in the application for registration is accurate and true. I understand that if I have knowingly provided inaccurate or false information, I may be subject to enforcement action under Part 4 of the {italicStart}Short-Term Rental Accommodations Act{italicEnd}.',
     confirm: 'I, {boldStart}{name}{boldEnd}, confirm that I understand and agree to all of the requirements listed above.',
     authorization: 'I, {boldStart}{name}{boldEnd}, have relevant knowledge of and am authorized to submit this registration.',
     tac: 'Terms and Conditions.'
@@ -83,13 +83,13 @@ export default {
     step: {
       stepperLabel: 'Short-Term Rental Application Step Navigation',
       description: {
-        0: 'Define Your Rental',
+        0: 'Define Your Short-Term Rental',
         1: 'Add Individuals and Businesses',
         2: 'Add Supporting Documentation',
         3: 'Review and Confirm'
       },
       title: {
-        0: 'Define Your Rental',
+        0: 'Define Your Short-Term Rental',
         1: 'Individuals and Businesses',
         2: 'Add Supporting Documentation',
         3: 'Review and Confirm'
@@ -115,7 +115,7 @@ export default {
         craBusinessNumber: 'Canada Revenue Agency (CRA) Business Number',
         craTaxNum: 'Canada Revenue Agency (CRA) Tax Number',
         emailAddress: 'Email Address',
-        faxNumber: 'FaxNumber',
+        faxNumber: 'Fax Number',
         individualName: "Individual's Name",
         individualPreferredName: "Individual's Preferred Name",
         mailingAddress: 'Mailing Address',
@@ -230,7 +230,8 @@ export default {
     showDetails: 'Show Details',
     hideDetails: 'Hide Details',
     returnToStep: 'Return to the step to finish it',
-    ariaViewDetails: 'View details for property: {name}, {address}'
+    ariaViewDetails: 'View details for property: {name}, {address}',
+    registerAStr: 'Register a Short-Term Rental'
   },
   error: {
     createAccount: {

strr-host-pm-web/app/pages/dashboard/index.vue

@@ -33,7 +33,7 @@ const columns = [
     key: 'daysToExpiry',
     label: t('label.daysToExpiryExtra'),
     sortable: true,
-    class: 'max-w-28'
+    class: 'w-40'
   },
   {
     key: 'actions',
@@ -92,7 +92,7 @@ async function handleItemSelect (row: any) {
 
     <div class="space-y-4">
       <UButton
-        :label="$t('btn.createNewReg')"
+        :label="$t('btn.registerAStr')"
         icon="i-mdi-plus"
         :to="localePath('/application')"
       />
@@ -166,7 +166,7 @@ async function handleItemSelect (row: any) {
 
           <!-- using a slot for this so the nuxtui sort will still sort by datetime -->
           <template #lastStatusChange-data="{ row }">
-            {{ dateToStringPacific(row.lastStatusChange, 'DDD') }}
+            {{ dateToStringPacific(row.lastStatusChange, 'yyyy-dd-MM') }}
           </template>
 
           <template #daysToExpiry-data="{ row }">

strr-host-pm-web/app/stores/hostProperty.ts

@@ -145,8 +145,14 @@ export const useHostPropertyStore = defineStore('host/property', () => {
     ], {
       errorMap: () => ({ message: t('validation.rentalUnitSetupType') })
     }),
-    numberOfRoomsForRent: z.number({ required_error: t('validation.numberOfRooms.empty') })
-      .int({ message: t('validation.numberOfRooms.invalidInput') }).min(0)
+    numberOfRoomsForRent: z
+      .number({ 
+        required_error: t('validation.numberOfRooms.empty'),
+        invalid_type_error: t('validation.numberOfRooms.invalidInput')
+      })
+      .int({ message: t('validation.numberOfRooms.invalidInput') })
+      .min(0)
+      .max(5000)
   })
 
   const getEmptyUnitDetails = (): UiUnitDetails => ({

strr-host-pm-web/package.json

@@ -2,7 +2,7 @@
   "name": "strr-host-pm-web",
   "private": true,
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

strr-strata-web/app/pages/strata-hotel/dashboard/index.vue

@@ -30,7 +30,7 @@ const columns = [
     key: 'daysToExpiry',
     label: t('label.daysToExpiry'),
     sortable: true,
-    class: 'max-w-28'
+    class: 'w-40'
   },
   {
     key: 'actions',
@@ -151,7 +151,7 @@ async function handleItemSelect (row: any) {
         >
           <!-- using a slot for this so the nuxtui sort will still sort by datetime -->
           <template #lastStatusChange-data="{ row }">
-            {{ dateToStringPacific(row.lastStatusChange, 'DDD') }}
+            {{ dateToStringPacific(row.lastStatusChange, 'yyyy-dd-MM') }}
           </template>
 
           <template #daysToExpiry-data="{ row }">

strr-strata-web/package.json

@@ -2,7 +2,7 @@
   "name": "strr-strata-web",
   "private": true,
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",