From 43d952a97ab4831fe511d8559d7748e9ec576223 Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Sat, 11 Jan 2025 13:10:25 -0800
Subject: [PATCH] Update Host Details as per latest design

---
 strr-base-web/app/utils/date.ts               |   7 +-
 .../app/components/ApplicationDetails.vue     |  50 -----
 .../components/ApplicationDetailsSection.vue  |  23 +--
 .../app/components/ApplicationInfoHeader.vue  |  34 ++++
 .../app/components/HostDetailsView.vue        | 183 +++++++++++-------
 .../app/components/PlatformDetailsView.vue    |  13 --
 .../app/components/StrataHotelDetailsView.vue |  13 --
 strr-examiner-web/app/locales/en-CA.ts        |  31 ++-
 .../app/pages/examine/[applicationId].vue     |   6 +-
 strr-examiner-web/app/store/examiner.ts       |  17 +-
 10 files changed, 200 insertions(+), 177 deletions(-)
 delete mode 100644 strr-examiner-web/app/components/ApplicationDetails.vue
 create mode 100644 strr-examiner-web/app/components/ApplicationInfoHeader.vue

diff --git a/strr-base-web/app/utils/date.ts b/strr-base-web/app/utils/date.ts
index ab595133b..62bae8518 100644
--- a/strr-base-web/app/utils/date.ts
+++ b/strr-base-web/app/utils/date.ts
@@ -55,16 +55,19 @@ export function dateToStringPacific (date: Date | string, format = 'y-MM-dd') {
 
 /**
  * Calculates the number of full days remaining until a given end date.
+ * If isElapsed is true, it calculates the number of full days since the end date.
  *
  * @param end - The ISO datestring for the end value.
  * @returns The number of full days remaining until the end date.
  */
-export function dayCountdown (end: string): number {
+export function dayCountdown (end: string, isElapsed: boolean = false): number {
   const startDate = DateTime.utc() // get current utc date
   const endDate = DateTime.fromISO(end, { setZone: true }).toUTC() // get given end date and convert to utc
 
   // get difference in days https://moment.github.io/luxon/#/math?id=diffs
-  const diff = endDate.diff(startDate, 'days').toObject().days
+  const diff = isElapsed
+    ? startDate.diff(endDate, 'days').toObject().days ?? 0
+    : endDate.diff(startDate, 'days').toObject().days
 
   // round difference down
   return Math.floor(diff)
diff --git a/strr-examiner-web/app/components/ApplicationDetails.vue b/strr-examiner-web/app/components/ApplicationDetails.vue
deleted file mode 100644
index 8f936047a..000000000
--- a/strr-examiner-web/app/components/ApplicationDetails.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-
-const props = defineProps<{ application: ApiApplicationResp, applicationActions?: HeaderAction[] }>()
-
-const displayApplicationType = {
-  [ApplicationType.HOST]: 'Host',
-  [ApplicationType.PLATFORM]: 'Platform',
-  [ApplicationType.STRATA_HOTEL]: 'Strata Hotel'
-}
-
-const { header, registration } = props.application
-
-</script>
-<template>
-  <ConnectPageSection
-    :heading="{
-      label: 'Application Details',
-      labelClass: 'font-bold',
-      icon: 'i-mdi-file-document-move-outline'
-    }"
-    :actions="applicationActions"
-    class="pb-4"
-  >
-    <ConnectFormSection title="Application Number" class="pt-4">
-      {{ header?.applicationNumber }}
-    </ConnectFormSection>
-
-    <ConnectFormSection title="Status" class="pt-4">
-      {{ header?.examinerStatus }}
-    </ConnectFormSection>
-
-    <ConnectFormSection title="Submission Date" class="pt-4">
-      {{ dateToString(header?.applicationDateTime, 'MMMM d, yyyy') }}
-    </ConnectFormSection>
-
-    <ConnectFormSection title="Decision Date" class="pt-4">
-      {{ header?.decisionDate ? dateToString(header?.decisionDate, 'MMMM d, yyyy') : '-' }}
-    </ConnectFormSection>
-
-    <ConnectFormSection title="Registration Type" class="pt-4">
-      {{ displayApplicationType[registration?.registrationType as keyof typeof displayApplicationType] }}
-    </ConnectFormSection>
-
-    <ConnectFormSection title="Submitted By" class="pt-4">
-      {{ header.submitter.displayName }}
-    </ConnectFormSection>
-  </ConnectPageSection>
-</template>
-
-<style scoped></style>
diff --git a/strr-examiner-web/app/components/ApplicationDetailsSection.vue b/strr-examiner-web/app/components/ApplicationDetailsSection.vue
index e1c184ef9..cedec798e 100644
--- a/strr-examiner-web/app/components/ApplicationDetailsSection.vue
+++ b/strr-examiner-web/app/components/ApplicationDetailsSection.vue
@@ -1,34 +1,17 @@
 <script setup lang="ts">
 
-const props = defineProps<{ label: string, hideCheckbox?: boolean, hideChecklist?: boolean }>()
+const props = defineProps<{ label: string }>()
 
 </script>
 
 <template>
-  <div class="flex items-center py-4 text-sm">
+  <div class="flex py-4 text-sm">
     <div class="flex w-1/5 items-start justify-start">
-      <UCheckbox v-if="!hideCheckbox" name="checkbox">
-        <template #label>
-          <span class="text-sm font-bold">{{ props.label }}</span>
-        </template>
-      </UCheckbox>
+      <span class="text-sm font-bold">{{ props.label }}</span>
     </div>
     <div class="flex-auto">
       <slot />
     </div>
-    <div
-      v-if="!hideChecklist"
-      class="flex"
-    >
-      <UButton
-        label="Checklist"
-        variant="link"
-        class="p-0 text-sm"
-        icon="i-mdi-chevron-down"
-        size="sm"
-        trailing
-      />
-    </div>
   </div>
 </template>
 
diff --git a/strr-examiner-web/app/components/ApplicationInfoHeader.vue b/strr-examiner-web/app/components/ApplicationInfoHeader.vue
new file mode 100644
index 000000000..9ab456582
--- /dev/null
+++ b/strr-examiner-web/app/components/ApplicationInfoHeader.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+
+const props = defineProps<{ application: ApiApplicationBaseResp }>()
+
+const { t } = useI18n()
+const { header, registration } = props.application
+
+const displayApplicationType = {
+  [ApplicationType.HOST]: t('strr.label.host'),
+  [ApplicationType.PLATFORM]: t('strr.label.platform'),
+  [ApplicationType.STRATA_HOTEL]: t('strr.label.strataHotel')
+}
+
+</script>
+
+<template>
+  <div class="border-b py-6">
+    <div class="mb-2 text-2xl">
+      <strong>
+        {{ header?.applicationNumber }} |
+      </strong>
+      {{ registration.unitAddress.nickname }}
+    </div>
+    <div class="text-sm">
+      <UBadge class="mr-3 font-bold" :label="header.examinerStatus" color="primary" />
+      <strong>Type:</strong>
+      {{ displayApplicationType[registration?.registrationType as keyof typeof displayApplicationType] }} |
+      <strong>Submitted:</strong> {{ dateToString(header.applicationDateTime, 'y-MM-dd t') }}
+      ({{ dayCountdown(header.applicationDateTime.toString(), true) }} days ago)
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/strr-examiner-web/app/components/HostDetailsView.vue b/strr-examiner-web/app/components/HostDetailsView.vue
index 470e62fd0..7f616e26c 100644
--- a/strr-examiner-web/app/components/HostDetailsView.vue
+++ b/strr-examiner-web/app/components/HostDetailsView.vue
@@ -1,116 +1,149 @@
 <script setup lang="ts">
+import { useExaminerStore } from '~/store/examiner'
+
 const props = defineProps<{ application: HostApplicationResp }>()
 
+const { t } = useI18n()
 const { header, registration } = props.application
+const { unitDetails } = registration
 
 const emit = defineEmits<{
-    approveApplication: [],
-    rejectApplication: []
+  approveApplication: [],
+  rejectApplication: []
 }>()
 
+const { getDocument } = useExaminerStore()
+
+const openDocInNewTab = async (supportingDocument: ApiDocument) => {
+  const file = await getDocument(header.applicationNumber, supportingDocument.fileKey)
+  const blob = new Blob([file], { type: 'application/pdf' })
+  const url = URL.createObjectURL(blob)
+  window.open(url, '_blank')
+  URL.revokeObjectURL(url)
+}
+
 </script>
 
 <template>
   <div>
-    <div class="mb-2 align-middle text-lg">
-      <strong>
-        {{ header?.applicationNumber }}
-      </strong>
-      <UButton label="View History" variant="link" size="sm" class="mx-2 underline" />
-    </div>
-    <div
-      v-if="registration?.registrationType === ApplicationType.HOST"
-      class="flex flex-row gap-x-5 divide-x text-sm"
-    >
-      <div>
-        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4">
-          <dt>Status:</dt>
-          <dd>{{ header?.hostStatus }}</dd>
-
-          <dt>Submitted:</dt>
-          <dd>{{ dateToString(header?.applicationDateTime || '') }}</dd>
-
-          <dt>Registration Type:</dt>
-          <dd>{{ registration?.registrationType }}</dd>
-        </dl>
-      </div>
-      <div>
-        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
-          <dt>Unit Address:</dt>
-          <dd class="w-[150px]">
-            {{ displayFullUnitAddress(registration?.unitAddress) }}
-          </dd>
-
-          <dt>Municipality:</dt>
-          <dd>{{ registration?.strRequirements?.organizationNm }}</dd>
-        </dl>
+    <div class="text-bcGovColor-midGray grid grid-cols-4 gap-x-5 divide-x text-sm">
+      <div class="space-y-2">
+        <strong>RENTAL UNIT</strong>
+        <div class="w-[150px]">
+          <UIcon name="i-mdi-map-marker-outline" />
+          {{ displayFullUnitAddress(registration?.unitAddress) }}
+        </div>
+        <div v-if="registration?.strRequirements?.organizationNm">
+          <UIcon name="i-mdi-map-outline" />
+          {{ registration?.strRequirements?.organizationNm }}
+        </div>
       </div>
-      <div>
-        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
-          <dt>Host Address:</dt>
-          <dd class="w-[150px]">
-            {{ displayFullAddress(registration?.primaryContact.mailingAddress) }}
-          </dd>
-
-          <dt>Address Type:</dt>
-          <dd>Mailing</dd>
-
-          <dt>Same as Unit Address:</dt>
-          <dd>{{ registration?.unitDetails.hostResidence }}</dd>
 
-          <dt>Host Name:</dt>
-          <dd>{{ displayContactFullName(registration?.primaryContact || {}) }}</dd>
-
-          <dt>Host Type:</dt>
-          <dd>{{ registration?.primaryContact.contactType }}</dd>
+      <div class="space-y-2 pl-5">
+        <strong>HOST</strong>
+        <div class="w-[150px]">
+          <UIcon name="i-mdi-map-marker-outline" />
+          {{ displayFullAddress(registration?.primaryContact.mailingAddress) }}
+        </div>
+        <div>
+          <UIcon name="i-mdi-account" />
+          {{ displayContactFullName(registration?.primaryContact) }}
+        </div>
+        <div>
+          <UIcon name="i-mdi-at" />
+          {{ registration?.primaryContact.emailAddress }}
+        </div>
+        <div>
+          <strong>Host Type:</strong>
+          {{ registration?.primaryContact.contactType }}
+        </div>
+        <div>
+          <strong>Owner / Renter:</strong>
+          {{ unitDetails.ownershipType }}
+        </div>
+      </div>
 
-          <dt>Ownership Type:</dt>
-          <dd>{{ registration?.unitDetails.ownershipType }}</dd>
-        </dl>
+      <div class="space-y-2 pl-5">
+        <div>
+          {{ t(`propertyType.${unitDetails.propertyType}`) }}
+        </div>
+        <div>
+          {{ t(`rentalUnitType.${unitDetails.rentalUnitSpaceType}`) }} ({{ unitDetails.numberOfRoomsForRent }} Rooms)
+        </div>
+        <div>{{ t(`hostResidence.${unitDetails.hostResidence}`) }}</div>
+        <div><strong>PID:</strong> {{ unitDetails.parcelIdentifier }}</div>
+        <div>
+          <strong>PR Registered Rentals:</strong>
+          <!-- TODO: Get number of registered rentals for the host -->
+        </div>
       </div>
-      <div>
-        <dl class="grid grid-cols-[repeat(2,auto)] gap-x-4 pl-5">
-          <dt>Property Type:</dt>
-          <dd>{{ registration?.unitDetails.propertyType }}</dd>
 
-          <dt>Configuration:</dt>
-          <dd>{{ registration?.unitDetails.rentalUnitSpaceType }}</dd>
+      <div class="space-y-2 pl-5">
+        <div>
+          <UIcon name="i-mdi-account-multiple-outline" />
+          {{ registration?.secondaryContact?.contactType === OwnerType.INDIVIDUAL
+            ? displayContactFullName(registration?.secondaryContact) :
+              registration?.secondaryContact?.businessLegalName }}
+        </div>
 
-          <dt>Rooms:</dt>
-          <dd>{{ registration?.unitDetails.numberOfRoomsForRent }}</dd>
-        </dl>
+        <div>
+          <UIcon name="i-mdi-at" />
+          {{ registration?.propertyManager?.propertyManagerType === OwnerType.INDIVIDUAL
+            ? displayContactFullName(registration?.propertyManager.contact) :
+              registration?.propertyManager?.business?.legalName }}
+        </div>
       </div>
     </div>
 
     <!-- APPLICATION SECTIONS -->
     <div class="mt-6 divide-y">
-      <ApplicationDetailsSection label="Short-term rentals prohibited" hide-checklist>
+      <ApplicationDetailsSection label="Short-term rentals prohibited">
         <div class="flex items-center justify-between">
           <div class="flex">
             {{ registration?.strRequirements?.isStrProhibited ? 'Yes' : 'No' }}
           </div>
-          <div class="flex items-start justify-end gap-x-2">
-            <UButton label="Quick send to supervisor" color="primary" />
-          </div>
         </div>
       </ApplicationDetailsSection>
 
       <ApplicationDetailsSection label="Principal Residence">
         <div>
           {{ registration?.strRequirements?.isPrincipalResidenceRequired ?
-            'Required' : 'Not Required' }}
+            'Required.' : 'Not Required.' }} {{ registration?.strRequirements?.isStraaExempt ?
+            'Exempt.' : 'Not Exempt.' }}
         </div>
