From ced6cf4685a6bb300ee9d1f4baf4a1ebfeb72043 Mon Sep 17 00:00:00 2001
From: deetz99 <73151365+deetz99@users.noreply.github.com>
Date: Mon, 25 Nov 2024 10:41:20 -0800
Subject: [PATCH] Host/PM - UI: Principal Residence step draft (#332)

* initial principal residence step work

* list types

* remove set error

* doc upload checkpoint
---
 strr-base-web/app/utils/sleep.ts              |   8 +
 strr-base-web/tailwind.config.ts              |   4 +
 strr-host-pm-web/.eslintrc                    |   4 +-
 .../app/components/document/list/Item.vue     |  50 +++
 .../app/components/document/list/index.vue    |  11 +
 .../app/components/document/upload/Button.vue |  62 ++++
 .../app/components/document/upload/Select.vue |  63 ++++
 .../components/form/PrincipalResidence.vue    | 311 ++++++++++++++++++
 .../app/enums/document-upload-type.ts         |  15 +
 .../app/enums/pr-exemption-other-provider.ts  |   8 +
 .../app/enums/pr-exemption-reason.ts          |   6 +
 .../app/interfaces/ui-document.ts             |   8 +
 strr-host-pm-web/app/locales/en-CA.ts         |  51 +++
 strr-host-pm-web/app/pages/application.vue    |   4 +-
 strr-host-pm-web/app/stores/document.ts       | 163 +++++++++
 strr-host-pm-web/package.json                 |   1 +
 strr-host-pm-web/pnpm-lock.yaml               |   8 +
 17 files changed, 774 insertions(+), 3 deletions(-)
 create mode 100644 strr-base-web/app/utils/sleep.ts
 create mode 100644 strr-host-pm-web/app/components/document/list/Item.vue
 create mode 100644 strr-host-pm-web/app/components/document/list/index.vue
 create mode 100644 strr-host-pm-web/app/components/document/upload/Button.vue
 create mode 100644 strr-host-pm-web/app/components/document/upload/Select.vue
 create mode 100644 strr-host-pm-web/app/components/form/PrincipalResidence.vue
 create mode 100644 strr-host-pm-web/app/enums/document-upload-type.ts
 create mode 100644 strr-host-pm-web/app/enums/pr-exemption-other-provider.ts
 create mode 100644 strr-host-pm-web/app/enums/pr-exemption-reason.ts
 create mode 100644 strr-host-pm-web/app/interfaces/ui-document.ts
 create mode 100644 strr-host-pm-web/app/stores/document.ts

diff --git a/strr-base-web/app/utils/sleep.ts b/strr-base-web/app/utils/sleep.ts
new file mode 100644
index 000000000..fbed9cf25
--- /dev/null
+++ b/strr-base-web/app/utils/sleep.ts
@@ -0,0 +1,8 @@
+/**
+ * Pauses for a specified number of milliseconds.
+ * @param {number} [ms=3000] - The pause duration, in milliseconds. Default of 3000ms.
+ * @returns {Promise<void>} empty promise.
+ */
+export function sleep (ms: number = 3000): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
diff --git a/strr-base-web/tailwind.config.ts b/strr-base-web/tailwind.config.ts
index a8b4e0a67..87463ea24 100644
--- a/strr-base-web/tailwind.config.ts
+++ b/strr-base-web/tailwind.config.ts
@@ -4,6 +4,10 @@ module.exports = {
   presets: [require('@daxiom/nuxt-core-layer-test/tailwind.config')],
   theme: {
     extend: {
+      listStyleType: {
+        alpha: 'lower-alpha',
+        upperAlpha: 'upper-alpha'
+      },
       maxWidth: {
         bcGovInput: '600px'
       },
diff --git a/strr-host-pm-web/.eslintrc b/strr-host-pm-web/.eslintrc
index 141577c5d..10b62c919 100644
--- a/strr-host-pm-web/.eslintrc
+++ b/strr-host-pm-web/.eslintrc
@@ -23,7 +23,9 @@
         "app-inner-container",
         "connect-date-picker",
         "connect-date-picker__err",
-        "prose-bcGov"
+        "prose-bcGov",
+        "list-alpha",
+        "list-upperAlpha"
       ]
     }],
     "no-use-before-define": "off"
diff --git a/strr-host-pm-web/app/components/document/list/Item.vue b/strr-host-pm-web/app/components/document/list/Item.vue
new file mode 100644
index 000000000..a3b8ef875
--- /dev/null
+++ b/strr-host-pm-web/app/components/document/list/Item.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+defineProps<{
+  documents: UiDocument[]
+}>()
+
+defineEmits<{
+  remove: [UiDocument]
+}>()
+</script>
+<template>
+  <li
+    v-for="doc in documents"
+    :key="doc.id"
+    class="flex flex-col gap-1"
+  >
+    <div
+      class="flex items-center justify-between rounded bg-gray-100 p-3"
+      :class="{
+        'opacity-90': doc.loading
+      }"
+    >
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon
+            :name="doc.loading
+              ? 'i-heroicons-arrow-path-20-solid'
+              : 'i-mdi-check-circle'
+            "
+            class="size-6"
+            :class="{
+              'animate-spin': doc.loading,
+              'text-green-500': !doc.loading
+            }"
+          />
+          <div class="flex flex-col">
+            <span class="text-sm">{{ $t(`form.pr.docType.${doc.type}`) }}</span>
+            <span>{{ doc.name }}</span>
+          </div>
+        </div>
+      </div>
+      <UButton
+        :label="'Remove'"
+        variant="link"
+        trailing-icon="i-mdi-close"
+        :disabled="doc.loading"
+        @click="$emit('remove', doc)"
+      />
+    </div>
+  </li>
+</template>
diff --git a/strr-host-pm-web/app/components/document/list/index.vue b/strr-host-pm-web/app/components/document/list/index.vue
new file mode 100644
index 000000000..b5e88bbf3
--- /dev/null
+++ b/strr-host-pm-web/app/components/document/list/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const docStore = useDocumentStore()
+</script>
+<template>
+  <ul class="flex flex-col gap-1">
+    <DocumentListItem
+      :documents="docStore.storedDocuments"
+      @remove="docStore.removeStoredDocument"
+    />
+  </ul>
+</template>
diff --git a/strr-host-pm-web/app/components/document/upload/Button.vue b/strr-host-pm-web/app/components/document/upload/Button.vue
new file mode 100644
index 000000000..34bca39be
--- /dev/null
+++ b/strr-host-pm-web/app/components/document/upload/Button.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const props = defineProps({
+  id: { type: String, required: true },
+  isDisabled: { type: Boolean, default: false },
+  isRequired: { type: Boolean, default: false },
+  isInvalid: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  size: { type: String, default: 'lg' },
+  helpId: { type: String, default: undefined },
+  ariaLabel: { type: String, default: undefined },
+  accept: { type: String, default: undefined },
+  multiple: { type: Boolean, default: true }
+})
+
+const emit = defineEmits<{
+  change: [any]
+}>()
+
+const { open, onChange } = useFileDialog({
+  accept: props.accept,
+  multiple: props.multiple,
+  directory: false
+})
+
+onChange((files) => {
+  const file = files?.[0]
+  if (file) {
+    emit('change', file)
+  }
+})
+</script>
+<template>
+  <div
+    :id
+    class="flex w-full items-center gap-2"
+  >
+    <UIcon
+      name="i-mdi-paperclip"
+      class="size-6 text-blue-500"
+    />
+    <button
+      class="h-[56px] w-full rounded-t border-b border-gray-500 bg-gray-100 px-4 text-left ring-0
+       hover:border-gray-600 hover:bg-gray-200 focus:border-b-2 focus:border-blue-500 focus:outline-none focus:ring-0"
+      :aria-required="isRequired"
+      :aria-invalid="isInvalid"
+      :aria-label="ariaLabel"
+      :disabled="isDisabled"
+      @click="open()"
+    >
+      {{ label }}
+    </button>
+  </div>
+</template>
+<style>
+::-webkit-file-upload-button {
+   display: none;
+}
+
+::file-selector-button {
+  display: none;
+}
+</style>
diff --git a/strr-host-pm-web/app/components/document/upload/Select.vue b/strr-host-pm-web/app/components/document/upload/Select.vue
new file mode 100644
index 000000000..b9a594291
--- /dev/null
+++ b/strr-host-pm-web/app/components/document/upload/Select.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const props = defineProps({
+  id: { type: String, required: true },
+  isDisabled: { type: Boolean, default: false },
+  isRequired: { type: Boolean, default: false },
+  isInvalid: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  size: { type: String, default: 'lg' },
+  helpId: { type: String, default: undefined },
+  ariaLabel: { type: String, default: undefined },
+  accept: { type: String, default: undefined },
+  error: { type: Boolean, default: false }
+})
+
+const docStore = useDocumentStore()
+
+const emit = defineEmits<{
+  change: [any]
+}>()
+
+const { open, onChange } = useFileDialog({
+  accept: props.accept,
+  multiple: false,
+  directory: false
+})
+
+onChange((files) => {
+  const file = files?.[0]
+  if (file) {
+    emit('change', file)
+  }
+})
+</script>
+<template>
+  <div
+    :id
+    class="flex w-full items-center gap-2"
+  >
+    <UIcon
+      name="i-mdi-paperclip"
+      class="size-6 text-blue-500"
+    />
+    <USelectMenu
+      v-model="docStore.selectedDocType"
+      size="lg"
+      :color="'gray'"
+      :options="docStore.docTypeOptions"
+      :aria-label="'Choose Supporting Documents'"
+      :aria-required="isRequired"
+      :aria-invalid="isInvalid"
+      value-attribute="value"
+      :ui-menu="{
+        label: true ? 'text-gray-900' : !!error? 'text-red-600': 'text-gray-700'
+      }"
+      class="w-full cursor-pointer"
+      @change="open()"
+    >
+      <template #label>
+        <span>{{ label }}</span>
+      </template>
+    </USelectMenu>
+  </div>
+</template>
diff --git a/strr-host-pm-web/app/components/form/PrincipalResidence.vue b/strr-host-pm-web/app/components/form/PrincipalResidence.vue
new file mode 100644
index 000000000..9a3df5509
--- /dev/null
+++ b/strr-host-pm-web/app/components/form/PrincipalResidence.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import type { Form } from '#ui/types'
+import { z } from 'zod'
+import { useDocumentStore } from '~/stores/document'
+
+const props = defineProps<{ isComplete: boolean }>()
+
+const { t } = useI18n()
+const { propertySchema, addNewEmptyListing, removeListingAtIndex } = useHostPropertyStore()
+const { property } = storeToRefs(useHostPropertyStore())
+const docStore = useDocumentStore()
+
+const prFormRef = ref<Form<z.output<typeof propertySchema>>>()
+
+const strataRefCode = ref<string>('')
+const agreeToDeclaration = ref<boolean>(false)
+
+const primaryResidenceOption = ref()
+const primaryResidenceRadioOptions = [
+  {
+    value: true,
+    label: 'Yes, the property has a principal residence requirement'
+  },
+  {
+    value: false,
+    label: 'No, principal residence does not apply or the property is exempt'
+  }
+]
+
+const exemptionReason = ref<PrExemptionReason | undefined>(undefined)
+const exemptionReasons = [
+  {
+    label: t(`form.pr.exemptReason.${PrExemptionReason.EXEMPT_COMMUNITY}`), value: PrExemptionReason.EXEMPT_COMMUNITY
+  },
+  { label: t(`form.pr.exemptReason.${PrExemptionReason.STRATA_HOTEL}`), value: PrExemptionReason.STRATA_HOTEL },
+  { label: t(`form.pr.exemptReason.${PrExemptionReason.FARM_LAND}`), value: PrExemptionReason.FARM_LAND },
+  { label: t(`form.pr.exemptReason.${PrExemptionReason.OTHER}`), value: PrExemptionReason.OTHER }
+]
+
+const otherOptionProvider = ref<PrExemptionOtherProvider | undefined>(undefined)
+const otherOptionProviders = [
+  {
+    label: t(`form.pr.exemptOtherProvider.${PrExemptionOtherProvider.TIMESHARE}`),
+    value: PrExemptionOtherProvider.TIMESHARE
+  },
+  {
+    label: t(`form.pr.exemptOtherProvider.${PrExemptionOtherProvider.FRACTIONAL_OWNERSHIP}`),
+    value: PrExemptionOtherProvider.FRACTIONAL_OWNERSHIP
+  },
+  {
+    label: t(`form.pr.exemptOtherProvider.${PrExemptionOtherProvider.HOME_EXCHANGE}`),
+    value: PrExemptionOtherProvider.HOME_EXCHANGE
+  },
+  {
+    label: t(`form.pr.exemptOtherProvider.${PrExemptionOtherProvider.LODGE_OPERATOR}`),
+    value: PrExemptionOtherProvider.LODGE_OPERATOR
+  },
+  {
+    label: t(`form.pr.exemptOtherProvider.${PrExemptionOtherProvider.EDUCATIONAL_INSTITUTION}`),
+    value: PrExemptionOtherProvider.EDUCATIONAL_INSTITUTION
+  },
+  {
+    label: t(`form.pr.exemptOtherProvider.${PrExemptionOtherProvider.STRATA_GUEST_SUITE}`),
+    value: PrExemptionOtherProvider.STRATA_GUEST_SUITE
+  }
+]
+
+onMounted(async () => {
+  // validate form if step marked as complete
+  if (props.isComplete) {
+    await validateForm(prFormRef.value, props.isComplete)
+  }
+})
+
+</script>
+
+<template>
+  <div data-testid="property-details">
+    <UForm
+      ref="propertyFormRef"
+      :schema="propertySchema"
+      :state="property"
+      class="space-y-10"
+    >
+      <!-- principal residence requirement section -->
+      <ConnectPageSection>
+        <div class="flex flex-col gap-4 p-10">
+          <p>Provincial rules limit the operation of short-term rentals in BC to a principal residence or a secondary suite on the same property.</p>
+
+          <!-- principal residence requirement -->
+          <UFormGroup name="primaryResidenceOption" :error="false">
+            <URadioGroup
+              id="primary-residence-radio"
+              v-model="primaryResidenceOption"
+              legend="The property is in a community where the principal residence applies"
+              :options="primaryResidenceRadioOptions"
+              :ui="{ legend: 'mb-3 text-default font-bold text-gray-700' }"
+              :ui-radio="{ inner: 'space-y-2' }"
+            />
+          </UFormGroup>
+
+          <!-- must add reason if not exempt -->
+          <UFormGroup
+            v-if="primaryResidenceOption === false"
+            id="pr-reason"
+            v-slot="{ error }"
+            name="prReason"
+          >
+            <USelectMenu
+              v-model="exemptionReason"
+              size="lg"
+              :color="exemptionReason ? 'primary' : 'gray'"
+              :placeholder="'Reason'"
+              :options="exemptionReasons"
+              value-attribute="value"
+              :aria-label="'Select Exemption Reason'"
+              :aria-required="true"
+              :aria-invalid="error !== undefined"
+              :ui-menu="{
+                label: exemptionReason ? 'text-gray-900' : !!error? 'text-red-600': 'text-gray-700'
+              }"
+            />
+          </UFormGroup>
+
+          <!-- must add provider if exemption reason is other -->
+          <UFormGroup
+            v-if="exemptionReason === PrExemptionReason.OTHER"
+            id="pr-reason"
+            v-slot="{ error }"
+            name="prReason"
+          >
+            <USelectMenu
+              v-model="otherOptionProvider"
+              size="lg"
+              :color="otherOptionProvider ? 'primary' : 'gray'"
+              :placeholder="'Reason'"
+              :options="otherOptionProviders"
+              value-attribute="value"
+              :aria-label="'Select Exemption Reason'"
+              :aria-required="true"
+              :aria-invalid="error !== undefined"
+              :ui-menu="{
+                label: otherOptionProvider ? 'text-gray-900' : !!error? 'text-red-600': 'text-gray-700'
+              }"
+            />
+          </UFormGroup>
+
+          <!-- must add reference code if exemption reason is strata-hotel -->
+          <ConnectFormFieldGroup
+            v-if="exemptionReason === PrExemptionReason.STRATA_HOTEL"
+            id="strata-hotel-reference-code"
+            v-model="strataRefCode"
+            aria-label="Strata Hotel Reference Code"
+            name="strataRefCode"
+            placeholder="Strata Hotel Reference Code"
+            :is-required="true"
+            help="This is a unique code for each registered strata hotel. Ask the strata hotel management for this code."
+            input-class="w-full"
+          />
+        </div>
+      </ConnectPageSection>
+
+      <!-- document upload section -->
+      <!-- documents required if exempt or not -->
+      <ConnectPageSection
+        v-if="primaryResidenceOption !== undefined"
+        class="bg-white"
+        :heading="{ label: 'Documentation Details', labelClass: 'font-bold md:ml-6' }"
+      >
+        <div class="space-y-10 py-10">
+          <ConnectFormSection
+            :title="'File Upload'"
+            :error="false"
+          >
+            <div class="space-y-5">
+              <span>Upload all required documentation to support your application. Learn More</span>
+              <UFormGroup
+                help="File must be a PDF. Maximum 10 MB."
+                name="documentUpload"
+                :ui="{ help: 'mt-2 ml-10' }"
+              >
+                <DocumentUploadSelect
+                  id="supporting-documents"
+                  label="Choose Supporting Documents"
+                  @change="docStore.addStoredDocument"
+                />
+              </UFormGroup>
+              <DocumentList />
+              <!-- <div class="flex flex-col gap-1">
+                <div
+                  v-for="doc in docStore.storedDocuments"
+                  :key="doc.id"
+                  class="mb-1 flex items-center justify-between rounded bg-gray-100 p-3"
+                  :class="{
+                    'opacity-90': doc.loading,
+                    'bg-red-100': doc.error
+                  }"
+                >
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <UIcon
+                        :name="doc.loading
+                          ? 'i-heroicons-arrow-path-20-solid'
+                          : doc.error
+                            ? 'i-mdi-alert'
+                            : 'i-mdi-paperclip'
+                        "
+                        class="size-5"
+                        :class="{
+                          'animate-spin': doc.loading,
+                          'text-red-500': doc.error
+                        }"
+                      />
+                      <span>{{ doc.name }}</span>
+                    </div>
+                  </div>
+                  <UButton
+                    :label="'Remove'"
+                    variant="link"
+                    trailing-icon="i-mdi-close"
+                    :disabled="doc.loading"
+                    @click="docStore.removeStoredDocument(doc)"
+                  />
+                </div>
+              </div> -->
+              <!-- stored docs: {{ docStore.storedDocuments }}
+              api docs: {{ docStore.apiDocuments }} -->
+              <!-- <span>Upload all required documentation to support your application. Learn More</span> -->
+              <!-- :error="hasFormErrors(propertyFormRef, [
+              'numberOfRoomsForRent', 'propertyType', 'ownershipType',
+              'parcelIdentifier', 'businessLicense', 'businessLicenseExpiryDate'])" -->
+              <!-- <div class="flex w-full items-center gap-2">
+                <UIcon
+                  name="i-mdi-paperclip"
+                  class="size-8 text-blue-500"
+                />
+                <ConnectFormFieldGroup
+                  id="supporting-documents"
+                  v-model="property.numberOfRoomsForRent"
+                  aria-label="Supporting document file upload"
+                  name="documentUpload"
+                  placeholder="Choose Supporting Documents"
+                  :is-required="true"
+                  help="File must be a PDF. Maximum 10 MB."
+                  type="file"
+                  accept=".pdf"
+                  input-class="w-full"
+                  class="w-full"
+                >
+                  <template #label>
+                    <span class="pt-0 font-normal">
+                      Upload all required documentation to support your application.
+                    </span>
+                  </template>
+
+                  <template #hint>
+                    <UButton
+                      label="Learn More"
+                      trailing-icon="i-mdi-open-in-new"
+                      target="_blank"
+                      :external="true"
+                      variant="link"
+                      to="https://www2.gov.bc.ca/gov/content/housing-tenancy/\
+                      short-term-rentals/principal-residence-requirement"
+                    />
+                  </template>
+                </ConnectFormFieldGroup>
+              </div> -->
+            </div>
+          </ConnectFormSection>
+          <div class="h-px w-full border-b border-gray-100" />
+        </div>
+      </ConnectPageSection>
+
+      <!-- declaration section -->
+      <!-- must agree to declaration if the property has pr requirement -->
+      <ConnectPageSection
+        v-if="primaryResidenceOption"
+        class="bg-white"
+        :heading="{ label: 'Declaration', labelClass: 'font-bold md:ml-6' }"
+      >
+        <div class="p-6">
+          <UFormGroup name="declaration">
+            <UCheckbox
+              v-model="agreeToDeclaration"
+              class="rounded bg-white p-4"
+              aria-required="true"
+            >
+              <template #label>
+                <div class="flex cursor-pointer flex-col gap-3">
+                  <ConnectI18nBold translation-path="form.pr.declaration.intro" />
+                  <ol class="list-alpha list-outside pl-10 marker:pr-10">
+                    <li>{{ $t('form.pr.declaration.list.a') }}</li>
+                    <li>{{ $t('form.pr.declaration.list.b') }}</li>
+                  </ol>
+                  <p>{{ $t('form.pr.declaration.agreement') }}</p>
+                </div>
+              </template>
+            </UCheckbox>
+          <!-- v-model="applicationStore.confirmation.confirmInfoAccuracy"
+          :aria-invalid="hasFormErrors(strataConfirmationFormRef, ['confirmInfoAccuracy'])"
+          :class="hasFormErrors(strataConfirmationFormRef, ['confirmInfoAccuracy'])
+              ? 'outline outline-red-600'
+              : ''
+            " -->
+          </UFormGroup>
+        </div>
+      </ConnectPageSection>
+    </UForm>
+  </div>
+</template>
diff --git a/strr-host-pm-web/app/enums/document-upload-type.ts b/strr-host-pm-web/app/enums/document-upload-type.ts
new file mode 100644
index 000000000..0ffd6d04a
--- /dev/null
+++ b/strr-host-pm-web/app/enums/document-upload-type.ts
@@ -0,0 +1,15 @@
+export enum DocumentUploadType {
+  BC_DRIVERS_LICENSE = 'BC_DRIVERS_LICENSE',
+  PROPERTY_ASSESSMENT_NOTICE = 'PROPERTY_ASSESSMENT_NOTICE',
+  SPEC_TAX_CONFIRMATION = 'SPEC_TAX_CONFIRMATION',
+  HOG_DECLARATION = 'HOG_DECLARATION',
+  ICBC_CERTIFICATE_OF_INSURANCE = 'ICBC_CERTIFICATE_OF_INSURANCE',
+  HOME_INSURANCE_SUMMARY = 'HOME_INSURANCE_SUMMARY',
+  PROPERTY_TAX_NOTICE = 'PROPERTY_TAX_NOTICE',
+  UTILITY_BILL = 'UTILITY_BILL',
+  GOVT_OR_CROWN_CORP_OFFICIAL_NOTICE = 'GOVT_OR_CROWN_CORP_OFFICIAL_NOTICE',
+  TENANCY_AGREEMENT = 'TENANCY_AGREEMENT',
+  RENT_RECEIPT_OR_BANK_STATEMENT = 'RENT_RECEIPT_OR_BANK_STATEMENT',
+  LOCAL_GOVT_BUSINESS_LICENSE = 'LOCAL_GOVT_BUSINESS_LICENSE',
+  OTHERS = 'OTHERS'
+}
diff --git a/strr-host-pm-web/app/enums/pr-exemption-other-provider.ts b/strr-host-pm-web/app/enums/pr-exemption-other-provider.ts
new file mode 100644
index 000000000..065aed534
--- /dev/null
+++ b/strr-host-pm-web/app/enums/pr-exemption-other-provider.ts
@@ -0,0 +1,8 @@
+export enum PrExemptionOtherProvider {
+  TIMESHARE = 'TIMESHARE',
+  FRACTIONAL_OWNERSHIP = 'FRACTIONAL_OWNERSHIP',
+  HOME_EXCHANGE = 'HOME_EXCHANGE',
+  LODGE_OPERATOR = 'LODGE_OPERATOR',
+  EDUCATIONAL_INSTITUTION = 'EDUCATIONAL_INSTITUTION',
+  STRATA_GUEST_SUITE = 'STRATA_GUEST_SUITE'
+}
diff --git a/strr-host-pm-web/app/enums/pr-exemption-reason.ts b/strr-host-pm-web/app/enums/pr-exemption-reason.ts
new file mode 100644
index 000000000..e801800ff
--- /dev/null
+++ b/strr-host-pm-web/app/enums/pr-exemption-reason.ts
@@ -0,0 +1,6 @@
+export enum PrExemptionReason {
+  EXEMPT_COMMUNITY = 'EXEMPT_COMMUNITY',
+  STRATA_HOTEL = 'STRATA_HOTEL',
+  FARM_LAND = 'FARM_LAND',
+  OTHER = 'OTHER'
+}
diff --git a/strr-host-pm-web/app/interfaces/ui-document.ts b/strr-host-pm-web/app/interfaces/ui-document.ts
new file mode 100644
index 000000000..b0bf51e83
--- /dev/null
+++ b/strr-host-pm-web/app/interfaces/ui-document.ts
@@ -0,0 +1,8 @@
+export interface UiDocument {
+  file: File
+  apiDoc: ApiDocument
+  name: string
+  id: string
+  loading: boolean
+  type: DocumentUploadType
+}
diff --git a/strr-host-pm-web/app/locales/en-CA.ts b/strr-host-pm-web/app/locales/en-CA.ts
index 1776fe8ba..23af6fa2c 100644
--- a/strr-host-pm-web/app/locales/en-CA.ts
+++ b/strr-host-pm-web/app/locales/en-CA.ts
@@ -6,6 +6,47 @@ export default {
       HOSTREG_2: 'STR Application Fee'
     }
   },
