UI - new hosts step 1 updates

strr-base-web/app/components/connect/form/address/Index.vue

@@ -22,7 +22,9 @@ const props = defineProps<{
   formRef?: Form<any>,
   disabledFields?: AddressField[],
   excludedFields?: AddressField[],
-  locationDescLabel?: boolean
+  // TODO: cleanup below strategies
+  locationDescLabel?: boolean,
+  unitNumbRequired?: boolean
 }>()
 
 const { address: canadaPostAddress, enableAddressComplete } = useCanadaPostAddress()
@@ -174,8 +176,9 @@ const addId = useId()
         :name="schemaPrefix + 'unitNumber'"
         :color="city ? 'primary' : 'gray'"
         :is-disabled="disabledFields?.includes('unitNumber')"
-        :placeholder="$t('label.unitNumberOpt')"
-        :aria-label="$t('label.unitNumberOpt')"
+        :placeholder="unitNumbRequired ? $t('label.unitNumber') : $t('label.unitNumberOpt')"
+        :aria-label="unitNumbRequired ? $t('label.unitNumber') : $t('label.unitNumberOpt')"
+        :aria-required="unitNumbRequired || false"
       />
     </div>
     <!-- street input -->

strr-base-web/app/components/connect/form/date/Input.vue

@@ -9,6 +9,7 @@ const formBus = inject<UseEventBusReturn<any, string> | undefined>('form-events'
 
 const props = defineProps<{
   name: string
+  help?: string,
   initialDate?: Date,
   minDate?: Date,
   maxDate?: Date,
@@ -39,7 +40,7 @@ const updateDate = (val: Date | null) => {
 }
 
 const selectedDateDisplay: ComputedRef<string> = computed(
-  () => selectedDate.value ? dateToString(selectedDate.value, 'YYYY-MM-DD') : ''
+  () => selectedDate.value ? dateToString(selectedDate.value) : ''
 )
 
 const handleManualDateEntry = (input: string) => {
@@ -54,11 +55,14 @@ const handleManualDateEntry = (input: string) => {
 </script>
 
 <template>
-  <UFormGroup
+  <ConnectFormFieldGroup
+    :id="`connect-date-input-grp-${name}`"
     v-slot="{ error }"
     :name="name"
+    :help="help"
   >
     <UInput
+      :id="`connect-date-input-${name}`"
       :ui="{ icon: { trailing: { pointer: '' } } }"
       :model-value="selectedDateDisplay"
       :placeholder="placeholder || ''"
@@ -83,7 +87,7 @@ const handleManualDateEntry = (input: string) => {
           name="i-mdi-calendar"
           :padded="false"
           class="cursor-pointer text-xl"
-          :class="error ? 'text-red-600' : showDatePicker ? 'text-blue-500' : 'text-gray-700'"
+          :class="error ? 'text-red-600' : showDatePicker || selectedDate ? 'text-blue-500' : 'text-gray-700'"
           @click="showDatePicker = true"
         />
       </template>
@@ -98,5 +102,5 @@ const handleManualDateEntry = (input: string) => {
       :set-max-date="maxDate"
       @selected-date="updateDate($event); showDatePicker = false; hasDateChanged = true"
     />
-  </UFormGroup>
+  </ConnectFormFieldGroup>
 </template>

strr-base-web/app/components/connect/form/field/Group.vue

@@ -19,7 +19,8 @@ const props = defineProps({
   isRequired: { type: Boolean, default: false },
   size: { type: String, default: 'lg' },
   ariaLabel: { type: String, default: undefined },
-  type: { type: String, default: 'text' }
+  type: { type: String, default: 'text' },
+  mask: { type: String, default: undefined }
 })
 
 const inputId = useId()
@@ -31,19 +32,22 @@ const errorId = `${props.name}-error-${inputId}`
 <template>
   <UFormGroup :label="label" :name="name">
     <template #default="{ error }">
-      <ConnectFormField
-        :id="id"
-        v-model="model"
-        :type
-        :placeholder="placeholder"
-        :is-disabled="isDisabled"
-        :is-required="isRequired"
-        :is-invalid="error !== undefined"
-        :help-id="helpId"
-        :error-id="errorId"
-        :aria-label="ariaLabel"
-        size="lg"
-      />
+      <slot :error="error">
+        <ConnectFormField
+          :id="id"
+          v-model="model"
+          :mask="mask"
+          :type
+          :placeholder="placeholder"
+          :is-disabled="isDisabled"
+          :is-required="isRequired"
+          :is-invalid="error !== undefined"
+          :help-id="helpId"
+          :error-id="errorId"
+          :aria-label="ariaLabel"
+          size="lg"
+        />
+      </slot>
     </template>
 
     <template v-if="help" #help>

strr-base-web/app/components/connect/form/field/Index.vue

@@ -12,14 +12,18 @@ defineProps({
   helpId: { type: String, default: undefined },
   errorId: { type: String, default: undefined },
   ariaLabel: { type: String, default: undefined },
-  type: { type: String, default: 'text' }
+  type: { type: String, default: 'text' },
+  mask: { type: String, default: undefined }
 })
+
+defineExpose({ model })
 </script>
 
 <template>
   <UInput
     :id="id"
     v-model.trim="model"
+    v-maska:model.unmasked="mask"
     v-bind="$attrs"
     :type
     class="max-w-bcGovInput"

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

@@ -143,6 +143,7 @@ export default {
     streetAdditional: 'Additional Street Address (Optional)',
     streetName: 'Street Name',
     streetNumber: 'Street Number',
+    unitNumber: 'Unit Number',
     unitNumberOpt: 'Unit Number (Optional)',
     country: 'Country',
     line1: 'Address Line 1',
@@ -322,6 +323,7 @@ export default {
   table: {},
   text: {
     completeFilingToDisplay: 'Complete your filing to display',
+    defaultDateFormat: 'YYYY-MM-DD',
     filingsWillAppear: 'Filings that require your attention will appear here',
     notAvailable: 'Not Available',
     notEntered: 'Not Entered',
@@ -354,13 +356,16 @@ export default {
     address: {
       country: 'Please select a country',
       street: 'Please enter a street address',
+      streetName: 'Please enter a street name',
+      streetNumber: 'Please enter a street number',
       city: 'Please enter a city',
       region: 'Please select a region',
       postalCode: 'Please enter a postal code',
       requiredBC: {
         region: 'Please enter a BC address',
         country: 'Please enter a BC, Canada address'
-      }
+      },
+      unitNumber: 'Please enter a unit number'
     },
     brand: {
       name: 'Please enter a brand name',

strr-base-web/app/utils/connect-validation/address.ts

@@ -36,3 +36,25 @@ export const getRequiredBCAddress = (
     .refine(country => country === 'CA', caRequiredMessage),
   locationDescription: optionalOrEmptyString
 })
+
+export const getRequiredBCAddressSplitStreet = (
+  cityMessage: string,
+  regionMessage: string,
+  postalCodeMessage: string,
+  countryMessage: string,
+  bcRequiredMessage: string,
+  caRequiredMessage: string,
+  streetNameMessage: string,
+  streetNumberMessage: string
+) => z.object({
+  streetAdditional: optionalOrEmptyString,
+  city: getRequiredNonEmptyString(cityMessage),
+  region: getRequiredNonEmptyString(regionMessage)
+    .refine(province => province === 'BC', bcRequiredMessage),
+  postalCode: getRequiredNonEmptyString(postalCodeMessage),
+  country: getRequiredNonEmptyString(countryMessage)
+    .refine(country => country === 'CA', caRequiredMessage),
+  locationDescription: optionalOrEmptyString,
+  streetName: getRequiredNonEmptyString(streetNameMessage),
+  streetNumber: getRequiredNonEmptyString(streetNumberMessage)
+})

strr-base-web/app/utils/connect-validation/index.ts

@@ -7,8 +7,7 @@ export * from './name'
 export * from './parcel-identifier'
 export * from './phone'
 export * from './tax-number'
-
-export const httpRegex = /^(https?:\/\/)([\w-]+(\.[\w-]+)+\.?(:\d+)?(\/.*)?)$/i
+export * from './urls'
 
 export const optionalOrEmptyString = z
   .string()
@@ -22,9 +21,6 @@ export const optionalOrEmptyString = z
 
 export const getRequiredNonEmptyString = (message: string) => z.string().refine(e => e.trim() !== '', message)
 
-export const getRequiredUrl = (message: string) =>
-  z.string().refine(e => e.trim() !== '' && httpRegex.test(e), message)
-
 export const checkSpecialCharacters = (input: string | undefined): boolean => {
   return input === undefined || /^[\d\s]*$/.test(input)
 }

strr-base-web/app/utils/connect-validation/urls.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const httpRegex = /^(https?:\/\/)([\w-]+(\.[\w-]+)+\.?(:\d+)?(\/.*)?)$/i
+
+export const getOptionalUrl = (message: string) =>
+  z.string().refine(e => e.trim() === '' || httpRegex.test(e), message)
+
+export const getRequiredUrl = (message: string) =>
+  z.string().refine(e => e.trim() !== '' && httpRegex.test(e), message)

strr-base-web/app/utils/date.ts

@@ -17,19 +17,20 @@ export function dateStringToDate (dateString: string): Date | null {
 }
 
 /** Return the date as a string in the desired format
- * @param date js Date
- * @param format default: YYYY-MM-DDT:HH:mm:ss+-HH:mm
+ * @param date - js Date or ISO datestring
+ * @param format default: YYYY-MM-DD, see format options:
+ * https://moment.github.io/luxon/#/formatting?id=table-of-tokens
 */
-// export function dateToString (date: Date, format?: string) {
-//   return (date) ? moment(date).local().format(format) : ''
-// }
+export function dateToString (date: Date | string, format = 'y-MM-dd') {
+  return DateTime.fromJSDate(new Date(date)).toFormat(format)
+}
 
 /** Convert the date to pacific time and return as a string in the desired format
  * @param {Date | string} date - js Date or ISO datestring
  * @param format default: YYYY-MM-DD, see format options here
  * https://moment.github.io/luxon/#/formatting?id=table-of-tokens
  */
-export function dateToStringPacific (date: Date | string, format = 'D') {
+export function dateToStringPacific (date: Date | string, format = 'y-MM-dd') {
   const locale = useNuxtApp().$i18n.locale.value
   const jsDate = DateTime.fromJSDate(new Date(date), { zone: 'UTC' }) // convert to jsdate, assume UTC timezone
 

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

@@ -5,10 +5,10 @@ import { z } from 'zod'
 const props = defineProps<{ isComplete: boolean }>()
 
 const { t } = useI18n()
-const { propertySchema, addNewEmptyListing, removeListingAtIndex } = useHostPropertyStore()
-const { property } = storeToRefs(useHostPropertyStore())
+const { addNewEmptyListing, removeListingAtIndex } = useHostPropertyStore()
+const { property, isUnitNumberRequired, propertySchema } = storeToRefs(useHostPropertyStore())
 
-const propertyFormRef = ref<Form<z.output<typeof propertySchema>>>()
+const propertyFormRef = ref<Form<z.output<typeof propertySchema.value>>>()
 
 const rentalTypeOptions = [
   { value: RentalUnitType.ENTIRE_HOME, label: t('strr.text.entireHome') },
@@ -174,6 +174,7 @@ onMounted(async () => {
               <ConnectFormFieldGroup
                 id="property-parcel-id"
                 v-model="property.parcelIdentifier"
+                mask="###-###-###"
                 :aria-label="$t('strr.label.parcelIdentifierOpt')"
                 :help="$t('strr.hint.parcelIdentifier')"
                 name="parcelIdentifier"
@@ -187,15 +188,16 @@ onMounted(async () => {
                 name="businessLicense"
                 :placeholder="$t('strr.label.businessLicenseOpt')"
               />
-              <!-- TODO: date picker -->
-              <!-- <ConnectFormFieldGroup
-                id="property-parcel-id"
-                v-model="property.parcelIdentifier"
-                :aria-label="$t('strr.label.parcelIdentifierOpt')"
-                :help="$t('strr.hint.parcelIdentifier')"
-                name="parcelIdentifier"
-                :placeholder="$t('strr.label.parcelIdentifierOpt')"
-              /> -->
+              <ConnectFormDateInput
+                v-if="property.businessLicense"
+                name="businessLicenseExpiryDate"
+                :initial-date="property.businessLicenseExpiryDate
+                  ? dateStringToDate(property.businessLicenseExpiryDate)
+                  : undefined"
+                :help="t('text.defaultDateFormat')"
+                :placeholder="t('strr.label.businessLicenseDate')"
+                @selection="property.businessLicenseExpiryDate = $event ? dateToString($event) : ''"
+              />
             </div>
           </ConnectFormSection>
           <div class="h-px w-full border-b border-gray-100" />
@@ -204,10 +206,12 @@ onMounted(async () => {
             :error="isComplete && hasFormErrors(propertyFormRef, [
               'address.nickname',
               'address.country',
-              'address.street',
               'address.city',
               'address.region',
-              'address.postalCode'
+              'address.postalCode',
+              'address.unitNumber',
+              'address.streetName',
+              'address.streetNumber'
             ])"
           >
             <div class="space-y-5">
@@ -234,6 +238,7 @@ onMounted(async () => {
                 :disabled-fields="['country', 'region']"
                 :excluded-fields="['street']"
                 :form-ref="propertyFormRef"
+                :unit-number-required="isUnitNumberRequired"
               />
             </div>
           </ConnectFormSection>

strr-host-pm-web/app/locales/en-CA.ts

@@ -51,6 +51,7 @@ export default {
     label: {
       addListing: 'Add Another Listing',
       businessLicenseOpt: 'Local Government Business License (Optional)',
+      businessLicenseDate: 'Business Licence Expiry Date',
       host: 'Host',
       listingLinkOpt: 'Listing Link (Optional)',
       numberOfRooms: 'Number of Rooms for Rent',
@@ -185,6 +186,15 @@ export default {
     accountName: {
       required: 'Please enter an account name',
       exists: 'An account with this name already exists'
-    }
+    },
+    businessLicense: 'Please enter a valid business license number',
+    businessLicenseExpiryDate: 'Please select the expiry date for the business license',
+    numberOfRooms: {
+      empty: 'Please specify the number of rooms available for rent',
+      invalidInput: 'Please enter a valid number of rooms (e.g., 5)'
+    },
+    ownershipType: 'Please select the ownership type of this rental unit',
+    parcelIdentifier: 'The parcel identifier must be a nine-digit number',
+    propertyType: 'Please select the property type of this rental unit'
   }
 }