24067 address updates + small tweaks (#241)

* Platform UI - address update / fee label change Signed-off-by: Kial Jinnah <[email protected]> * revert bus num label change Signed-off-by: Kial Jinnah <[email protected]> * PR comments Signed-off-by: Kial Jinnah <[email protected]> --------- Signed-off-by: Kial Jinnah <[email protected]>
bcgov · Oct 30, 2024 · 5b7f75f · 5b7f75f
1 parent 1f9b405
commit 5b7f75f
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 53 deletions.
diff --git a/strr-platform-web/app/components/connect/form/address/Display.vue b/strr-platform-web/app/components/connect/form/address/Display.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-const props = defineProps<{ address: Partial<ConnectAddress> }>()
+const props = defineProps<{
+  address: Partial<ConnectAddress>,
+  useLocationDescLabel?: boolean
+}>()
 const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
 
 const addressData = computed((): string[] => {
@@ -24,7 +27,7 @@ const addressData = computed((): string[] => {
       v-if="address.locationDescription"
       class="mt-2"
       :content="address.locationDescription"
-      title="Location Description"
+      :title="useLocationDescLabel ? $t('label.locationDescription') : $t('label.deliveryInstructions')"
       data-testid="location-description"
     />
   </div>

diff --git a/strr-platform-web/app/components/connect/form/address/Index.vue b/strr-platform-web/app/components/connect/form/address/Index.vue
@@ -7,18 +7,23 @@ const region = defineModel<string>('region')
 const postalCode = defineModel<string>('postalCode')
 const locationDescription = defineModel<string>('locationDescription')
 
+type AddressField = 'country' | 'street' | 'streetAdditional' | 'city' |
+  'region' | 'postalCode' | 'locationDescription'
+
 const {
   id,
   enableAddressComplete,
-  schemaPrefix
+  schemaPrefix,
+  disabledFields
 } = defineProps<{
   id: string,
   enableAddressComplete:(id: string, countryIso2: string, countrySelect: boolean) => void,
-  schemaPrefix: string
+  schemaPrefix: string,
+  disabledFields?: AddressField[],
+  excludedFields?: AddressField[],
+  locationDescLabel?: boolean
 }>()
 
-defineEmits<{ setId: [id: string] }>()
-
 const countries = iscCountriesListSortedByName
 const regions = computed(() => {
   switch (country.value) {
@@ -33,23 +38,28 @@ const regions = computed(() => {
 
 const addressComplete = () => {
   if (typeof country.value === 'string') {
-    enableAddressComplete(id, country.value, true)
+    enableAddressComplete(id, country.value, !disabledFields?.includes('country'))
   }
 }
 
 const addId = useId()
 </script>
 <template>
-  <div data-testid="form-section-mailing" class="space-y-3">
+  <div class="space-y-3">
     <!-- country menu -->
-    <UFormGroup :name="schemaPrefix + 'country'" class="grow">
+    <UFormGroup
+      v-if="!excludedFields?.includes('country')"
+      :name="schemaPrefix + 'country'"
+      class="grow"
+    >
       <template #default="{ error }">
         <USelectMenu
           v-model="country"
           value-attribute="alpha_2"
           class="w-full"
           size="lg"
           :color="country ? 'primary' : 'gray'"
+          :disabled="disabledFields?.includes('country')"
           :placeholder="$t('label.country')"
           :aria-label="$t('label.country')"
           :options="countries"
@@ -69,18 +79,23 @@ const addId = useId()
       </template>
     </UFormGroup>
     <!-- street input -->
-    <UFormGroup :name="schemaPrefix + 'street'" class="grow">
+    <UFormGroup
+      v-if="!excludedFields?.includes('street')"
+      :name="schemaPrefix + 'street'"
+      class="grow"
+    >
       <template #default="{ error }">
         <UInput
           :id="id"
           v-model="street"
           size="lg"
           :color="street ? 'primary' : 'gray'"
-          :aria-label="$t('label.street')"
-          :placeholder="$t('label.street')"
+          :aria-label="$t('label.line1')"
+          :placeholder="$t('label.line1')"
           :aria-required="true"
           :aria-invalid="error !== undefined"
           :aria-describedby="schemaPrefix + 'street-' + addId"
+          :disabled="disabledFields?.includes('street')"
           @keypress.once="addressComplete()"
           @click="addressComplete()"
         />
@@ -98,36 +113,47 @@ const addId = useId()
       </template>
     </UFormGroup>
     <!-- street line 2 -->
-    <UFormGroup :name="schemaPrefix + 'streetAdditional'" class="grow">
+    <UFormGroup
+      v-if="!excludedFields?.includes('streetAdditional')"
+      :name="schemaPrefix + 'streetAdditional'"
+      class="grow"
+    >
       <UInput
         v-model="streetAdditional"
         size="lg"
         :color="streetAdditional ? 'primary' : 'gray'"
-        :placeholder="$t('label.streetAdditional')"
-        :aria-label="$t('label.streetAdditional')"
+        :placeholder="$t('label.line2')"
+        :aria-label="$t('label.lin2')"
+        :disabled="disabledFields?.includes('streetAdditional')"
       />
     </UFormGroup>
     <div class="flex flex-col gap-3 sm:flex-row">
       <!-- city input -->
       <ConnectFormFieldGroup
+        v-if="!excludedFields?.includes('city')"
         :id="schemaPrefix + 'city'"
         v-model="city"
         class="w-full grow"
         :name="schemaPrefix + 'city'"
         :color="city ? 'primary' : 'gray'"
-        :placeholder="$t('createAccount.contactForm.city')"
-        :aria-label="$t('createAccount.contactForm.city')"
+        :is-disabled="disabledFields?.includes('city')"
+        :placeholder="$t('label.city')"
+        :aria-label="$t('label.city')"
         :is-required="true"
       />
       <!-- region input/menu -->
-      <UFormGroup :name="schemaPrefix + 'region'" class="w-full grow">
+      <UFormGroup
+        v-if="!excludedFields?.includes('region')"
+        :name="schemaPrefix + 'region'"
+        class="w-full grow"
+      >
         <template #default="{ error }">
           <USelectMenu
             v-if="country === 'US' || country === 'CA'"
             v-model="region"
             :options="regions"
-            :placeholder="country === 'CA' ? $t('createAccount.contactForm.province') : $t('label.state')"
-            :aria-label="country === 'CA' ? $t('createAccount.contactForm.province') : $t('label.state')"
+            :placeholder="country === 'CA' ? $t('label.province') : $t('label.state')"
+            :aria-label="country === 'CA' ? $t('label.province') : $t('label.state')"
             size="lg"
             :color="region ? 'primary' : 'gray'"
             option-attribute="name"
@@ -137,6 +163,7 @@ const addId = useId()
             :aria-required="true"
             :aria-invalid="error !== undefined"
             :aria-describedby="schemaPrefix + 'region-' + addId"
+            :disabled="disabledFields?.includes('region')"
           />
           <UInput
             v-else
@@ -149,6 +176,7 @@ const addId = useId()
             :aria-required="true"
             :aria-invalid="error !== undefined"
             :aria-describedby="schemaPrefix + 'region-' + addId"
+            :disabled="disabledFields?.includes('region')"
           />
         </template>
 
@@ -160,24 +188,34 @@ const addId = useId()
       </UFormGroup>
       <!-- postal code input -->
       <ConnectFormFieldGroup
+        v-if="!excludedFields?.includes('postalCode')"
         :id="schemaPrefix + 'postalCode'"
         v-model="postalCode"
         class="w-full grow"
         :name="schemaPrefix + 'postalCode'"
         :color="postalCode ? 'primary' : 'gray'"
+        :is-disabled="disabledFields?.includes('postalCode')"
         :placeholder="country === 'CA' ?
           $t('createAccount.contactForm.postalCode') : country === 'US' ? 'Zip Code' : 'Code'"
         :aria-label="$t('createAccount.contactForm.postalCode')"
         :is-required="true"
       />
     </div>
     <!-- delivery details input -->
-    <UFormGroup :name="schemaPrefix + 'locationDescription'">
+    <UFormGroup
+      v-if="!excludedFields?.includes('locationDescription')"
+      :name="schemaPrefix + 'locationDescription'"
+    >
       <UTextarea
         v-model="locationDescription"
-        :placeholder="$t('label.locationDescription')"
-        :aria-label="$t('label.locationDescription')"
+        :placeholder="locationDescLabel
+          ? $t('label.locationDescriptionOpt')
+          : $t('label.deliveryInstructionsOpt')"
+        :aria-label="locationDescLabel
+          ? $t('label.locationDescriptionOpt')
+          : $t('label.deliveryInstructionsOpt')"
         :color="locationDescription ? 'primary' : 'gray'"
+        :disabled="disabledFields?.includes('locationDescription')"
         class="w-full"
         data-testid="address-location-description"
       />

diff --git a/strr-platform-web/app/components/form/host/Contact.vue b/strr-platform-web/app/components/form/host/Contact.vue
@@ -105,7 +105,6 @@ watch(secondForm, () => {
               v-model:city="primaryContact.address.city"
               v-model:region="primaryContact.address.region"
               v-model:postal-code="primaryContact.address.postalCode"
-              v-model:location-description="primaryContact.address.locationDescription"
               :schema-prefix="'address.'"
               :enable-address-complete="enableAddressComplete"
             />
@@ -183,7 +182,6 @@ watch(secondForm, () => {
               v-model:city="secondaryContact.address.city"
               v-model:region="secondaryContact.address.region"
               v-model:postal-code="secondaryContact.address.postalCode"
-              v-model:location-description="secondaryContact.address.locationDescription"
               :schema-prefix="'address.'"
               :enable-address-complete="enableAddressComplete"
             />

diff --git a/strr-platform-web/app/components/form/platform/BusinessDetails.vue b/strr-platform-web/app/components/form/platform/BusinessDetails.vue
@@ -38,14 +38,17 @@ watch(() => platformBusiness.value.regOfficeOrAtt.sameAsMailAddress,
 
 watch(() => platformBusiness.value.hasRegOffAtt,
   (newVal, oldVal) => {
-  // reset regOfficeOrAtt if hasRegOffAtt radio set to false
+    // reset regOfficeOrAtt if hasRegOffAtt radio set to false
     if (!newVal) {
       platformBusiness.value.regOfficeOrAtt.attorneyName = ''
       platformBusiness.value.regOfficeOrAtt.sameAsMailAddress = false
       Object.keys(platformBusiness.value.regOfficeOrAtt.mailingAddress).forEach((key) => {
-      // @ts-expect-error - ts doesnt recognize key type
+        // @ts-expect-error - ts doesnt recognize key type
         platformBusiness.value.regOfficeOrAtt.mailingAddress[key] = ''
       })
+    } else {
+      platformBusiness.value.regOfficeOrAtt.mailingAddress.country = 'CA'
+      platformBusiness.value.regOfficeOrAtt.mailingAddress.region = 'BC'
     }
 
     // revalidate fields to update/remove form errors if user clicks yes or no
@@ -91,11 +94,10 @@ watch(canadaPostAddress, (newAddress) => {
       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.country = newAddress.country
       platformBusiness.value.regOfficeOrAtt.mailingAddress.city = newAddress.city
-      platformBusiness.value.regOfficeOrAtt.mailingAddress.region = newAddress.region
       platformBusiness.value.regOfficeOrAtt.mailingAddress.postalCode = newAddress.postalCode
     }
   }
@@ -199,7 +201,6 @@ onMounted(async () => {
               v-model:city="platformBusiness.mailingAddress.city"
               v-model:region="platformBusiness.mailingAddress.region"
               v-model:postal-code="platformBusiness.mailingAddress.postalCode"
-              v-model:location-description="platformBusiness.mailingAddress.locationDescription"
               :schema-prefix="'mailingAddress.'"
               :enable-address-complete="enableAddressComplete"
             />
@@ -256,9 +257,9 @@ onMounted(async () => {
                 v-model:city="platformBusiness.regOfficeOrAtt.mailingAddress.city"
                 v-model:region="platformBusiness.regOfficeOrAtt.mailingAddress.region"
                 v-model:postal-code="platformBusiness.regOfficeOrAtt.mailingAddress.postalCode"
-                v-model:location-description="platformBusiness.regOfficeOrAtt.mailingAddress.locationDescription"
                 :schema-prefix="'regOfficeOrAtt.mailingAddress.'"
                 :enable-address-complete="enableAddressComplete"
+                :disabled-fields="['country', 'region']"
               />
             </div>
           </div>

diff --git a/strr-platform-web/app/locales/en-CA.ts b/strr-platform-web/app/locales/en-CA.ts
@@ -109,8 +109,12 @@ export default {
     city: 'City',
     region: 'Region',
     regionOpt: 'Region (Optional)',
+    province: 'Province',
     postalCode: 'Postal Code',
-    locationDescription: 'Location Description (Optional)',
+    deliveryInstructions: 'Delivery Instructions',
+    deliveryInstructionsOpt: 'Delivery Instructions (Optional)',
+    locationDescription: 'Location Description',
+    locationDescriptionOpt: 'Location Description (Optional)',
     countryOfCitizenship: {
       citizen: 'Citizen of Canada',
       pr: 'Permanent resident of Canada',
@@ -238,9 +242,9 @@ export default {
     serviceFees: 'Service Fee',
     itemLabels: {
       BCANN: 'BC Annual Report',
-      PLATREG_SM: 'Platform Registration Fee',
-      PLATREG_LG: 'Platform Registration Fee',
-      PLATREG_WV: 'Platform Registration Fee',
+      PLATREG_SM: 'Platform Application Fee',
+      PLATREG_LG: 'Platform Application Fee',
+      PLATREG_WV: 'Platform Application Fee',
       REGSIGIN: 'Significant Individual Change',
       RENTAL_FEE: 'Registration Fee',
       PLACEHOLDER: 'Placeholder (Replace Me)', // each project using the connect fee widget should change the placeholder filingTypeCode

diff --git a/strr-platform-web/app/pages/platform/dashboard.vue b/strr-platform-web/app/pages/platform/dashboard.vue
@@ -12,15 +12,13 @@ const addresses = ref<ConnectAccordionItem[]>([])
 const representatives = ref<ConnectAccordionItem[]>([])
 
 onMounted(async () => {
-  // TODO: break this onMounted logic out into dashboard helper utils
   loading.value = true
   await loadPlatform()
-  await new Promise((resolve) => { setTimeout(resolve, 1000) })
   // set header stuff
   if (!activePlatform.value || !showPlatformDetails.value) {
     // no registration or valid complete application under the account, set static header
     title.value = t('platform.title.dashboard')
-    todos.value = [getTodoApplication(t)]
+    todos.value = [getTodoApplication()]
   } else {
     // existing registration or application under the account
     // set left side of header
@@ -30,15 +28,15 @@ onMounted(async () => {
       t(`platform.label.listingSize.${platformDetails.value.listingSize}`)
     ]
     if (!isRegistration.value) {
-      setApplicaitonHeaderDetails(t)
+      setApplicationHeaderDetails()
     } else {
-      setRegistrationHeaderDetails(t)
+      setRegistrationHeaderDetails()
     }
-    setSideHeaderDetails(t)
+    setSideHeaderDetails()
     // set sidebar accordian addresses
-    addresses.value = getDashboardAddresses(t)
+    addresses.value = getDashboardAddresses()
     // set sidebar accordian reps
-    representatives.value = getDashboardRepresentives(t)
+    representatives.value = getDashboardRepresentives()
     // update breadcrumbs with platform business name
     setBreadcrumbs([
       { label: t('label.bcregDash'), to: useRuntimeConfig().public.registryHomeURL + 'dashboard' },