bcgov · deetz99 · Jan 9, 2025 · Jan 8, 2025 · Jan 8, 2025 · Jan 9, 2025
diff --git a/strr-base-web/app/app.config.ts b/strr-base-web/app/app.config.ts
@@ -12,6 +12,14 @@ export default defineAppConfig({
           idirSubtext: undefined
         }
       }
+    },
+    feeWidget: {
+      itemLabelTooltip: {
+        test: {
+          i18nkey: '',
+          hrefRtcKey: ''
+        }
+      }
     }
   },
   ui: {

diff --git a/strr-base-web/app/components/connect/fee/Widget.vue b/strr-base-web/app/components/connect/fee/Widget.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
+const fwConfig = useAppConfig().strrBaseLayer.feeWidget
+const rtc = useRuntimeConfig().public
 const {
   feeOptions,
   fees,
@@ -55,6 +57,20 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
   return `$${(feeItem.filingFees * (feeItem.quantity || 1)).toFixed(2)}`
 }
 
+const getFeeItemLabelTooltip = (typeCode: string) => {
+  const tooltip = fwConfig?.itemLabelTooltip[typeCode]
+  if (tooltip) {
+    let link: string | undefined
+    if (tooltip?.hrefRtcKey && tooltip?.hrefRtcKey in rtc) {
+      link = rtc[tooltip.hrefRtcKey] as string
+    }
+    return {
+      keypath: tooltip.i18nkey,
+      link
+    }
+  }
+  return undefined
+}
 </script>
 <template>
   <div
@@ -89,8 +105,36 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
             class="flex justify-between py-3"
           >
             <div>
-              <p class="font-bold">
-                {{ $t(`ConnectFeeWidget.feeSummary.itemLabels.${feeItem.filingTypeCode}`) }}
+              <p class="flex items-center gap-1 font-bold">
+                <span>{{ $t(`ConnectFeeWidget.feeSummary.itemLabels.${feeItem.filingTypeCode}`) }}</span>
+                <UPopover
+                  v-if="getFeeItemLabelTooltip(feeItem.filingTypeCode)"
+                  mode="hover"
+                  :popper="{ placement: 'right' }"
+                  :ui="{
+                    rounded: 'rounded',
+                    background: 'bg-gray-700/90',
+                    base: 'overflow-hidden focus:outline-none relative'
+                  }"
+                >
+                  <UIcon name="i-mdi-info-outline" class="size-5 shrink-0 translate-y-0.5 text-blue-500" />
+
+                  <template #panel>
+                    <div class="p-4 text-sm font-normal text-white">
+                      <UButton
+                        v-if="getFeeItemLabelTooltip(feeItem.filingTypeCode)?.link"
+                        :label="$t(`${getFeeItemLabelTooltip(feeItem.filingTypeCode)?.keypath}`)"
+                        :to="getFeeItemLabelTooltip(feeItem.filingTypeCode)?.link"
+                        variant="link"
+                        color="white"
+                        target="_blank"
+                        :padded="false"
+                        class="underline"
+                      />
+                      <span v-else>{{ $t(`${getFeeItemLabelTooltip(feeItem.filingTypeCode)?.keypath}`) }}</span>
+                    </div>
+                  </template>
+                </UPopover>
               </p>
               <p v-if="feeItem.quantity !== undefined && feeItem.quantityDesc" class="pl-4 text-gray-600">
                 x {{ feeItem.quantity }} {{ feeItem.quantityDesc }}

diff --git a/strr-base-web/app/components/connect/form/address/Display.vue b/strr-base-web/app/components/connect/form/address/Display.vue
@@ -4,7 +4,25 @@ const props = defineProps<{
   useLocationDescLabel?: boolean
 }>()
 
