UI - examiner platform details (#484)

Signed-off-by: Kial Jinnah <[email protected]>
bcgov · Jan 21, 2025 · 5a0e51f · 5a0e51f
1 parent e2db421
commit 5a0e51f
Show file tree

Hide file tree

Showing 14 changed files with 424 additions and 48 deletions.
diff --git a/strr-base-web/app/components/connect/InfoWithIcon.vue b/strr-base-web/app/components/connect/InfoWithIcon.vue
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 <template>
   <div :class="wrapperClass || 'flex space-x-2'">
-    <UIcon :name="icon" :class="iconClass || 'size-5'" />
+    <UIcon :name="icon" :class="iconClass || 'size-5 shrink-0'" />
     <div :class="contentClass || 'space-y-3'">
       <slot>
         <p>{{ content || '' }}</p>

diff --git a/strr-base-web/app/components/connect/form/address/Display.vue b/strr-base-web/app/components/connect/form/address/Display.vue
@@ -1,33 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   address: Partial<ConnectAddress>,
+  omitCountry?: boolean,
   useLocationDescLabel?: boolean
 }>()
-
-const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
-
-const addressData = computed(() => {
-  return [
-    props.address.street
-      ? `${props.address.street},`
-      : [
-          [props.address.unitNumber, props.address.streetNumber].filter(val => !!val).join('-'),
-          props.address.streetName ? `${props.address.streetName},` : undefined
-        ].filter(val => !!val).join(' ') || '',
-    props.address.streetAdditional ? `${props.address.streetAdditional},` : '',
-    [
-      props.address.city ? `${props.address.city},` : undefined,
-      props.address.region ? `${props.address.region}\u00A0` : undefined,
-      props.address.postalCode
-    ].filter(val => !!val).join(' ') || '',
-    props.address.country ? (regionNamesInEnglish.of(props.address.country) || props.address.country) : ''
-  ].filter(val => !!val)
-})
 </script>
 <template>
   <div data-testid="address-display">
     <div
-      v-for="addressLine, i in addressData"
+      v-for="addressLine, i in getAddressDisplayParts(address, false, true, omitCountry)"
       :key="addressLine + i"
       data-testid="address-line"
     >

diff --git a/strr-base-web/app/utils/connect-address.ts b/strr-base-web/app/utils/connect-address.ts
@@ -1,17 +1,44 @@
 export const getAddressDisplayParts = (
   address: Partial<ConnectAddress>,
-  separateCity = false
+  separateCity = false,
+  addTextDecor = false,
+  omitCountry = false
 ): string[] => {
   const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
+  const textDecor = addTextDecor ? ',' : ''
+
+  const getLine1 = () => {
+    return (
+      address.street || [
+        [address.unitNumber, address.streetNumber].filter(val => !!val).join('-'),
+        address.streetName
+      ].filter(val => !!val).join(' ') || ''
+    ) + textDecor
+  }
+
+  const getLine2 = () => {
+    return (address.streetAdditional || '') + textDecor
+  }
+
+  const getCity = () => {
+    return (address.city || '') + textDecor
+  }
+
+  const getRegion = () => {
+    return address.region
+      ? address.region + (addTextDecor ? '\u00A0' : '')
+      : ''
+  }
+
+  const getCountry = () => {
+    return address.country && !omitCountry ? (regionNamesInEnglish.of(address.country) || address.country) : ''
+  }
 
   return [
-    address.street || [
-      [address.unitNumber, address.streetNumber].filter(val => !!val).join('-'),
-      address.streetName
-    ].filter(val => !!val).join(' ') || '',
-    address.streetAdditional || '',
-    separateCity ? address.city || '' : '',
-    [!separateCity ? address.city : '', address.region, address.postalCode].filter(val => !!val).join(' ') || '',
-    address.country ? (regionNamesInEnglish.of(address.country) || address.country) : ''
-  ].filter(val => !!val)
+    getLine1(),
+    getLine2(),
+    separateCity ? getCity() : '',
+    [!separateCity ? getCity() : '', getRegion(), address.postalCode].filter(val => !!val).join(' ') || '',
+    getCountry()
+  ].filter(val => !!val && val !== ',')
 }