-        <div>
-          <strong>STR Accommodations Act: </strong>
-          {{ registration?.strRequirements?.isStraaExempt ?
-            'Exempt' : 'Not Exempt' }}
+
+        <div class="mt-2">
+          <UButton
+            v-for="document in registration.documents"
+            :key="document.fileKey"
+            class="mr-4 gap-x-1 p-0"
+            variant="link"
+            icon="mdi-file-document-outline"
+            @click="openDocInNewTab(document)"
+          >
+            {{ t(`documentLabels.${document.documentType}`) }}
+          </UButton>
         </div>
       </ApplicationDetailsSection>
 
-      <ApplicationDetailsSection label="" hide-checkbox hide-checklist class="pt-8">
+      <ApplicationDetailsSection label="" hide-checkbox class="pt-8">
         <div class="flex justify-end gap-x-2">
-          <UButton label="Approve" color="primary" @click="emit('approveApplication')" />
-          <UButton label="Reject" color="gray" @click="emit('rejectApplication')" />
+          <UButton
+            icon="i-mdi-close"
+            :label="t('btn.decline')"
+            color="red"
+            variant="outline"
+            size="lg"
+            @click="emit('rejectApplication')"
+          />
+          <UButton
+            icon="i-mdi-check"
+            :label="t('btn.approve')"
+            color="green"
+            variant="outline"
+            size="lg"
+            @click="emit('approveApplication')"
+          />
         </div>
       </ApplicationDetailsSection>
     </div>