-const addressData = computed(() => getAddressDisplayParts(props.address))
+const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
+
+const addressData = computed(() => {
+  return [
+    props.address.street
+      ? `${props.address.street},`
+      : [
+          [props.address.unitNumber, props.address.streetNumber].filter(val => !!val).join('-'),
+          props.address.streetName ? `${props.address.streetName},` : undefined
+        ].filter(val => !!val).join(' ') || '',
+    props.address.streetAdditional ? `${props.address.streetAdditional},` : '',
+    [
+      props.address.city ? `${props.address.city},` : undefined,
+      props.address.region ? `${props.address.region}\u00A0` : undefined,
+      props.address.postalCode
+    ].filter(val => !!val).join(' ') || '',
+    props.address.country ? (regionNamesInEnglish.of(props.address.country) || props.address.country) : ''
+  ].filter(val => !!val)
+})
 </script>
 <template>
   <div data-testid="address-display">

diff --git a/strr-base-web/app/components/connect/form/field/Group.vue b/strr-base-web/app/components/connect/form/field/Group.vue
@@ -56,9 +56,11 @@ const errorId = `${props.name}-error-${inputId}`
       </slot>
     </template>
 
-    <template v-if="help" #help>
+    <template v-if="help || $slots.help" #help>
       <span :id="helpId">
-        {{ help }}
+        <slot name="help">
+          {{ help }}
+        </slot>
       </span>
     </template>
 

diff --git a/strr-base-web/app/types/strr-base-app-config.d.ts b/strr-base-web/app/types/strr-base-app-config.d.ts
@@ -12,6 +12,9 @@ declare module 'nuxt/schema' {
             idirSubtext: string | undefined
           }
         }
+      },
+      feeWidget?: {
+        itemLabelTooltip: Record<string, { i18nkey: string, hrefRtcKey?: keyof PublicRuntimeConfig }> // typeCode
       }
     }
   }
@@ -31,6 +34,9 @@ declare module 'nuxt/schema' {
             idirSubtext: string | undefined
           }
         }
+      },
+      feeWidget?: {
+        itemLabelTooltip: Record<string, { i18nkey: string, hrefRtcKey?: keyof PublicRuntimeConfig }> // typeCode
       }
     }
   }

diff --git a/strr-base-web/nuxt.config.ts b/strr-base-web/nuxt.config.ts
@@ -109,7 +109,7 @@ export default defineNuxtConfig({
     }
   },
 
-  piniaPersistedstate: {
+  piniaPluginPersistedstate: {
     storage: 'sessionStorage'
   },
 

diff --git a/strr-host-pm-web/.env.example b/strr-host-pm-web/.env.example
@@ -27,6 +27,7 @@ NUXT_HOUSING_PROOF_OF_PR_URL="https://www2.gov.bc.ca/gov/content/housing-tenancy
 NUXT_HOST_TAC_URL="https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/registry/registry-toc-hosts"
 NUXT_BCGOV_STRR_URL="https://www.gov.bc.ca/STRRegistry"
 NUXT_DECLINE_TOS_REDIRECT_URL="https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/registry"
+NUXT_HOST_FEES_URL="https://www2.gov.bc.ca/gov/content/housing-tenancy/short-term-rentals/registry/host-registration#fees"
 
 #vaults keycloak
 NUXT_KEYCLOAK_AUTH_URL="https://dev.loginproxy.gov.bc.ca/auth"

diff --git a/strr-host-pm-web/app/app.config.ts b/strr-host-pm-web/app/app.config.ts
@@ -43,6 +43,18 @@ export default defineAppConfig({
           bceidSubtext: 'text.bceidSubtext'
         }
       }
+    },
+    feeWidget: {
+      itemLabelTooltip: () => ({
+        HOSTREG_1: {
+          i18nkey: 'link.viewFeeSchedule',
+          hrefRtcKey: 'hostFeesUrl'
+        },
+        HOSTREG_2: {
+          i18nkey: 'link.viewFeeSchedule',
+          hrefRtcKey: 'hostFeesUrl'
+        }
+      })
     }
   },
   ui: {}

