From 82e49555800cd3f6d058f4c29ed643b365732c6e Mon Sep 17 00:00:00 2001
From: Shaanjot Gill <shaangill025@users.noreply.github.com>
Date: Fri, 30 May 2025 09:11:12 -0700
Subject: [PATCH] 28565 work (#759)

Signed-off-by: Shaanjot Gill <gill.shaanjots@gmail.com>
---
 .../connect/form/address/DisplayItem.vue      | 84 +++++++++++++++++++
 strr-base-web/package.json                    |  2 +-
 .../app/components/summary/Property.vue       |  2 +-
 strr-host-pm-web/app/locales/en-CA.ts         |  1 +
 strr-host-pm-web/package.json                 |  2 +-
 5 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 strr-base-web/app/components/connect/form/address/DisplayItem.vue

diff --git a/strr-base-web/app/components/connect/form/address/DisplayItem.vue b/strr-base-web/app/components/connect/form/address/DisplayItem.vue
new file mode 100644
index 000000000..e2b467206
--- /dev/null
+++ b/strr-base-web/app/components/connect/form/address/DisplayItem.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const props = defineProps<{
+  address: Partial<ConnectAddress>,
+  useLocationDescLabel?: boolean
+}>()
+
+const columns = [
+  { key: 'label' },
+  { key: 'value' }
+]
+
+const addressRows = computed(() => {
+  const rows = []
+
+  if (props.address.unitNumber) {
+    rows.push({ label: t('label.unitNumber'), value: props.address.unitNumber })
+  }
+
+  if (props.address.streetNumber) {
+    rows.push({ label: t('label.streetNumber'), value: props.address.streetNumber })
+  }
+
+  if (props.address.streetName) {
+    rows.push({ label: t('label.streetName'), value: props.address.streetName })
+  }
+
+  if (props.address.streetAdditional) {
+    rows.push({ label: t('label.streetAdditional'), value: props.address.streetAdditional })
+  }
+
+  if (props.address.city) {
+    rows.push({ label: t('label.city'), value: props.address.city })
+  }
+
+  if (props.address.postalCode) {
+    rows.push({ label: t('label.postalCode'), value: props.address.postalCode })
+  }
+
+  return rows
+})
+</script>
+<template>
+  <div>
+    <ConnectI18nHelper
+      translation-path="text.hostDashboardAddressBreakdown"
+      v-bind="{ newLine: '<br/>', boldStart: '<strong>', boldEnd: '</strong>' }"
+    />
+    <div data-testid="address-breakdown-display">
+      <UTable
+        :rows="addressRows"
+        :columns="columns"
+        :ui="{
+          wrapper: 'h-full',
+          base: 'min-w-0',
+          td: {
+            base: 'min-w-[150px] last:w-full',
+            padding: 'py-1 px-0'
+          },
+          th: {
+            padding: 'py-1 px-0',
+            base: 'sr-only'
+          },
+          divide: 'divide-none',
+          tbody: 'divide-none'
+        }"
+      >
+        <template #label-data="{ row }">
+          <span class="font-semibold">{{ row.label }}:</span>
+        </template>
+        <template #value-data="{ row }">
+          {{ row.value }}
+        </template>
+      </UTable>
+      <ConnectInfoBox
+        v-if="address.locationDescription"
+        class="mt-2"
+        :content="address.locationDescription"
+        :title="useLocationDescLabel ? $t('label.locationDescription') : $t('label.deliveryInstructions')"
+        data-testid="location-description"
+      />
+    </div>
+  </div>
+</template>
diff --git a/strr-base-web/package.json b/strr-base-web/package.json
index 45d6d08f1..abb0996d4 100644
--- a/strr-base-web/package.json
+++ b/strr-base-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-base-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-host-pm-web/app/components/summary/Property.vue b/strr-host-pm-web/app/components/summary/Property.vue
index 876463ea2..c428dbea9 100644
--- a/strr-host-pm-web/app/components/summary/Property.vue
+++ b/strr-host-pm-web/app/components/summary/Property.vue
@@ -65,7 +65,7 @@ const propertyInfo = computed((): ConnectInfoTableItem[] => [
       <div class="-ml-4 h-px w-full border-b border-gray-100" />
     </template>
     <template #info-address>
-      <ConnectFormAddressDisplay :address="unitAddress.address" />
+      <ConnectFormAddressDisplayItem :address="unitAddress.address" />
     </template>
     <template #info-blExempt>
       <div class="flex gap-2">
diff --git a/strr-host-pm-web/app/locales/en-CA.ts b/strr-host-pm-web/app/locales/en-CA.ts
index 6dfb72e65..d58e24d70 100644
--- a/strr-host-pm-web/app/locales/en-CA.ts
+++ b/strr-host-pm-web/app/locales/en-CA.ts
@@ -377,6 +377,7 @@ export default {
     giveUnitNickname: 'Give your rental unit a nickname to help you identify it, especially if you manage multiple units.',
     addAllReqDocs: 'Add all required documentation that supports your short-term rental registration. {link}',
     toDetermineDocsReturnToStart: 'To determine the types of documentation you’ll need, please complete Step 1 of the application first.',
+    hostDashboardAddressBreakdown: 'Follow the instructions on your short-term rental platform to update your listing with your {boldStart}Registration Number, Unit Number, Street Number, and Postal Code exactly as it is shown below.{boldEnd} Your listing will be taken down if the below information does not match what’s entered in the platform.{newLine}{newLine}',
     uploadReqDocs: 'Upload all required documentation to support your registration.',
     noDocsReq: 'No supporting documentation is required.',
     missingDocuments: 'Missing required documents.',
diff --git a/strr-host-pm-web/package.json b/strr-host-pm-web/package.json
index 815818bc3..a720023bc 100644
--- a/strr-host-pm-web/package.json
+++ b/strr-host-pm-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-host-pm-web",
   "private": true,
   "type": "module",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",