diff --git a/strr-examiner-web/app/components/PlatformDetailsView.vue b/strr-examiner-web/app/components/PlatformDetailsView.vue
index dfee3ec31..d8c37ebe0 100644
--- a/strr-examiner-web/app/components/PlatformDetailsView.vue
+++ b/strr-examiner-web/app/components/PlatformDetailsView.vue
@@ -7,18 +7,6 @@ const { header, registration } = props.application
 
 <template>
   <div>
-    <div class="mb-2 align-middle text-lg">
-      <strong>
-        {{ header?.applicationNumber }}
-      </strong>
-      <UButton
-        label="View History"
-        variant="link"
-        size="sm"
-        class="mx-2 underline"
-      />
-    </div>
-
     <div
       class="flex flex-row gap-x-5 divide-x text-sm"
     >
@@ -69,7 +57,6 @@ const { header, registration } = props.application
     <div class="mt-6 divide-y">
       <ApplicationDetailsSection
         label="Business Details"
-        hide-checklist
       >
         <div class="flex items-center justify-between">
           <div class="flex">
diff --git a/strr-examiner-web/app/components/StrataHotelDetailsView.vue b/strr-examiner-web/app/components/StrataHotelDetailsView.vue
index fa66f88d9..5ac0f28a1 100644
--- a/strr-examiner-web/app/components/StrataHotelDetailsView.vue
+++ b/strr-examiner-web/app/components/StrataHotelDetailsView.vue
@@ -7,18 +7,6 @@ const { header, registration } = props.application
 
 <template>
   <div>