diff --git a/strr-host-pm-web/app/components/form/AddDocuments/index.vue b/strr-host-pm-web/app/components/form/AddDocuments/index.vue
@@ -43,7 +43,7 @@ onMounted(async () => {
       <i18n-t keypath="text.addAllReqDocs" scope="global">
         <template #link>
           <UButton
-            :label="$t('link.learnMore')"
+            :label="$t('link.viewRequiredDocs')"
             :to="config.housingLearnMoreUrl"
             :padded="false"
             variant="link"

diff --git a/strr-host-pm-web/app/components/form/AddOwners/Index.vue b/strr-host-pm-web/app/components/form/AddOwners/Index.vue
@@ -31,6 +31,12 @@ const checklistItems = computed<ConnectValidatedChecklistItem[]>(() => [
     label: t('strr.text.includeHost'),
     isValid: hasHost.value
   },
+  {
+    label: t('strr.text.includeCohost'),
+    isValid: hasCoHost.value,
+    invalidIcon: 'i-mdi-information-outline',
+    invalidIconClass: 'mt-[2px] size-5 text-blue-500'
+  },
   {
     label: t('strr.text.includePropertyManager'),
     isValid: hasPropertyManager.value,
@@ -52,7 +58,8 @@ const checklistItems = computed<ConnectValidatedChecklistItem[]>(() => [
       <template #text>
         <p>{{ $t('strr.text.helpOwner1') }}</p>
         <p>{{ $t('strr.text.helpOwner2') }}</p>
-        <i18n-t keypath="strr.text.helpOwner3" scope="global">
+        <p>{{ $t('strr.text.helpOwner3') }}</p>
+        <i18n-t keypath="strr.text.helpOwner4" scope="global">
           <template #link>
             <UButton
               :label="$t('link.hostAccomodationsAct')"

diff --git a/strr-host-pm-web/app/components/form/DefineYourRental/UnitAddress.vue b/strr-host-pm-web/app/components/form/DefineYourRental/UnitAddress.vue
@@ -137,6 +137,7 @@ onMounted(async () => {
                   v-model:street-additional="propStore.unitAddress.address.streetAdditional"
                   v-model:city="propStore.unitAddress.address.city"
                   v-model:postal-code="propStore.unitAddress.address.postalCode"
+                  v-model:location-description="propStore.unitAddress.address.locationDescription"
                   :schema-prefix="'address.'"
                   :disabled-fields="
                     reqStore.loadingReqs

diff --git a/strr-host-pm-web/app/components/form/DefineYourRental/UnitDetails.vue b/strr-host-pm-web/app/components/form/DefineYourRental/UnitDetails.vue
@@ -10,16 +10,16 @@ const { getUnitDetailsSchema } = useHostPropertyStore()
 const unitDetailsFormRef = ref<Form<any>>()
 
 const propertyTypes = [
+  { name: t(`propertyType.${PropertyType.SINGLE_FAMILY_HOME}`), value: PropertyType.SINGLE_FAMILY_HOME },
+  { name: t(`propertyType.${PropertyType.SECONDARY_SUITE}`), value: PropertyType.SECONDARY_SUITE },
   { name: t(`propertyType.${PropertyType.ACCESSORY_DWELLING}`), value: PropertyType.ACCESSORY_DWELLING },
-  { name: t(`propertyType.${PropertyType.BED_AND_BREAKFAST}`), value: PropertyType.BED_AND_BREAKFAST },
-  { name: t(`propertyType.${PropertyType.CONDO_OR_APT}`), value: PropertyType.CONDO_OR_APT },
-  { name: t(`propertyType.${PropertyType.FLOAT_HOME}`), value: PropertyType.FLOAT_HOME },
+  { name: t(`propertyType.${PropertyType.TOWN_HOME}`), value: PropertyType.TOWN_HOME },
   { name: t(`propertyType.${PropertyType.MULTI_UNIT_HOUSING}`), value: PropertyType.MULTI_UNIT_HOUSING },
+  { name: t(`propertyType.${PropertyType.CONDO_OR_APT}`), value: PropertyType.CONDO_OR_APT },
   { name: t(`propertyType.${PropertyType.RECREATIONAL}`), value: PropertyType.RECREATIONAL },
-  { name: t(`propertyType.${PropertyType.SECONDARY_SUITE}`), value: PropertyType.SECONDARY_SUITE },
-  { name: t(`propertyType.${PropertyType.SINGLE_FAMILY_HOME}`), value: PropertyType.SINGLE_FAMILY_HOME },
+  { name: t(`propertyType.${PropertyType.BED_AND_BREAKFAST}`), value: PropertyType.BED_AND_BREAKFAST },
   { name: t(`propertyType.${PropertyType.STRATA_HOTEL}`), value: PropertyType.STRATA_HOTEL },
-  { name: t(`propertyType.${PropertyType.TOWN_HOME}`), value: PropertyType.TOWN_HOME }
+  { name: t(`propertyType.${PropertyType.FLOAT_HOME}`), value: PropertyType.FLOAT_HOME }
 ]
 const rentalTypeOptions = [
   { value: RentalUnitType.ENTIRE_HOME, label: t(`rentalUnitType.${RentalUnitType.ENTIRE_HOME}`) },
@@ -229,15 +229,24 @@ onMounted(async () => {
             v-model="propStore.unitDetails.parcelIdentifier"
             mask="###-###-###"
             name="parcelIdentifier"
-            :help="$t('strr.hint.parcelIdentifier')"
             :aria-label="propStore.isPIDRequired
               ? $t('strr.label.parcelIdentifier')
               : $t('strr.label.parcelIdentifierOpt')"
             :placeholder="propStore.isPIDRequired
               ? $t('strr.label.parcelIdentifier')
               : $t('strr.label.parcelIdentifierOpt')"
-          />
-          <!-- TODO: add PID tooltip to hint, pass slots down to ConnectFormFieldGroup ?? -->
+          >
+            <template #help>
+              <span>
+                {{ $t('strr.hint.parcelIdentifier') }}
+                <span class="inline-flex align-text-top">
+                  <ConnectTooltip :text="$t('tooltip.pid')" :popper="{ placement: 'right' }">
+                    <UIcon name="i-mdi-info-outline" class="ml-0.5 size-4 shrink-0 text-blue-500" />
+                  </ConnectTooltip>
+                </span>
+              </span>
+            </template>
+          </ConnectFormFieldGroup>
         </ConnectFormSection>
       </div>
     </ConnectPageSection>

diff --git a/strr-host-pm-web/app/components/form/DefineYourRental/UnitRequirements/StrProhibited.vue b/strr-host-pm-web/app/components/form/DefineYourRental/UnitRequirements/StrProhibited.vue
@@ -58,9 +58,8 @@ function handleContinueApp () {
       </template>
 
       <template #item>
-        <div class="flex flex-col gap-4 pt-2 text-base text-bcGovGray-700">
+        <div class="flex flex-col gap-4 text-base text-bcGovGray-700">
           <p>{{ $t('alert.strProhibited.description') }}</p>
-          <ConnectI18nHelper translation-path="alert.strProhibited.note" />
         </div>
       </template>
     </UAccordion>

diff --git a/strr-host-pm-web/app/components/form/DefineYourRental/UnitRequirements/StraaExempt.vue b/strr-host-pm-web/app/components/form/DefineYourRental/UnitRequirements/StraaExempt.vue
@@ -18,7 +18,10 @@ const localePath = useLocalePath()
       }"
     >
       <template #title>
-        <ConnectI18nHelper translation-path="alert.straaExempt.title" />
+        <div class="flex flex-col gap-2">
+          <ConnectI18nHelper translation-path="alert.straaExempt.title" />
+          <ConnectI18nHelper translation-path="alert.straaExempt.note" />
+        </div>
       </template>
     </UAlert>
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,7 +109,7 @@ export default defineNuxtConfig({ @@
         }
       },
-      piniaPersistedstate: {
+      piniaPluginPersistedstate: {
         storage: 'sessionStorage'
       },
@@ Expand Down @@