first q

avni-work · Oct 25, 2024 · 8c2624e · 8c2624e
1 parent 095ae3f
commit 8c2624e
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 19 deletions.
diff --git a/strr-web/components/bcros/form-section/property/Details.vue b/strr-web/components/bcros/form-section/property/Details.vue
@@ -91,6 +91,20 @@
           />
         </UFormGroup>
       </div>
+      <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">
+          <USelect
+            v-model="rentalUnitSpaceType"
+            aria-label="rental unit space type"
+            :placeholder="t('createAccount.propertyForm.rentalUnitSpaceType')"
+            :options="rentalUnitSpaceTypeOptions"
+            option-attribute="name"
+            style="color: #1a202c; /* text-gray-900 */ dark:text-white; /* Override with dark mode text color */"
+            @blur="emit('validateRentalUnitSpaceType')"
+            @change="emit('validateRentalUnitSpaceType')"
+          />
+        </UFormGroup>
+      </div>
     </BcrosFormSection>
   </div>
 </template>
@@ -104,6 +118,7 @@ const ownershipType = defineModel<string>('ownershipType')
 const businessLicense = defineModel<string>('businessLicense')
 const parcelIdentifier = defineModel<string>('parcelIdentifier')
 const businessLicenseExpiryDate = defineModel<string>('businessLicenseExpiryDate')