diff --git a/strr-base-web/app/utils/formattingHelpers.ts b/strr-base-web/app/utils/formattingHelpers.ts
@@ -79,3 +79,7 @@ export function formatRepresentativeUI (rep: ApiRep): StrrContact {
 export function isSameAddress (addr1: object, addr2: object) {
   return Object.values(addr1).toString() === Object.values(addr2).toString()
 }
+
+export function getFullName (contact: Contact) {
+  return `${contact.firstName || ''} ${contact.middleName || ''} ${contact.lastName || ''}`.replaceAll('  ', ' ').trim()
+}
diff --git a/strr-base-web/app/utils/permitDashHelpers.ts b/strr-base-web/app/utils/permitDashHelpers.ts
@@ -120,10 +120,15 @@ export const getDashboardAddresses = (business: StrrBusiness) => {
   return addresses
 }
 
+export function getPhoneDisplay (phone: ConnectPhone) {
+  const number = phone.countryCode === '1'
+    ? phone.number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')
+    : phone.number
+  return `+${phone.countryCode} ${number}` +
+    (phone.extension ? ` Ext. ${phone.extension}` : '')
+}
+
 export const getPartyItem = (party: Contact): ConnectAccordionItem => {
-  const number = party.phone.countryCode === '1'
-    ? party.phone.number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')
-    : party.phone.number
   return {
     showAvatar: true,
     label: (`${party.firstName || ''} ` +
@@ -138,8 +143,7 @@ export const getPartyItem = (party: Contact): ConnectAccordionItem => {
       {
         icon: 'i-mdi-phone',
         iconClass: 'size-5 mt-[2px]',
-        text: `+${party.phone.countryCode} ${number}` +
-          (party.phone.extension ? ` Ext. ${party.phone.extension}` : '')
+        text: getPhoneDisplay(party.phone)
       },
       ...(party.faxNumber
         ? [{

diff --git a/strr-examiner-web/app/components/Common/SubHeaderTemplate.vue b/strr-examiner-web/app/components/Common/SubHeaderTemplate.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+  col1Labels: string[],
+  col2Labels: string[],
+  col3Labels: string[],
+  col4Labels: string[]
+}>()
+
+const getColLabels = (labels: string[]) => {
+  if (!labels.length) {
+    // if nothing to show we still want the empty column for layout consistency
+    return ['']
+  }
+  return labels
+}
+</script>
+<template>
+  <div class="app-inner-container">
+    <div
+      :class="[
+        'grid grid-cols-4 gap-x-5 divide-x py-4 text-sm text-bcGovColor-midGray',
+        '*:*:space-y-1 *:space-y-4 *:px-3 first:*:pl-0'
+      ]"
+    >
+      <div>
+        <div v-for="label, i in getColLabels(col1Labels)" :key="label">
+          <strong class="text-gray-900">{{ label.toUpperCase() }}</strong>
+          <slot :name="`col1-${i}`" />
+        </div>
+      </div>
+      <div>
+        <div v-for="label, i in getColLabels(col2Labels)" :key="label">
+          <strong class="text-gray-900">{{ label.toUpperCase() }}</strong>
+          <slot :name="`col2-${i}`" />
+        </div>
+      </div>
+      <div>
+        <div v-for="label, i in getColLabels(col3Labels)" :key="label">
+          <strong class="text-gray-900">{{ label.toUpperCase() }}</strong>
+          <slot :name="`col3-${i}`" />
+        </div>
+      </div>
+      <div>
+        <div v-for="label, i in getColLabels(col4Labels)" :key="label">
+          <strong class="text-gray-900">{{ label.toUpperCase() }}</strong>
+          <slot :name="`col4-${i}`" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/strr-examiner-web/app/components/Platform/Expansion/Brands.vue b/strr-examiner-web/app/components/Platform/Expansion/Brands.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+defineProps<{ title: string, brands: StrrBrand[] }>()
+</script>
+<template>
+  <ConnectFormSection :title>
+    <div class="grid grid-flow-col grid-rows-6 gap-x-5 gap-y-1">
+      <ConnectInfoWithIcon
+        v-for="brand in brands"
+        :key="brand.name"
+        icon="i-mdi-web"
+      >
+        <UButton
+          class="underline underline-offset-2"
+          icon="i-mdi-open-in-new"
+          :label="brand.name"
+          :padded="false"
+          :to="brand.website"
+          target="_blank"
+          trailing
+          variant="link"
+        />
+      </ConnectInfoWithIcon>
+    </div>
+  </ConnectFormSection>
+</template>
diff --git a/strr-examiner-web/app/components/Platform/Expansion/Business.vue b/strr-examiner-web/app/components/Platform/Expansion/Business.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+defineProps<{ title: string, business: ApiPlatformBusinessDetails, hasRegOffice: boolean }>()
+</script>
+<template>
+  <ConnectFormSection :title>
+    <div class="flex space-x-10 *:space-y-1">
+      <div>
+        <strong class="text-gray-900">{{ $t('strr.label.business').toUpperCase() }}</strong>
+        <ConnectInfoWithIcon icon="i-mdi-domain" :content="business.legalName" />
+        <ConnectInfoWithIcon v-if="business.businessNumber" icon="i-mdi-hashtag" :content="business.businessNumber" />
+        <ConnectInfoWithIcon icon="i-mdi-email-outline">
+          <ConnectFormAddressDisplay :address="formatAddressUI(business.mailingAddress)" omit-country />
+        </ConnectInfoWithIcon>
+        <dl
+          v-if="business.consumerProtectionBCLicenceNumber"
+          class="flex flex-col gap-1 *:whitespace-nowrap md:flex-row"
+        >
+          <dt class="font-bold text-gray-900">
+            {{ $t('strr.label.cpbcLicenseNum') }}:
+          </dt>
+          <dd>{{ business.consumerProtectionBCLicenceNumber }}</dd>
+        </dl>
+      </div>
+      <div v-if="hasRegOffice">
+        <strong class="text-gray-900">{{ $t('strr.label.attorneyForService').toUpperCase() }}</strong>
+        <ConnectInfoWithIcon
+          v-if="business.registeredOfficeOrAttorneyForServiceDetails.attorneyName"
+          icon="i-mdi-domain"
+          :content="business.registeredOfficeOrAttorneyForServiceDetails.attorneyName"
+        />
+        <ConnectInfoWithIcon icon="i-mdi-location-outline">
+          <ConnectFormAddressDisplay
+            :address="formatAddressUI(business.registeredOfficeOrAttorneyForServiceDetails.mailingAddress)"
+            omit-country
+          />
+        </ConnectInfoWithIcon>
+      </div>
+    </div>
+  </ConnectFormSection>
+</template>
diff --git a/strr-examiner-web/app/components/Platform/Expansion/Parties.vue b/strr-examiner-web/app/components/Platform/Expansion/Parties.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+defineProps<{
+  title: string,
+  primaryRep?: StrrContact,
+  secondaryRep?: StrrContact,
+  completingParty?: Contact,
+  isCompPartyRep?: boolean
+}>()
+</script>
+<template>
+  <ConnectFormSection :title>
+    <div class="flex space-x-10 *:space-y-1">
+      <div v-if="primaryRep">
+        <strong class="text-gray-900">{{ $t('strr.label.representative').toUpperCase() }}</strong>
+        <ConnectInfoWithIcon icon="i-mdi-account">
+          <div class="flex space-x-2">
+            <span>{{ getFullName(primaryRep) }}</span>
+            <UIcon v-if="isCompPartyRep" class="size-5 shrink-0" name="i-mdi-playlist-check" />
+          </div>
+        </ConnectInfoWithIcon>
+        <ConnectInfoWithIcon icon="i-mdi-wallet-travel" :content="primaryRep.position" />
+        <ConnectInfoWithIcon icon="i-mdi-phone" :content="getPhoneDisplay(primaryRep.phone)" />
+        <ConnectInfoWithIcon v-if="primaryRep.faxNumber" icon="i-mdi-fax" :content="primaryRep.faxNumber" />
+        <ConnectInfoWithIcon icon="i-mdi-at" :content="primaryRep.emailAddress" />
+      </div>
+      <div v-if="secondaryRep">
+        <strong class="text-gray-900">{{ $t('strr.label.secondaryRepresentative').toUpperCase() }}</strong>
+        <ConnectInfoWithIcon icon="i-mdi-account" :content="getFullName(secondaryRep)" />
+        <ConnectInfoWithIcon icon="i-mdi-wallet-travel" :content="secondaryRep.position" />
+        <ConnectInfoWithIcon icon="i-mdi-phone" :content="getPhoneDisplay(secondaryRep.phone)" />
+        <ConnectInfoWithIcon v-if="secondaryRep.faxNumber" icon="i-mdi-fax" :content="secondaryRep.faxNumber" />
+        <ConnectInfoWithIcon icon="i-mdi-at" :content="secondaryRep.emailAddress" />
+      </div>
+      <div v-if="completingParty">
+        <strong class="text-gray-900">{{ $t('strr.label.completingParty').toUpperCase() }}</strong>
+        <ConnectInfoWithIcon icon="i-mdi-account" :content="getFullName(completingParty)" />
+        <ConnectInfoWithIcon icon="i-mdi-phone" :content="getPhoneDisplay(completingParty.phone)" />
+        <ConnectInfoWithIcon v-if="completingParty.faxNumber" icon="i-mdi-fax" :content="completingParty.faxNumber" />
+        <ConnectInfoWithIcon icon="i-mdi-at" :content="completingParty.emailAddress" />
+      </div>
+    </div>
+  </ConnectFormSection>
+</template>