UI - hosts step 2, second cut (#359)

Signed-off-by: Kial Jinnah <[email protected]>

strr-base-web/app/components/connect/HelpExpand.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  text?: string,
+  title?: string,
+  label: string,
+  labelExpanded: string,
+  icon?: string
+}>()
+const isExpanded = ref(false)
+
+</script>
+<template>
+  <div>
+    <UButton
+      :padded="false"
+      class="font-bold"
+      color="primary"
+      variant="link"
+      :icon="icon || 'i-mdi-help-circle-outline'"
+      :label="(isExpanded && labelExpanded) ? labelExpanded : label"
+      @click="isExpanded = !isExpanded"
+    />
+    <ConnectTransitionCollapse>
+      <div
+        v-if="isExpanded"
+        class="mt-4 space-y-4 border-y border-dashed border-gray-700 pb-4 pt-8"
+      >
+        <slot>
+          <slot name="title">
+            <strong v-if="title" class="flex justify-center">
+              {{ title }}
+            </strong>
+          </slot>
+          <slot name="text">
+            <p>{{ text }}</p>
+          </slot>
+        </slot>
+        <div class="flex justify-end">
+          <UButton
+            class="underline"
+            :label="labelExpanded"
+            variant="link"
+            @click="isExpanded = !isExpanded"
+          />
+        </div>
+      </div>
+    </ConnectTransitionCollapse>
+  </div>
+</template>

strr-base-web/app/locales/en-CA.ts

