Merge pull request #270 from dimak1/fix/property-type

Fix Property Details and Review pages
bcgov · Nov 6, 2024 · b49d62d · b49d62d
2 parents d366bb5 + dcf4010
commit b49d62d
Show file tree

Hide file tree

Showing 15 changed files with 528 additions and 483 deletions.
diff --git a/strr-web/components/bcros/form-section/property-manager/SummaryView.vue b/strr-web/components/bcros/form-section/property-manager/SummaryView.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 // default values
 const {
   headerTag = 'p',
-  headerClass = 'font-bold mb-6 mobile:mx-2'
+  headerClass = 'font-bold mb-6 m:mx-2'
 } = props
 
 const propertyManagerContact = computed((): PropertyManagerContactI => props.propertyManager.contact)
@@ -22,8 +22,7 @@ const propertyManagerContact = computed((): PropertyManagerContactI => props.pro
       {{ tReviewPM('header') }}
     </component>
     <div
-      class="bg-white p-8 mobile:px-2 d:min-h-[250px]
-            grid d:grid-cols-3 d:grid-rows-3 d:grid-flow-col"
+      class="bg-white p-8 m:px-2 d:min-h-[250px] grid d:grid-cols-3 d:grid-rows-3 d:grid-flow-col"
     >
       <BcrosFormSectionReviewItem
         :title="tReviewPM('businessLegalName')"

diff --git a/strr-web/components/bcros/form-section/property/Details.vue b/strr-web/components/bcros/form-section/property/Details.vue
@@ -1,8 +1,8 @@
 <template>
   <div data-test-id="property-details">
     <BcrosFormSection :title="t('createAccount.propertyForm.rentalUnitDetails')">
-      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="rentalUnitSpaceType" class="d:pr-[16px] flex-grow" :error="rentalUnitSpaceTypeError">
+      <div class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
+        <UFormGroup name="rentalUnitSpaceType" class="d:pr-4 flex-grow" :error="rentalUnitSpaceTypeError">
           <USelect
             v-model="rentalUnitSpaceType"
             :placeholder="t('createAccount.propertyForm.rentalUnitSpaceType')"
@@ -13,14 +13,14 @@
           />
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
+      <div class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
         <UFormGroup
           name="isUnitOnPrincipalResidenceProperty"
-          class="d:pr-[16px] flex-grow"
+          class="d:pr-4 flex-grow"
           :error="principalResidenceError"
         >
           <USelect
-            v-model="formState.propertyDetails.isUnitOnPrincipalResidenceProperty"
+            v-model="isUnitOnPrincipalResidenceProperty"
             :placeholder="t('createAccount.propertyForm.isUnitOnPrincipalResidenceProperty')"
             :options="principalResidenceOptions"
             class="w-full"
@@ -35,9 +35,9 @@
         :key="isUnitOnPrincipalResidenceProperty
           ? 'withDropdown' : 'withoutDropdown'"
         class="flex flex-row justify-between
-        w-full mb-[40px] mobile:mb-[16px]"
+        w-full mb-[40px] m:mb-4"
       >
-        <UFormGroup name="hostResidence" class="d:pr-[16px] flex-grow" :error="hostResidenceError">
+        <UFormGroup name="hostResidence" class="d:pr-4 flex-grow" :error="hostResidenceError">
           <USelect
             v-model="hostResidenceComputed"
             :placeholder="t('createAccount.propertyForm.hostResidence')"
@@ -48,9 +48,11 @@
           />
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="numberOfRoomsForRent" class="d:pr-[16px] flex-grow" :error="numberOfRoomsForRentError">
-          <label class="block mb-2">{{ t('createAccount.propertyForm.numberOfRoomsForRent') }}</label>
+      <div class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
+        <UFormGroup name="numberOfRoomsForRent" class="d:pr-4 flex-grow" :error="numberOfRoomsForRentError">
+          <div class="mb-2">
+            {{ t('createAccount.propertyForm.numberOfRoomsForRent') }}
+          </div>
           <div class="flex items-center border border-gray-300 rounded-md max-w-[200px]">
             <button
               class="px-2 py-1 border-r border-gray-300 rounded-l-md"
@@ -81,8 +83,8 @@
           </div>
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="propertyType" class="d:pr-[16px] flex-grow" :error="propertyTypeError">
+      <div class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
+        <UFormGroup name="propertyType" class="d:pr-4 flex-grow" :error="propertyTypeError">
           <USelect
             v-model="propertyType"
             :placeholder="t('createAccount.propertyForm.propertyType')"
@@ -94,8 +96,8 @@
           />
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="ownershipType" class="d:pr-[16px] flex-grow" :error="ownershipTypeError">
+      <div class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
+        <UFormGroup name="ownershipType" class="d:pr-4 flex-grow" :error="ownershipTypeError">
           <USelect
             v-model="ownershipType"
             :placeholder="t('createAccount.propertyForm.ownershipType')"
@@ -107,8 +109,8 @@
           />
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="parcelIdentifier" class="d:pr-[16px] flex-grow">
+      <div class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
+        <UFormGroup name="parcelIdentifier" class="d:pr-4 flex-grow">
           <UInput
             v-model="parcelIdentifier"
             aria-label="parcel identifier"
@@ -131,8 +133,8 @@
           </template>
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="businessLicense" class="d:pr-[16px] flex-grow">
+      <div class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
+        <UFormGroup name="businessLicense" class="d:pr-4 flex-grow">
           <UInput
             v-model="businessLicense"
             aria-label="business license"
@@ -143,8 +145,8 @@
           </template>
         </UFormGroup>
       </div>
-      <div v-if="businessLicense" class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="businessLicenseExpiryDate" class="d:pr-[16px] flex-grow">
+      <div v-if="businessLicense" class="flex flex-row justify-between w-full mb-[40px] m:mb-4">
+        <UFormGroup name="businessLicenseExpiryDate" class="d:pr-4 flex-grow">
           <UInput
             v-model="businessLicenseExpiryDate"
             :placeholder="t('createAccount.propertyForm.businessLicenseExpiryDate')"
@@ -177,6 +179,56 @@ const rentalUnitSpaceType = defineModel<string>('rentalUnitSpaceType')
 const isUnitOnPrincipalResidenceProperty = defineModel<boolean>('isUnitOnPrincipalResidenceProperty')
 const hostResidence = defineModel<string | null>('hostResidence')
 
+const {
+  propertyTypes,
+  ownershipTypes,
+  ownershipTypeError,
+  propertyTypeError,
+  principalResidenceError,
+  hostResidenceError,
+  numberOfRoomsForRentError
+} = defineProps<{
+  propertyTypes: string[],
+  ownershipTypes: string[],
+  ownershipTypeError: string,
+  propertyTypeError: string,
+  rentalUnitSpaceTypeError: string,
+  principalResidenceError: string,
+  hostResidenceError: string,
+  numberOfRoomsForRentError: string;
+}>()
+
+const emit = defineEmits([
+  'validateOwnership',
+  'validateProperty',
+  'validateBusinessLicenseExpiryDate',
+  'validateRentalUnitSpaceType',
+  'validateIsUnitOnPrincipalResidenceProperty',
+  'validatePrincipalResidenceOptions',
+  'validateHostResidence',
+  'validateNumberOfRoomsForRent'
+])
+
+const principalResidenceOptions = [
+  { value: true, label: t('createAccount.propertyForm.yes') },
+  { value: false, label: t('createAccount.propertyForm.no') }
+]
+
+const rentalUnitSpaceTypeOptions = [
+  { value: RentalUnitSpaceTypeE.ENTIRE_HOME, label: t('createAccount.propertyForm.entireHome') },
+  { value: RentalUnitSpaceTypeE.SHARED_ACCOMMODATION, label: t('createAccount.propertyForm.sharedAccommodation') }
+]
+
+const hostResidenceOptions = computed(() => [
+  {
+    value: HostResidenceE.SAME_UNIT,
+    label: rentalUnitSpaceType.value === RentalUnitSpaceTypeE.ENTIRE_HOME
+      ? t('createAccount.propertyForm.sameUnitAltOption')
+      : t('createAccount.propertyForm.sameUnitOption')
+  },
+  { value: HostResidenceE.ANOTHER_UNIT, label: t('createAccount.propertyForm.anotherUnitOption') }
+])
+
 const decrementRooms = () => {
   if (formState.propertyDetails.numberOfRoomsForRent > 1) {
     formState.propertyDetails.numberOfRoomsForRent--
@@ -189,6 +241,13 @@ const incrementRooms = () => {
   }
 }
 
+const hostResidenceComputed = computed({
+  get: () => formState.propertyDetails.hostResidence ?? '', // Ensure string return
+  set: (value: string) => {
+    formState.propertyDetails.hostResidence = value || null // Set to null if empty
+  }
+})
+
 watch(businessLicense, (): void => {
   if (!businessLicense.value) {
     // clear exp date when business lic is empty
@@ -202,48 +261,6 @@ watch(isUnitOnPrincipalResidenceProperty, (newValue) => {
   }
 })
 
-const emit = defineEmits([
-  'validateOwnership',
-  'validateProperty',
-  'validateBusinessLicenseExpiryDate',
-  'validateRentalUnitSpaceType',
-  'validateIsUnitOnPrincipalResidenceProperty',
-  'validatePrincipalResidenceOptions',
-  'validateHostResidence',
-  'validateNumberOfRoomsForRent'
-])
-
-const hostResidenceComputed = computed({
-  get: () => formState.propertyDetails.hostResidence ?? '', // Ensure string return
-  set: (value: string) => {
-    formState.propertyDetails.hostResidence = value || null // Set to null if empty
-  }
-})
-
-const {
-  propertyTypes,
-  ownershipTypes,
-  ownershipTypeError,
-  propertyTypeError,
-  principalResidenceError,
-  rentalUnitSpaceTypeOptions,
-  principalResidenceOptions,
-  hostResidenceOptions,
-  hostResidenceError,
-  numberOfRoomsForRentError
-} = defineProps<{
-  propertyTypes: string[],
-  ownershipTypes: string[],
-  ownershipTypeError: string,
-  propertyTypeError: string,
-  rentalUnitSpaceTypeOptions: { value: RentalUnitSpaceTypeE, label: string }[],
-  rentalUnitSpaceTypeError: string,
-  principalResidenceOptions: { value: boolean, label: string }[],
-  principalResidenceError: string,
-  hostResidenceOptions: { value: HostResidenceE, label: string }[],
-  hostResidenceError: string,
-  numberOfRoomsForRentError: string;
-}>()
 </script>
 
 <style scoped>

diff --git a/strr-web/components/bcros/form-section/property/Form.vue b/strr-web/components/bcros/form-section/property/Form.vue
@@ -19,9 +19,6 @@
           v-model:number-of-rooms-for-rent="formState.propertyDetails.numberOfRoomsForRent"
           :property-types="propertyTypes"
           :ownership-types="ownershipTypes"
-          :rental-unit-space-type-options="rentalUnitSpaceTypeOptions"
-          :principal-residence-options="principalResidenceOptions"
-          :host-residence-options="hostResidenceOptions"
           :ownership-type-error="ownershipTypeError"
           :property-type-error="propertyTypeError"
           :rental-unit-space-type-error="rentalUnitSpaceTypeError"
@@ -64,8 +61,6 @@
 
 <script setup lang="ts">
 import { sanitizeUrl } from '@braintree/sanitize-url'
-import { HostResidenceE } from '~/enums/host-residence-e'
-import { RentalUnitSpaceTypeE } from '~/enums/rental-unit-space-type-e'
 
 const { isComplete } = defineProps<{
   isComplete: boolean
@@ -195,21 +190,6 @@ const ownershipTypes: string[] = [
   t('createAccount.propertyForm.coOwn')
 ]
 
-const rentalUnitSpaceTypeOptions = [
-  { value: RentalUnitSpaceTypeE.ENTIRE_HOME, label: t('createAccount.propertyForm.entireHome') },
-  { value: RentalUnitSpaceTypeE.SHARED_ACCOMMODATION, label: t('createAccount.propertyForm.sharedAccommodation') }
-]
-
-const principalResidenceOptions = [
-  { value: true, label: t('createAccount.propertyForm.yes') },
-  { value: false, label: t('createAccount.propertyForm.no') }
-]
-
-const hostResidenceOptions = [
-  { value: HostResidenceE.SAME_UNIT, label: 'The host lives in this unit' },
-  { value: HostResidenceE.ANOTHER_UNIT, label: 'The host lives in another unit on the same property' }
-]
-
 const propertyTypeError = ref('')
 const ownershipTypeError = ref('')
 const businessLicenseExpiryDate = ref('')
@@ -253,6 +233,10 @@ watch(
     } else if (newValue === 'false') {
       formState.propertyDetails.isUnitOnPrincipalResidenceProperty = false
     }
+
+    if (isComplete) {
+      validatePrincipalResidenceOptions()
+    }
   }
 )
 
@@ -267,8 +251,8 @@ const validatePrincipalResidenceOptions = () => {
 
 const validateHostResidence = () => {
   hostResidenceError.value =
-    formState.propertyDetails.isUnitOnPrincipalResidenceProperty && !formState.propertyDetails.hostResidence
-      ? 'Please specify where the host lives on the property.'
+    (formState.propertyDetails.isUnitOnPrincipalResidenceProperty && !formState.propertyDetails.hostResidence)
+      ? t('createAccount.propertyForm.hostResidenceRequiredError')
       : ''
 }