-    <div class="mb-2 align-middle text-lg">
-      <strong>
-        {{ header?.applicationNumber }}
-      </strong>
-      <UButton
-        label="View History"
-        variant="link"
-        size="sm"
-        class="mx-2 underline"
-      />
-    </div>
-
     <div
       class="flex flex-row gap-x-5 divide-x text-sm"
     >
@@ -69,7 +57,6 @@ const { header, registration } = props.application
     <div class="mt-6 divide-y">
       <ApplicationDetailsSection
         label="Business Details"
-        hide-checklist
       >
         <div class="flex items-center justify-between">
           <div class="flex">
diff --git a/strr-examiner-web/app/locales/en-CA.ts b/strr-examiner-web/app/locales/en-CA.ts
index 5b640d116..8b35a1949 100644
--- a/strr-examiner-web/app/locales/en-CA.ts
+++ b/strr-examiner-web/app/locales/en-CA.ts
@@ -129,7 +129,9 @@ export default {
       recreational: 'Recreational',
       secondarySuite: 'Secondary Suite',
       singleFamily: 'Single Family Home',
+      host: 'Host',
       strataHotel: 'Strata Hotel',
+      platform: 'Platform',
       townHome: 'Town Home',
       rentalUnit: 'Rental Unit',
       rentalUnitSetup: 'Rental Unit Set-up',
@@ -186,7 +188,9 @@ export default {
     edit: 'Edit',
     done: 'Done',
     showDetails: 'Show Details',
-    hideDetails: 'Hide Details'
+    hideDetails: 'Hide Details',
+    decline: 'Decline',
+    approve: 'Approve'
   },
   error: {
     createAccount: {
@@ -313,9 +317,13 @@ export default {
     FLOAT_HOME: 'Float Home'
   },
   rentalUnitType: {
-    ENTIRE_HOME: 'Entire home (guests have the entire place to themselves)',
+    ENTIRE_HOME: 'Entire home',
     SHARED_ACCOMMODATION: 'Shared accommodation (guests rent a portion of the unit with access to common spaces that may be shared with the host or other guests)'
   },
+  hostResidence: {
+    SAME_UNIT: 'Same property as host’s principal residence',
+    ANOTHER_UNIT: 'Not same property as host’s principal residence'
+  },
   rentalUnitSetupType: {
     WHOLE_PRINCIPAL_RESIDENCE: "This unit is the host's principal residence", // The whole Host Principal Residence
     UNIT_ON_PR_PROPERTY: 'This unit is not the host’s principal residence but it’s on the same property', // A whole unit on the same property as the Host Principal Residence (e.g., basement suite)
@@ -329,5 +337,24 @@ export default {
   },
   tooltip: {
     pid: 'You can find your Parcel Identifier (PID) on your Property Assessment Notice from BC Assessment. Alternatively, visit the BC Assessment website, search for your civic address, and look for the PID under ‘Legal Description and Parcel ID’.'
+  },
+  documentLabels: {
+    BC_DRIVERS_LICENSE: "BC Driver's Licence",
+    BCSC: 'BC Services Card',
+    COMBINED_BCSC_LICENSE: 'Combined BCSC License',
+    PROPERTY_ASSESSMENT_NOTICE: 'Property Assessment Notice',
+    SPEC_TAX_CONFIRMATION: 'Special 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: 'Government or Crown Corporation Official Notice',
+    FRACTIONAL_OWNERSHIP_AGREEMENT: 'Fractional Ownership Agreement',
+    STRATA_HOTEL_DOCUMENTATION: 'Strata Hotel Documentation',
+    TENANCY_AGREEMENT: 'Tenancy Agreement',
+    RENT_RECEIPT_OR_BANK_STATEMENT: 'Rent Receipt or Bank Statement',
+    LOCAL_GOVT_BUSINESS_LICENSE: 'Local Government Business License',
+    OTHERS: 'Others'
   }
 }
diff --git a/strr-examiner-web/app/pages/examine/[applicationId].vue b/strr-examiner-web/app/pages/examine/[applicationId].vue
index 8ce80b42f..18205f36b 100644
--- a/strr-examiner-web/app/pages/examine/[applicationId].vue
+++ b/strr-examiner-web/app/pages/examine/[applicationId].vue
@@ -75,7 +75,11 @@ const registration = computed(
   <div v-if="loading" class="w-full justify-center p-14">
     Loading...
   </div>
-  <div v-else-if="application" class="py-5">
+  <div v-else-if="application" class="pb-5">
+    <ApplicationInfoHeader
+      class="mb-4"
+      :application="application"
+    />
     <HostDetailsView
       v-if="registration?.registrationType === ApplicationType.HOST"
       :application="application"
diff --git a/strr-examiner-web/app/store/examiner.ts b/strr-examiner-web/app/store/examiner.ts
index a2a6ecc37..26a4e0545 100644
--- a/strr-examiner-web/app/store/examiner.ts
+++ b/strr-examiner-web/app/store/examiner.ts
@@ -32,11 +32,26 @@ export const useExaminerStore = defineStore('strr/examiner-store', () => {
     })
   }
 
+  /**
+   * Get/Download Supporting Document file for the Application.
+   *
+   * @param {string} applicationNumber - The application number to which the document belongs.
+   * @param {string} fileKey - The key of the document to be retrieved.
+   * @returns The file/document
+   */
+  const getDocument = async (applicationNumber: string, fileKey: string): Promise<Blob> => {
+    return await $strrApi(`/applications/${applicationNumber}/documents/${fileKey}`, {
+      method: 'GET',
+      responseType: 'blob'
+    })
+  }
+
   return {
     getAllApplications,
     getApplication,
     approveApplication,
     rejectApplication,
-    getNextApplication
+    getNextApplication,
+    getDocument
   }
 })