From 9e75c9c8456f7e7c6be072d2c8baac03a820d7ac Mon Sep 17 00:00:00 2001
From: Kial <kialj876@gmail.com>
Date: Wed, 6 Nov 2024 16:53:20 -0500
Subject: [PATCH] UI - strata hotel application (#274)

* UI - strata hotel application

Signed-off-by: Kial Jinnah <kialj876@gmail.com>

* updated address usage for base web changes

Signed-off-by: Kial Jinnah <kialj876@gmail.com>

* Final initial strata form updates

Signed-off-by: Kial Jinnah <kialj876@gmail.com>

* PR comment

Signed-off-by: Kial Jinnah <kialj876@gmail.com>

---------

Signed-off-by: Kial Jinnah <kialj876@gmail.com>
---
 strr-base-web/app/app.config.ts               |  18 +-
 .../components/connect/form/address/Index.vue |  54 ++-
 .../components/connect/form/field/Group.vue   |   2 +-
 .../components/connect/form/field/Index.vue   |  11 +-
 .../app/composables/useCanadaPost.ts          |   7 +-
 strr-base-web/app/composables/useStrrApi.ts   |   4 +-
 strr-base-web/app/locales/en-CA.ts            |   1 +
 .../app/utils/connect-validation/index.ts     |  13 -
 .../form/platform/BusinessDetails.vue         |  41 +-
 strr-platform-web/app/locales/en-CA.ts        |   1 -
 .../app/stores/platformApplication.ts         |   2 +-
 strr-platform-web/package.json                |   3 +-
 strr-platform-web/pnpm-lock.yaml              |  12 +
 .../app/components/form/BusinessDetails.vue   | 203 ++++++++++
 .../app/components/form/ReviewConfirm.vue     | 353 ++++++++++++++++++
 .../app/components/form/StrataDetails.vue     | 176 +++++++++
 .../app/interfaces/strata-details.ts          |   2 +-
 strr-strata-web/app/locales/en-CA.ts          |  48 ++-
 strr-strata-web/app/pages/application.vue     | 104 +++++-
 .../app/stores/strataApplication.ts           |  18 +-
 strr-strata-web/app/stores/strataDetails.ts   |  59 ++-
 strr-strata-web/nuxt.config.ts                |   1 +
 strr-strata-web/package.json                  |   3 +-
 strr-strata-web/pnpm-lock.yaml                |  12 +
 24 files changed, 1013 insertions(+), 135 deletions(-)
 create mode 100644 strr-strata-web/app/components/form/BusinessDetails.vue
 create mode 100644 strr-strata-web/app/components/form/ReviewConfirm.vue
 create mode 100644 strr-strata-web/app/components/form/StrataDetails.vue

diff --git a/strr-base-web/app/app.config.ts b/strr-base-web/app/app.config.ts
index 52e82bb1..088cbbc2 100644
--- a/strr-base-web/app/app.config.ts
+++ b/strr-base-web/app/app.config.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 export default defineAppConfig({
   strrBaseLayer: {
     page: {
@@ -25,12 +26,14 @@ export default defineAppConfig({
         base: 'file:text-gray-700 file:pt-2'
       },
       color: {
+        gray: {
+          outline: 'bg-gray-100 ring-0 disabled:hover:bg-gray-100 disabled:hover:border-gray-500  hover:bg-gray-200 hover:border-gray-600 focus:border-primary-500 focus:border-b-2 focus:ring-0'
+        },
         red: {
-          outline: 'bg-red-100 ring-0 border-red-600 placeholder-red-600 hover:bg-gray-200 ' +
-            'focus:border-red-600 focus:border-b-2 focus:ring-0'
+          outline: 'bg-red-100 ring-0 border-red-600 placeholder-red-600 focus:border-red-600 focus:border-b-2 focus:ring-0'
         },
         primary: {
-          outline: 'bg-primary-50 ring-0 border-primary-500 hover:bg-gray-200 focus:border-b-2 focus:ring-0'
+          outline: 'bg-primary-50 ring-0 border-primary-500 focus:border-b-2 focus:ring-0'
         }
       }
     },
@@ -39,9 +42,14 @@ export default defineAppConfig({
     },
     select: {
       color: {
+        gray: {
+          outline: 'bg-gray-100 ring-0 disabled:hover:bg-gray-100 hover:bg-gray-200 hover:border-gray-600 focus:border-primary-500 focus:border-b-2 focus:ring-0'
+        },
+        primary: {
+          outline: 'bg-primary-50 ring-0 border-primary-500 disabled:hover:bg-primary-50 focus:border-b-2 focus:ring-0'
+        },
         red: {
-          outline: 'bg-red-100 border-red-600 ring-0 hover:bg-gray-200 ' +
-            'focus:border-red-600 focus:border-b-2 focus:ring-0'
+          outline: 'bg-red-100 border-red-600 ring-0 focus:border-red-600 focus:border-b-2 focus:ring-0'
         }
       }
     },
diff --git a/strr-base-web/app/components/connect/form/address/Index.vue b/strr-base-web/app/components/connect/form/address/Index.vue
index 6b044f1d..7b5b0ed1 100644
--- a/strr-base-web/app/components/connect/form/address/Index.vue
+++ b/strr-base-web/app/components/connect/form/address/Index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Form } from '#ui/types'
+
 const country = defineModel<string>('country')
 const street = defineModel<string>('street')
 const streetAdditional = defineModel<string>('streetAdditional')
@@ -10,20 +12,17 @@ const locationDescription = defineModel<string>('locationDescription')
 type AddressField = 'country' | 'street' | 'streetAdditional' | 'city' |
   'region' | 'postalCode' | 'locationDescription'
 
-const {
-  id,
-  enableAddressComplete,
-  schemaPrefix,
-  disabledFields
-} = defineProps<{
+const props = defineProps<{
   id: string,
-  enableAddressComplete:(id: string, countryIso2: string, countrySelect: boolean) => void,
   schemaPrefix: string,
+  formRef?: Form<any>,
   disabledFields?: AddressField[],
   excludedFields?: AddressField[],
   locationDescLabel?: boolean
 }>()
 
+const { address: canadaPostAddress, enableAddressComplete } = useCanadaPostAddress()
+
 const countries = iscCountriesListSortedByName
 const regions = computed(() => {
   switch (country.value) {
@@ -38,10 +37,49 @@ const regions = computed(() => {
 
 const addressComplete = () => {
   if (typeof country.value === 'string') {
-    enableAddressComplete(id, country.value, !disabledFields?.includes('country'))
+    enableAddressComplete(props.id, country.value, !props.disabledFields?.includes('country'))
   }
 }
 
+watch(canadaPostAddress, (newAddress) => {
+  // automatically populate all non excluded / non disabled fields
+  if (newAddress) {
+    // clear form validation for city/region/postalCode if address is autocompleted
+    if (props.formRef) {
+      props.formRef.clear(`${props.schemaPrefix}country`)
+      props.formRef.clear(`${props.schemaPrefix}city`)
+      props.formRef.clear(`${props.schemaPrefix}region`)
+      props.formRef.clear(`${props.schemaPrefix}postalCode`)
+    }
+    for (const key of Object.keys(newAddress)) {
+      if (
+        !props.disabledFields?.includes(key as AddressField) &&
+        !props.excludedFields?.includes(key as AddressField)
+      ) {
+        switch (key as AddressField) {
+          case 'street':
+            street.value = newAddress.street
+            break
+          case 'streetAdditional':
+            streetAdditional.value = newAddress.streetAdditional
+            break
+          case 'country':
+            country.value = newAddress.country
+            break
+          case 'city':
+            city.value = newAddress.city
+            break
+          case 'region':
+            region.value = newAddress.region
+            break
+          case 'postalCode':
+            postalCode.value = newAddress.postalCode
+        }
+      }
+    }
+  }
+})
+
 const addId = useId()
 </script>
 <template>
diff --git a/strr-base-web/app/components/connect/form/field/Group.vue b/strr-base-web/app/components/connect/form/field/Group.vue
index 155f5e2c..c17f9ef5 100644
--- a/strr-base-web/app/components/connect/form/field/Group.vue
+++ b/strr-base-web/app/components/connect/form/field/Group.vue
@@ -3,7 +3,7 @@ import { type UseEventBusReturn } from '@vueuse/core'
 
 const formBus = inject<UseEventBusReturn<any, string> | undefined>('form-events', undefined)
 
-const model = defineModel({ type: String, default: '' })
+const model = defineModel<string | number>()
 watch(model, () => {
   formBus?.emit({ type: 'blur', path: props.name })
   formBus?.emit({ type: 'change', path: props.name })
diff --git a/strr-base-web/app/components/connect/form/field/Index.vue b/strr-base-web/app/components/connect/form/field/Index.vue
index 9e1a5e70..7ae753fe 100644
--- a/strr-base-web/app/components/connect/form/field/Index.vue
+++ b/strr-base-web/app/components/connect/form/field/Index.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { normalizeInput } from '~/utils/connect-validation'
-
-const model = defineModel({ type: String, default: '' })
+const model = defineModel<string | number>()
 
 defineProps({
   id: { type: String, required: true },
@@ -16,16 +14,12 @@ defineProps({
   ariaLabel: { type: String, default: undefined },
   type: { type: String, default: 'text' }
 })
-
-const normalize = () => {
-  model.value = normalizeInput(model.value)
-}
 </script>
 
 <template>
   <UInput
     :id="id"
-    v-model="model"
+    v-model.trim="model"
     v-bind="$attrs"
     :type
     class="max-w-bcGovInput"
@@ -38,7 +32,6 @@ const normalize = () => {
     :aria-invalid="isInvalid"
     :aria-describedby="helpId"
     :aria-label="ariaLabel"
-    @blur="normalize"
   />
   <!-- :aria-errormessage="errorId" -->
   <!-- Doesnt look like aria-errormessage is well supported, need to look into this more -->
diff --git a/strr-base-web/app/composables/useCanadaPost.ts b/strr-base-web/app/composables/useCanadaPost.ts
index 289030d5..e799054e 100644
--- a/strr-base-web/app/composables/useCanadaPost.ts
+++ b/strr-base-web/app/composables/useCanadaPost.ts
@@ -13,8 +13,9 @@ export const useCanadaPostAddress = () => {
     locationDescription: ''
   })
 
-  const createAddressComplete = (pca: any, key: string, id: string, countryIso2: string,
-    countrySelect: boolean): object => {
+  const createAddressComplete = (
+    pca: any, key: string, id: string, countryIso2: string, countrySelect: boolean
+  ): object => {
     const fields = [
       { element: id, field: 'Line1', mode: pca.fieldMode.SEARCH }
     ]
@@ -34,7 +35,7 @@ export const useCanadaPostAddress = () => {
     activeAddressField.value = id
     const config = useRuntimeConfig()
     const pca = (window as any).pca
-    const key = config.public.addressCompleteKey
+    const key = config.public.addressCompleteKey as string
     if (!pca || !key) {
       console.warn('AddressComplete not initialized due to missing script and/or key')
       return
diff --git a/strr-base-web/app/composables/useStrrApi.ts b/strr-base-web/app/composables/useStrrApi.ts
index f0db3574..1f8d7766 100644
--- a/strr-base-web/app/composables/useStrrApi.ts
+++ b/strr-base-web/app/composables/useStrrApi.ts
@@ -20,8 +20,8 @@ export const useStrrApi = () => {
     return resp.applications
   }
 
-  const postApplication = async <T extends { registration: ApiBaseRegistration }>(body: T) => {
-    return await $strrApi<T>('/applications', {
+  const postApplication = async <T extends { registration: ApiBaseRegistration }, R extends T>(body: T) => {
+    return await $strrApi<R>('/applications', {
       method: 'POST',
       body
     })
diff --git a/strr-base-web/app/locales/en-CA.ts b/strr-base-web/app/locales/en-CA.ts
index f7352d2f..51fcf3bc 100644
--- a/strr-base-web/app/locales/en-CA.ts
+++ b/strr-base-web/app/locales/en-CA.ts
@@ -330,6 +330,7 @@ export default {
       last: 'Please enter a last name',
       full: 'Please enter a full legal name'
     },
+    number: 'Please enter a number',
     phone: {
       code: 'Please select a country code',
       number: 'Please enter a phone number'
diff --git a/strr-base-web/app/utils/connect-validation/index.ts b/strr-base-web/app/utils/connect-validation/index.ts
index 1da38b3d..098e81cb 100644
--- a/strr-base-web/app/utils/connect-validation/index.ts
+++ b/strr-base-web/app/utils/connect-validation/index.ts
@@ -25,19 +25,6 @@ export const getRequiredNonEmptyString = (message: string) => z.string().refine(
 export const getRequiredUrl = (message: string) =>
   z.string().refine(e => e.trim() !== '' && httpRegex.test(e), message)
 
-/**
- * Normalizes a string.
- * If the input is provided, it removes leading, trailing, and extra spaces within the name.
- * If the input is undefined, it returns an empty string.
- * @param {string | undefined} input - the input to normalize.
- */
-export const normalizeInput = (input?: string): string => {
-  if (input === undefined) {
-    return ''
-  }
-  return input.trim().replace(/\s+/g, ' ')
-}
-
 export const checkSpecialCharacters = (input: string | undefined): boolean => {
   return input === undefined || /^[\d\s]*$/.test(input)
 }
diff --git a/strr-platform-web/app/components/form/platform/BusinessDetails.vue b/strr-platform-web/app/components/form/platform/BusinessDetails.vue
index 386c4bf3..e5ce10b2 100644
--- a/strr-platform-web/app/components/form/platform/BusinessDetails.vue
+++ b/strr-platform-web/app/components/form/platform/BusinessDetails.vue
@@ -66,43 +66,6 @@ watch(() => platformBusiness.value.hasRegOffAtt,
   }
 )
 
-// address stuff
-const {
-  activeAddressField,
-  address: canadaPostAddress,
-  enableAddressComplete
-} = useCanadaPostAddress()
-
-const activeAddressPath = computed(() => {
-  if (activeAddressField.value === 'platform-business-address') {
-    return 'mailingAddress'
-  }
-  return 'regOfficeOrAtt.mailingAddress'
-})
-
-watch(canadaPostAddress, (newAddress) => {
-  if (platformBusinessFormRef.value) {
-    // reset form validation for city/region/postalCode if address is changed
-    platformBusinessFormRef.value.clear(`${activeAddressPath.value}.city`)
-    platformBusinessFormRef.value.clear(`${activeAddressPath.value}.region`)
-    platformBusinessFormRef.value.clear(`${activeAddressPath.value}.postalCode`)
-    if (newAddress && activeAddressPath.value === 'mailingAddress') {
-      platformBusiness.value.mailingAddress.street = newAddress.street
-      platformBusiness.value.mailingAddress.streetAdditional = newAddress.streetAdditional
-      platformBusiness.value.mailingAddress.country = newAddress.country
-      platformBusiness.value.mailingAddress.city = newAddress.city
-      platformBusiness.value.mailingAddress.region = newAddress.region
-      platformBusiness.value.mailingAddress.postalCode = newAddress.postalCode
-    } else if (newAddress) {
-      // NOTE: country and region are not set because they are disabled for regOfficeOrAtt.mailingAddress
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.street = newAddress.street
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.streetAdditional = newAddress.streetAdditional
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.city = newAddress.city
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.postalCode = newAddress.postalCode
-    }
-  }
-})
-
 onMounted(async () => {
   // validate form if step marked as complete
   if (props.isComplete) {
@@ -202,7 +165,7 @@ onMounted(async () => {
               v-model:region="platformBusiness.mailingAddress.region"
               v-model:postal-code="platformBusiness.mailingAddress.postalCode"
               :schema-prefix="'mailingAddress.'"
-              :enable-address-complete="enableAddressComplete"
+              :form-ref="platformBusinessFormRef"
             />
           </div>
         </ConnectFormSection>
@@ -258,8 +221,8 @@ onMounted(async () => {
                 v-model:region="platformBusiness.regOfficeOrAtt.mailingAddress.region"
                 v-model:postal-code="platformBusiness.regOfficeOrAtt.mailingAddress.postalCode"
                 :schema-prefix="'regOfficeOrAtt.mailingAddress.'"
-                :enable-address-complete="enableAddressComplete"
                 :disabled-fields="['country', 'region']"
+                :form-ref="platformBusinessFormRef"
               />
             </div>
           </div>
diff --git a/strr-platform-web/app/locales/en-CA.ts b/strr-platform-web/app/locales/en-CA.ts
index 3d4e5458..91f35471 100644
--- a/strr-platform-web/app/locales/en-CA.ts
+++ b/strr-platform-web/app/locales/en-CA.ts
@@ -45,7 +45,6 @@ export default {
       subTitle: {
         brand: 'Platform Brand',
         noticeNonCompliance: 'Notice of Non-Compliance',
-        regOfficeAttSvcAddrress: 'Registered Office or Attorney for Service Address',
         size: 'Platform Size',
         takedownRequest: 'Takedown Request'
       }
diff --git a/strr-platform-web/app/stores/platformApplication.ts b/strr-platform-web/app/stores/platformApplication.ts
index 6126e875..c90bfd9a 100644
--- a/strr-platform-web/app/stores/platformApplication.ts
+++ b/strr-platform-web/app/stores/platformApplication.ts
@@ -66,7 +66,7 @@ export const useStrrPlatformApplication = defineStore('strr/platformApplication'
 
     console.info('submitting application: ', body)
 
-    return await postApplication<PlatformApplicationPayload>(body)
+    return await postApplication<PlatformApplicationPayload, PlatformApplicationResp>(body)
   }
 
   return {
diff --git a/strr-platform-web/package.json b/strr-platform-web/package.json
index e3bda5b0..f59c3d3b 100644
--- a/strr-platform-web/package.json
+++ b/strr-platform-web/package.json
@@ -44,6 +44,7 @@
     "@daxiom/nuxt-core-layer-test": "^0.0.10",
     "@vuepic/vue-datepicker": "^9.0.3",
     "country-codes-list": "^1.6.11",
-    "nuxt": "^3.12.3"
+    "nuxt": "^3.12.3",
+    "vue-country-flag-next": "^2.3.2"
   }
 }
diff --git a/strr-platform-web/pnpm-lock.yaml b/strr-platform-web/pnpm-lock.yaml
index 3893bbf8..9e4edcb0 100644
--- a/strr-platform-web/pnpm-lock.yaml
+++ b/strr-platform-web/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
   nuxt:
     specifier: ^3.12.3
     version: 3.12.3(@opentelemetry/api@1.9.0)(eslint@8.57.0)(rollup@4.18.0)(sass@1.77.6)(typescript@5.5.3)(vite@5.3.3)
+  vue-country-flag-next:
+    specifier: ^2.3.2
+    version: 2.3.2(vue@3.5.12)
 
 devDependencies:
   '@axe-core/playwright':
@@ -12571,6 +12574,15 @@ packages:
     resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==}
     dev: true
 
+  /vue-country-flag-next@2.3.2(vue@3.5.12):
+    resolution: {integrity: sha512-Lv12L1VTwlBgizpZ3xPEPO3zuIETaJmeSiPuLOWLLgu2EakwU/o72iKYiKcdZ6BXiSkfss+Ski5fDzjuxZ1DcA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.5.12(typescript@5.5.3)
+    dev: false
+
   /vue-demi@0.14.10(vue@3.5.12):
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
diff --git a/strr-strata-web/app/components/form/BusinessDetails.vue b/strr-strata-web/app/components/form/BusinessDetails.vue
new file mode 100644
index 00000000..24591e81
--- /dev/null
+++ b/strr-strata-web/app/components/form/BusinessDetails.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import type { Form } from '#ui/types'
+// TODO: move common code between platform + strata into base layer
+const { t } = useI18n()
+const { getBusinessSchema } = useStrrStrataBusinessStore()
+const { strataBusiness } = storeToRefs(useStrrStrataBusinessStore())
+
+const props = defineProps<{ isComplete: boolean }>()
+
+// cant set form schema type as the schema changes based on user input
+const strataBusinessFormRef = ref<Form<any>>()
+
+const getRadioOptions = () => [
+  { value: true, label: t('word.Yes') },
+  { value: false, label: t('word.No') }
+]
+
+// set regOfficeOrAtt.mailingAddress to match business mailing address if sameAsMailAddress checkbox checked
+watch(() => strataBusiness.value.regOfficeOrAtt.sameAsMailAddress,
+  (newVal) => {
+    if (newVal) {
+      strataBusiness.value.regOfficeOrAtt.mailingAddress = { ...strataBusiness.value.mailingAddress }
+      // revalidate fields to update/remove form errors
+      strataBusinessFormRef.value?.validate([
+        'regOfficeOrAtt.mailingAddress.country',
+        'regOfficeOrAtt.mailingAddress.street',
+        'regOfficeOrAtt.mailingAddress.city',
+        'regOfficeOrAtt.mailingAddress.region',
+        'regOfficeOrAtt.mailingAddress.postalCode'
+      ], { silent: true })
+    }
+  }
+)
+
+watch(() => strataBusiness.value.hasRegOffAtt,
+  (newVal, oldVal) => {
+    // reset regOfficeOrAtt if hasRegOffAtt radio set to false
+    if (!newVal) {
+      strataBusiness.value.regOfficeOrAtt.attorneyName = ''
+      strataBusiness.value.regOfficeOrAtt.sameAsMailAddress = false
+      Object.keys(strataBusiness.value.regOfficeOrAtt.mailingAddress).forEach((key) => {
+        // @ts-expect-error - ts doesnt recognize key type
+        strataBusiness.value.regOfficeOrAtt.mailingAddress[key] = ''
+      })
+    } else {
+      strataBusiness.value.regOfficeOrAtt.mailingAddress.country = 'CA'
+      strataBusiness.value.regOfficeOrAtt.mailingAddress.region = 'BC'
+    }
+
+    // revalidate fields to update/remove form errors if user clicks yes or no
+    // only revalidate if not the first click
+    if (oldVal !== undefined) {
+      strataBusinessFormRef.value?.validate([
+        'hasRegOffAtt',
+        'regOfficeOrAtt.mailingAddress.country',
+        'regOfficeOrAtt.mailingAddress.street',
+        'regOfficeOrAtt.mailingAddress.city',
+        'regOfficeOrAtt.mailingAddress.region',
+        'regOfficeOrAtt.mailingAddress.postalCode'
+      ], { silent: true })
+    }
+  }
+)
+
+onMounted(async () => {
+  // validate form if step marked as complete
+  if (props.isComplete) {
+    await validateForm(strataBusinessFormRef.value, props.isComplete)
+  }
+})
+</script>
+
+<template>
+  <div data-testid="business-details">
+    <ConnectPageSection
+      class="bg-white"
+      :heading="{ label: $t('strr.section.title.businessInfo'), labelClass: 'font-bold md:ml-6' }"
+    >
+      <UForm
+        ref="strataBusinessFormRef"
+        :schema="getBusinessSchema()"
+        :state="strataBusiness"
+        class="space-y-10 py-10"
+      >
+        <ConnectFormSection
+          :title="$t('strr.section.subTitle.businessIds')"
+          :error="hasFormErrors(strataBusinessFormRef, ['legalName', 'homeJurisdiction'])"
+        >
+          <div class="space-y-5">
+            <ConnectFormFieldGroup
+              id="strata-business-legal-name"
+              v-model="strataBusiness.legalName"
+              :aria-label="$t('label.busNameLegal')"
+              :help="$t('strr.hint.businessLegalName')"
+              name="legalName"
+              :placeholder="$t('label.busNameLegal')"
+              :is-required="true"
+            />
+            <ConnectFormFieldGroup
+              id="strata-business-home-jur"
+              v-model="strataBusiness.homeJurisdiction"
+              :aria-label="$t('label.homeJurisdiction')"
+              :help="$t('strr.hint.humeJurisdiction')"
+              name="homeJurisdiction"
+              :placeholder="t('label.homeJurisdiction')"
+              :is-required="true"
+            />
+            <ConnectFormFieldGroup
+              id="strata-business-number"
+              v-model="strataBusiness.businessNumber"
+              :aria-label="$t('label.busNumOpt')"
+              name="businessNumber"
+              :placeholder="$t('label.busNumOpt')"
+            />
+          </div>
+        </ConnectFormSection>
+        <div class="h-px w-full border-b border-gray-100" />
+        <ConnectFormSection
+          :title="$t('strr.section.subTitle.businessMailAddress')"
+          :error="hasFormErrors(strataBusinessFormRef, [
+            'mailingAddress.country',
+            'mailingAddress.street',
+            'mailingAddress.city',
+            'mailingAddress.region',
+            'mailingAddress.postalCode'
+          ])"
+        >
+          <div class="max-w-bcGovInput">
+            <ConnectFormAddress
+              id="strata-business-address"
+              v-model:country="strataBusiness.mailingAddress.country"
+              v-model:street="strataBusiness.mailingAddress.street"
+              v-model:street-additional="strataBusiness.mailingAddress.streetAdditional"
+              v-model:city="strataBusiness.mailingAddress.city"
+              v-model:region="strataBusiness.mailingAddress.region"
+              v-model:postal-code="strataBusiness.mailingAddress.postalCode"
+              :schema-prefix="'mailingAddress.'"
+              :form-ref="strataBusinessFormRef"
+            />
+          </div>
+        </ConnectFormSection>
+        <div class="h-px w-full border-b border-gray-100" />
+        <ConnectFormSection
+          :title="$t('strr.section.subTitle.regOfficeAttSvcAddrress')"
+          :error="hasFormErrors(strataBusinessFormRef, [
+            'hasRegOffAtt',
+            'regOfficeOrAtt.mailingAddress.country',
+            'regOfficeOrAtt.mailingAddress.street',
+            'regOfficeOrAtt.mailingAddress.city',
+            'regOfficeOrAtt.mailingAddress.region',
+            'regOfficeOrAtt.mailingAddress.postalCode'
+          ])"
+        >
+          <div class="max-w-bcGovInput space-y-5">
+            <UFormGroup id="strata-business-hasRegOffAtt" name="hasRegOffAtt">
+              <URadioGroup
+                v-model="strataBusiness.hasRegOffAtt"
+                class="p-2"
+                :class="isComplete && strataBusiness.hasRegOffAtt === undefined ? 'border-red-600 border-2' : ''"
+                :options="getRadioOptions()"
+                :ui="{ legend: 'mb-3 text-default font-bold text-gray-700' }"
+                :ui-radio="{ inner: 'space-y-2' }"
+              >
+                <template #legend>
+                  <span class="sr-only">{{ $t('validation.required') }}</span>
+                  <span>{{ $t('strr.text.regOffOrAtt') }}</span>
+                </template>
+              </URadioGroup>
+            </UFormGroup>
+            <div v-if="strataBusiness.hasRegOffAtt" class="space-y-5">
+              <UFormGroup name="null">
+                <UCheckbox
+                  v-model="strataBusiness.regOfficeOrAtt.sameAsMailAddress"
+                  :label="t('label.sameAsMailAddress')"
+                />
+              </UFormGroup>
+              <ConnectFormFieldGroup
+                id="strata-att-for-svc-name"
+                v-model="strataBusiness.regOfficeOrAtt.attorneyName"
+                :aria-label="$t('strr.label.attForSvcName')"
+                name="regOfficeOrAtt.attorneyName"
+                :placeholder="$t('strr.label.attForSvcName')"
+              />
+              <ConnectFormAddress
+                v-if="!strataBusiness.regOfficeOrAtt.sameAsMailAddress"
+                id="strata-registered-office-address"
+                v-model:country="strataBusiness.regOfficeOrAtt.mailingAddress.country"
+                v-model:street="strataBusiness.regOfficeOrAtt.mailingAddress.street"
+                v-model:street-additional="strataBusiness.regOfficeOrAtt.mailingAddress.streetAdditional"
+                v-model:city="strataBusiness.regOfficeOrAtt.mailingAddress.city"
+                v-model:region="strataBusiness.regOfficeOrAtt.mailingAddress.region"
+                v-model:postal-code="strataBusiness.regOfficeOrAtt.mailingAddress.postalCode"
+                :schema-prefix="'regOfficeOrAtt.mailingAddress.'"
+                :form-ref="strataBusinessFormRef"
+                :disabled-fields="['country', 'region']"
+              />
+            </div>
+          </div>
+        </ConnectFormSection>
+      </UForm>
+    </ConnectPageSection>
+  </div>
+</template>
diff --git a/strr-strata-web/app/components/form/ReviewConfirm.vue b/strr-strata-web/app/components/form/ReviewConfirm.vue
new file mode 100644
index 00000000..c2b1b1c8
--- /dev/null
+++ b/strr-strata-web/app/components/form/ReviewConfirm.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import type { Form } from '#ui/types'
+import { z } from 'zod'
+
+const accountStore = useConnectAccountStore()
+const contactStore = useStrrContactStore()
+const businessStore = useStrrStrataBusinessStore()
+const detailsStore = useStrrStrataDetailsStore()
+const applicationStore = useStrrStrataApplicationStore()
+
+const strataConfirmationFormRef = ref<Form<z.output<typeof applicationStore.confirmationSchema>>>()
+const sectionErrors = ref<MultiFormValidationResult>([])
+
+const props = defineProps<{ isComplete: boolean }>()
+
+defineEmits<{
+  edit: [index: number]
+}>()
+
+const validateConfirmation = () => {
+  strataConfirmationFormRef.value?.validate(undefined, { silent: true })
+}
+
+const isSectionInvalid = (formId: string) => {
+  return sectionErrors.value.some(item => item.formId === formId && !item.success)
+}
+
+// expose to trigger on application submission
+defineExpose({ validateConfirmation })
+
+onMounted(async () => {
+  // validate form if step marked as complete
+  if (props.isComplete) {
+    validateConfirmation()
+  }
+
+  const validations = [
+    contactStore.validateContact(),
+    businessStore.validateStrataBusiness(),
+    detailsStore.validateStrataDetails()
+  ]
+
+  const validationResults = await Promise.all(validations)
+  sectionErrors.value = validationResults.flatMap(result => result as MultiFormValidationResult)
+})
+</script>
+<template>
+  <div class="space-y-10" data-testid="strata-review-confirm">
+    <UAlert
+      color="yellow"
+      icon="i-mdi-alert"
+      :close-button="null"
+      variant="subtle"
+      :ui="{
+        inner: 'pt-0',
+      }"
+    >
+      <template #description>
+        <ConnectI18nBold class="text-bcGovGray-900" translation-path="strr.review.alert.contactInfo" />
+      </template>
+    </UAlert>
+
+    <!-- person completing strata application -->
+    <ConnectPageSection
+      :heading="{
+        label: $t('strr.section.title.completingParty'),
+        labelClass: 'text-lg font-semibold text-bcGovColor-darkGray',
+        icon: 'i-mdi-account-plus',
+        padding: 'sm:px-8 py-4 px-4'
+      }"
+    >
+      <FormCommonReviewSection
+        :error="isSectionInvalid('completing-party-form')"
+        :items="[
+          {
+            title: $t('label.contactName'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: accountStore.userFullName
+          },
+          {
+            title: $t('label.phone.number'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: `+${contactStore.completingParty.phone.countryCode || '-'} ` +
+              contactStore.completingParty.phone.number +
+              ' ' + contactStore.completingParty.phone.extension || ''
+          },
+          {
+            title: $t('label.emailAddress'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: contactStore.completingParty.emailAddress
+          },
+        ]"
+        @edit="$emit('edit', 0)"
+      />
+    </ConnectPageSection>
+
+    <!-- primary strata rep section -->
+    <ConnectPageSection
+      :heading="{
+        label: $t('strr.section.title.primaryRep'),
+        labelClass: 'text-lg font-semibold text-bcGovColor-darkGray',
+        icon: 'i-mdi-account-multiple-plus',
+        padding: 'sm:px-8 py-4 px-4'
+      }"
+    >
+      <FormCommonReviewSection
+        :error="isSectionInvalid('primary-rep-form')"
+        :items="[
+          {
+            title: $t('label.contactName'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: `${contactStore.primaryRep?.firstName || '-'} ` +
+              `${contactStore.primaryRep?.middleName || ''}` + ` ${contactStore.primaryRep?.lastName || ''}`
+          },
+          {
+            title: $t('label.phone.number'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: `+${contactStore.primaryRep?.phone.countryCode || '-'} ` +
+              `${contactStore.primaryRep?.phone.number || ''}` +
+              ' ' + `${contactStore.primaryRep?.phone.extension || ''}`
+          },
+          {
+            title: $t('label.emailAddress'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: contactStore.primaryRep?.emailAddress
+          },
+          {
+            title: $t('label.positionTitle'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: contactStore.primaryRep?.position
+          },
+          {
+            title: $t('label.faxNumber'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: contactStore.primaryRep?.faxNumber
+          },
+        ]"
+        @edit="$emit('edit', 0)"
+      />
+    </ConnectPageSection>
+
+    <!-- secondary strata rep section -->
+    <ConnectPageSection
+      v-if="contactStore.secondaryRep"
+      :heading="{
+        label: $t('strr.section.title.secondaryRep'),
+        labelClass: 'text-lg font-semibold text-bcGovColor-darkGray',
+        icon: 'i-mdi-account-multiple-plus',
+        padding: 'sm:px-8 py-4 px-4'
+      }"
+    >
+      <FormCommonReviewSection
+        :error="isSectionInvalid('secondary-rep-form')"
+        :items="[
+          {
+            title: $t('label.contactName'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: `${contactStore.secondaryRep?.firstName || '-'} ` +
+              `${contactStore.secondaryRep?.middleName || ''}` + ` ${contactStore.secondaryRep?.lastName || ''}`
+          },
+          {
+            title: $t('label.phone.number'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: `+${contactStore.secondaryRep?.phone.countryCode || '-'} ` +
+              `${contactStore.secondaryRep?.phone.number || ''}` +
+              ' ' + `${contactStore.secondaryRep?.phone.extension || ''}`
+          },
+          {
+            title: $t('label.emailAddress'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: contactStore.secondaryRep?.emailAddress
+          },
+          {
+            title: $t('label.positionTitle'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: contactStore.secondaryRep?.position
+          },
+          {
+            title: $t('label.faxNumber'),
+            titleClass: 'font-bold text-bcGovGray-900',
+            content: contactStore.secondaryRep?.faxNumber
+          },
+        ]"
+        @edit="$emit('edit', 0)"
+      />
+    </ConnectPageSection>
+
+    <!-- business info section -->
+    <ConnectPageSection
+      :heading="{
+        label: $t('strr.section.title.businessInfo'),
+        labelClass: 'text-lg font-semibold text-bcGovColor-darkGray',
+        icon: 'i-mdi-domain-plus',
+        padding: 'sm:px-8 py-4 px-4'
+      }"
+    >
+      <FormCommonReviewSection
+        :error="isSectionInvalid('business-details-form')"
+        :items="[
+          {
+            title: $t('label.busNameLegal'),
+            slot: 'businessIdentifiers'
+          },
+          {
+            title: $t('strr.section.subTitle.businessMailAddress'),
+            slot: 'businessMailAddress'
+          },
+          {
+            title: $t('strr.review.busInfo.attForSvcName'),
+            slot: 'regOfficeAtt'
+          }
+        ]"
+        @edit="$emit('edit', 1)"
+      >
+        <template #businessIdentifiers>
+          <div class="space-y-5">
+            <p>{{ businessStore.strataBusiness.legalName || '-' }}</p>
+            <ConnectInfoBox
+              :title="$t('label.homeJurisdiction')"
+              title-class="font-bold text-bcGovGray-900"
+              :content="businessStore.strataBusiness.homeJurisdiction || '-'"
+            />
+            <ConnectInfoBox
+              :title="$t('label.busNum')"
+              title-class="font-bold text-bcGovGray-900"
+              :content="businessStore.strataBusiness.businessNumber || '-'"
+            />
+          </div>
+        </template>
+        <template #businessMailAddress>
+          <ConnectFormAddressDisplay
+            v-if="businessStore.strataBusiness.mailingAddress.street"
+            :address="businessStore.strataBusiness.mailingAddress"
+          />
+          <span v-else> - </span>
+        </template>
+        <template #regOfficeAtt>
+          <p>{{ businessStore.strataBusiness.regOfficeOrAtt.attorneyName || '-' }}</p>
+          <ConnectInfoBox
+            :title="$t('strr.section.subTitle.regOfficeAttSvcAddrress')"
+            title-class="font-bold text-bcGovGray-900"
+            class="mt-5"
+          >
+            <ConnectFormAddressDisplay
+              v-if="businessStore.strataBusiness.regOfficeOrAtt.mailingAddress.street"
+              :address="businessStore.strataBusiness.regOfficeOrAtt.mailingAddress"
+            />
+            <span v-else> - </span>
+          </ConnectInfoBox>
+        </template>
+      </FormCommonReviewSection>
+    </ConnectPageSection>
+
+    <!-- strata info section -->
+    <ConnectPageSection
+      :heading="{
+        label: $t('strr.section.title.details'),
+        labelClass: 'text-lg font-semibold text-bcGovColor-darkGray',
+        icon: 'i-mdi-map-marker-plus-outline',
+        padding: 'sm:px-8 py-4 px-4'
+      }"
+    >
+      <FormCommonReviewSection
+        :error="isSectionInvalid('strata-details-form')"
+        :items="[
+          {
+            title: $t('strr.review.brand.name'),
+            slot: 'brand'
+          },
+          {
+            title: $t('strr.section.subTitle.numberOfUnits'),
+            content: detailsStore.strataDetails.numberOfUnits
+          },
+          {
+            title: $t('strr.section.subTitle.primaryStrataBuilding'),
+            slot: 'buildings'
+          },
+        ]"
+        @edit="$emit('edit', 2)"
+      >
+        <template #brand>
+          <p>{{ detailsStore.strataDetails.brand.name || '-' }}</p>
+          <ConnectInfoBox
+            :title="$t('strr.review.brand.site')"
+            title-class="font-bold text-bcGovGray-900"
+            :content="detailsStore.strataDetails.brand.website || '-'"
+            class="mt-5"
+          />
+        </template>
+        <template #buildings>
+          <div class="space-y-5">
+            <ConnectFormAddressDisplay
+              v-if="detailsStore.strataDetails.location.street"
+              :address="detailsStore.strataDetails.location"
+            />
+            <span v-else> - </span>
+            <ConnectInfoBox
+              v-for="building, i in detailsStore.strataDetails.buildings"
+              :key="`review-building-${i}`"
+              :title="`${$t('strr.section.subTitle.strataBuilding')} ${ i + 2 }`"
+              title-class="font-bold text-bcGovGray-900"
+            >
+              <ConnectFormAddressDisplay
+                v-if="building.street"
+                :address="building"
+              />
+              <span v-else> - </span>
+            </ConnectInfoBox>
+          </div>
+        </template>
+      </FormCommonReviewSection>
+    </ConnectPageSection>
+
+    <section class="space-y-6">
+      <h2>{{ $t('word.Certify') }}</h2>
+
+      <UForm
+        ref="strataConfirmationFormRef"
+        :state="applicationStore.confirmation"
+        :schema="applicationStore.confirmationSchema"
+        class="space-y-10 pb-10"
+      >
+        <UFormGroup name="confirmInfoAccuracy">
+          <UCheckbox
+            v-model="applicationStore.confirmation.confirmInfoAccuracy"
+            :label="$t('strr.review.confirm.infoAccuracy')"
+            class="rounded bg-white p-4"
+            :class="hasFormErrors(strataConfirmationFormRef, ['confirmInfoAccuracy'])
+              ? 'outline outline-red-600'
+              : ''
+            "
+            aria-required="true"
+            :aria-invalid="hasFormErrors(strataConfirmationFormRef, ['confirmInfoAccuracy'])"
+          />
+        </UFormGroup>
+
+        <UFormGroup name="confirmDelistAndCancelBookings">
+          <UCheckbox
+            v-model="applicationStore.confirmation.confirmDelistAndCancelBookings"
+            :label="$t('strr.review.confirm.delistAndCancelBookings')"
+            class="rounded bg-white p-4"
+            :class="hasFormErrors(strataConfirmationFormRef, ['confirmDelistAndCancelBookings'])
+              ? 'outline outline-red-600'
+              : ''
+            "
+            aria-required="true"
+            :aria-invalid="hasFormErrors(strataConfirmationFormRef, ['confirmDelistAndCancelBookings'])"
+          />
+        </UFormGroup>
+      </UForm>
+    </section>
+  </div>
+</template>
diff --git a/strr-strata-web/app/components/form/StrataDetails.vue b/strr-strata-web/app/components/form/StrataDetails.vue
new file mode 100644
index 00000000..cdf746fb
--- /dev/null
+++ b/strr-strata-web/app/components/form/StrataDetails.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { Form } from '#ui/types'
+import { z } from 'zod'
+
+const { addNewEmptyBuilding, removeBuildingAtIndex, strataDetailsSchema } = useStrrStrataDetailsStore()
+const { strataDetails } = storeToRefs(useStrrStrataDetailsStore())
+
+const props = defineProps<{ isComplete: boolean }>()
+
+const strataDetailsFormRef = ref<Form<z.output<typeof strataDetailsSchema>>>()
+
+onMounted(async () => {
+  // validate form if step marked as complete
+  if (props.isComplete) {
+    await validateForm(strataDetailsFormRef.value, props.isComplete)
+  }
+})
+</script>
+
+<template>
+  <div data-testid="strata-details">
+    <UForm
+      ref="strataDetailsFormRef"
+      :schema="strataDetailsSchema"
+      :state="strataDetails"
+      class="space-y-10"
+    >
+      <ConnectPageSection
+        class="bg-white"
+        :heading="{ label: $t('strr.section.title.details'), labelClass: 'font-bold md:ml-6' }"
+      >
+        <div class="space-y-10 py-10">
+          <ConnectFormSection
+            :title="$t('strr.section.subTitle.brand')"
+            :error="hasFormErrors(strataDetailsFormRef, ['brand.name', 'brand.website'])"
+          >
+            <div class="space-y-5">
+              <ConnectFormFieldGroup
+                id="strata-brand-name"
+                v-model="strataDetails.brand.name"
+                :aria-label="$t('strr.label.brandName')"
+                :help="$t('strr.hint.brandName')"
+                name="brand.name"
+                :placeholder="$t('strr.label.brandName')"
+                :is-required="true"
+              />
+              <ConnectFormFieldGroup
+                id="strata-brand-site"
+                v-model="strataDetails.brand.website"
+                :aria-label="$t('strr.label.brandSite')"
+                :help="$t('strr.hint.brandSite')"
+                name="brand.website"
+                :placeholder="$t('strr.label.brandSite')"
+                :is-required="true"
+                type="url"
+              />
+            </div>
+          </ConnectFormSection>
+          <div class="h-px w-full border-b border-gray-100" />
+          <ConnectFormSection
+            :title="$t('strr.section.subTitle.numberOfUnits')"
+            :error="hasFormErrors(strataDetailsFormRef, ['numberOfUnits'])"
+          >
+            <div class="space-y-5">
+              <ConnectFormFieldGroup
+                id="strata-details-numberOfUnits"
+                v-model="strataDetails.numberOfUnits"
+                :aria-label="$t('strr.label.numberOfUnits')"
+                :help="$t('strr.hint.numberOfUnits')"
+                name="numberOfUnits"
+                :placeholder="$t('strr.label.numberOfUnits')"
+                :is-required="true"
+                :type="'number'"
+              />
+            </div>
+          </ConnectFormSection>
+        </div>
+      </ConnectPageSection>
+      <ConnectPageSection
+        class="bg-white"
+        :heading="{ label: $t('strr.section.title.buildings'), labelClass: 'font-bold md:ml-6' }"
+      >
+        <div class="space-y-10 py-10">
+          <ConnectFormSection
+            :title="$t('strr.section.subTitle.primaryStrataBuilding')"
+            :error="hasFormErrors(strataDetailsFormRef, [
+              'location.country',
+              'location.street',
+              'location.city',
+              'location.region',
+              'location.postalCode'
+            ])"
+          >
+            <div class="max-w-bcGovInput space-y-10">
+              <ConnectFormAddress
+                id="strata-primary-address"
+                v-model:country="strataDetails.location.country"
+                v-model:street="strataDetails.location.street"
+                v-model:street-additional="strataDetails.location.streetAdditional"
+                v-model:city="strataDetails.location.city"
+                v-model:region="strataDetails.location.region"
+                v-model:postal-code="strataDetails.location.postalCode"
+                :schema-prefix="'location.'"
+                :form-ref="strataDetailsFormRef"
+                :disabled-fields="['country', 'region']"
+              />
+              <UButton
+                v-if="!strataDetails.buildings.length"
+                :label="$t('strr.label.addBuilding')"
+                class="px-5 py-3"
+                color="primary"
+                icon="i-mdi-home-plus"
+                variant="outline"
+                @click="addNewEmptyBuilding()"
+              />
+            </div>
+          </ConnectFormSection>
+          <div v-if="strataDetails.buildings.length" class="h-px w-full border-b border-gray-100" />
+          <div
+            v-for="building, i in strataDetails.buildings"
+            :key="'building' + i"
+          >
+            <ConnectFormSection
+              :title="`${$t('strr.section.subTitle.strataBuilding')} ${ i + 2 }`"
+              :error="hasFormErrors(strataDetailsFormRef, [
+                `buildings.${i}.country`,
+                `buildings.${i}.street`,
+                `buildings.${i}.city`,
+                `buildings.${i}.region`,
+                `buildings.${i}.postalCode`
+              ])"
+            >
+              <div class="space-y-10">
+                <div class="flex flex-col gap-5 sm:flex-row-reverse">
+                  <div>
+                    <UButton
+                      :label="$t('word.Remove')"
+                      class="border border-blue-500 sm:border-0"
+                      color="primary"
+                      trailing-icon="i-mdi-close"
+                      variant="ghost"
+                      @click="removeBuildingAtIndex(i)"
+                    />
+                  </div>
+                  <div class="max-w-bcGovInput grow">
+                    <ConnectFormAddress
+                      :id="`strata-building-${i}`"
+                      v-model:country="building.country"
+                      v-model:street="building.street"
+                      v-model:street-additional="building.streetAdditional"
+                      v-model:city="building.city"
+                      v-model:region="building.region"
+                      v-model:postal-code="building.postalCode"
+                      :schema-prefix="`buildings.${i}`"
+                      :form-ref="strataDetailsFormRef"
+                      :disabled-fields="['country', 'region']"
+                    />
+                  </div>
+                </div>
+                <UButton
+                  v-if="i === strataDetails.buildings.length - 1"
+                  :label="$t('strr.label.addBuilding')"
+                  class="px-5 py-3"
+                  color="primary"
+                  icon="i-mdi-home-plus"
+                  variant="outline"
+                  @click="addNewEmptyBuilding()"
+                />
+              </div>
+            </ConnectFormSection>
+          </div>
+        </div>
+      </ConnectPageSection>
+    </UForm>
+  </div>
+</template>
diff --git a/strr-strata-web/app/interfaces/strata-details.ts b/strr-strata-web/app/interfaces/strata-details.ts
index 775e36e2..7127ffa0 100644
--- a/strr-strata-web/app/interfaces/strata-details.ts
+++ b/strr-strata-web/app/interfaces/strata-details.ts
@@ -1,5 +1,5 @@
 export interface StrataDetails {
-  brands: StrrBrand[],
+  brand: StrrBrand,
   buildings: ConnectAddress[],
   location: ConnectAddress
   numberOfUnits: number | undefined
diff --git a/strr-strata-web/app/locales/en-CA.ts b/strr-strata-web/app/locales/en-CA.ts
index 1dfa095b..0838f523 100644
--- a/strr-strata-web/app/locales/en-CA.ts
+++ b/strr-strata-web/app/locales/en-CA.ts
@@ -9,32 +9,66 @@ export default {
     step: {
       stepperLabel: 'Strata Hotel Application Step Navigation',
       description: {
-        0: 'Add Business Details',
-        1: 'Add Contact Information',
+        0: 'Add Contact Information',
+        1: 'Add Business Details',
         2: 'Add Strata Hotel Information',
         3: 'Review and Confirm'
       },
       title: {
-        0: 'Step 1 - Business Details',
-        1: 'Step 2 - Contact Information',
+        0: 'Step 1 - Contact Information',
+        1: 'Step 2 - Business Details',
         2: 'Step 3 - Platform Information',
         3: 'Step 4 - Review and Confirm'
       },
       info: {
-        0: 'Information about the business operating the strata hotel.',
-        1: 'Short-term rental platforms must identify a strata hotel representative to communicate with the Province. This person will be responsible for representing the strata hotel regarding regulatory requirements for strata hotels.',
+        0: 'Short-term rental platforms must identify a strata hotel representative to communicate with the Province. This person will be responsible for representing the strata hotel regarding regulatory requirements for strata hotels.',
+        1: 'Information about the business operating the strata hotel.',
         2: 'Provide information about each strata hotel operated by your company.',
         3: 'Review and confirm all of the information you provided as shown below.'
       }
     },
+    section: {
+      title: {
+        buildings: 'Strata Hotel Buildings',
+        completingParty: 'Person Completing Strata Hotel Application',
+        details: 'Strata Hotel Details',
+        primaryRep: 'Strata Hotel Representative',
+        secondaryRep: 'Secondary Strata Hotel Representative'
+      },
+      subTitle: {
+        brand: 'Strata Hotel Brand',
+        numberOfUnits: 'Number of Rental Units',
+        primaryStrataBuilding: 'Primary Strata Hotel Building',
+        strataBuilding: 'Strata Hotel Building'
+      }
+    },
     title: {
       application: 'Short-Term Rental Strata Hotel Application',
       comingSoon: 'Short-Term Rental Strata Hotel Registry Coming Soon',
       dashboard: 'My Short-Term Rental Strata Hotel Registry',
       default: 'TBD'
     },
+    label: {
+      addBuilding: 'Add a Building',
+      brandName: 'Strata Hotel Brand Name',
+      brandSite: 'Strata Hotel Brand Website',
+      numberOfUnits: 'Number of Rental Units'
+    },
     text: {
-      comingSoon: 'Short-Term Rental Strata Hotel Registry will be available on December 15, 2024'
+      comingSoon: 'Short-Term Rental Strata Hotel Registry will be available on December 15, 2024',
+      isUserRep: 'Are you the strata hotel representative?',
+      primaryContact: 'This is the primary contact person for the strata hotel.'
+    },
+    hint: {
+      brandName: 'The brand name for the strata hotel',
+      brandSite: 'e.g., https://www.your-strata-hotel.ca/',
+      numberOfUnits: 'The total number of units within the strata hotel that are offered as short-term rentals'
+    },
+    review: {
+      brand: {
+        name: 'Strata Hotel Brand Name | Strata Hotel Brand {count} Name',
+        site: 'Strata Hotel Brand Website | Strata Hotel Brand {count} Website'
+      }
     }
   }
 }
diff --git a/strr-strata-web/app/pages/application.vue b/strr-strata-web/app/pages/application.vue
index ddd60a10..f9917ee6 100644
--- a/strr-strata-web/app/pages/application.vue
+++ b/strr-strata-web/app/pages/application.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { ConnectStepper } from '#components'
+import { ConnectStepper, FormReviewConfirm } from '#components'
 
 const { t } = useI18n()
+const localePath = useLocalePath()
+const strrModal = useStrrModals()
 
 const { validateContact } = useStrrContactStore()
 const { validateStrataBusiness } = useStrrStrataBusinessStore()
 const { validateStrataDetails } = useStrrStrataDetailsStore()
-const { validateStrataConfirmation } = useStrrStrataApplicationStore()
+const { submitStrataApplication, validateStrataConfirmation } = useStrrStrataApplicationStore()
 // fee stuff
 const {
   addReplaceFee,
@@ -63,7 +65,84 @@ const steps = ref<Step[]>([
 const activeStepIndex = ref<number>(0)
 const activeStep = ref<Step>(steps.value[activeStepIndex.value] as Step)
 const stepperRef = shallowRef<InstanceType<typeof ConnectStepper> | null>(null)
-// const reviewFormRef = shallowRef<InstanceType<typeof FormPlatformReviewConfirm> | null>(null)
+const reviewFormRef = shallowRef<InstanceType<typeof FormReviewConfirm> | null>(null)
+
+// need to cleanup the setButtonControl somehow
+const handleStrataSubmit = 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
+        }
+      ]
+    })
+
+    activeStep.value.complete = true // set final review step as active before validation
+    reviewFormRef.value?.validateConfirmation() // validate confirmation checkboxes on submit
+
+    // all step validations
+    const validations = [
+      validateContact(),
+      validateStrataBusiness(),
+      validateStrataDetails(),
+      validateStrataConfirmation()
+    ]
+
+    const validationResults = await Promise.all(validations)
+    formErrors = validationResults.flatMap(result => result as MultiFormValidationResult)
+    const isApplicationValid = formErrors.every(result => result.success === true)
+
+    console.info('is application valid: ', isApplicationValid, formErrors)
+
+    // if all steps valid, submit form with store function
+    if (isApplicationValid) {
+      const response = await submitStrataApplication()
+      if (response) {
+        return navigateTo(localePath(`/strata/dashboard/${response.header.applicationNumber}`))
+      }
+    } else {
+      stepperRef.value?.buttonRefs[activeStepIndex.value]?.focus() // move focus to stepper on form validation errors
+    }
+  } catch (e) {
+    logFetchError(e, 'Error creating strata application')
+    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: handleStrataSubmit,
+          icon: 'i-mdi-chevron-right',
+          label: t('btn.submitAndPay'),
+          trailing: true
+        }
+      ]
+    })
+  }
+}
 
 // TODO: musing - should we move this into the stepper component and add button items to the 'Step' object
 watch(activeStepIndex, (val) => {
@@ -78,8 +157,7 @@ watch(activeStepIndex, (val) => {
   }
   const isLastStep = val === steps.value.length - 1
   buttons.push({
-    // TODO: make submission function
-    action: isLastStep ? () => console.info('TODO') : () => stepperRef.value?.setNextStep(),
+    action: isLastStep ? handleStrataSubmit : () => stepperRef.value?.setNextStep(),
     icon: 'i-mdi-chevron-right',
     label: isLastStep ? t('btn.submitAndPay') : t(`strr.step.description.${val + 1}`),
     trailing: true
@@ -110,6 +188,7 @@ setBreadcrumbs([
   <div class="space-y-8 py-8 sm:py-10">
     <ConnectTypographyH1 :text="t('strr.title.application')" class="my-5" />
     <ConnectStepper
+      ref="stepperRef"
       :key="0"
       v-model:steps="steps"
       v-model:active-step-index="activeStepIndex"
@@ -117,23 +196,20 @@ setBreadcrumbs([
       :stepper-label="$t('strr.step.stepperLabel')"
     />
     <div v-if="activeStepIndex === 0" key="contact-information">
-      <!-- TODO: replace with strata version -->
-      <!-- <FormPlatformBusinessDetails :is-complete="activeStep.complete" /> -->
+      <FormContactInfo :is-complete="activeStep.complete" />
     </div>
     <div v-if="activeStepIndex === 1" key="business-details">
-      <FormContactInfo :is-complete="activeStep.complete" />
+      <FormBusinessDetails :is-complete="activeStep.complete" />
     </div>
-    <div v-if="activeStepIndex === 2" key="platform-information">
-      <!-- TODO: replace with strata version -->
-      <!-- <FormPlatformDetails :is-complete="activeStep.complete" /> -->
+    <div v-if="activeStepIndex === 2" key="strata-information">
+      <FormStrataDetails :is-complete="activeStep.complete" />
     </div>
     <div v-if="activeStepIndex === 3" key="review-confirm">
-      <!-- TODO: replace with strata version -->
-      <!-- <FormPlatformReviewConfirm
+      <FormReviewConfirm
         ref="reviewFormRef"
         :is-complete="activeStep.complete"
         @edit="stepperRef?.setActiveStep"
-      /> -->
+      />
     </div>
   </div>
 </template>
diff --git a/strr-strata-web/app/stores/strataApplication.ts b/strr-strata-web/app/stores/strataApplication.ts
index 301aa1b7..f748bb61 100644
--- a/strr-strata-web/app/stores/strataApplication.ts
+++ b/strr-strata-web/app/stores/strataApplication.ts
@@ -1,9 +1,8 @@
 import { z } from 'zod'
-import type { MultiFormValidationResult, StrataApplicationPayload } from '#imports'
+import type { MultiFormValidationResult, StrataApplicationPayload, StrataApplicationResp } from '#imports'
 import { formatBusinessDetails, formatStrataDetails } from '~/utils/strata-formating'
 
 export const useStrrStrataApplicationStore = defineStore('strr/strataApplication', () => {
-  // TODO: WIP - updating for strata
   const { t } = useI18n()
   const { postApplication } = useStrrApi()
   const contactStore = useStrrContactStore()
@@ -11,12 +10,12 @@ export const useStrrStrataApplicationStore = defineStore('strr/strataApplication
   const detailsStore = useStrrStrataDetailsStore()
 
   // TODO: update confirmation stuff for strata
-  const platformConfirmation = reactive({
+  const confirmation = reactive({
     confirmInfoAccuracy: false,
     confirmDelistAndCancelBookings: false
   })
 
-  const getConfirmationSchema = () => z.object({
+  const confirmationSchema = z.object({
     confirmInfoAccuracy: z.boolean().refine(val => val === true, {
       message: t('validation.confirm')
     }),
@@ -27,7 +26,7 @@ export const useStrrStrataApplicationStore = defineStore('strr/strataApplication
 
   const validateStrataConfirmation = (returnBool = false): MultiFormValidationResult | boolean => {
     const result = validateSchemaAgainstState(
-      getConfirmationSchema(), platformConfirmation, 'platform-confirmation-form'
+      confirmationSchema, confirmation, 'strata-confirmation-form'
     )
 
     if (returnBool) {
@@ -63,17 +62,18 @@ export const useStrrStrataApplicationStore = defineStore('strr/strataApplication
     return applicationBody
   }
 
-  const submitPlatformApplication = async () => {
+  const submitStrataApplication = async () => {
     const body = createApplicationBody()
 
     console.info('submitting application: ', body)
 
-    return await postApplication<StrataApplicationPayload>(body)
+    return await postApplication<StrataApplicationPayload, StrataApplicationResp>(body)
   }
 
   return {
-    platformConfirmation,
-    submitPlatformApplication,
+    confirmation,
+    confirmationSchema,
+    submitStrataApplication,
     validateStrataConfirmation
   }
 })
diff --git a/strr-strata-web/app/stores/strataDetails.ts b/strr-strata-web/app/stores/strataDetails.ts
index eca8f75f..22a27852 100644
--- a/strr-strata-web/app/stores/strataDetails.ts
+++ b/strr-strata-web/app/stores/strataDetails.ts
@@ -2,42 +2,61 @@ import { z } from 'zod'
 import type { StrataDetails } from '~/interfaces/strata-details'
 
 export const useStrrStrataDetailsStore = defineStore('strr/strataDetails', () => {
-  const {
-    addNewEmptyBrand: baseAddNewEmptyBrand,
-    getBrandSchema: getStrataBrandSchema,
-    removeBrandAtIndex: baseRemoveBrandAtIndex
-  } = useStrrBaseBrand()
-
-  const getStrataDetailsSchema = () => z.object({
-    numberOfUnits: z.number(),
-    brands: z.array(getStrataBrandSchema())
+  const { t } = useI18n()
+  const { getBrandSchema: getStrataBrandSchema } = useStrrBaseBrand()
+
+  const strataDetailsSchema = z.object({
+    numberOfUnits: z.number({ required_error: t('validation.number') }),
+    brand: getStrataBrandSchema(),
+    buildings: z.array(getRequiredAddress(
+      t('validation.address.street'),
+      t('validation.address.city'),
+      t('validation.address.region'),
+      t('validation.address.postalCode'),
+      t('validation.address.country')
+    )),
+    location: getRequiredAddress(
+      t('validation.address.street'),
+      t('validation.address.city'),
+      t('validation.address.region'),
+      t('validation.address.postalCode'),
+      t('validation.address.country')
+    )
   })
 
   const strataDetails = ref<StrataDetails>({
-    brands: [{ name: '', website: '' }],
+    brand: { name: '', website: '' },
     buildings: [],
     location: {
-      country: '',
+      country: 'CA',
       street: '',
       streetAdditional: '',
       city: '',
-      region: '',
+      region: 'BC',
       postalCode: '',
       locationDescription: ''
     },
     numberOfUnits: undefined
   })
 
-  const addNewEmptyBrand = () => {
-    baseAddNewEmptyBrand(strataDetails)
+  const addNewEmptyBuilding = () => {
+    strataDetails.value.buildings.push({
+      country: 'CA',
+      street: '',
+      streetAdditional: '',
+      city: '',
+      region: 'BC',
+      postalCode: '',
+      locationDescription: ''
+    })
   }
 
-  const removeBrandAtIndex = (index: number) => {
-    baseRemoveBrandAtIndex(strataDetails, index)
+  const removeBuildingAtIndex = (index: number) => {
+    strataDetails.value.buildings.splice(index, 1)
   }
 
   const validateStrataDetails = (returnBool = false): MultiFormValidationResult | boolean => {
-    const result = validateSchemaAgainstState(getStrataDetailsSchema(), strataDetails.value, 'strata-details-form')
+    const result = validateSchemaAgainstState(strataDetailsSchema, strataDetails.value, 'strata-details-form')
 
     if (returnBool) {
       return result.success === true
@@ -49,9 +68,9 @@ export const useStrrStrataDetailsStore = defineStore('strr/strataDetails', () =>
   return {
     strataDetails,
     getStrataBrandSchema,
-    getStrataDetailsSchema,
-    addNewEmptyBrand,
-    removeBrandAtIndex,
+    strataDetailsSchema,
+    addNewEmptyBuilding,
+    removeBuildingAtIndex,
     validateStrataDetails
   }
 })
diff --git a/strr-strata-web/nuxt.config.ts b/strr-strata-web/nuxt.config.ts
index 89821045..a03b74af 100644
--- a/strr-strata-web/nuxt.config.ts
+++ b/strr-strata-web/nuxt.config.ts
@@ -39,6 +39,7 @@ export default defineNuxtConfig({
   },
 
   extends: [
+    // '../strr-base-web' // dev only
     ['github:bcgov/STRR/strr-base-web', { install: true }]
   ],
 
diff --git a/strr-strata-web/package.json b/strr-strata-web/package.json
index a8cf7cc2..5c6a6462 100644
--- a/strr-strata-web/package.json
+++ b/strr-strata-web/package.json
@@ -44,6 +44,7 @@
     "@daxiom/nuxt-core-layer-test": "^0.0.10",
     "@vuepic/vue-datepicker": "^9.0.3",
     "country-codes-list": "^1.6.11",
-    "nuxt": "^3.12.3"
+    "nuxt": "^3.12.3",
+    "vue-country-flag-next": "^2.3.2"
   }
 }
diff --git a/strr-strata-web/pnpm-lock.yaml b/strr-strata-web/pnpm-lock.yaml
index a06284d6..1ee8946d 100644
--- a/strr-strata-web/pnpm-lock.yaml
+++ b/strr-strata-web/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
   nuxt:
     specifier: ^3.12.3
     version: 3.12.3(@opentelemetry/api@1.9.0)(eslint@8.57.0)(rollup@4.18.0)(sass@1.77.6)(typescript@5.5.3)(vite@5.3.3)
+  vue-country-flag-next:
+    specifier: ^2.3.2
+    version: 2.3.2(vue@3.4.31)
 
 devDependencies:
   '@axe-core/playwright':
@@ -12161,6 +12164,15 @@ packages:
     resolution: {integrity: sha512-Jr5N8QVYEcbQuMN1LRgvg61758G8HTnzUlQsAFOxx6Y6X8kmhJ7C+jOvWsQruYxi3uHhhS6BghyRlyiwO99DBg==}
     dev: true
 
+  /vue-country-flag-next@2.3.2(vue@3.4.31):
+    resolution: {integrity: sha512-Lv12L1VTwlBgizpZ3xPEPO3zuIETaJmeSiPuLOWLLgu2EakwU/o72iKYiKcdZ6BXiSkfss+Ski5fDzjuxZ1DcA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.31(typescript@5.5.3)
+    dev: false
+
   /vue-demi@0.14.10(vue@3.4.31):
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}