+const rentalUnitSpaceType = defineModel<string>('rentalUnitSpaceType')
 
 watch(businessLicense, (): void => {
   if (!businessLicense.value) {
@@ -112,17 +127,25 @@ watch(businessLicense, (): void => {
   }
 })
 
-const emit = defineEmits(['validateOwnership', 'validateProperty', 'validateBusinessLicenseExpiryDate'])
+const emit = defineEmits([
+  'validateOwnership',
+  'validateProperty',
+  'validateBusinessLicenseExpiryDate',
+  'validateRentalUnitSpaceType'
+])
 
 const {
   propertyTypes,
   ownershipTypes,
   ownershipTypeError,
-  propertyTypeError
+  propertyTypeError,
+  rentalUnitSpaceTypeOptions
 } = defineProps<{
   propertyTypes: string[],
   ownershipTypes: string[],
   ownershipTypeError: string,
-  propertyTypeError: string
+  propertyTypeError: string,
+  rentalUnitSpaceTypeOptions: string[],
+  rentalUnitSpaceTypeError: string,
 }>()
 </script>
diff --git a/strr-web/components/bcros/form-section/property/Form.vue b/strr-web/components/bcros/form-section/property/Form.vue
@@ -7,32 +7,36 @@
         </p>
       </div>
       <UForm ref="form" :schema="propertyDetailsSchema" :state="formState.propertyDetails">
-        <BcrosFormSectionPropertyAddress
-          id="propertyAddress"
-          v-model:nickname="formState.propertyDetails.nickname"
-          v-model:country="formState.propertyDetails.country"
-          v-model:address="formState.propertyDetails.address"
-          v-model:address-line-two="formState.propertyDetails.addressLineTwo"
-          v-model:city="formState.propertyDetails.city"
-          v-model:province="formState.propertyDetails.province"
-          v-model:postal-code="formState.propertyDetails.postalCode"
-          :enable-address-complete="enableAddressComplete"
-          default-country-iso2="CA"
-          :address-not-in-b-c="addressNotInBC"
-        />
         <BcrosFormSectionPropertyDetails
           v-model:property-type="formState.propertyDetails.propertyType"
           v-model:ownership-type="formState.propertyDetails.ownershipType"
           v-model:business-license="formState.propertyDetails.businessLicense"
           v-model:parcel-identifier="formState.propertyDetails.parcelIdentifier"
           v-model:business-license-expiry-date="formState.propertyDetails.businessLicenseExpiryDate"
+          v-model:rental-unit-space-type="formState.propertyDetails.rentalUnitSpaceType"
           :property-types="propertyTypes"
           :ownership-types="ownershipTypes"
+          :rental-unit-space-type-options="rentalUnitSpaceTypeOptions"
           :ownership-type-error="ownershipTypeError"
           :property-type-error="propertyTypeError"
+          :rental-unit-space-type-error="rentalUnitSpaceTypeError"
           @validate-ownership="validateOwnershipType"
           @validate-property="validatePropertyType"
           @validate-business-license-expiry-date="validateBusinessLicenseExpiryDate"
+          @validate-rental-unit-space-type="validateRentalUnitSpaceType"
+        />
+        <BcrosFormSectionPropertyAddress
+          id="propertyAddress"
+          v-model:nickname="formState.propertyDetails.nickname"
+          v-model:country="formState.propertyDetails.country"
+          v-model:address="formState.propertyDetails.address"
+          v-model:address-line-two="formState.propertyDetails.addressLineTwo"
+          v-model:city="formState.propertyDetails.city"
+          v-model:province="formState.propertyDetails.province"
+          v-model:postal-code="formState.propertyDetails.postalCode"
+          :enable-address-complete="enableAddressComplete"
+          default-country-iso2="CA"
+          :address-not-in-b-c="addressNotInBC"
         />
         <BcrosFormSectionPropertyListingDetails
           v-model:listing-details="formState.propertyDetails.listingDetails"
@@ -117,7 +121,7 @@ const validateField = (index: number) => {
       listingURLErrors.value = undefined
     } else {
       const removalIndex = listingURLErrors.value?.findIndex(nonerror => nonerror?.errorIndex === index)
-      if (removalIndex) {
+      if (removalIndex !== -1) {
         listingURLErrors.value?.splice(removalIndex, 1)
       }
     }
@@ -171,9 +175,14 @@ const ownershipTypes: string[] = [
   t('createAccount.propertyForm.coOwn')
 ]
 
+const rentalUnitSpaceTypeOptions = [
+  t('createAccount.propertyForm.entireHome'),
+  t('createAccount.propertyForm.sharedAccommodation')
+]
 const propertyTypeError = ref('')
 const ownershipTypeError = ref('')
 const businessLicenseExpiryDate = ref('')
+const rentalUnitSpaceTypeError = ref('')
 
 const validatePropertyType = () => {
   const parsed = propertyDetailsSchema.safeParse(formState.propertyDetails).error?.errors
@@ -193,6 +202,14 @@ const validateBusinessLicenseExpiryDate = () => {
   businessLicenseExpiryDate.value = error ? error.message : ''
 }
 
+const validateRentalUnitSpaceType = () => {
+  if (!formState.propertyDetails.rentalUnitSpaceType) {
+    rentalUnitSpaceTypeError.value = t('createAccount.propertyForm.rentalUnitSpaceTypeRequired')
+  } else {
+    rentalUnitSpaceTypeError.value = ''
+  }
+}
+
 const form = ref()
 
 watch(form, () => {
@@ -206,7 +223,7 @@ onMounted(() => {
   if (isComplete) {
     validatePropertyType()
     validateOwnershipType()
+    validateRentalUnitSpaceType()
   }
 })
-
 </script>
diff --git a/strr-web/lang/en.json b/strr-web/lang/en.json
@@ -300,6 +300,11 @@
       "ownershipType": "Ownership Type",
       "rentalUnitDetails": "Rental Unit Details",
       "onlineListingDetails": "Online Listing Details",
+      "rentalUnitSpaceType": "What type of space is offered in this rental unit?",
+      "selectrentalUnitSpaceType": "Select the type of space",
+      "entireHome": "Entire home (guests have the entire place to themselves)",
+      "sharedAccommodation": "Shared accommodation (guests rent a bedroom with access to common spaces)",
+      "rentalUnitSpaceTypeRequired": "Type of space is required.",
       "webLinkInfo": "Add the web link for your listing on a short-term rental platform (e.g., airbnb.ca/your_listing123). You can add multiple links if this rental unit is listed on multiple platforms (e.g., Airbnb, VRBO, Expedia, etc.).",
       "rentalUnitAddress": "Rental Unit Address",
       "singleFamilyHome": "Single Family Home",

diff --git a/strr-web/utils/formStateToApi.ts b/strr-web/utils/formStateToApi.ts
@@ -64,13 +64,19 @@ export const formStateToApi = (
   }
 
   const setUnitDetails = () => {
-    const { parcelIdentifier, businessLicense, businessLicenseExpiryDate } = formState.propertyDetails
+    const {
+      parcelIdentifier,
+      businessLicense,
+      businessLicenseExpiryDate,
+      rentalUnitSpaceType
+    } = formState.propertyDetails
 
     formData.registration.unitDetails = {
       parcelIdentifier,
       propertyType,
       ownershipType,
       businessLicense,
+      rentalUnitSpaceType,
       ...(businessLicense ? { businessLicenseExpiryDate } : {}) // include exp date only if business license exists
     }
   }