UI - strata hotel application

strr-base-web/app/app.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 export default defineAppConfig({
   ui: {
     strategy: 'merge',
@@ -14,12 +15,14 @@ export default defineAppConfig({
         base: 'file:text-gray-700 file:pt-2'
       },
       color: {
+        gray: {
+          outline: 'bg-gray-100 ring-0 disabled:hover:bg-gray-100 disabled:hover:border-gray-500  hover:bg-gray-200 hover:border-gray-600 focus:border-primary-500 focus:border-b-2 focus:ring-0'
+        },
         red: {
-          outline: 'bg-red-100 ring-0 border-red-600 placeholder-red-600 hover:bg-gray-200 ' +
-            'focus:border-red-600 focus:border-b-2 focus:ring-0'
+          outline: 'bg-red-100 ring-0 border-red-600 placeholder-red-600 focus:border-red-600 focus:border-b-2 focus:ring-0'
         },
         primary: {
-          outline: 'bg-primary-50 ring-0 border-primary-500 hover:bg-gray-200 focus:border-b-2 focus:ring-0'
+          outline: 'bg-primary-50 ring-0 border-primary-500 focus:border-b-2 focus:ring-0'
         }
       }
     },
@@ -28,9 +31,14 @@ export default defineAppConfig({
     },
     select: {
       color: {
+        gray: {
+          outline: 'bg-gray-100 ring-0 disabled:hover:bg-gray-100 hover:bg-gray-200 hover:border-gray-600 focus:border-primary-500 focus:border-b-2 focus:ring-0'
+        },
+        primary: {
+          outline: 'bg-primary-50 ring-0 border-primary-500 disabled:hover:bg-primary-50 focus:border-b-2 focus:ring-0'
+        },
         red: {
-          outline: 'bg-red-100 border-red-600 ring-0 hover:bg-gray-200 ' +
-            'focus:border-red-600 focus:border-b-2 focus:ring-0'
+          outline: 'bg-red-100 border-red-600 ring-0 focus:border-red-600 focus:border-b-2 focus:ring-0'
         }
       }
     },

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Form } from '#ui/types'
+
 const country = defineModel<string>('country')
 const street = defineModel<string>('street')
 const streetAdditional = defineModel<string>('streetAdditional')
@@ -10,20 +12,17 @@ const locationDescription = defineModel<string>('locationDescription')
 type AddressField = 'country' | 'street' | 'streetAdditional' | 'city' |
   'region' | 'postalCode' | 'locationDescription'
 
-const {
-  id,
-  enableAddressComplete,
-  schemaPrefix,
-  disabledFields
-} = defineProps<{
+const props = defineProps<{
   id: string,
-  enableAddressComplete:(id: string, countryIso2: string, countrySelect: boolean) => void,
   schemaPrefix: string,
+  formRef?: Form<any>,
   disabledFields?: AddressField[],
   excludedFields?: AddressField[],
   locationDescLabel?: boolean
 }>()
 
+const { address: canadaPostAddress, enableAddressComplete } = useCanadaPostAddress()
+
 const countries = iscCountriesListSortedByName
 const regions = computed(() => {
   switch (country.value) {
@@ -38,10 +37,49 @@ const regions = computed(() => {
 
 const addressComplete = () => {
   if (typeof country.value === 'string') {
-    enableAddressComplete(id, country.value, !disabledFields?.includes('country'))
+    enableAddressComplete(props.id, country.value, !props.disabledFields?.includes('country'))
   }
 }
 
+watch(canadaPostAddress, (newAddress) => {
+  // automatically populate all non excluded / non disabled fields
+  if (newAddress) {
+    // clear form validation for city/region/postalCode if address is autocompleted
+    if (props.formRef) {
+      props.formRef.clear(`${props.schemaPrefix}country`)
+      props.formRef.clear(`${props.schemaPrefix}city`)
+      props.formRef.clear(`${props.schemaPrefix}region`)
+      props.formRef.clear(`${props.schemaPrefix}postalCode`)
+    }
+    for (const key of Object.keys(newAddress)) {
+      if (
+        !props.disabledFields?.includes(key as AddressField) &&
+        !props.excludedFields?.includes(key as AddressField)
+      ) {
+        switch (key as AddressField) {
+          case 'street':
+            street.value = newAddress.street
+            break
+          case 'streetAdditional':
+            streetAdditional.value = newAddress.streetAdditional
+            break
+          case 'country':
+            country.value = newAddress.country
+            break
+          case 'city':
+            city.value = newAddress.city
+            break
+          case 'region':
+            region.value = newAddress.region
+            break
+          case 'postalCode':
+            postalCode.value = newAddress.postalCode
+        }
+      }
+    }
+  }
+})
+
 const addId = useId()
 </script>
 <template>

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

@@ -3,7 +3,7 @@ import { type UseEventBusReturn } from '@vueuse/core'
 
 const formBus = inject<UseEventBusReturn<any, string> | undefined>('form-events', undefined)
 
-const model = defineModel({ type: String, default: '' })
+const model = defineModel<string | number>()
 watch(model, () => {
   formBus?.emit({ type: 'blur', path: props.name })
   formBus?.emit({ type: 'change', path: props.name })

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { normalizeInput } from '~/utils/connect-validation'
-
-const model = defineModel({ type: String, default: '' })
+const model = defineModel<string | number>()
 
 defineProps({
   id: { type: String, required: true },
@@ -16,16 +14,12 @@ defineProps({
   ariaLabel: { type: String, default: undefined },
   type: { type: String, default: 'text' }
 })
-
-const normalize = () => {
-  model.value = normalizeInput(model.value)
-}
 </script>
 
 <template>
   <UInput
     :id="id"
-    v-model="model"
+    v-model.trim="model"
     v-bind="$attrs"
     :type
     class="max-w-bcGovInput"
@@ -38,7 +32,6 @@ const normalize = () => {
     :aria-invalid="isInvalid"
     :aria-describedby="helpId"
     :aria-label="ariaLabel"
-    @blur="normalize"
   />
   <!-- :aria-errormessage="errorId" -->
   <!-- Doesnt look like aria-errormessage is well supported, need to look into this more -->

strr-base-web/app/composables/useCanadaPost.ts

@@ -13,8 +13,9 @@ export const useCanadaPostAddress = () => {
     locationDescription: ''
   })
 
-  const createAddressComplete = (pca: any, key: string, id: string, countryIso2: string,
-    countrySelect: boolean): object => {
+  const createAddressComplete = (
+    pca: any, key: string, id: string, countryIso2: string, countrySelect: boolean
+  ): object => {
     const fields = [
       { element: id, field: 'Line1', mode: pca.fieldMode.SEARCH }
     ]
@@ -34,7 +35,7 @@ export const useCanadaPostAddress = () => {
     activeAddressField.value = id
     const config = useRuntimeConfig()
     const pca = (window as any).pca
-    const key = config.public.addressCompleteKey
+    const key = config.public.addressCompleteKey as string
     if (!pca || !key) {
       console.warn('AddressComplete not initialized due to missing script and/or key')
       return

strr-base-web/app/composables/useStrrApi.ts

@@ -20,8 +20,8 @@ export const useStrrApi = () => {
     return resp.applications
   }
 
-  const postApplication = async <T extends { registration: ApiBaseRegistration }>(body: T) => {
-    return await $strrApi<T>('/applications', {
+  const postApplication = async <T extends { registration: ApiBaseRegistration }, R extends T>(body: T) => {
+    return await $strrApi<R>('/applications', {
       method: 'POST',
       body
     })

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

@@ -322,6 +322,7 @@ export default {
       last: 'Please enter a last name',
       full: 'Please enter a full legal name'
     },
+    number: 'Please enter a number',
     phone: {
       code: 'Please select a country code',
       number: 'Please enter a phone number'

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

@@ -25,19 +25,6 @@ export const getRequiredNonEmptyString = (message: string) => z.string().refine(
 export const getRequiredUrl = (message: string) =>
   z.string().refine(e => e.trim() !== '' && httpRegex.test(e), message)
 
-/**
- * Normalizes a string.
- * If the input is provided, it removes leading, trailing, and extra spaces within the name.
- * If the input is undefined, it returns an empty string.
- * @param {string | undefined} input - the input to normalize.
- */
-export const normalizeInput = (input?: string): string => {
-  if (input === undefined) {
-    return ''
-  }
-  return input.trim().replace(/\s+/g, ' ')
-}
-
 export const checkSpecialCharacters = (input: string | undefined): boolean => {
   return input === undefined || /^[\d\s]*$/.test(input)
 }

strr-platform-web/app/components/form/platform/BusinessDetails.vue

@@ -66,43 +66,6 @@ watch(() => platformBusiness.value.hasRegOffAtt,
   }
 )
 
-// address stuff
-const {
-  activeAddressField,
-  address: canadaPostAddress,
-  enableAddressComplete
-} = useCanadaPostAddress()
-
-const activeAddressPath = computed(() => {
-  if (activeAddressField.value === 'platform-business-address') {
-    return 'mailingAddress'
-  }
-  return 'regOfficeOrAtt.mailingAddress'
-})
-
-watch(canadaPostAddress, (newAddress) => {
-  if (platformBusinessFormRef.value) {
-    // reset form validation for city/region/postalCode if address is changed
-    platformBusinessFormRef.value.clear(`${activeAddressPath.value}.city`)
-    platformBusinessFormRef.value.clear(`${activeAddressPath.value}.region`)
-    platformBusinessFormRef.value.clear(`${activeAddressPath.value}.postalCode`)
-    if (newAddress && activeAddressPath.value === 'mailingAddress') {
-      platformBusiness.value.mailingAddress.street = newAddress.street
-      platformBusiness.value.mailingAddress.streetAdditional = newAddress.streetAdditional
-      platformBusiness.value.mailingAddress.country = newAddress.country
-      platformBusiness.value.mailingAddress.city = newAddress.city
-      platformBusiness.value.mailingAddress.region = newAddress.region
-      platformBusiness.value.mailingAddress.postalCode = newAddress.postalCode
-    } else if (newAddress) {
-      // NOTE: country and region are not set because they are disabled for regOfficeOrAtt.mailingAddress
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.street = newAddress.street
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.streetAdditional = newAddress.streetAdditional
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.city = newAddress.city
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.postalCode = newAddress.postalCode
-    }
-  }
-})
-
 onMounted(async () => {
   // validate form if step marked as complete
   if (props.isComplete) {
@@ -202,7 +165,7 @@ onMounted(async () => {
               v-model:region="platformBusiness.mailingAddress.region"
               v-model:postal-code="platformBusiness.mailingAddress.postalCode"
               :schema-prefix="'mailingAddress.'"
-              :enable-address-complete="enableAddressComplete"
+              :form-ref="platformBusinessFormRef"
             />
           </div>
         </ConnectFormSection>
@@ -258,8 +221,8 @@ onMounted(async () => {
                 v-model:region="platformBusiness.regOfficeOrAtt.mailingAddress.region"
                 v-model:postal-code="platformBusiness.regOfficeOrAtt.mailingAddress.postalCode"
                 :schema-prefix="'regOfficeOrAtt.mailingAddress.'"
-                :enable-address-complete="enableAddressComplete"
                 :disabled-fields="['country', 'region']"
+                :form-ref="platformBusinessFormRef"
               />
             </div>
           </div>

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

@@ -41,7 +41,6 @@ export default {
       subTitle: {
         brand: 'Platform Brand',
         noticeNonCompliance: 'Notice of Non-Compliance',
-        regOfficeAttSvcAddrress: 'Registered Office or Attorney for Service Address',
         size: 'Platform Size',
         takedownRequest: 'Takedown Request'
       }

strr-platform-web/app/stores/platformApplication.ts

@@ -66,7 +66,7 @@ export const useStrrPlatformApplication = defineStore('strr/platformApplication'
 
     console.info('submitting application: ', body)
 
-    return await postApplication<PlatformApplicationPayload>(body)
+    return await postApplication<PlatformApplicationPayload, PlatformApplicationResp>(body)
   }
 
   return {

strr-platform-web/package.json

@@ -44,6 +44,7 @@
     "@daxiom/nuxt-core-layer-test": "^0.0.10",
     "@vuepic/vue-datepicker": "^9.0.3",
     "country-codes-list": "^1.6.11",
-    "nuxt": "^3.12.3"
+    "nuxt": "^3.12.3",
+    "vue-country-flag-next": "^2.3.2"
   }
 }