@@ -142,6 +142,7 @@ export default {
     lastName: 'Last Name',
     fullName: 'Full Legal Name',
     preferredName: 'Preferred Name',
+    preferredNameOpt: 'Preferred Name (Optional)',
     contactName: 'Contact Name',
     address: 'Address',
     addressResidential: 'Residential Address',
@@ -186,6 +187,7 @@ export default {
     taxNumber: 'Tax Number',
     craBusTaxNumber: 'CRA Business Tax Number',
     craTaxNumber: 'CRA Tax Number',
+    craTaxNumberOpt: 'CRA Tax Number (Optional)',
     craTaxNumberExtra: 'CRA Tax Number (SIN, ITN, or TTN)',
     busName: 'Business Name',
     busNameLegal: 'Business Legal Name',

strr-host-pm-web/app/components/form/AddOwners.vue

@@ -1,63 +1,84 @@
 <script setup lang="ts">
 defineProps<{ isComplete: boolean }>()
 
+const { t } = useI18n()
 const contactStore = useHostOwnerStore()
-const { hostOwners, hasHost, hasCoHost, hasCompParty, hasPropertyManager } = storeToRefs(contactStore)
+const {
+  activeOwner,
+  activeOwnerEditIndex,
+  hostOwners,
+  hasHost,
+  hasCoHost,
+  hasCompParty,
+  hasPropertyManager
+} = storeToRefs(contactStore)
 
 const editingIndex = ref<number | undefined>(undefined)
-const addingNewType = ref<OwnerType | undefined>(undefined)
+const addingNewType = ref<OwnerType | undefined>(activeOwnerEditIndex.value === -1
+  ? activeOwner.value?.ownerType
+  : undefined
+)
+
+const disableButtons = computed(() =>
+  editingIndex.value !== undefined || !!addingNewType.value || !!activeOwner.value)
+
+const checklistItems = computed<ConnectValidatedChecklistItem[]>(() => [
+  {
+    label: t('strr.text.includeCompletingParty'),
+    isValid: hasCompParty.value
+  },
+  {
+    label: t('strr.text.includeHost'),
+    isValid: hasHost.value
+  },
+  {
+    label: t('strr.text.includePropertyManager'),
+    isValid: hasPropertyManager.value,
+    invalidIcon: 'i-mdi-information-outline',
+    invalidIconClass: 'mt-[2px] size-5 text-blue-500'
+  }
+])
 
 </script>
 
 <template>
   <div data-testid="add-owner" class="space-y-10">
-    <div>
-      <p class="font-bold">
-        {{ $t('strr.text.applicationMustInclude') }}
-      </p>
-      <!-- TODO: move to generic component as 'ConnectList' -->
-      <ul class="mt-5 list-outside list-disc space-y-3 pl-10">
-        <li
-          :class="hasCompParty || (!hasCompParty && isComplete)
-            ? '-ml-6 flex list-none space-x-1'
-            : ''"
-        >
-          <UIcon v-if="hasCompParty" name="i-mdi-check" class="size-5 text-green-600" />
-          <UIcon v-else-if="!hasCompParty && isComplete" name="i-mdi-close" class="mt-[2px] size-5 text-red-600" />
-          <span>{{ $t('strr.text.includeCompletingParty') }}</span>
-        </li>
-        <li
-          :class="hasHost || (!hasHost && isComplete)
-            ? '-ml-6 flex list-none space-x-1'
-            : ''"
-        >
-          <UIcon v-if="hasHost" name="i-mdi-check" class="size-5 text-green-600" />
-          <UIcon v-else-if="!hasHost && isComplete" name="i-mdi-close" class="mt-[2px] size-5 text-red-600" />
-          <span>{{ $t('strr.text.includeHost') }}</span>
-        </li>
-        <li
-          :class="hasPropertyManager || isComplete
-            ? '-ml-6 flex list-none space-x-1'
-            : ''"
-        >
-          <UIcon v-if="hasPropertyManager" name="i-mdi-check" class="size-5 text-green-600" />
-          <UIcon
-            v-else-if="isComplete"
-            name="i-mdi-information-outline"
-            class="mt-[2px] size-5 text-blue-500"
-          />
-          <span>{{ $t('strr.text.includePropertyManager') }}</span>
-        </li>
-      </ul>
-    </div>
+    <ConnectHelpExpand
+      class="-mt-8"
+      :title="$t('strr.text.helpOwnerTitle')"
+      :label="$t('strr.text.helpOwnerBtn')"
+      :label-expanded="$t('btn.hideHelp')"
+    >
+      <template #text>
+        <p>{{ $t('strr.text.helpOwner1') }}</p>
+        <p>{{ $t('strr.text.helpOwner2') }}</p>
+        <i18n-t keypath="strr.text.helpOwner3" scope="global">
+          <template #link>
+            <UButton
+              :label="$t('link.hostAccomodationsAct')"
+              :to="useRuntimeConfig().public.hostAccActUrl"
+              :padded="false"
+              variant="link"
+              target="_blank"
+              class="text-base underline"
+            />
+          </template>
+        </i18n-t>
+      </template>
+    </ConnectHelpExpand>
+    <ConnectChecklistValidated
+      :is-complete="isComplete"
+      :title="$t('strr.text.applicationMustInclude')"
+      :items="checklistItems"
+    />
     <div class="flex space-x-5">
       <UButton
         :label="$t('strr.label.addIndividual')"
         class="px-5 py-3"
         color="primary"
         icon="i-mdi-account-plus"
         variant="outline"
-        :disabled="editingIndex !== undefined || !!addingNewType || (hasHost && hasCoHost)"
+        :disabled="disableButtons || (hasHost && hasCoHost)"
         @click="addingNewType = OwnerType.INDIVIDUAL"
       />
       <UButton
@@ -66,17 +87,20 @@ const addingNewType = ref<OwnerType | undefined>(undefined)
         color="primary"
         icon="i-mdi-domain-plus"
         variant="outline"
-        :disabled="editingIndex !== undefined || !!addingNewType || (hasHost && hasPropertyManager)"
+        :disabled="disableButtons || (hasHost && hasPropertyManager)"
         @click="addingNewType = OwnerType.BUSINESS"
       />
     </div>
-    <FormOwner
-      v-if="addingNewType"
-      :owner-type="addingNewType"
-      :is-complete="isComplete"
-      @cancel="addingNewType = undefined"
-      @done="contactStore.addHostOwner($event); addingNewType = undefined"
-    />
+    <ConnectTransitionFade>
+      <FormOwner
+        v-if="addingNewType"
+        :set-owner="activeOwner"
+        :owner-type="addingNewType"
+        :is-complete="isComplete"
+        @cancel="addingNewType = undefined, activeOwner = undefined"
+        @done="contactStore.addHostOwner($event), addingNewType = undefined, activeOwner = undefined"
+      />
+    </ConnectTransitionFade>
     <SummaryOwners v-if="hostOwners.length" editable :disable-actions="addingNewType !== undefined" />
   </div>
 </template>

strr-host-pm-web/app/components/form/DefineYourRental/UnitAddress.vue

@@ -84,7 +84,7 @@ onMounted(async () => {
             'address.street'
           ])"
         >
-          <TransitionCollapse>
+          <ConnectTransitionCollapse>
             <div v-if="!reqStore.hasReqs && !reqStore.hasReqError" class="flex max-w-bcGovInput flex-col gap-10">
               <div class="flex flex-col gap-3">
                 <p>{{ $t('text.unitAddressIntro') }}</p>
@@ -162,9 +162,9 @@ onMounted(async () => {
                 </div>
               </div>
             </div>
-          </TransitionCollapse>
+          </ConnectTransitionCollapse>
 
-          <TransitionFade>
+          <ConnectTransitionFade>
             <div
               v-if="reqStore.hasReqs || reqStore.hasReqError"
               class="flex items-start justify-between"
@@ -202,7 +202,7 @@ onMounted(async () => {
                 </UPopover>
               </div>
             </div>
-          </TransitionFade>
+          </ConnectTransitionFade>
         </ConnectFormSection>
       </div>
     </UForm>

strr-host-pm-web/app/components/form/ReviewConfirm.vue

@@ -13,7 +13,7 @@ const { hostTacUrl } = useRuntimeConfig().public
 // const accountStore = useConnectAccountStore()
 const propertyStore = useHostPropertyStore()
 const { blInfo, unitAddress, unitDetails } = storeToRefs(propertyStore)
-const { prRequirements, requirementsList } = storeToRefs(usePropertyReqStore())
+const { prRequirements, requirementsList, showUnitDetailsForm } = storeToRefs(usePropertyReqStore())
 const ownerStore = useHostOwnerStore()
 const { hasCompParty, hostOwners } = storeToRefs(ownerStore)
 const documentsStore = useDocumentStore()
@@ -174,7 +174,7 @@ const getCompPartyName = computed(() => {
           </template>
           <template #info-documents>
             <div class="space-y-1">
-              <div v-if="!requirementsList.length">
+              <div v-if="!requirementsList.length && showUnitDetailsForm">
                 <div class="flex gap-2">
                   <UIcon name="i-mdi-check" class="mt-[2px] size-4 text-green-600" />
                   <p>{{ $t('text.noDocsReq') }}</p>

strr-host-pm-web/app/components/form/owner/Index.vue

@@ -17,8 +17,14 @@ const emit = defineEmits<{
 }>()
 
 const { getHostOwnerSchema, getNewHostOwner } = useHostOwnerStore()
+const { activeOwner } = storeToRefs(useHostOwnerStore())
+
+// Only init 'showErrors' with 'isComplete' value if this owner was already initialized previously
+const showErrors = ref(activeOwner.value ? props.isComplete : false)
 
 const owner = ref<HostOwner>(props.setOwner ? { ...props.setOwner } : getNewHostOwner(false, props.ownerType))
+
+watch(owner, (val) => { activeOwner.value = val }, { immediate: true })
 watch(() => owner.value.role, (newVal, oldVal) => {
   // clear fields that change depending on the role
   if (newVal === OwnerRole.CO_HOST) {
@@ -42,10 +48,6 @@ watch(() => owner.value.role, (newVal, oldVal) => {
 const ownerSchema = computed(() => getHostOwnerSchema(owner.value.ownerType, owner.value.role))
 const ownerFormRef = ref<Form<z.output<typeof ownerSchema.value>>>()
 
-const showErrors = ref(false)
-// Only update 'showErrors' with 'isComplete' value if 'isComplete' changes after this component was initialized
-watch(() => props.isComplete, (val) => { showErrors.value = val })
-
 const saveOwner = async () => {
   const errors = await validateForm(ownerFormRef.value, true)
   if (!errors) {
@@ -56,6 +58,10 @@ const saveOwner = async () => {
     console.info(errors)
   }
 }
+
+onMounted(async () => {
+  await validateForm(ownerFormRef.value, showErrors.value)
+})
 </script>
 
 <template>
@@ -84,24 +90,10 @@ const saveOwner = async () => {
               v-model:owner-form-ref="ownerFormRef"
               :show-errors="showErrors"
               show-roles
-              :show-btns="owner.role !== OwnerRole.HOST"
+              show-btns
               @cancel="$emit('cancel')"
               @done="saveOwner()"
             />
-            <div v-if="owner.role === OwnerRole.HOST" class="mt-10 space-y-10">
-              <div class="h-px w-full border-b border-gray-100" />
-              <p class="ml-10">
-                {{ $t('strr.text.individualBusinessInfo') }}
-              </p>
-              <FormOwnerBusiness
-                v-model:owner="owner"
-                v-model:owner-form-ref="ownerFormRef"
-                :show-errors="showErrors"
-                show-btns
-                @cancel="$emit('cancel')"
-                @done="saveOwner()"
-              />
-            </div>
           </div>
           <div v-else>
             <FormOwnerBusiness

strr-host-pm-web/app/components/form/owner/Person.vue

@@ -104,7 +104,7 @@ watch(isCompParty, (val) => {
         id="host-owner-preferred-name"
         v-model="owner.preferredName"
         name="preferredName"
-        :placeholder="$t('label.preferredName')"
+        :placeholder="$t('label.preferredNameOpt')"
         :help="$t('text.preferredName.hint')"
         data-testid="preferredName"
       />
@@ -147,14 +147,16 @@ watch(isCompParty, (val) => {
           id="host-owner-taxNumber"
           v-model="owner.taxNumber"
           name="taxNumber"
-          :placeholder="$t('label.craTaxNumberExtra')"
+          :placeholder="$t('label.craTaxNumberOpt')"
           :help="$t('strr.hint.craTaxNumber')"
           mask="### ### ###"
         />
       </ConnectFormSection>
       <ConnectFormSection
-        v-if="owner.role !== OwnerRole.PROPERTY_MANAGER"
-        :title="$t('strr.section.subTitle.residentialAddress')"
+        v-if="owner.role !== OwnerRole.PROPERTY_MANAGER || owner.ownerType !== OwnerType.BUSINESS"
+        :title="owner.role === OwnerRole.HOST
+          ? $t('strr.section.subTitle.residentialAddress')
+          : $t('strr.section.subTitle.mailingAddress')"
         :error="showErrors && hasFormErrors(ownerFormRef, [
           'mailingAddress.country',
           'mailingAddress.street',

strr-host-pm-web/app/components/form/owner/common/Role.vue

@@ -22,11 +22,13 @@ const radioOptions = computed(() => [
         label: t(`strr.label.role.${OwnerRole.CO_HOST}`),
         disabled: (hasCoHost.value && originalRole !== OwnerRole.CO_HOST) || props.isCompParty
       }]
-    : [{
-        value: OwnerRole.PROPERTY_MANAGER,
-        label: t(`strr.label.role.${OwnerRole.PROPERTY_MANAGER}`),
-        disabled: hasPropertyManager.value && originalRole !== OwnerRole.PROPERTY_MANAGER
-      }])
+    : []
+  ),
+  {
+    value: OwnerRole.PROPERTY_MANAGER,
+    label: t(`strr.label.role.${OwnerRole.PROPERTY_MANAGER}`),
+    disabled: hasPropertyManager.value && originalRole !== OwnerRole.PROPERTY_MANAGER
+  }
 ])
 </script>