From 701c96e167182a7b3d0718650944d5a9d46e4821 Mon Sep 17 00:00:00 2001 From: CameronEYDS <53542131+cameron-eyds@users.noreply.github.com> Date: Fri, 21 Jul 2023 11:23:43 -0700 Subject: [PATCH] Civic Address Country and Regions (#1443) * ongoing country update * Implements Civic Address Country and Regions * Reverted FF's * Civic UX * Wys Fix * Make/Model bug fix * update submission --- .../generalCollateral/GenColAmend.vue | 18 +++--- .../HomeLocation/HomeCivicAddress.vue | 64 +++++++++++++++---- .../ReviewConfirm/HomeLocationReview.vue | 8 ++- .../YourHome/ManufacturerMakeModel.vue | 4 +- .../factories/countries-provinces-factory.ts | 12 ++-- .../mhrRegistration/useNewMhrRegistration.ts | 3 - ppr-ui/src/schemas/civic-address.ts | 3 +- .../views/newMhrRegistration/HomeLocation.vue | 2 +- ppr-ui/tests/unit/MhrCivicAddress.spec.ts | 6 ++ 9 files changed, 84 insertions(+), 36 deletions(-) diff --git a/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue b/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue index 546581e17..d1d790759 100644 --- a/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue +++ b/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue @@ -106,8 +106,8 @@ import { defineComponent, reactive, toRefs, - onMounted, - computed + computed, + watch } from 'vue-demi' import { useStore } from '@/store/store' // import the component and the necessary extensions @@ -180,8 +180,8 @@ export default defineComponent({ ] const localState = reactive({ - delDesc: (getGeneralCollateral?.value && getGeneralCollateral.value[1]?.descriptionDelete) || '', - addDesc: (getGeneralCollateral?.value && getGeneralCollateral.value[1]?.descriptionAdd) || '', + delDesc: '', + addDesc: '', generalCollateral: computed((): GeneralCollateralIF[] => { return (getGeneralCollateral.value as GeneralCollateralIF[]) || [] }), @@ -247,15 +247,15 @@ export default defineComponent({ emit('closeGenColAmend', true) } - onMounted(() => { - const gc = localState.generalCollateral + /** Called when general collateral updates */ + watch(() => localState.generalCollateral, async (gc: GeneralCollateralIF[]) => { if (gc.length > 0) { if (gc[gc.length - 1].addedDateTime === undefined) { - localState.addDesc = gc[gc.length - 1].descriptionAdd - localState.delDesc = gc[gc.length - 1].descriptionDelete + localState.addDesc = gc[gc.length - 1].descriptionAdd || '' + localState.delDesc = gc[gc.length - 1].descriptionDelete || '' } } - }) + }, { deep: true, immediate: true }) return { isTiptapEnabled, diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue index 6de33aa01..36197cc55 100644 --- a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue +++ b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue @@ -7,6 +7,25 @@
+
+ + + +
+ ({ street: '', city: '', - region: 'BC', + region: '', postalCode: '', country: '', deliveryInstructions: '' @@ -117,8 +135,18 @@ export default defineComponent({ const localState = reactive({ isValidCivicAddress: false, + provinceStateLabel: computed((): string => { + switch (addressLocal.value.country) { + case 'CA': + return 'Province' + case 'US': + return 'State' + default: + return 'Province/State' + } + }), provinceOptions: computed((): Array => { - return countryProvincesHelpers.getCountryRegions('CA', true).map((region: any) => { + return countryProvincesHelpers.getCountryRegions(addressLocal.value.country, true).map((region: any) => { return { name: region.name, value: region.short @@ -134,19 +162,25 @@ export default defineComponent({ } /** Apply local model updates to store. **/ - watch(() => addressLocal.value.street, async () => { - // Set civic address data to store - await setCivicAddress({ key: 'street', value: addressLocal.value.street }) + watch(() => addressLocal.value.country, async (country: string) => { + // Clear fields when country changes + addressLocal.value.street = '' + addressLocal.value.city = '' + addressLocal.value.region = '' + + await setCivicAddress({ key: 'country', value: country }) }) - watch(() => addressLocal.value.city, async () => { - // Set civic address data to store - await setCivicAddress({ key: 'city', value: addressLocal.value.city }) + watch(() => addressLocal.value.street, async (street: string) => { + await setCivicAddress({ key: 'street', value: street }) }) - watch(() => addressLocal.value.region, async () => { - // Set civic address data to store - await setCivicAddress({ key: 'region', value: addressLocal.value.region }) + watch(() => addressLocal.value.city, async (city: string) => { + await setCivicAddress({ key: 'city', value: city }) + }) + + watch(() => addressLocal.value.region, async (region: string) => { + await setCivicAddress({ key: 'region', value: region }) }) watch(() => localState.isValidCivicAddress, async (val: boolean) => { @@ -167,6 +201,7 @@ export default defineComponent({ enableAddressComplete, ...labels, ...uniqueIds, + ...countryProvincesHelpers, ...toRefs(localState) } } @@ -185,5 +220,8 @@ export default defineComponent({ .v-text-field.v-text-field--enclosed .v-text-field__details { margin-bottom: 0; } + .v-list .v-list-item--active { + background-color: $blueSelected!important; + } } diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue index c24a115c8..242f20927 100644 --- a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue +++ b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue @@ -216,7 +216,9 @@ {{getMhrRegistrationLocation.address.streetAdditional}}
 - {{ getMhrRegistrationLocation.address.city }} {{ 'BC' }} + {{ getMhrRegistrationLocation.address.city }} + {{ getMhrRegistrationLocation.address.region }} +
{{ getCountryName(getMhrRegistrationLocation.address.country) }}

{{ '(Not Entered)' }} @@ -258,10 +260,10 @@ import { HomeLocationTypes, RouteNames } from '@/enums' import { useStore } from '@/store/store' import { useMhrValidations } from '@/composables' import { storeToRefs } from 'pinia' +import { useCountriesProvinces } from '@/composables/address/factories' export default defineComponent({ name: 'HomeLocationReview', - components: {}, props: { isTransferReview: { type: Boolean, @@ -281,6 +283,7 @@ export default defineComponent({ MhrSectVal, getStepValidation } = useMhrValidations(toRefs(getMhrRegistrationValidationModel.value)) + const countryProvincesHelpers = useCountriesProvinces() const localState = reactive({ includesPid: computed((): boolean => { @@ -342,6 +345,7 @@ export default defineComponent({ getMhrRegistrationLocation, getIsManualLocation, isMhrManufacturerRegistration, + ...countryProvincesHelpers, ...toRefs(localState) } } diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue index 98b9e85b6..524f47199 100644 --- a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue +++ b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue @@ -164,8 +164,8 @@ export default defineComponent({ const localState = reactive({ makeModelValid: false, manufacturerName: getMhrRegistrationManufacturerName.value, - make: getMhrRegistrationHomeMake.value, - model: getMhrRegistrationHomeModel.value + make: getMhrRegistrationHomeMake.value || '', + model: getMhrRegistrationHomeModel.value || '' }) watch(() => localState.manufacturerName, (val: string) => { diff --git a/ppr-ui/src/composables/address/factories/countries-provinces-factory.ts b/ppr-ui/src/composables/address/factories/countries-provinces-factory.ts index f92fb5bd2..332532376 100644 --- a/ppr-ui/src/composables/address/factories/countries-provinces-factory.ts +++ b/ppr-ui/src/composables/address/factories/countries-provinces-factory.ts @@ -20,13 +20,15 @@ export function useCountriesProvinces () { * Helper function to return a list of countries. * @returns An array of country objects, sorted alphabetically. */ - const getCountries = (): Array => { + const getCountries = (naOnly = false): Array => { let countries = [] countries.push({ code: 'CA', name: 'Canada' }) - countries.push({ code: 'US', name: 'United States of America' }) - // name is set this way to ensure the divider is there in the search when CA/US are not the only options - countries.push({ code: '0', name: 'Can.nada. United States .Of.America', divider: true }) - countries = countries.concat(window['countries']) + countries.push({ code: 'US', name: 'United States' }) + if (!naOnly) { + // name is set this way to ensure the divider is there in the search when CA/US are not the only options + countries.push({ code: '0', name: 'Can.nada. United States .Of.America', divider: true }) + countries = countries.concat(window['countries']) + } return countries } /** diff --git a/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts b/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts index 9fb505546..424d16fc5 100644 --- a/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts +++ b/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts @@ -251,9 +251,6 @@ export const useNewMhrRegistration = () => { const parseLocation = (): MhrRegistrationHomeLocationIF => { const location: MhrRegistrationHomeLocationIF = cleanEmpty(getMhrRegistrationLocation.value) - // location is always in BC - location.address.country = 'CA' - location.address.region = 'BC' // Work around require to satisfy schema validations. Currently, not collected by UI. if (!location.address.postalCode) location.address.postalCode = 'A1A 1A1' diff --git a/ppr-ui/src/schemas/civic-address.ts b/ppr-ui/src/schemas/civic-address.ts index 2bae5e8a5..2ad4fe42e 100644 --- a/ppr-ui/src/schemas/civic-address.ts +++ b/ppr-ui/src/schemas/civic-address.ts @@ -18,10 +18,11 @@ export const CivicAddressSchema = { ...spaceRules ], country: [ + baseRules[ValidationRule.REQUIRED], + ...spaceRules ], region: [ baseRules[ValidationRule.REQUIRED], - baseRules[ValidationRule.BC], ...spaceRules ], /* NOTE: Canada/US postal code and zip code regex rules diff --git a/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue b/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue index d1b7057f1..407ebe34b 100644 --- a/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue +++ b/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue @@ -16,7 +16,7 @@

Civic Address of the Home

Enter the Street Address (Number and Name) and City of the location of the home. Street Address must be entered - if there is one. The home must be located in B.C. + if there is one.

{ await nextTick() expect(civicAddressSection.findAll(ERROR_MSG).length).toBe(0) + const country = civicAddressSection.find('#country') + country.setValue('Canada') + await nextTick() + await nextTick() + expect(civicAddressSection.findAll(ERROR_MSG).length).toBe(0) + const city = civicAddressSection.find('#city') city.setValue('Vancouver') await nextTick()