From 1dae36ce97c47f6741e458c488aa707f587978e5 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialj876@gmail.com>
Date: Wed, 8 Jan 2025 15:31:08 -0500
Subject: [PATCH 1/6] hosts drafts

Signed-off-by: Kial Jinnah <kialj876@gmail.com>
---
 .../app/components/connect/ButtonControl.vue  | 11 ++-
 strr-base-web/app/components/todo/Index.vue   | 14 +--
 strr-base-web/app/composables/useStrrApi.ts   | 12 ++-
 strr-base-web/app/locales/en-CA.ts            |  1 +
 .../{setButtonControl.ts => buttonControl.ts} |  5 +
 strr-host-pm-web/app/pages/application.vue    | 98 +++++++++++--------
 .../app/pages/dashboard/index.vue             | 54 +++++++---
 .../app/stores/hostApplication.ts             |  9 +-
 strr-host-pm-web/app/stores/hostPermit.ts     | 14 ++-
 strr-host-pm-web/app/utils/host-formatting.ts | 35 ++++---
 10 files changed, 167 insertions(+), 86 deletions(-)
 rename strr-base-web/app/utils/{setButtonControl.ts => buttonControl.ts} (57%)

diff --git a/strr-base-web/app/components/connect/ButtonControl.vue b/strr-base-web/app/components/connect/ButtonControl.vue
index a2f675d43..b5621989a 100644
--- a/strr-base-web/app/components/connect/ButtonControl.vue
+++ b/strr-base-web/app/components/connect/ButtonControl.vue
@@ -9,9 +9,9 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
 <template>
   <div class="bg-white py-10" data-testid="button-control">
     <div class="app-inner-container">
-      <div class="grid grid-cols-2">
-        <div v-if="leftButtons.length > 0" class="col-start-1">
-          <div class="flex gap-4">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div v-if="leftButtons.length > 0">
+          <div class="flex justify-center gap-4 md:justify-start">
             <UButton
               v-for="(button, i) in leftButtons"
               :key="'left-button-' + i"
@@ -28,8 +28,8 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
             />
           </div>
         </div>
-        <div class="col-span-1 col-start-2">
-          <div v-if="rightButtons.length > 0" class="flex justify-end gap-4">
+        <div v-if="rightButtons.length > 0" class="col-span-1">
+          <div class="flex justify-center gap-4 md:justify-end">
             <UButton
               v-for="(button, i) in rightButtons"
               :key="'right-button-' + i"
@@ -37,6 +37,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
               :class="button.class"
               block
               :color="button.color || 'primary'"
+              :disabled="button.disabled || false"
               :icon="button.icon || ''"
               :label="button.label"
               :loading="button.loading || false"