+  form: {
+    pr: {
+      declaration: {
+        intro: 'As required by section 14 (2) of the {italicStart}Short-Term Accommodations Rental Act{italicEnd} (the Act), I declare the property host will comply with the principal residence restriction in the Act and provide the short-term rental accommodation services described in this registration in one or both of:',
+        list: {
+          a: 'the property host’s principal residence,',
+          b: "not more than one secondary suite or other accessory dwelling unit that is on the land parcel associated with the property host's principal residence."
+        },
+        agreement: 'I understand that if the property host does not comply with the requirement to provide the short-term rental accommodation services in the principal residence, the property host may be subject to enforcement action under Part 4 of the Act, including being ordered to pay an administrative penalty.'
+      },
+      exemptReason: {
+        EXEMPT_COMMUNITY: 'Located in exempt community',
+        STRATA_HOTEL: 'Eligible strata hotel or motel',
+        FARM_LAND: 'Farm land (BC Assessment Farm Class 9)',
+        OTHER: 'Other exempted accommodation service provider'
+      },
+      exemptOtherProvider: {
+        TIMESHARE: 'Timeshare',
+        FRACTIONAL_OWNERSHIP: 'Fractional Ownership',
+        HOME_EXCHANGE: 'Home Exchange',
+        LODGE_OPERATOR: 'Lodge (operator of outdoor recreational activity)',
+        EDUCATIONAL_INSTITUTION: 'Educational institution accommodation (Student or Employee) (off campus)',
+        STRATA_GUEST_SUITE: 'Strata corporation guest suite'
+      },
+      docType: {
+        BC_DRIVERS_LICENSE: "BC Driver's License",
+        PROPERTY_ASSESSMENT_NOTICE: 'Property Assessment Notice',
+        SPEC_TAX_CONFIRMATION: 'Speculation and Vacancy Tax Confirmation',
+        HOG_DECLARATION: 'Home Owner Grant declaration',
+        ICBC_CERTIFICATE_OF_INSURANCE: 'ICBC Certificate of Insurance',
+        HOME_INSURANCE_SUMMARY: 'Home Insurance Summary',
+        PROPERTY_TAX_NOTICE: 'Property Tax Notice',
+        UTILITY_BILL: 'Utility Bill',
+        GOVT_OR_CROWN_CORP_OFFICIAL_NOTICE: 'Government or Crown Corporation Official Notice',
+        TENANCY_AGREEMENT: 'Tenancy Agreement',
+        RENT_RECEIPT_OR_BANK_STATEMENT: 'Rent Receipt or Bank Statement',
+        LOCAL_GOVT_BUSINESS_LICENSE: 'Local Government Business License',
+        OTHERS: 'Other Proof Document (subject to review by registry staff)'
+      }
+    }
+  },
   strr: {
     step: {
       stepperLabel: 'Short-Term Rental Application Step Navigation',
@@ -114,6 +155,16 @@ export default {
     createAccount: {
       title: 'Error creating account',
       description: 'We could not create your account at this time. Please try again or if this issue persists, please contact us.'
+    },
+    docUpload: {
+      fileSize: {
+        title: 'Error Uploading Document',
+        description: 'File size too large. Please only upload files less than 10mb.'
+      },
+      generic: {
+        title: 'Error Uploading Document',
+        description: 'Something went wrong when uploading the file, only pdfs and files less than 10mb are accepted.'
+      }
     }
   },
   label: {
diff --git a/strr-host-pm-web/app/pages/application.vue b/strr-host-pm-web/app/pages/application.vue
index 9a72cc4bf..3573a444c 100644
--- a/strr-host-pm-web/app/pages/application.vue
+++ b/strr-host-pm-web/app/pages/application.vue
@@ -283,8 +283,8 @@ setBreadcrumbs([
     <div v-if="activeStepIndex === 1" key="business-details">
       <!-- <FormBusinessDetails :is-complete="activeStep.complete" /> -->
     </div>
-    <div v-if="activeStepIndex === 2" key="strata-information">
-      <!-- <FormStrataDetails :is-complete="activeStep.complete" /> -->
+    <div v-if="activeStepIndex === 2" key="principal-residence">
+      <FormPrincipalResidence :is-complete="activeStep.complete" />
     </div>
     <div v-if="activeStepIndex === 3" key="review-confirm">
       <FormReviewConfirm
diff --git a/strr-host-pm-web/app/stores/document.ts b/strr-host-pm-web/app/stores/document.ts
new file mode 100644
index 000000000..c12438b74
--- /dev/null
+++ b/strr-host-pm-web/app/stores/document.ts
@@ -0,0 +1,163 @@
+// import { z } from 'zod'
+import { v4 as uuidv4 } from 'uuid'
+import type { ApiDocument } from '~/interfaces/host-api'
+import type { UiDocument } from '~/interfaces/ui-document'
+
+export const useDocumentStore = defineStore('host/application', () => {
+  const { t } = useI18n()
+  const { $strrApi } = useNuxtApp()
+  const strrModal = useStrrModals()
+
+  const storedDocuments = ref<UiDocument[]>([])
+  const apiDocuments = computed<ApiDocument[]>(() => storedDocuments.value.map(item => item.apiDoc))
+  const selectedDocType = ref<DocumentUploadType | undefined>(undefined)
+
+  const docTypeOptions = [
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.BC_DRIVERS_LICENSE}`),
+      value: DocumentUploadType.BC_DRIVERS_LICENSE
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.PROPERTY_ASSESSMENT_NOTICE}`),
+      value: DocumentUploadType.PROPERTY_ASSESSMENT_NOTICE
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.SPEC_TAX_CONFIRMATION}`),
+      value: DocumentUploadType.SPEC_TAX_CONFIRMATION
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.HOG_DECLARATION}`),
+      value: DocumentUploadType.HOG_DECLARATION
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.ICBC_CERTIFICATE_OF_INSURANCE}`),
+      value: DocumentUploadType.ICBC_CERTIFICATE_OF_INSURANCE
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.HOME_INSURANCE_SUMMARY}`),
+      value: DocumentUploadType.HOME_INSURANCE_SUMMARY
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.PROPERTY_TAX_NOTICE}`),
+      value: DocumentUploadType.PROPERTY_TAX_NOTICE
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.UTILITY_BILL}`),
+      value: DocumentUploadType.UTILITY_BILL
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.GOVT_OR_CROWN_CORP_OFFICIAL_NOTICE}`),
+      value: DocumentUploadType.GOVT_OR_CROWN_CORP_OFFICIAL_NOTICE
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.TENANCY_AGREEMENT}`),
+      value: DocumentUploadType.TENANCY_AGREEMENT
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.RENT_RECEIPT_OR_BANK_STATEMENT}`),
+      value: DocumentUploadType.RENT_RECEIPT_OR_BANK_STATEMENT
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.LOCAL_GOVT_BUSINESS_LICENSE}`),
+      value: DocumentUploadType.LOCAL_GOVT_BUSINESS_LICENSE
+    },
+    {
+      label: t(`form.pr.docType.${DocumentUploadType.OTHERS}`),
+      value: DocumentUploadType.OTHERS
+    }
+  ]
+
+  async function addStoredDocument (doc: File): Promise<void> {
+    const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10mb
+    if (doc.size > MAX_FILE_SIZE) {
+      strrModal.openErrorModal(t('error.docUpload.fileSize.title'), t('error.docUpload.fileSize.description'), false)
+      return
+    }
+
+    const uiDoc: UiDocument = {
+      file: doc,
+      apiDoc: {} as ApiDocument,
+      name: doc.name,
+      type: selectedDocType.value!,
+      id: uuidv4(),
+      loading: true
+    }
+
+    storedDocuments.value.push(uiDoc)
+
+    selectedDocType.value = undefined
+
+    await sleep(3000) // dev only
+    await postDocument(uiDoc)
+  }
+
+  function updateStoredDocument<K extends keyof UiDocument> (
+    id: string,
+    key: K,
+    value: UiDocument[K]
+  ) {
+    const docToUpdate = storedDocuments.value.find(doc => doc.id === id)
+    if (docToUpdate) {
+      docToUpdate[key] = value
+    }
+  }
+
+  async function removeStoredDocument (uiDoc: UiDocument) {
+    const index = storedDocuments.value.findIndex(item => uiDoc.id === item.id)
+    storedDocuments.value.splice(index, 1)
+    if (uiDoc.apiDoc.fileKey) {
+      await deleteDocument(uiDoc.apiDoc.fileKey)
+    }
+  }
+
+  async function postDocument (uiDoc: UiDocument): Promise<void> {
+    try {
+      // create payload
+      const formData = new FormData()
+      formData.append('file', uiDoc.file)
+      formData.append('documentType', uiDoc.type)
+
+      // submit file
+      const res = await $strrApi<ApiDocument>('/documents', {
+        method: 'POST',
+        body: formData
+      })
+
+      // update ui object with backend response
+      updateStoredDocument(uiDoc.id, 'apiDoc', res)
+    } catch (e) {
+      logFetchError(e, 'Error uploading document')
+      strrModal.openErrorModal(t('error.docUpload.generic.title'), t('error.docUpload.generic.description'), false)
+      await removeStoredDocument(uiDoc)
+    } finally {
+      // cleanup loading on ui object
+      updateStoredDocument(uiDoc.id, 'loading', false)
+    }
+  }
+
+  async function deleteDocument (fileKey: string) {
+    try {
+      await $strrApi(`/documents/${fileKey}`, {
+        method: 'DELETE'
+      })
+    } catch (e) {
+      logFetchError(e, `Error deleting document: ${fileKey}`)
+    }
+  }
+
+  const $reset = () => {
+    storedDocuments.value = []
+  }
+
+  return {
+    apiDocuments,
+    storedDocuments,
+    selectedDocType,
+    docTypeOptions,
+    postDocument,
+    deleteDocument,
+    addStoredDocument,
+    removeStoredDocument,
+    $reset
+  }
+})
diff --git a/strr-host-pm-web/package.json b/strr-host-pm-web/package.json
index e45dcb6f7..a1ee18e00 100644
--- a/strr-host-pm-web/package.json
+++ b/strr-host-pm-web/package.json
@@ -45,6 +45,7 @@
     "@vuepic/vue-datepicker": "^9.0.3",
     "country-codes-list": "^1.6.11",
     "nuxt": "^3.12.3",
+    "uuid": "^11.0.3",
     "vue-country-flag-next": "^2.3.2"
   }
 }
diff --git a/strr-host-pm-web/pnpm-lock.yaml b/strr-host-pm-web/pnpm-lock.yaml
index 1ee8946db..dc79d9c64 100644
--- a/strr-host-pm-web/pnpm-lock.yaml
+++ b/strr-host-pm-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)
+  uuid:
+    specifier: ^11.0.3
+    version: 11.0.3
   vue-country-flag-next:
     specifier: ^2.3.2
     version: 2.3.2(vue@3.4.31)
@@ -11825,6 +11828,11 @@ packages:
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  /uuid@11.0.3:
+    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+    hasBin: true
+    dev: false
+
   /uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true