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

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,

ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue

@@ -7,6 +7,25 @@
       <v-col cols="12" sm="10" class="mt-n1">
         <v-form ref="addressForm" name="address-form" v-model="isValidCivicAddress">
           <div class="form__row">
+            <div class="form__row">
+              <v-autocomplete
+                id="country"
+                autocomplete="new-password"
+                :name="Math.random()"
+                filled
+                class="address-country"
+                hide-no-data
+                item-text="name"
+                item-value="code"
+                :items="getCountries(true)"
+                :label="countryLabel"
+                :rules="[...schemaLocal.country]"
+                v-model="addressLocal.country"
+              />
+              <!-- special field to select AddressComplete country, separate from our model field -->
+              <input type="hidden" :id="countryId" :value="country" />
+            </div>
+
             <v-text-field
               autocomplete="new-password"
               :id="streetId"
@@ -40,11 +59,10 @@
               <v-col>
                 <v-select
                   id="region"
-                  label="Province"
+                  :label="provinceStateLabel"
                   class="item address-region"
                   autocomplete="off"
                   filled
-                  hint="Address must be in B.C."
                   persistent-hint
                   :items="provinceOptions"
                   item-text="name"
@@ -85,7 +103,7 @@ export default defineComponent({
       default: () => ({
         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<Object> => {
-        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;
+  }
 }
 </style>

ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue

@@ -216,7 +216,9 @@
                 <span v-if="!!getMhrRegistrationLocation.address.streetAdditional">
                   {{getMhrRegistrationLocation.address.streetAdditional}}<br/>
                 </span>
-                {{ getMhrRegistrationLocation.address.city }} {{ 'BC' }}
+                {{ getMhrRegistrationLocation.address.city }}
+                {{ getMhrRegistrationLocation.address.region }}
+                <br>{{ getCountryName(getMhrRegistrationLocation.address.country) }}
               </p>
               <p v-else>
                 {{ '(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)
     }
   }

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) => {

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<object> => {
+  const getCountries = (naOnly = false): Array<object> => {
     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
   }
   /**

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'

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

ppr-ui/src/views/newMhrRegistration/HomeLocation.vue

@@ -16,7 +16,7 @@
       <h2>Civic Address of the Home</h2>
       <p class="mt-2">
         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.
       </p>
 
       <HomeCivicAddress

ppr-ui/tests/unit/MhrCivicAddress.spec.ts

@@ -59,6 +59,12 @@ describe('mhr home civic address', () => {
     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()