diff --git a/strr-base-web/app/components/todo/Index.vue b/strr-base-web/app/components/todo/Index.vue
index 1e9af9ddd..440845bdf 100644
--- a/strr-base-web/app/components/todo/Index.vue
+++ b/strr-base-web/app/components/todo/Index.vue
@@ -25,12 +25,14 @@ defineProps<{
           </p>
         </slot>
       </div>
-      <UButton
-        :label="button.label"
-        :color="button.colour || 'primary'"
-        :icon="button.icon"
-        @click="button.action()"
-      />
+      <div>
+        <UButton
+          :label="button.label"
+          :color="button.colour || 'primary'"
+          :icon="button.icon"
+          @click="button.action()"
+        />
+      </div>
     </div>
     <slot />
   </div>
diff --git a/strr-base-web/app/composables/useStrrApi.ts b/strr-base-web/app/composables/useStrrApi.ts
index 7fc2557c0..1e56dd500 100644
--- a/strr-base-web/app/composables/useStrrApi.ts
+++ b/strr-base-web/app/composables/useStrrApi.ts
@@ -36,9 +36,15 @@ export const useStrrApi = () => {
     return resp.applications
   }
 
-  const postApplication = async <T extends { registration: any }, R extends T>(body: T) => {
-    return await $strrApi<R>('/applications', {
-      method: 'POST',
+  const postApplication = async <T extends { registration: any }, R extends T>(
+    body: T,
+    isDraft = false,
+    applicationId?: string
+  ) => {
+    const path = applicationId ? `/applications/${applicationId}` : '/applications'
+    return await $strrApi<R>(path, {
+      method: applicationId ? 'PUT' : 'POST',
+      headers: (isDraft ? { isDraft: true } : {}) as HeadersInit,
       body
     })
   }
diff --git a/strr-base-web/app/locales/en-CA.ts b/strr-base-web/app/locales/en-CA.ts
index 5e2e2264f..613521389 100644
--- a/strr-base-web/app/locales/en-CA.ts
+++ b/strr-base-web/app/locales/en-CA.ts
@@ -60,6 +60,7 @@ export default {
     save: 'Save',
     saveExit: 'Save and Resume Later',
     beginApplication: 'Begin Application',
+    resume: 'Resume',
     resumeApplication: 'Resume Application',
     acceptTos: {
       main: 'Accept Terms of Use',
diff --git a/strr-base-web/app/utils/setButtonControl.ts b/strr-base-web/app/utils/buttonControl.ts
similarity index 57%
rename from strr-base-web/app/utils/setButtonControl.ts
rename to strr-base-web/app/utils/buttonControl.ts
index 7234c1029..946467ac6 100644
--- a/strr-base-web/app/utils/setButtonControl.ts
+++ b/strr-base-web/app/utils/buttonControl.ts
@@ -4,3 +4,8 @@ export function setButtonControl (buttonControl: ConnectBtnControl) {
   const route = useRoute()
   route.meta.buttonControl = buttonControl
 }
+
+export function getButtonControl (): ConnectBtnControl {
+  const route = useRoute()
+  return route.meta.buttonControl as ConnectBtnControl
+}
diff --git a/strr-host-pm-web/app/pages/application.vue b/strr-host-pm-web/app/pages/application.vue
index 07dd720ff..eeb45f2a6 100644
--- a/strr-host-pm-web/app/pages/application.vue
+++ b/strr-host-pm-web/app/pages/application.vue
@@ -2,6 +2,7 @@
 import { ConnectStepper, FormReview } from '#components'
 
 const { t } = useI18n()
+const route = useRoute()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
@@ -16,6 +17,9 @@ const {
   validateUserConfirmation,
   $reset: applicationReset
 } = useHostApplicationStore()
+const permitStore = useHostPermitStore()
+
+const applicationId = route.query.applicationId as string
 
 // fee stuff
 const {
@@ -33,8 +37,11 @@ const hostFee2 = ref<ConnectFeeItem | undefined>(undefined)
 const hostFee3 = ref<ConnectFeeItem | undefined>(undefined)
 
 onMounted(async () => {
-  // TODO: check for application id in the route query, if there then load the application
+  // loading.value = true
   applicationReset()
+  if (applicationId) {
+    await permitStore.loadHostData(applicationId, true)
+  }
   const [fee1, fee2] = await Promise.all([
     getFee(StrrFeeEntityType.STRR, StrrFeeCode.STR_HOST_1),
     getFee(StrrFeeEntityType.STRR, StrrFeeCode.STR_HOST_2)
@@ -46,6 +53,7 @@ onMounted(async () => {
   if (hostFee1.value) {
     setPlaceholderServiceFee(hostFee1.value.serviceFees)
   }
+  // loading.value = false
 })
 
 const setFeeBasedOnProperty = () => {
@@ -125,31 +133,52 @@ const activeStep = ref<Step>(steps.value[activeStepIndex.value] as Step)
 const stepperRef = shallowRef<InstanceType<typeof ConnectStepper> | null>(null)
 const reviewFormRef = shallowRef<InstanceType<typeof FormReview> | null>(null)
 
+// TODO: move button management into composable ?
+const handleButtonLoading = (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) => {
+  // set button control for loading / disabling buttons on submit or save or reset to default
+  const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
+    for (const [index, element] of buttonArray.entries()) {
+      if (reset) {
+        element.disabled = false
+        element.loading = false
+      } else {
+        element.loading = (grp === buttonGrp) && index === buttonIndex
+        element.disabled = !element.loading
+      }
+    }
+  }
+  const buttonControl = getButtonControl()
+  // update left buttons with loading / disabled as required
+  updateButtonGrp(buttonControl.leftButtons, 'left')
+  // update right buttons with loading / disabled as required
+  updateButtonGrp(buttonControl.rightButtons, 'right')
+}
+
+const saveApplication = async (resumeLater = false) => {
+  handleButtonLoading(false, 'left', resumeLater ? 1 : 2)
+  // prevent flicker of buttons by waiting half a second
+  try {
+    await Promise.all([
+      new Promise(resolve => setTimeout(resolve, 500)),
+      submitApplication(true, applicationId)
+    ])
+    if (resumeLater) {
+      await navigateTo(localePath('/dashboard'))
+    }
+  } catch (e) {
+    logFetchError(e, 'Error saving host application')
+    strrModal.openAppSubmitError(e)
+  } finally {
+    handleButtonLoading(true)
+  }
+}
+
 // need to cleanup the setButtonControl somehow
 const handleSubmit = async () => {
   let formErrors: MultiFormValidationResult = []
   try {
-    // TODO: move button management into composable ?
     // set buttons to loading state
-    setButtonControl({
-      leftButtons: [],
-      rightButtons: [
-        {
-          action: () => undefined, // is disabled
-          icon: 'i-mdi-chevron-left',
-          label: t('btn.back'),
-          variant: 'outline',
-          disabled: true
-        },
-        {
-          action: () => undefined, // is disabled
-          icon: 'i-mdi-chevron-right',
-          label: t('btn.submitAndPay'),
-          trailing: true,
-          loading: true
-        }
-      ]
-    })
+    handleButtonLoading(false, 'right', 1)
 
     activeStep.value.complete = true // set final review step as active before validation
     reviewFormRef.value?.validateConfirmation() // validate confirmation checkboxes on submit
@@ -195,23 +224,7 @@ const handleSubmit = async () => {
     strrModal.openAppSubmitError(e)
   } finally {
     // set buttons back to non loading state
-    setButtonControl({
-      leftButtons: [],
-      rightButtons: [
-        {
-          action: () => stepperRef.value?.setPreviousStep(),
-          icon: 'i-mdi-chevron-left',
-          label: t('btn.back'),
-          variant: 'outline'
-        },
-        {
-          action: handleSubmit,
-          icon: 'i-mdi-chevron-right',
-          label: t('btn.submitAndPay'),
-          trailing: true
-        }
-      ]
-    })
+    handleButtonLoading(true)
   }
 }
 
@@ -234,7 +247,14 @@ watch(activeStepIndex, (val) => {
     trailing: true
   })
 
-  setButtonControl({ leftButtons: [], rightButtons: buttons })
+  setButtonControl({
+    leftButtons: [
+      { action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
+      { action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
+      { action: saveApplication, label: t('btn.save'), variant: 'outline' }
+    ],
+    rightButtons: buttons
+  })
 }, { immediate: true })
 
 // remove unnecessary docs when/if exemption options change
diff --git a/strr-host-pm-web/app/pages/dashboard/index.vue b/strr-host-pm-web/app/pages/dashboard/index.vue
index a1a7f5347..ecf5c1b27 100644
--- a/strr-host-pm-web/app/pages/dashboard/index.vue
+++ b/strr-host-pm-web/app/pages/dashboard/index.vue
@@ -72,8 +72,16 @@ const { data: hostPmList, status } = await useAsyncData(
   }
 )
 
+function isDraft (status: string) {
+  return status === 'Draft'
+}
+
 async function handleItemSelect (row: any) {
-  await navigateTo(localePath('/dashboard/' + row.applicationNumber))
+  if (isDraft(row.status)) {
+    await navigateTo(localePath('/application?applicationId=' + row.applicationNumber))
+  } else {
+    await navigateTo(localePath('/dashboard/' + row.applicationNumber))
+  }
 }
 </script>
 <template>
@@ -176,19 +184,37 @@ async function handleItemSelect (row: any) {
           </template>
 
           <template #actions-data="{ row }">
-            <UButton
-              :label="$t('btn.view')"
-              :aria-label="
-                $t('btn.ariaViewDetails', {
-                  name: row.name,
-                  address: `${row.address.unitNumber
-                    ? row.address.unitNumber + '-'
-                    : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
-                })
-              "
-              :block="true"
-              @click="handleItemSelect(row)"
-            />
+            <div class="flex flex-col gap-px lg:flex-row">
+              <UButton
+                :class="isDraft(row.status) ? 'justify-center grow lg:rounded-r-none' : ''"
+                :label="isDraft(row.status) ? $t('label.resumeDraft') : $t('btn.view')"
+                :aria-label="
+                  $t('btn.ariaViewDetails', {
+                    name: row.name,
+                    address: `${row.address.unitNumber
+                      ? row.address.unitNumber + '-'
+                      : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
+                  })
+                "
+                :block="!isDraft(row.status)"
+                @click="handleItemSelect(row)"
+              />
+              <UPopover v-if="isDraft(row.status)" :popper="{ placement: 'bottom-end' }">
+                <UButton
+                  class="grow justify-center lg:flex-none lg:rounded-l-none"
+                  icon="i-mdi-menu-down"
+                  :aria-label="$t('text.showMoreOptions')"
+                />
+                <template #panel>
+                  <UButton
+                    class="m-2"
+                    :label="$t('word.Delete')"
+                    variant="link"
+                    @click="console.log('delete', row.applicationNumber)"
+                  />
+                </template>
+              </UPopover>
+            </div>
           </template>
         </UTable>
       </ConnectPageSection>
diff --git a/strr-host-pm-web/app/stores/hostApplication.ts b/strr-host-pm-web/app/stores/hostApplication.ts
index ffdf896bb..c8df74846 100644
--- a/strr-host-pm-web/app/stores/hostApplication.ts
+++ b/strr-host-pm-web/app/stores/hostApplication.ts
@@ -66,12 +66,15 @@ export const useHostApplicationStore = defineStore('host/application', () => {
     }
   }
 
-  const submitApplication = async () => {
+  const submitApplication = async (isDraft = false, applicationId?: string) => {
     const body = createApplicationBody()
 
     // console.info('submitting application: ', body)
-
-    const res = await postApplication<HostApplicationPayload, HostApplicationResp>(body) as HostApplicationResp
+    const res = await postApplication<HostApplicationPayload, HostApplicationResp>(
+      body,
+      isDraft,
+      applicationId
+    ) as HostApplicationResp
 
     const paymentToken = res.header.paymentToken
     const filingId = res.header.applicationNumber
diff --git a/strr-host-pm-web/app/stores/hostPermit.ts b/strr-host-pm-web/app/stores/hostPermit.ts
index 47956de39..bc2324fb7 100644
--- a/strr-host-pm-web/app/stores/hostPermit.ts
+++ b/strr-host-pm-web/app/stores/hostPermit.ts
@@ -11,7 +11,7 @@ export const useHostPermitStore = defineStore('host/permit', () => {
   const documentStore = useDocumentStore()
   const { hostOwners } = storeToRefs(ownerStore)
   const { blInfo, unitAddress, unitDetails } = storeToRefs(propertyStore)
-  const { prRequirements, propertyReqs } = storeToRefs(propertyReqStore)
+  const { prRequirements, propertyReqs, showUnitDetailsForm } = storeToRefs(propertyReqStore)
   const { storedDocuments } = storeToRefs(documentStore)
 
   const {
@@ -25,10 +25,10 @@ export const useHostPermitStore = defineStore('host/permit', () => {
     downloadRegistrationCert
   } = useStrrBasePermit<HostRegistrationResp, HostApplicationResp, ApiHostApplication>()
 
-  const loadHostData = async (applicationId: string) => {
+  const loadHostData = async (applicationId: string, loadDraft = false) => {
     $reset()
     await loadPermitData(applicationId)
-    if (showPermitDetails.value) {
+    if (showPermitDetails.value || loadDraft) {
       // set sub store values
       hostOwners.value.push(formatOwnerHostUI(
         permitDetails.value.primaryContact,
@@ -43,10 +43,16 @@ export const useHostPermitStore = defineStore('host/permit', () => {
       unitDetails.value = formatHostUnitDetailsUI(permitDetails.value.unitDetails)
       blInfo.value = formatHostUnitDetailsBlInfoUI(permitDetails.value.unitDetails)
       unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
+      showUnitDetailsForm.value = !!unitAddress.value
       prRequirements.value.isPropertyPrExempt = !!permitDetails.value.unitDetails.prExemptReason
       prRequirements.value.prExemptionReason = permitDetails.value.unitDetails.prExemptReason
-      if (application.value?.registration.strRequirements) {
+      if (application.value?.registration.strRequirements && unitAddress.value?.address?.streetName) {
         propertyReqs.value = application.value?.registration.strRequirements
+        if (Object.keys(application.value.registration.strRequirements).length === 0) {
+          // run the requirements check again in case it has errors (errors are not saved by the api)
+          showUnitDetailsForm.value = false
+          await propertyReqStore.getPropertyReqs()
+        }
       }
       storedDocuments.value = permitDetails.value.documents?.map<UiDocument>(val => ({
         file: {} as File,
diff --git a/strr-host-pm-web/app/utils/host-formatting.ts b/strr-host-pm-web/app/utils/host-formatting.ts
index 70bb744be..4923bf731 100644
--- a/strr-host-pm-web/app/utils/host-formatting.ts
+++ b/strr-host-pm-web/app/utils/host-formatting.ts
@@ -74,10 +74,14 @@ export function formatHostUnitDetailsAPI (
     propertyType: unitDetails.propertyType,
     ownershipType: unitDetails.ownershipType,
     numberOfRoomsForRent: unitDetails.numberOfRoomsForRent,
-    isUnitOnPrincipalResidenceProperty: unitDetails.rentalUnitSetupType !== RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY,
-    hostResidence: unitDetails.rentalUnitSetupType === RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
-      ? ResidenceType.SAME_UNIT
-      : ResidenceType.ANOTHER_UNIT,
+    isUnitOnPrincipalResidenceProperty: unitDetails.rentalUnitSetupType === undefined
+      ? undefined
+      : unitDetails.rentalUnitSetupType !== RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY,
+    hostResidence: unitDetails.rentalUnitSetupType === undefined
+      ? undefined
+      : unitDetails.rentalUnitSetupType === RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
+        ? ResidenceType.SAME_UNIT
+        : ResidenceType.ANOTHER_UNIT,
     rentalUnitSpaceType: unitDetails.typeOfSpace,
     ...(unitDetails.parcelIdentifier ? { parcelIdentifier: unitDetails.parcelIdentifier } : {}),
     ...(blInfo.businessLicense ? { businessLicense: blInfo.businessLicense } : {}),
@@ -87,12 +91,13 @@ export function formatHostUnitDetailsAPI (
 }
 
 export function formatHostUnitDetailsUI (unitDetails: ApiUnitDetails): UiUnitDetails {
-  // TODO: review rentalSetupType mapping
-  const rentalSetupType = unitDetails.isUnitOnPrincipalResidenceProperty
-    ? unitDetails.hostResidence === ResidenceType.SAME_UNIT
-      ? RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
-      : RentalUnitSetupType.UNIT_ON_PR_PROPERTY
-    : RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY
+  const rentalSetupType = unitDetails.isUnitOnPrincipalResidenceProperty === undefined
+    ? undefined
+    : unitDetails.isUnitOnPrincipalResidenceProperty
+      ? unitDetails.hostResidence === ResidenceType.SAME_UNIT
+        ? RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
+        : RentalUnitSetupType.UNIT_ON_PR_PROPERTY
+      : RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY
   return {
     propertyType: unitDetails.propertyType,
     ownershipType: unitDetails.ownershipType,
@@ -123,11 +128,17 @@ export function formatHostUnitAddressApi (unitAddress: HostPropertyAddress): Api
 }
 
 export function formatHostUnitAddressUI (unitAddress: ApiUnitAddress): HostPropertyAddress {
+  const baseAddress = formatAddressUI(unitAddress)
+  const street = baseAddress.street
+    ? baseAddress.street
+    : `${unitAddress.unitNumber ? unitAddress.unitNumber + '-' : ''}` +
+      `${unitAddress.streetNumber || ''} ${unitAddress.streetName}`
   return {
-    ...formatAddressUI(unitAddress),
+    ...baseAddress,
     nickname: unitAddress.nickname || '',
     streetName: unitAddress.streetName || '',
     streetNumber: unitAddress.streetNumber || '',
-    unitNumber: unitAddress.unitNumber || ''
+    unitNumber: unitAddress.unitNumber || '',
+    street
   }
 }

From fc1eb29c7dde0dc5d45c9bf9fe28bede39bf8f12 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialj876@gmail.com>
Date: Thu, 9 Jan 2025 10:36:06 -0500
Subject: [PATCH 2/6] feature flag, phone number issue, btn control updates,
 depreciation fix, other fixes

Signed-off-by: Kial Jinnah <kialj876@gmail.com>
---
 .../app/components/connect/ButtonControl.vue  |   4 +-
 .../components/connect/form/date/Picker.vue   |   8 +-
 .../connect/form/phoneNumber/CountryCode.vue  |  11 +-
 .../app/composables/useButtonControl.ts       |  39 ++++++
 strr-base-web/app/utils/buttonControl.ts      |  11 --
 .../connect/form/phoneNumber/CountryCode.vue  | 121 ------------------
 strr-host-pm-web/app/pages/application.vue    |  35 ++---
 .../app/pages/dashboard/index.vue             |  15 ++-
 .../app/stores/hostApplication.ts             |   6 +-
 strr-host-pm-web/app/stores/hostPermit.ts     |   6 +-
 .../connect/form/phoneNumber/CountryCode.vue  | 121 ------------------
 .../app/pages/platform/application.vue        |   1 +
 .../connect/form/phoneNumber/CountryCode.vue  | 121 ------------------
 .../app/pages/strata-hotel/application.vue    |   1 +
 14 files changed, 84 insertions(+), 416 deletions(-)
 create mode 100644 strr-base-web/app/composables/useButtonControl.ts
 delete mode 100644 strr-base-web/app/utils/buttonControl.ts
 delete mode 100644 strr-host-pm-web/app/components/connect/form/phoneNumber/CountryCode.vue
 delete mode 100644 strr-platform-web/app/components/connect/form/phoneNumber/CountryCode.vue
 delete mode 100644 strr-strata-web/app/components/connect/form/phoneNumber/CountryCode.vue

diff --git a/strr-base-web/app/components/connect/ButtonControl.vue b/strr-base-web/app/components/connect/ButtonControl.vue
index b5621989a..cfaaf0026 100644
--- a/strr-base-web/app/components/connect/ButtonControl.vue
+++ b/strr-base-web/app/components/connect/ButtonControl.vue
@@ -10,7 +10,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
   <div class="bg-white py-10" data-testid="button-control">
     <div class="app-inner-container">
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <div v-if="leftButtons.length > 0">
+        <div>
           <div class="flex justify-center gap-4 md:justify-start">
             <UButton
               v-for="(button, i) in leftButtons"
@@ -28,7 +28,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
             />
           </div>
         </div>
-        <div v-if="rightButtons.length > 0" class="col-span-1">
+        <div>
           <div class="flex justify-center gap-4 md:justify-end">
             <UButton
               v-for="(button, i) in rightButtons"
diff --git a/strr-base-web/app/components/connect/form/date/Picker.vue b/strr-base-web/app/components/connect/form/date/Picker.vue
index a1fc828ed..f815eca8a 100644
--- a/strr-base-web/app/components/connect/form/date/Picker.vue
+++ b/strr-base-web/app/components/connect/form/date/Picker.vue
@@ -44,10 +44,10 @@ watch(() => props.setMinDate, (val) => { minDate.value = val || null })
   </div>
 </template>
 <style lang="scss">
-@import '@vuepic/vue-datepicker/dist/main.css';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@use '@vuepic/vue-datepicker/dist/main.css' as *;
+@use 'tailwindcss/base' as *;
+@use 'tailwindcss/components' as *;
+@use 'tailwindcss/utilities' as *;
 
 .connect-date-picker {
 
diff --git a/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue
index c861e9859..8e77543fd 100644
--- a/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ b/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue
@@ -73,8 +73,15 @@ onMounted(() => {
   if (countryIso2.value !== undefined) {
     selectCountry(countryIso2.value)
   } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
+    // Set a country based on the calling code if available
+    const iso2 = search(countryCallingCode.value)[0]?.iso2
+    if (iso2) {
+      selectCountry(iso2)
+    } else {
+      selectedCountry.value = {
+        callingCode: countryCallingCode.value,
+        label: `+${countryCallingCode.value}`
+      }
     }
   }
 })
diff --git a/strr-base-web/app/composables/useButtonControl.ts b/strr-base-web/app/composables/useButtonControl.ts
new file mode 100644
index 000000000..18aaf82d1
--- /dev/null
+++ b/strr-base-web/app/composables/useButtonControl.ts
@@ -0,0 +1,39 @@
+import type { ConnectBtnControl } from '#imports'
+
+export const useButtonControl = () => {
+  const route = useRoute()
+
+  function setButtonControl (buttonControl: ConnectBtnControl) {
+    route.meta.buttonControl = buttonControl
+  }
+
+  function getButtonControl (): ConnectBtnControl {
+    return route.meta.buttonControl as ConnectBtnControl
+  }
+
+  function handleButtonLoading (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) {
+    // set button control for loading / disabling buttons on submit or save or reset to default
+    const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
+      for (const [index, element] of buttonArray.entries()) {
+        if (reset) {
+          element.disabled = false
+          element.loading = false
+        } else {
+          element.loading = (grp === buttonGrp) && index === buttonIndex
+          element.disabled = !element.loading
+        }
+      }
+    }
+    const buttonControl = getButtonControl()
+    // update left buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.leftButtons, 'left')
+    // update right buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.rightButtons, 'right')
+  }
+
+  return {
+    getButtonControl,
+    setButtonControl,
+    handleButtonLoading
+  }
+}
diff --git a/strr-base-web/app/utils/buttonControl.ts b/strr-base-web/app/utils/buttonControl.ts
deleted file mode 100644
index 946467ac6..000000000
--- a/strr-base-web/app/utils/buttonControl.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ConnectBtnControl } from '#imports'
-
-export function setButtonControl (buttonControl: ConnectBtnControl) {
-  const route = useRoute()
-  route.meta.buttonControl = buttonControl
-}
-
-export function getButtonControl (): ConnectBtnControl {
-  const route = useRoute()
-  return route.meta.buttonControl as ConnectBtnControl
-}
diff --git a/strr-host-pm-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-host-pm-web/app/components/connect/form/phoneNumber/CountryCode.vue
deleted file mode 100644
index f0b434328..000000000
--- a/strr-host-pm-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-// NOTE: country-codes-list fails if not overridden (even though it is in the repo base layer)
-// TODO: check this once it is coming from the connect daxiom pckg layer
-import countryList from 'country-codes-list'
-import type { ConnectPhoneCountry } from '#imports'
-
-defineProps<{
-  isInvalid: boolean | undefined
-}>()
-
-const countryCallingCode = defineModel<string | undefined>('countryCallingCode', { required: false })
-watch(countryCallingCode, (val) => {
-  // this is needed for when something outside this component changes the callingCode model value
-  if (!val) {
-    countryIso2.value = undefined
-  } else if (selectedCountry.value?.callingCode !== val) {
-    countryIso2.value = search(val)[0]?.iso2
-  }
-})
-
-const countryIso2 = defineModel<string | undefined>('countryIso2', { required: false })
-watch(countryIso2, (val) => {
-  if (!val) {
-    selectedCountry.value = undefined
-  } else if (val && selectedCountry.value?.iso2 !== val) {
-    selectCountry(val)
-  }
-})
-
-const selectedCountry = ref<ConnectPhoneCountry | undefined>(undefined)
-watch(selectedCountry, (newVal) => {
-  if (newVal?.callingCode !== countryCallingCode.value) {
-    countryCallingCode.value = newVal?.callingCode
-  }
-  if (newVal?.iso2 !== countryIso2.value) {
-    countryIso2.value = newVal?.iso2
-  }
-})
-
-const _countryListOptions = countryList.customList(
-  // @ts-ignore
-  'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
-
-const manualInput = (event: any) => {
-  selectedCountry.value = {
-    callingCode: event.target.value
-  }
-}
-
-const countryListOptions: Array<ConnectPhoneCountry> = Object.keys(_countryListOptions).map((key) => {
-  // @ts-ignore
-  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
-  return {
-    iso2: key,
-    callingCode,
-    label: `+${callingCode}`,
-    nameLocal,
-    nameEn
-  }
-}).sort((a, b) => a.callingCode.localeCompare(b.callingCode))
-
-const search = (q: string) => countryListOptions.filter((lo) => {
-  return lo.callingCode.includes(q) ||
-    lo.iso2?.includes(q) ||
-    lo.nameLocal?.includes(q) ||
-    lo.nameEn?.includes(q) ||
-    lo.label?.includes(q)
-})
-
-const selectCountry = (iso2: string) => {
-  selectedCountry.value = countryListOptions.find(item => item.iso2 === iso2)
-}
-
-onMounted(() => {
-  if (countryIso2.value !== undefined) {
-    selectCountry(countryIso2.value)
-  } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
-    }
-  }
-})
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selectedCountry"
-    :options="countryListOptions"
-    size="lg"
-    :color="selectedCountry?.callingCode ? 'primary' : 'gray'"
-    :search="search"
-    :trailing-icon="'i-mdi-chevron-down'"
-    option-attribute="label"
-    :aria-required="true"
-    :aria-invalid="isInvalid"
-    :ui="{
-      padding: {
-        'lg': selectedCountry?.callingCode ? 'pl-[50px]' : 'pl-3',
-      }
-    }"
-    @input="manualInput($event)"
-  >
-    <template v-if="!!selectedCountry?.iso2" #leading>
-      <div class="mt-1">
-        <ConnectCountryFlag
-          :tooltip-text="selectedCountry?.nameEn"
-          :country-code-iso2letter="selectedCountry?.iso2"
-        />
-      </div>
-    </template>
-
-    <template #option="{ option }">
-      <ConnectCountryFlag
-        :tooltip-text="option.nameLocal"
-        :country-code-iso2letter="option.iso2"
-      />
-      <span class="mt-1 h-5 truncate">{{ option.label }}</span>
-      <span class="sr-only">{{ option.nameLocal }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/strr-host-pm-web/app/pages/application.vue b/strr-host-pm-web/app/pages/application.vue
index eeb45f2a6..3ea779cc6 100644
--- a/strr-host-pm-web/app/pages/application.vue
+++ b/strr-host-pm-web/app/pages/application.vue
@@ -6,6 +6,8 @@ const route = useRoute()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
+const { setButtonControl, handleButtonLoading } = useButtonControl()
+const ldStore = useConnectLaunchdarklyStore()
 
 const propertyStore = useHostPropertyStore()
 const { unitDetails, propertyTypeFeeTriggers } = storeToRefs(propertyStore)
@@ -133,27 +135,6 @@ const activeStep = ref<Step>(steps.value[activeStepIndex.value] as Step)
 const stepperRef = shallowRef<InstanceType<typeof ConnectStepper> | null>(null)
 const reviewFormRef = shallowRef<InstanceType<typeof FormReview> | null>(null)
 
-// TODO: move button management into composable ?
-const handleButtonLoading = (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) => {
-  // set button control for loading / disabling buttons on submit or save or reset to default
-  const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
-    for (const [index, element] of buttonArray.entries()) {
-      if (reset) {
-        element.disabled = false
-        element.loading = false
-      } else {
-        element.loading = (grp === buttonGrp) && index === buttonIndex
-        element.disabled = !element.loading
-      }
-    }
-  }
-  const buttonControl = getButtonControl()
-  // update left buttons with loading / disabled as required
-  updateButtonGrp(buttonControl.leftButtons, 'left')
-  // update right buttons with loading / disabled as required
-  updateButtonGrp(buttonControl.rightButtons, 'right')
-}
-
 const saveApplication = async (resumeLater = false) => {
   handleButtonLoading(false, 'left', resumeLater ? 1 : 2)
   // prevent flicker of buttons by waiting half a second
@@ -248,11 +229,13 @@ watch(activeStepIndex, (val) => {
   })
 
   setButtonControl({
-    leftButtons: [
-      { action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
-      { action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
-      { action: saveApplication, label: t('btn.save'), variant: 'outline' }
-    ],
+    leftButtons: ldStore.getStoredFlag('enable-save-draft')
+      ? [
+          { action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
+          { action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
+          { action: saveApplication, label: t('btn.save'), variant: 'outline' }
+        ]
+      : [],
     rightButtons: buttons
   })
 }, { immediate: true })
diff --git a/strr-host-pm-web/app/pages/dashboard/index.vue b/strr-host-pm-web/app/pages/dashboard/index.vue
index ecf5c1b27..a87e5faca 100644
--- a/strr-host-pm-web/app/pages/dashboard/index.vue
+++ b/strr-host-pm-web/app/pages/dashboard/index.vue
@@ -191,9 +191,12 @@ async function handleItemSelect (row: any) {
                 :aria-label="
                   $t('btn.ariaViewDetails', {
                     name: row.name,
-                    address: `${row.address.unitNumber
-                      ? row.address.unitNumber + '-'
-                      : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
+                    address: row.address.streetName
+                      ? `${row.address.unitNumber
+                        ? row.address.unitNumber + '-'
+                        : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
+                      : '',
+                    number: row.applicationNumber
                   })
                 "
                 :block="!isDraft(row.status)"
@@ -206,11 +209,13 @@ async function handleItemSelect (row: any) {
                   :aria-label="$t('text.showMoreOptions')"
                 />
                 <template #panel>
+                  <!-- TODO: not focusable via keyboard tab, should be fixed in nuxt/ui v3 -->
                   <UButton
                     class="m-2"
-                    :label="$t('word.Delete')"
+                    :label="$t('word.Remove')"
+                    :aria-label="$t('word.Remove')"
                     variant="link"
-                    @click="console.log('delete', row.applicationNumber)"
+                    @click="console.log('remove', row.applicationNumber)"
                   />
                 </template>
               </UPopover>
diff --git a/strr-host-pm-web/app/stores/hostApplication.ts b/strr-host-pm-web/app/stores/hostApplication.ts
index c8df74846..0c1f82dca 100644
--- a/strr-host-pm-web/app/stores/hostApplication.ts
+++ b/strr-host-pm-web/app/stores/hostApplication.ts
@@ -57,7 +57,11 @@ export const useHostApplicationStore = defineStore('host/application', () => {
           ? { propertyManager: formatOwnerPropertyManagerAPI(propertyManger) }
           : {}
         ),
-        unitAddress: formatHostUnitAddressApi(propertyStore.unitAddress.address),
+        // @ts-expect-error - can be undefined for drafts edge case
+        unitAddress: reqStore.showUnitDetailsForm
+          // only save the entered address if it was fully entered / user selected continue registration
+          ? formatHostUnitAddressApi(propertyStore.unitAddress.address)
+          : undefined,
         unitDetails: formatHostUnitDetailsAPI(propertyStore.unitDetails, propertyStore.blInfo, reqStore.prRequirements),
         documents: documentStore.apiDocuments,
         strRequirements: reqStore.propertyReqs,
diff --git a/strr-host-pm-web/app/stores/hostPermit.ts b/strr-host-pm-web/app/stores/hostPermit.ts
index bc2324fb7..bbe0f4509 100644
--- a/strr-host-pm-web/app/stores/hostPermit.ts
+++ b/strr-host-pm-web/app/stores/hostPermit.ts
@@ -42,8 +42,10 @@ export const useHostPermitStore = defineStore('host/permit', () => {
       }
       unitDetails.value = formatHostUnitDetailsUI(permitDetails.value.unitDetails)
       blInfo.value = formatHostUnitDetailsBlInfoUI(permitDetails.value.unitDetails)
-      unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
-      showUnitDetailsForm.value = !!unitAddress.value
+      if (permitDetails.value.unitAddress) {
+        unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
+      }
+      showUnitDetailsForm.value = !!unitAddress.value?.address?.streetName
       prRequirements.value.isPropertyPrExempt = !!permitDetails.value.unitDetails.prExemptReason
       prRequirements.value.prExemptionReason = permitDetails.value.unitDetails.prExemptReason
       if (application.value?.registration.strRequirements && unitAddress.value?.address?.streetName) {
diff --git a/strr-platform-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-platform-web/app/components/connect/form/phoneNumber/CountryCode.vue
deleted file mode 100644
index f0b434328..000000000
--- a/strr-platform-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-// NOTE: country-codes-list fails if not overridden (even though it is in the repo base layer)
-// TODO: check this once it is coming from the connect daxiom pckg layer
-import countryList from 'country-codes-list'
-import type { ConnectPhoneCountry } from '#imports'
-
-defineProps<{
-  isInvalid: boolean | undefined
-}>()
-
-const countryCallingCode = defineModel<string | undefined>('countryCallingCode', { required: false })
-watch(countryCallingCode, (val) => {
-  // this is needed for when something outside this component changes the callingCode model value
-  if (!val) {
-    countryIso2.value = undefined
-  } else if (selectedCountry.value?.callingCode !== val) {
-    countryIso2.value = search(val)[0]?.iso2
-  }
-})
-
-const countryIso2 = defineModel<string | undefined>('countryIso2', { required: false })
-watch(countryIso2, (val) => {
-  if (!val) {
-    selectedCountry.value = undefined
-  } else if (val && selectedCountry.value?.iso2 !== val) {
-    selectCountry(val)
-  }
-})
-
-const selectedCountry = ref<ConnectPhoneCountry | undefined>(undefined)
-watch(selectedCountry, (newVal) => {
-  if (newVal?.callingCode !== countryCallingCode.value) {
-    countryCallingCode.value = newVal?.callingCode
-  }
-  if (newVal?.iso2 !== countryIso2.value) {
-    countryIso2.value = newVal?.iso2
-  }
-})
-
-const _countryListOptions = countryList.customList(
-  // @ts-ignore
-  'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
-
-const manualInput = (event: any) => {
-  selectedCountry.value = {
-    callingCode: event.target.value
-  }
-}
-
-const countryListOptions: Array<ConnectPhoneCountry> = Object.keys(_countryListOptions).map((key) => {
-  // @ts-ignore
-  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
-  return {
-    iso2: key,
-    callingCode,
-    label: `+${callingCode}`,
-    nameLocal,
-    nameEn
-  }
-}).sort((a, b) => a.callingCode.localeCompare(b.callingCode))
-
-const search = (q: string) => countryListOptions.filter((lo) => {
-  return lo.callingCode.includes(q) ||
-    lo.iso2?.includes(q) ||
-    lo.nameLocal?.includes(q) ||
-    lo.nameEn?.includes(q) ||
-    lo.label?.includes(q)
-})
-
-const selectCountry = (iso2: string) => {
-  selectedCountry.value = countryListOptions.find(item => item.iso2 === iso2)
-}
-
-onMounted(() => {
-  if (countryIso2.value !== undefined) {
-    selectCountry(countryIso2.value)
-  } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
-    }
-  }
-})
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selectedCountry"
-    :options="countryListOptions"
-    size="lg"
-    :color="selectedCountry?.callingCode ? 'primary' : 'gray'"
-    :search="search"
-    :trailing-icon="'i-mdi-chevron-down'"
-    option-attribute="label"
-    :aria-required="true"
-    :aria-invalid="isInvalid"
-    :ui="{
-      padding: {
-        'lg': selectedCountry?.callingCode ? 'pl-[50px]' : 'pl-3',
-      }
-    }"
-    @input="manualInput($event)"
-  >
-    <template v-if="!!selectedCountry?.iso2" #leading>
-      <div class="mt-1">
-        <ConnectCountryFlag
-          :tooltip-text="selectedCountry?.nameEn"
-          :country-code-iso2letter="selectedCountry?.iso2"
-        />
-      </div>
-    </template>
-
-    <template #option="{ option }">
-      <ConnectCountryFlag
-        :tooltip-text="option.nameLocal"
-        :country-code-iso2letter="option.iso2"
-      />
-      <span class="mt-1 h-5 truncate">{{ option.label }}</span>
-      <span class="sr-only">{{ option.nameLocal }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/strr-platform-web/app/pages/platform/application.vue b/strr-platform-web/app/pages/platform/application.vue
index 7f16c76f9..3e95ce3e0 100644
--- a/strr-platform-web/app/pages/platform/application.vue
+++ b/strr-platform-web/app/pages/platform/application.vue
@@ -5,6 +5,7 @@ const { t } = useI18n()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
+const { setButtonControl } = useButtonControl()
 
 const { validateContact } = useStrrContactStore()
 const { validatePlatformBusiness } = useStrrPlatformBusiness()
diff --git a/strr-strata-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-strata-web/app/components/connect/form/phoneNumber/CountryCode.vue
deleted file mode 100644
index f0b434328..000000000
--- a/strr-strata-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-// NOTE: country-codes-list fails if not overridden (even though it is in the repo base layer)
-// TODO: check this once it is coming from the connect daxiom pckg layer
-import countryList from 'country-codes-list'
-import type { ConnectPhoneCountry } from '#imports'
-
-defineProps<{
-  isInvalid: boolean | undefined
-}>()
-
-const countryCallingCode = defineModel<string | undefined>('countryCallingCode', { required: false })
-watch(countryCallingCode, (val) => {
-  // this is needed for when something outside this component changes the callingCode model value
-  if (!val) {
-    countryIso2.value = undefined
-  } else if (selectedCountry.value?.callingCode !== val) {
-    countryIso2.value = search(val)[0]?.iso2
-  }
-})
-
-const countryIso2 = defineModel<string | undefined>('countryIso2', { required: false })
-watch(countryIso2, (val) => {
-  if (!val) {
-    selectedCountry.value = undefined
-  } else if (val && selectedCountry.value?.iso2 !== val) {
-    selectCountry(val)
-  }
-})
-
-const selectedCountry = ref<ConnectPhoneCountry | undefined>(undefined)
-watch(selectedCountry, (newVal) => {
-  if (newVal?.callingCode !== countryCallingCode.value) {
-    countryCallingCode.value = newVal?.callingCode
-  }
-  if (newVal?.iso2 !== countryIso2.value) {
-    countryIso2.value = newVal?.iso2
-  }
-})
-
-const _countryListOptions = countryList.customList(
-  // @ts-ignore
-  'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
-
-const manualInput = (event: any) => {
-  selectedCountry.value = {
-    callingCode: event.target.value
-  }
-}
-
-const countryListOptions: Array<ConnectPhoneCountry> = Object.keys(_countryListOptions).map((key) => {
-  // @ts-ignore
-  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
-  return {
-    iso2: key,
-    callingCode,
-    label: `+${callingCode}`,
-    nameLocal,
-    nameEn
-  }
-}).sort((a, b) => a.callingCode.localeCompare(b.callingCode))
-
-const search = (q: string) => countryListOptions.filter((lo) => {
-  return lo.callingCode.includes(q) ||
-    lo.iso2?.includes(q) ||
-    lo.nameLocal?.includes(q) ||
-    lo.nameEn?.includes(q) ||
-    lo.label?.includes(q)
-})
-
-const selectCountry = (iso2: string) => {
-  selectedCountry.value = countryListOptions.find(item => item.iso2 === iso2)
-}
-
-onMounted(() => {
-  if (countryIso2.value !== undefined) {
-    selectCountry(countryIso2.value)
-  } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
-    }
-  }
-})
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selectedCountry"
-    :options="countryListOptions"
-    size="lg"
-    :color="selectedCountry?.callingCode ? 'primary' : 'gray'"
-    :search="search"
-    :trailing-icon="'i-mdi-chevron-down'"
-    option-attribute="label"
-    :aria-required="true"
-    :aria-invalid="isInvalid"
-    :ui="{
-      padding: {
-        'lg': selectedCountry?.callingCode ? 'pl-[50px]' : 'pl-3',
-      }
-    }"
-    @input="manualInput($event)"
-  >
-    <template v-if="!!selectedCountry?.iso2" #leading>
-      <div class="mt-1">
-        <ConnectCountryFlag
-          :tooltip-text="selectedCountry?.nameEn"
-          :country-code-iso2letter="selectedCountry?.iso2"
-        />
-      </div>
-    </template>
-
-    <template #option="{ option }">
-      <ConnectCountryFlag
-        :tooltip-text="option.nameLocal"
-        :country-code-iso2letter="option.iso2"
-      />
-      <span class="mt-1 h-5 truncate">{{ option.label }}</span>
-      <span class="sr-only">{{ option.nameLocal }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/strr-strata-web/app/pages/strata-hotel/application.vue b/strr-strata-web/app/pages/strata-hotel/application.vue
index 75b6a1bfb..dd1746eaa 100644
--- a/strr-strata-web/app/pages/strata-hotel/application.vue
+++ b/strr-strata-web/app/pages/strata-hotel/application.vue
@@ -5,6 +5,7 @@ const { t } = useI18n()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
+const { setButtonControl } = useButtonControl()
 
 const { validateContact } = useStrrContactStore()
 const { validateStrataBusiness } = useStrrStrataBusinessStore()

From 5d60f59e6bceb470c1d876dc87d85f6df849b164 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialj876@gmail.com>
Date: Thu, 9 Jan 2025 11:50:03 -0500
Subject: [PATCH 3/6] added delete draft call

Signed-off-by: Kial Jinnah <kialj876@gmail.com>
---
 strr-base-web/app/composables/useStrrApi.ts   |  5 ++++
 strr-host-pm-web/app/pages/application.vue    |  8 ++++--
 .../app/pages/dashboard/index.vue             | 28 +++++++++++++++++--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/strr-base-web/app/composables/useStrrApi.ts b/strr-base-web/app/composables/useStrrApi.ts
index 1e56dd500..5f5926eff 100644
--- a/strr-base-web/app/composables/useStrrApi.ts
+++ b/strr-base-web/app/composables/useStrrApi.ts
@@ -49,6 +49,10 @@ export const useStrrApi = () => {
     })
   }
 
+  const deleteApplication = async (applicationId: string) => {
+    return await $strrApi(`/applications/${applicationId}`, { method: 'DELETE' })
+  }
+
   const getApplicationReceipt = async (applicationNumber: string) => {
     return await $strrApi<Blob>(`/applications/${applicationNumber}/payment/receipt`)
       .catch((e) => {
@@ -71,6 +75,7 @@ export const useStrrApi = () => {
   }
 
   return {
+    deleteApplication,
     getAccountRegistrations,
     getAccountApplications,
     getApplicationReceipt,
diff --git a/strr-host-pm-web/app/pages/application.vue b/strr-host-pm-web/app/pages/application.vue
index 3ea779cc6..fb5d488be 100644
--- a/strr-host-pm-web/app/pages/application.vue
+++ b/strr-host-pm-web/app/pages/application.vue
@@ -22,6 +22,7 @@ const {
 const permitStore = useHostPermitStore()
 
 const applicationId = route.query.applicationId as string
+const loading = ref(false)
 
 // fee stuff
 const {
@@ -39,7 +40,7 @@ const hostFee2 = ref<ConnectFeeItem | undefined>(undefined)
 const hostFee3 = ref<ConnectFeeItem | undefined>(undefined)
 
 onMounted(async () => {
-  // loading.value = true
+  loading.value = true
   applicationReset()
   if (applicationId) {
     await permitStore.loadHostData(applicationId, true)
@@ -55,7 +56,7 @@ onMounted(async () => {
   if (hostFee1.value) {
     setPlaceholderServiceFee(hostFee1.value.serviceFees)
   }
-  // loading.value = false
+  loading.value = false
 })
 
 const setFeeBasedOnProperty = () => {
@@ -295,7 +296,8 @@ setBreadcrumbs([
 ])
 </script>
 <template>
-  <div class="space-y-8 py-8 sm:py-10">
+  <ConnectSpinner v-if="loading" overlay />
+  <div v-else class="space-y-8 py-8 sm:py-10">
     <ConnectTypographyH1 :text="t('strr.title.application')" class="my-5" />
     <ModalGroupHelpAndInfo />
     <ConnectStepper
diff --git a/strr-host-pm-web/app/pages/dashboard/index.vue b/strr-host-pm-web/app/pages/dashboard/index.vue
index a87e5faca..6611cb41c 100644
--- a/strr-host-pm-web/app/pages/dashboard/index.vue
+++ b/strr-host-pm-web/app/pages/dashboard/index.vue
@@ -4,6 +4,7 @@ const localePath = useLocalePath()
 const accountStore = useConnectAccountStore()
 const hostPermitStore = useHostPermitStore()
 const strrModal = useStrrModals()
+const { deleteApplication } = useStrrApi()
 
 const columns = [
   {
@@ -63,7 +64,7 @@ setBreadcrumbs([
 ])
 
 // can use watch param to handle pagination in future
-const { data: hostPmList, status } = await useAsyncData(
+const { data: hostPmList, status, refresh } = await useAsyncData(
   'host-pm-list',
   () => hostPermitStore.loadHostPmList(),
   {
@@ -76,6 +77,25 @@ function isDraft (status: string) {
   return status === 'Draft'
 }
 
+const deleting = ref(false)
+async function deleteDraft (row: any) {
+  try {
+    deleting.value = true
+    row.class = 'bg-red-50 animate-pulse'
+    row.disabled = true
+    await Promise.all([
+      new Promise(resolve => setTimeout(resolve, 500)),
+      await deleteApplication(row.applicationNumber)
+    ])
+  } catch (e) {
+    logFetchError(e, `Error deleting application ${row.applicationNumber}`)
+    strrModal.openAppSubmitError(e)
+  } finally {
+    refresh()
+    deleting.value = false
+  }
+}
+
 async function handleItemSelect (row: any) {
   if (isDraft(row.status)) {
     await navigateTo(localePath('/application?applicationId=' + row.applicationNumber))
@@ -142,7 +162,7 @@ async function handleItemSelect (row: any) {
           ref="tableRef"
           :columns="selectedColumns"
           :rows="hostPmList"
-          :loading="status === 'pending'"
+          :loading="status === 'pending' || deleting"
           :empty-state="{ icon: '', label: $t('table.hostPmList.emptyText') }"
           :sort="{ column: 'date', direction: 'desc' }"
           :ui="{
@@ -200,6 +220,7 @@ async function handleItemSelect (row: any) {
                   })
                 "
                 :block="!isDraft(row.status)"
+                :disabled="row.disabled"
                 @click="handleItemSelect(row)"
               />
               <UPopover v-if="isDraft(row.status)" :popper="{ placement: 'bottom-end' }">
@@ -207,6 +228,7 @@ async function handleItemSelect (row: any) {
                   class="grow justify-center lg:flex-none lg:rounded-l-none"
                   icon="i-mdi-menu-down"
                   :aria-label="$t('text.showMoreOptions')"
+                  :disabled="row.disabled"
                 />
                 <template #panel>
                   <!-- TODO: not focusable via keyboard tab, should be fixed in nuxt/ui v3 -->
@@ -215,7 +237,7 @@ async function handleItemSelect (row: any) {
                     :label="$t('word.Remove')"
                     :aria-label="$t('word.Remove')"
                     variant="link"
-                    @click="console.log('remove', row.applicationNumber)"
+                    @click="deleteDraft(row)"
                   />
                 </template>
               </UPopover>

From bf828f95529149ee6a6fe67af6a1d12b193c3ef9 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialj876@gmail.com>
Date: Thu, 9 Jan 2025 12:06:19 -0500
Subject: [PATCH 4/6] fix for base-web ci?

Signed-off-by: Kial Jinnah <kialj876@gmail.com>
---
 strr-base-web/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/strr-base-web/package.json b/strr-base-web/package.json
index 4ce306553..829218069 100644
--- a/strr-base-web/package.json
+++ b/strr-base-web/package.json
@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare",
     "lint": "eslint --ext .ts,.vue app --ignore-path .gitignore",
     "lint:fix": "pnpm lint --fix",
-    "test": "vitest --dir tests/unit --passWithNoTests --coverage && cp ./tests/coverage/clover.xml ./coverage.xml",
+    "test": "vitest --dir tests/unit --passWithNoTests --coverage && cp ./coverage/clover.xml ./coverage.xml",
     "test:unit": "vitest --dir tests/unit",
     "test:unit:cov": "vitest run --dir tests/unit --coverage",
     "test:e2e": "npx playwright test",

From 4e6660c9e383ddfef01f055276af1ecfd95ac270 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialj876@gmail.com>
Date: Thu, 9 Jan 2025 14:05:15 -0500
Subject: [PATCH 5/6] Update for PR comment

Signed-off-by: Kial Jinnah <kialj876@gmail.com>
---
 strr-host-pm-web/app/locales/en-CA.ts          |  1 +
 strr-host-pm-web/app/pages/dashboard/index.vue | 14 ++++++--------
 strr-host-pm-web/package.json                  |  2 +-
 strr-platform-web/package.json                 |  2 +-
 strr-strata-web/package.json                   |  2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/strr-host-pm-web/app/locales/en-CA.ts b/strr-host-pm-web/app/locales/en-CA.ts
index 96cc7a1ef..bea4ddea7 100644
--- a/strr-host-pm-web/app/locales/en-CA.ts
+++ b/strr-host-pm-web/app/locales/en-CA.ts
@@ -224,6 +224,7 @@ export default {
     showDetails: 'Show Details',
     hideDetails: 'Hide Details',
     returnToStep: 'Return to the step to finish it',
+    ariaResumeDraft: 'Resume Draft for {number}',
     ariaViewDetails: 'View details for property: {name}, {address}',
     registerAStr: 'Register a Short-Term Rental'
   },
diff --git a/strr-host-pm-web/app/pages/dashboard/index.vue b/strr-host-pm-web/app/pages/dashboard/index.vue
index 6611cb41c..638e0d571 100644
--- a/strr-host-pm-web/app/pages/dashboard/index.vue
+++ b/strr-host-pm-web/app/pages/dashboard/index.vue
@@ -208,15 +208,13 @@ async function handleItemSelect (row: any) {
               <UButton
                 :class="isDraft(row.status) ? 'justify-center grow lg:rounded-r-none' : ''"
                 :label="isDraft(row.status) ? $t('label.resumeDraft') : $t('btn.view')"
-                :aria-label="
-                  $t('btn.ariaViewDetails', {
+                :aria-label="isDraft(row.status)
+                  ? $t('btn.ariaResumeDraft', { number: row.applicationNumber })
+                  : $t('btn.ariaViewDetails', {
                     name: row.name,
-                    address: row.address.streetName
-                      ? `${row.address.unitNumber
-                        ? row.address.unitNumber + '-'
-                        : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
-                      : '',
-                    number: row.applicationNumber
+                    address: `${row.address.unitNumber
+                      ? row.address.unitNumber + '-'
+                      : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
                   })
                 "
                 :block="!isDraft(row.status)"
diff --git a/strr-host-pm-web/package.json b/strr-host-pm-web/package.json
index 80b589772..1f749b4bb 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": "0.0.31",
+  "version": "0.0.32",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",
diff --git a/strr-platform-web/package.json b/strr-platform-web/package.json
index de248ec48..bdcd50ff8 100644
--- 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.35",
+  "version": "0.0.36",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",
diff --git a/strr-strata-web/package.json b/strr-strata-web/package.json
index 8923b6dab..fcc918ba5 100644
--- 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.36",
+  "version": "0.0.37",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

From d4531af4d0345f9d09277110c6e561f9415bbe26 Mon Sep 17 00:00:00 2001
From: Kial Jinnah <kialj876@gmail.com>
Date: Thu, 9 Jan 2025 14:26:37 -0500
Subject: [PATCH 6/6] cleanup

Signed-off-by: Kial Jinnah <kialj876@gmail.com>
---
 strr-base-web/app/locales/en-CA.ts             | 1 +
 strr-host-pm-web/app/pages/dashboard/index.vue | 4 ++--
 strr-host-pm-web/app/stores/hostApplication.ts | 6 +-----
 strr-host-pm-web/app/stores/hostPermit.ts      | 4 +---
 strr-host-pm-web/app/utils/host-formatting.ts  | 2 +-
 5 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/strr-base-web/app/locales/en-CA.ts b/strr-base-web/app/locales/en-CA.ts
index 613521389..23e1b9dfe 100644
--- a/strr-base-web/app/locales/en-CA.ts
+++ b/strr-base-web/app/locales/en-CA.ts
@@ -36,6 +36,7 @@ export default {
     decline: 'Decline',
     close: 'Close',
     openHelpDocs: 'Read the Overview',
+    deleteApplication: 'Delete Application',
     downloadCertificate: 'Download Certificate',
     downloadReceipt: 'Download Receipt',
     downloadReport: 'Download Report',
diff --git a/strr-host-pm-web/app/pages/dashboard/index.vue b/strr-host-pm-web/app/pages/dashboard/index.vue
index 638e0d571..7b62a3cce 100644
--- a/strr-host-pm-web/app/pages/dashboard/index.vue
+++ b/strr-host-pm-web/app/pages/dashboard/index.vue
@@ -232,8 +232,8 @@ async function handleItemSelect (row: any) {
                   <!-- TODO: not focusable via keyboard tab, should be fixed in nuxt/ui v3 -->
                   <UButton
                     class="m-2"
-                    :label="$t('word.Remove')"
-                    :aria-label="$t('word.Remove')"
+                    :label="$t('btn.deleteApplication')"
+                    :aria-label="$t('btn.deleteApplication')"
                     variant="link"
                     @click="deleteDraft(row)"
                   />
diff --git a/strr-host-pm-web/app/stores/hostApplication.ts b/strr-host-pm-web/app/stores/hostApplication.ts
index 0c1f82dca..c8df74846 100644
--- a/strr-host-pm-web/app/stores/hostApplication.ts
+++ b/strr-host-pm-web/app/stores/hostApplication.ts
@@ -57,11 +57,7 @@ export const useHostApplicationStore = defineStore('host/application', () => {
           ? { propertyManager: formatOwnerPropertyManagerAPI(propertyManger) }
           : {}
         ),
-        // @ts-expect-error - can be undefined for drafts edge case
-        unitAddress: reqStore.showUnitDetailsForm
-          // only save the entered address if it was fully entered / user selected continue registration
-          ? formatHostUnitAddressApi(propertyStore.unitAddress.address)
-          : undefined,
+        unitAddress: formatHostUnitAddressApi(propertyStore.unitAddress.address),
         unitDetails: formatHostUnitDetailsAPI(propertyStore.unitDetails, propertyStore.blInfo, reqStore.prRequirements),
         documents: documentStore.apiDocuments,
         strRequirements: reqStore.propertyReqs,
diff --git a/strr-host-pm-web/app/stores/hostPermit.ts b/strr-host-pm-web/app/stores/hostPermit.ts
index bbe0f4509..6db63f804 100644
--- a/strr-host-pm-web/app/stores/hostPermit.ts
+++ b/strr-host-pm-web/app/stores/hostPermit.ts
@@ -42,9 +42,7 @@ export const useHostPermitStore = defineStore('host/permit', () => {
       }
       unitDetails.value = formatHostUnitDetailsUI(permitDetails.value.unitDetails)
       blInfo.value = formatHostUnitDetailsBlInfoUI(permitDetails.value.unitDetails)
-      if (permitDetails.value.unitAddress) {
-        unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
-      }
+      unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
       showUnitDetailsForm.value = !!unitAddress.value?.address?.streetName
       prRequirements.value.isPropertyPrExempt = !!permitDetails.value.unitDetails.prExemptReason
       prRequirements.value.prExemptionReason = permitDetails.value.unitDetails.prExemptReason
diff --git a/strr-host-pm-web/app/utils/host-formatting.ts b/strr-host-pm-web/app/utils/host-formatting.ts
index 4923bf731..b9224f28c 100644
--- a/strr-host-pm-web/app/utils/host-formatting.ts
+++ b/strr-host-pm-web/app/utils/host-formatting.ts
@@ -132,7 +132,7 @@ export function formatHostUnitAddressUI (unitAddress: ApiUnitAddress): HostPrope
   const street = baseAddress.street
     ? baseAddress.street
     : `${unitAddress.unitNumber ? unitAddress.unitNumber + '-' : ''}` +
-      `${unitAddress.streetNumber || ''} ${unitAddress.streetName}`
+      `${unitAddress.streetNumber || ''} ${unitAddress.streetName}`.trim()
   return {
     ...baseAddress,
     nickname: unitAddress.nickname || '',