From 91231f7e4c5d3f17393d2fb6da5356c516b80aba Mon Sep 17 00:00:00 2001
From: deetz99 <73151365+deetz99@users.noreply.github.com>
Date: Tue, 24 Dec 2024 12:43:42 -0800
Subject: [PATCH] Strata - UI: Strata doc upload (#419)

* update button style file upload
* add validation function to document store and stepper
* add documents to payload and update types
* add documents to review step
* add docs to details view
* reset docs on application start
* bump version
---
 .../app/components/form/ContactInfo.vue       |   4 +-
 strr-base-web/app/locales/en-CA.ts            |  10 ++
 strr-host-pm-web/app/locales/en-CA.ts         |  10 --
 strr-host-pm-web/app/stores/document.ts       |  12 +-
 strr-host-pm-web/package.json                 |   2 +-
 .../app/components/document/list/Item.vue     |  49 +++++++
 .../app/components/document/list/index.vue    |  11 ++
 .../app/components/document/upload/Button.vue |  62 ++++++++
 .../app/components/document/upload/Select.vue |  70 +++++++++
 .../app/components/form/BusinessDetails.vue   |   7 +-
 .../app/components/form/ReviewConfirm.vue     |  28 +++-
 .../app/components/form/StrataDetails.vue     |  85 ++++++++++-
 .../app/enums/document-upload-type.ts         |   3 +
 strr-strata-web/app/interfaces/strata-api.ts  |   9 ++
 strr-strata-web/app/interfaces/ui-document.ts |   8 +
 strr-strata-web/app/locales/en-CA.ts          |  20 ++-
 strr-strata-web/app/pages/application.vue     |   9 +-
 .../dashboard/[applicationId].vue             |  19 +++
 strr-strata-web/app/stores/document.ts        | 137 ++++++++++++++++++
 strr-strata-web/app/stores/strata.ts          |  12 ++
 .../app/stores/strataApplication.ts           |   5 +-
 strr-strata-web/package.json                  |   2 +-
 22 files changed, 546 insertions(+), 28 deletions(-)
 create mode 100644 strr-strata-web/app/components/document/list/Item.vue
 create mode 100644 strr-strata-web/app/components/document/list/index.vue
 create mode 100644 strr-strata-web/app/components/document/upload/Button.vue
 create mode 100644 strr-strata-web/app/components/document/upload/Select.vue
 create mode 100644 strr-strata-web/app/enums/document-upload-type.ts
 create mode 100644 strr-strata-web/app/interfaces/ui-document.ts
 create mode 100644 strr-strata-web/app/stores/document.ts

diff --git a/strr-base-web/app/components/form/ContactInfo.vue b/strr-base-web/app/components/form/ContactInfo.vue
index b029abfe..946d1eed 100644
--- a/strr-base-web/app/components/form/ContactInfo.vue
+++ b/strr-base-web/app/components/form/ContactInfo.vue
@@ -69,9 +69,9 @@ onMounted(async () => {
       id="completing-party-radio-group"
       v-model="isCompletingPartyRep"
       data-testid="completing-party-radio-group"
-      :class="isComplete && isCompletingPartyRep === undefined ? 'border-red-600 border-2 p-2' : 'p-2'"
+      :class="isComplete && isCompletingPartyRep === undefined ? 'border-red-600 border-2 p-2 pt-3' : 'p-2 pt-3'"
       :options="radioOptions"
-      :ui="{ legend: 'mb-3 text-default font-bold text-gray-700' }"
+      :ui="{ legend: 'text-default font-bold text-gray-700' }"
       :ui-radio="{ inner: 'space-y-2' }"
     >
       <template #legend>
diff --git a/strr-base-web/app/locales/en-CA.ts b/strr-base-web/app/locales/en-CA.ts
index 68ff972f..c59b5c98 100644
--- a/strr-base-web/app/locales/en-CA.ts
+++ b/strr-base-web/app/locales/en-CA.ts
@@ -114,6 +114,16 @@ export default {
     },
     tos: {
       load: 'Unable to load terms of use, please try again later.'
+    },
+    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.'
+      }
     }
   },
   imageAlt: {
diff --git a/strr-host-pm-web/app/locales/en-CA.ts b/strr-host-pm-web/app/locales/en-CA.ts
index fd51d800..96cc7a1e 100644
--- a/strr-host-pm-web/app/locales/en-CA.ts
+++ b/strr-host-pm-web/app/locales/en-CA.ts
@@ -232,16 +232,6 @@ export default {
       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.'
-      }
-    },
     reqFetch: {
       unknown: {
         title: 'An unexpected error occurred.',
diff --git a/strr-host-pm-web/app/stores/document.ts b/strr-host-pm-web/app/stores/document.ts
index c5109666..245bdedd 100644
--- a/strr-host-pm-web/app/stores/document.ts
+++ b/strr-host-pm-web/app/stores/document.ts
@@ -317,10 +317,11 @@ export const useDocumentStore = defineStore('host/document', () => {
 
   // reset documents when requirements change
   watch([() => reqStore.propertyReqs, () => reqStore.prRequirements], async () => {
-    await $reset()
+    await resetApiDocs()
   }, { deep: true })
 
-  async function $reset () {
+  // use this to remove documents from store and from api
+  async function resetApiDocs () {
     const docsToDelete = [...storedDocuments.value]
     for (const doc of docsToDelete) {
       await removeStoredDocument(doc)
@@ -328,6 +329,12 @@ export const useDocumentStore = defineStore('host/document', () => {
     selectedDocType.value = undefined
   }
 
+  // use this to reset store only
+  function $reset () {
+    storedDocuments.value = []
+    selectedDocType.value = undefined
+  }
+
   return {
     apiDocuments,
     storedDocuments,
@@ -340,6 +347,7 @@ export const useDocumentStore = defineStore('host/document', () => {
     addStoredDocument,
     removeStoredDocument,
     validateRequiredDocuments,
+    resetApiDocs,
     $reset
   }
 })
diff --git a/strr-host-pm-web/package.json b/strr-host-pm-web/package.json
index c8b92867..5ce47f4f 100644
--- a/strr-host-pm-web/package.json
+++ b/strr-host-pm-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-host-pm-web",
   "private": true,
   "type": "module",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",
diff --git a/strr-strata-web/app/components/document/list/Item.vue b/strr-strata-web/app/components/document/list/Item.vue
new file mode 100644
index 00000000..7b3ce9bc
--- /dev/null
+++ b/strr-strata-web/app/components/document/list/Item.vue
@@ -0,0 +1,49 @@
+<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 font-bold">{{ $t(`docType.${doc.type}`) }}</span>
+            <span>{{ doc.name }}</span>
+          </div>
+        </div>
+      </div>
+      <UButton
+        :label="$t('word.Remove')"
+        variant="link"
+        :disabled="doc.loading"
+        @click="$emit('remove', doc)"
+      />
+    </div>
+  </li>
+</template>
diff --git a/strr-strata-web/app/components/document/list/index.vue b/strr-strata-web/app/components/document/list/index.vue
new file mode 100644
index 00000000..b5e88bbf
--- /dev/null
+++ b/strr-strata-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-strata-web/app/components/document/upload/Button.vue b/strr-strata-web/app/components/document/upload/Button.vue
new file mode 100644
index 00000000..878af527
--- /dev/null
+++ b/strr-strata-web/app/components/document/upload/Button.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+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: '' },
+  helpId: { type: String, default: undefined },
+  ariaLabel: { type: String, default: undefined },
+  accept: { type: String, default: undefined },
+  multiple: { type: Boolean, default: false },
+  directory: { type: Boolean, default: false }
+})
+
+defineEmits<{
+  change: [files: FileList | null]
+  cancel: [void]
+}>()
+</script>
+<template>
+  <div
+    :id
+    class="flex w-full items-center gap-2"
+  >
+    <UIcon
+      name="i-mdi-paperclip"
+      class="size-6 shrink-0 text-blue-500"
+    />
+    <div
+      class="relative h-[56px] w-full rounded-t border-b border-gray-500 bg-gray-100
+      focus-within:border-b-2 focus-within:border-blue-500 hover:border-gray-600 hover:bg-gray-200"
+      :class="{
+        'border-red-600 bg-red-100 focus-within:border-red-600 hover:border-red-600 hover:bg-red-100': isInvalid
+      }"
+    >
+      <label
+        for="file-input"
+        class="absolute flex size-full items-center px-4 text-left text-bcGovGray-700"
+        :class="{
+          'text-red-600': isInvalid
+        }"
+      >
+        {{ label }}
+      </label>
+      <input
+        id="file-input"
+        type="file"
+        class="absolute size-full cursor-pointer opacity-0 ring-0 focus:outline-none focus:ring-0"
+        :accept
+        :multiple
+        :webkitdirectory="directory"
+        :aria-required="isRequired"
+        :aria-invalid="isInvalid"
+        :aria-label="ariaLabel"
+        :aria-describedby="helpId"
+        :disabled="isDisabled"
+        @cancel="$emit('cancel')"
+        @change="(e) => $emit('change', (e.target as HTMLInputElement).files)"
+      >
+    </div>
+  </div>
+</template>
diff --git a/strr-strata-web/app/components/document/upload/Select.vue b/strr-strata-web/app/components/document/upload/Select.vue
new file mode 100644
index 00000000..4e00a50d
--- /dev/null
+++ b/strr-strata-web/app/components/document/upload/Select.vue
@@ -0,0 +1,70 @@
+<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]
+  cancel: [void]
+}>()
+
+const { open, onChange, onCancel, reset } = useFileDialog({
+  accept: props.accept,
+  multiple: false,
+  directory: false
+})
+
+onCancel(() => {
+  emit('cancel')
+})
+
+onChange((files) => {
+  const file = files?.[0]
+  if (file) {
+    emit('change', file)
+  }
+  reset()
+})
+</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="label"
+      :aria-required="isRequired"
+      :aria-invalid="isInvalid"
+      value-attribute="value"
+      :aria-describedby="helpId"
+      :ui-menu="{
+        label: true ? 'text-gray-900' : !!error? 'text-red-600': 'text-gray-700'
+      }"
+      class="w-full"
+      @change="open()"
+    >
+      <template #label>
+        <span>{{ label }}</span>
+      </template>
+    </USelectMenu>
+  </div>
+</template>
diff --git a/strr-strata-web/app/components/form/BusinessDetails.vue b/strr-strata-web/app/components/form/BusinessDetails.vue
index 64b93f14..87a98cc8 100644
--- a/strr-strata-web/app/components/form/BusinessDetails.vue
+++ b/strr-strata-web/app/components/form/BusinessDetails.vue
@@ -145,9 +145,12 @@ onMounted(async () => {
               <URadioGroup
                 v-model="strataBusiness.hasRegOffAtt"
                 class="p-2"
-                :class="isComplete && strataBusiness.hasRegOffAtt === undefined ? 'border-red-600 border-2' : ''"
+                :class="isComplete && strataBusiness.hasRegOffAtt === undefined
+                  ? 'border-red-600 border-2 pt-4'
+                  : 'pt-4'
+                "
                 :options="getRadioOptions()"
-                :ui="{ legend: 'mb-3 text-default font-bold text-gray-700' }"
+                :ui="{ legend: 'text-default font-bold text-gray-700' }"
                 :ui-radio="{ inner: 'space-y-2' }"
               >
                 <template #legend>
diff --git a/strr-strata-web/app/components/form/ReviewConfirm.vue b/strr-strata-web/app/components/form/ReviewConfirm.vue
index 626a0659..5df8654f 100644
--- a/strr-strata-web/app/components/form/ReviewConfirm.vue
+++ b/strr-strata-web/app/components/form/ReviewConfirm.vue
@@ -7,6 +7,7 @@ const contactStore = useStrrContactStore()
 const businessStore = useStrrStrataBusinessStore()
 const detailsStore = useStrrStrataDetailsStore()
 const applicationStore = useStrrStrataApplicationStore()
+const documentStore = useDocumentStore()
 
 const strataConfirmationFormRef = ref<Form<z.output<typeof applicationStore.confirmationSchema>>>()
 const sectionErrors = ref<MultiFormValidationResult>([])
@@ -37,7 +38,8 @@ onMounted(async () => {
   const validations = [
     contactStore.validateContact(),
     businessStore.validateStrataBusiness(),
-    detailsStore.validateStrataDetails()
+    detailsStore.validateStrataDetails(),
+    documentStore.validateDocuments()
   ]
 
   const validationResults = await Promise.all(validations)
@@ -247,7 +249,7 @@ onMounted(async () => {
       }"
     >
       <FormCommonReviewSection
-        :error="isSectionInvalid('strata-details-form')"
+        :error="isSectionInvalid('strata-details-form') || isSectionInvalid('strata-documents-form')"
         :items="[
           {
             title: $t('strr.review.brand.name'),
@@ -262,6 +264,10 @@ onMounted(async () => {
             slot: 'buildings',
             contentClass: 'line-clamp-none'
           },
+          {
+            title: 'Supporting Documents',
+            slot: 'documents'
+          }
         ]"
         @edit="$emit('edit', 2)"
       >
@@ -295,6 +301,24 @@ onMounted(async () => {
             </ConnectInfoBox>
           </div>
         </template>
+        <template #documents>
+          <div class="pt-2">
+            <div v-if="!documentStore.storedDocuments.length">
+              <p>{{ $t('text.noDocsUploaded') }}</p>
+            </div>
+            <div v-for="doc in documentStore.storedDocuments" :key="doc.id" class="flex w-full gap-1">
+              <UIcon
+                name="i-mdi-paperclip"
+                class="size-5 shrink-0 text-blue-500"
+              />
+              <div class="flex flex-col">
+                <!-- TODO: can we leave out the name since there is only 1 document type? -->
+                <!-- <span class="text-sm font-bold">{{ $t(`docType.${doc.type}`) }}</span> -->
+                <span>{{ doc.name }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
       </FormCommonReviewSection>
     </ConnectPageSection>
 
diff --git a/strr-strata-web/app/components/form/StrataDetails.vue b/strr-strata-web/app/components/form/StrataDetails.vue
index a903ef41..4fea5cd6 100644
--- a/strr-strata-web/app/components/form/StrataDetails.vue
+++ b/strr-strata-web/app/components/form/StrataDetails.vue
@@ -4,21 +4,33 @@ import { z } from 'zod'
 
 const { addNewEmptyBuilding, removeBuildingAtIndex, strataDetailsSchema } = useStrrStrataDetailsStore()
 const { strataDetails } = storeToRefs(useStrrStrataDetailsStore())
+const docStore = useDocumentStore()
+const { getDocumentSchema } = docStore
 
 const props = defineProps<{ isComplete: boolean }>()
 
 const strataDetailsFormRef = ref<Form<z.output<typeof strataDetailsSchema>>>()
+const documentFormRef = ref<Form<any>>()
+
+// revalidate form to remove errors if field previously shows error
+watch(() => docStore.storedDocuments,
+  () => {
+    documentFormRef.value?.validate(undefined, { silent: true })
+  },
+  { deep: true }
+)
 
 onMounted(async () => {
   // validate form if step marked as complete
   if (props.isComplete) {
     await validateForm(strataDetailsFormRef.value, props.isComplete)
+    await validateForm(documentFormRef.value, props.isComplete)
   }
 })
 </script>
 
 <template>
-  <div data-testid="strata-details">
+  <div data-testid="strata-details" class="space-y-10">
     <UForm
       ref="strataDetailsFormRef"
       :schema="strataDetailsSchema"
@@ -179,5 +191,76 @@ onMounted(async () => {
         </div>
       </ConnectPageSection>
     </UForm>
+
+    <UForm
+      ref="documentFormRef"
+      :state="docStore.storedDocuments"
+      :schema="getDocumentSchema()"
+    >
+      <ConnectPageSection
+        class="bg-white"
+        :heading="{ label: 'Supporting Documentation', labelClass: 'font-bold md:ml-6' }"
+      >
+        <div class="space-y-10 py-10">
+          <ConnectFormSection
+            title="File Upload"
+            :error="hasFormErrors(documentFormRef, ['documents'])"
+          >
+            <div class="max-w-bcGovInput">
+              <UFormGroup
+                name="documents"
+                :ui="{
+                  help: 'mt-2 ml-10',
+                  label: { base: 'pt-0 font-normal' }
+                }"
+              >
+                <DocumentUploadButton
+                  id="supporting-documents"
+                  :label="$t('label.chooseDocs')"
+                  accept=".pdf"
+                  :is-required="true"
+                  :is-invalid="isComplete && hasFormErrors(documentFormRef, ['documents'])"
+                  help-id="supporting-documents-help"
+                  @change="(e: FileList) => e[0] ? docStore.addStoredDocument(e[0]) : undefined"
+                />
+
+                <template #label>
+                  <i18n-t keypath="text.addAllReqDocs" scope="global">
+                    <template #link>
+                      <UButton
+                        :label="$t('link.learnMore')"
+                        :to="useLocalePath()('/')"
+                        :padded="false"
+                        variant="link"
+                        target="_blank"
+                        class="underline"
+                        trailing-icon="i-mdi-open-in-new"
+                        :ui="{
+                          icon: { size: { sm: 'h-4 w-4' } },
+                          gap: { sm: 'gap-x-1.5' }
+                        }"
+                      />
+                    </template>
+                  </i18n-t>
+                </template>
+
+                <template #help>
+                  <span id="supporting-documents-help">
+                    {{ $t('hint.docUpload') }}
+                  </span>
+                </template>
+
+                <template #error="{ error }">
+                  <span id="supporting-documents-help">
+                    {{ error }}
+                  </span>
+                </template>
+              </UFormGroup>
+              <DocumentList class="pt-4" />
+            </div>
+          </ConnectFormSection>
+        </div>
+      </ConnectPageSection>
+    </UForm>
   </div>
 </template>
diff --git a/strr-strata-web/app/enums/document-upload-type.ts b/strr-strata-web/app/enums/document-upload-type.ts
new file mode 100644
index 00000000..12a9e0e0
--- /dev/null
+++ b/strr-strata-web/app/enums/document-upload-type.ts
@@ -0,0 +1,3 @@
+export enum DocumentUploadType {
+  STRATA_HOTEL_DOCUMENTATION = 'STRATA_HOTEL_DOCUMENTATION'
+}
diff --git a/strr-strata-web/app/interfaces/strata-api.ts b/strr-strata-web/app/interfaces/strata-api.ts
index e80083c5..646b6509 100644
--- a/strr-strata-web/app/interfaces/strata-api.ts
+++ b/strr-strata-web/app/interfaces/strata-api.ts
@@ -8,10 +8,12 @@ export interface ApiStrataDetails {
 export interface ApiBaseStrataRegistration extends ApiBaseRegistration {
   strataHotelRepresentatives: ApiRep[]
   strataHotelDetails: ApiStrataDetails
+  documents: ApiDocument[]
 }
 
 export interface ApiBaseStrataApplication extends ApiBaseStrataRegistration {
   completingParty: ApiParty
+  documents: ApiDocument[]
 }
 
 export interface StrataRegistrationResp extends ApiBaseStrataRegistration, ApiExtraRegistrationDetails {
@@ -24,3 +26,10 @@ export interface StrataApplicationPayload {
 export interface StrataApplicationResp extends StrataApplicationPayload {
   header: ApplicationHeader
 }
+
+export interface ApiDocument {
+  documentType: DocumentUploadType
+  fileKey: string
+  fileName: string
+  fileType: string
+}
diff --git a/strr-strata-web/app/interfaces/ui-document.ts b/strr-strata-web/app/interfaces/ui-document.ts
new file mode 100644
index 00000000..b0bf51e8
--- /dev/null
+++ b/strr-strata-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-strata-web/app/locales/en-CA.ts b/strr-strata-web/app/locales/en-CA.ts
index d77a38cf..ede6a3db 100644
--- a/strr-strata-web/app/locales/en-CA.ts
+++ b/strr-strata-web/app/locales/en-CA.ts
@@ -96,10 +96,13 @@ export default {
     expiresToday: 'Expires today',
     dayCount: '0 days | 1 day | {count} days',
     lastStatusChange: 'Last Status Change',
-    daysToExpiry: 'Days to Expiry (Pacific Time)'
+    daysToExpiry: 'Days to Expiry (Pacific Time)',
+    chooseDocs: 'Choose Supporting Documents',
+    supportingDocs: 'Supporting Documentation'
   },
   link: {
-    strataHotelInfoPage: 'strata hotel information page'
+    strataHotelInfoPage: 'strata hotel information page',
+    learnMore: 'Learn More'
   },
   modal: {
     helpRegisteringStrata: {
@@ -140,7 +143,9 @@ export default {
     streetHint: 'Street address, rural route, or general delivery address',
     selectAccount: {
       generic: 'Select the account you wish to use to register and manage your short-term rentals, or create a new account.'
-    }
+    },
+    addAllReqDocs: 'Upload supporting strata-titled hotel or motel documentation. {link}',
+    noDocsUploaded: 'No supporting documentation uploaded.'
   },
   validation: {
     brand: {
@@ -149,13 +154,20 @@ export default {
     },
     wholeNumber: 'Please enter a whole number (no decimals)',
     min1Unit: 'The number of rental units must be greater than 0',
-    max5000Units: 'The number of rental units must not exceed 5000'
+    max5000Units: 'The number of rental units must not exceed 5000',
+    min1Document: 'Must have at least one document'
   },
   certify: {
     1: '{terms} I agree to comply with the {link} of registration.',
     2: '{boldStart}Accuracy of Information.{boldEnd} I confirm that the information contained in the application for registration is accurate and true. I understand that if I have knowingly provided inaccurate or false information, I may be subject to enforcement action under Part 4 of the {italicStart}Short-term Rental Accommodations Act{italicEnd}.',
     checkbox: 'I confirm that I understand and agree to the above.'
   },
+  docType: {
+    STRATA_HOTEL_DOCUMENTATION: 'Supporting strata-titled hotel or motel documentation'
+  },
+  hint: {
+    docUpload: 'File must be a PDF. Maximum 10 MB.'
+  },
   ConnectFeeWidget: {
     feeSummary: {
       itemLabels: {
diff --git a/strr-strata-web/app/pages/application.vue b/strr-strata-web/app/pages/application.vue
index 3eb6e340..517615a7 100644
--- a/strr-strata-web/app/pages/application.vue
+++ b/strr-strata-web/app/pages/application.vue
@@ -9,6 +9,7 @@ const { handlePaymentRedirect } = useConnectNav()
 const { validateContact } = useStrrContactStore()
 const { validateStrataBusiness } = useStrrStrataBusinessStore()
 const { validateStrataDetails } = useStrrStrataDetailsStore()
+const { validateDocuments } = useDocumentStore()
 const {
   submitStrataApplication,
   validateStrataConfirmation,
@@ -58,7 +59,10 @@ const steps = ref<Step[]>([
     icon: 'i-mdi-map-marker-plus-outline',
     complete: false,
     isValid: false,
-    validationFn: () => validateStrataDetails(true) as boolean
+    validationFn: () => (
+      validateStrataDetails(true) as boolean &&
+      validateDocuments(true) as boolean
+    )
   },
   {
     i18nPrefix: 'strr.step',
@@ -107,6 +111,7 @@ const handleStrataSubmit = async () => {
       validateContact(),
       validateStrataBusiness(),
       validateStrataDetails(),
+      validateDocuments(),
       validateStrataConfirmation()
     ]
 
@@ -114,7 +119,7 @@ const handleStrataSubmit = async () => {
     formErrors = validationResults.flatMap(result => result as MultiFormValidationResult)
     const isApplicationValid = formErrors.every(result => result.success === true)
 
-    // console.info('is application valid: ', isApplicationValid, formErrors)
+    console.info('is application valid: ', isApplicationValid, formErrors)
 
     // if all steps valid, submit form with store function
     if (isApplicationValid) {
diff --git a/strr-strata-web/app/pages/strata-hotel/dashboard/[applicationId].vue b/strr-strata-web/app/pages/strata-hotel/dashboard/[applicationId].vue
index e427ddee..9adf7c28 100644
--- a/strr-strata-web/app/pages/strata-hotel/dashboard/[applicationId].vue
+++ b/strr-strata-web/app/pages/strata-hotel/dashboard/[applicationId].vue
@@ -18,6 +18,7 @@ const {
 } = storeToRefs(useStrrStrataStore())
 const { strataBusiness } = storeToRefs(useStrrStrataBusinessStore())
 const { strataDetails } = storeToRefs(useStrrStrataDetailsStore())
+const documentStore = useDocumentStore()
 
 const todos = ref<Todo[]>([])
 const buildings = ref<ConnectAccordionItem[]>([])
@@ -133,6 +134,24 @@ setBreadcrumbs([
           <SummaryRegOfficeAttorney />
         </div>
       </ConnectDashboardSection>
+      <ConnectDashboardSection :title="$t('label.supportingDocs')" :loading="loading">
+        <div class="p-3">
+          <div v-if="!documentStore.storedDocuments.length">
+            <p>{{ $t('text.noDocsUploaded') }}</p>
+          </div>
+          <div v-for="doc in documentStore.storedDocuments" :key="doc.id" class="flex w-full items-center gap-1">
+            <UIcon
+              name="i-mdi-paperclip"
+              class="size-5 shrink-0 text-blue-500"
+            />
+            <div class="flex flex-col gap-1">
+              <!-- TODO: can we leave out the name since there is only 1 document type? -->
+              <!-- <span class="text-sm font-bold">{{ $t(`docType.${doc.type}`) }}</span> -->
+              <span>{{ doc.name }}</span>
+            </div>
+          </div>
+        </div>
+      </ConnectDashboardSection>
     </div>
     <div class="space-y-10 sm:w-[300px]">
       <ConnectDashboardSection :title="$t('label.completingParty')" :loading="loading">
diff --git a/strr-strata-web/app/stores/document.ts b/strr-strata-web/app/stores/document.ts
new file mode 100644
index 00000000..29bf1c7a
--- /dev/null
+++ b/strr-strata-web/app/stores/document.ts
@@ -0,0 +1,137 @@
+import { v4 as uuidv4 } from 'uuid'
+import { z } from 'zod'
+
+export const useDocumentStore = defineStore('strata/document', () => {
+  const { t } = useI18n()
+  const { $strrApi } = useNuxtApp()
+  const strrModal = useStrrModals()
+
+  const storedDocuments = ref<UiDocument[]>([])
+  const selectedDocType = ref<DocumentUploadType | undefined>(DocumentUploadType.STRATA_HOTEL_DOCUMENTATION) // leaving this in case we want to add other types
+
+  const apiDocuments = computed(() => storedDocuments.value.map(item => item.apiDoc))
+
+  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 // use this if adding mutliple document types
+
+    // await sleep(3000) // TODO: remove
+    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)
+
+      // submit file
+      const res = await $strrApi<ApiDocument>('/documents', {
+        method: 'POST',
+        body: formData
+      })
+      // api doesn't give documentType back in this response
+      res.documentType = uiDoc.type
+      // 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 getDocumentSchema = () => z.array(z.any()).refine(
+    val => val.length >= 1,
+    {
+      message: t('validation.min1Document'),
+      path: ['documents']
+    }
+  )
+
+  const validateDocuments = (returnBool = false): MultiFormValidationResult | boolean => {
+    const result = validateSchemaAgainstState(getDocumentSchema(), storedDocuments.value, 'strata-documents-form')
+
+    if (returnBool) {
+      return result.success === true
+    } else {
+      return [result]
+    }
+  }
+
+  // use this to remove documents from store and from api
+  async function resetApiDocs () {
+    const docsToDelete = [...storedDocuments.value]
+    for (const doc of docsToDelete) {
+      await removeStoredDocument(doc)
+    }
+  }
+
+  // use this to reset store only
+  function $reset () {
+    storedDocuments.value = []
+    // selectedDocType.value = undefined
+  }
+
+  return {
+    apiDocuments,
+    storedDocuments,
+    selectedDocType,
+    postDocument,
+    deleteDocument,
+    addStoredDocument,
+    removeStoredDocument,
+    getDocumentSchema,
+    validateDocuments,
+    resetApiDocs,
+    $reset
+  }
+})
diff --git a/strr-strata-web/app/stores/strata.ts b/strr-strata-web/app/stores/strata.ts
index 4fd1f134..90f4c658 100644
--- a/strr-strata-web/app/stores/strata.ts
+++ b/strr-strata-web/app/stores/strata.ts
@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from 'uuid'
 import { formatBusinessDetailsUI, formatStrataDetailsUI } from '~/utils/strata-formating'
 
 export const useStrrStrataStore = defineStore('strr/strata', () => {
@@ -6,9 +7,11 @@ export const useStrrStrataStore = defineStore('strr/strata', () => {
   const contactStore = useStrrContactStore()
   const businessStore = useStrrStrataBusinessStore()
   const detailsStore = useStrrStrataDetailsStore()
+  const documentStore = useDocumentStore()
   const { completingParty, primaryRep, secondaryRep } = storeToRefs(contactStore)
   const { strataBusiness } = storeToRefs(businessStore)
   const { strataDetails } = storeToRefs(detailsStore)
+  const { storedDocuments } = storeToRefs(documentStore)
 
   const {
     application,
@@ -38,6 +41,15 @@ export const useStrrStrataStore = defineStore('strr/strata', () => {
       }
       strataBusiness.value = formatBusinessDetailsUI(permitDetails.value.businessDetails)
       strataDetails.value = formatStrataDetailsUI(permitDetails.value.strataHotelDetails)
+
+      storedDocuments.value = permitDetails.value.documents?.map<UiDocument>(val => ({
+        file: {} as File,
+        apiDoc: val,
+        name: val.fileName,
+        type: val.documentType,
+        id: uuidv4(),
+        loading: false
+      })) || []
     }
   }
 
diff --git a/strr-strata-web/app/stores/strataApplication.ts b/strr-strata-web/app/stores/strataApplication.ts
index 7d5f0922..c6048bd0 100644
--- a/strr-strata-web/app/stores/strataApplication.ts
+++ b/strr-strata-web/app/stores/strataApplication.ts
@@ -8,6 +8,7 @@ export const useStrrStrataApplicationStore = defineStore('strr/strataApplication
   const contactStore = useStrrContactStore()
   const businessStore = useStrrStrataBusinessStore()
   const detailsStore = useStrrStrataDetailsStore()
+  const documentStore = useDocumentStore()
 
   const confirmation = reactive({
     confirmation: false
@@ -38,7 +39,8 @@ export const useStrrStrataApplicationStore = defineStore('strr/strataApplication
         completingParty: formatParty(contactStore.completingParty),
         businessDetails: formatBusinessDetails(businessStore.strataBusiness || {} as StrrBusiness),
         strataHotelRepresentatives: [],
-        strataHotelDetails: formatStrataDetails(detailsStore.strataDetails)
+        strataHotelDetails: formatStrataDetails(detailsStore.strataDetails),
+        documents: documentStore.apiDocuments
       }
     }
 
@@ -73,6 +75,7 @@ export const useStrrStrataApplicationStore = defineStore('strr/strataApplication
     contactStore.$reset()
     businessStore.$reset()
     detailsStore.$reset()
+    documentStore.$reset()
     confirmation.confirmation = false
   }
 
diff --git a/strr-strata-web/package.json b/strr-strata-web/package.json
index 0b9d70e3..39abd015 100644
--- a/strr-strata-web/package.json
+++ b/strr-strata-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-strata-web",
   "private": true,
   "type": "module",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",