Merging from develop

azure-pipelines.yml

@@ -76,7 +76,7 @@ stages:
                         deployFolder: ''
                         region: us-east-1
                     appDeployVariables:
-                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                      __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                       __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                       __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
                     indexDeployVariables:
@@ -92,7 +92,7 @@ stages:
       jobs:
       - deployment: qaBuildDeployment
         displayName: Build and Deploy FMG - QA
-        environment: digitalCloud-qa
+        environment: NoApproval-All
         container: node
         workspace:
           clean: all
@@ -116,7 +116,7 @@ stages:
                         deployFolder: ''
                         region: us-east-1
                     appDeployVariables:
-                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                      __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                       __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                       __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
                     cfDistributionId: $(cfDistributionId)

jest.config.js

@@ -21,13 +21,15 @@ module.exports = {
     "!src/layouts/part-questions/**/*.vue",
     "!src/layouts/reveal/**/*.vue",
     "!src/layouts/estimate/**/*.vue",
-    // REMOVE THESE AFTER WRITING UNIT TESTS 
+    // REMOVE THESE AFTER WRITING UNIT TESTS
     "!src/layouts/address-lookup/address-lookup.vue",
     "!src/layouts/address-lookup/customer-questions/customer-questions.vue",
     "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
-    "!src/common-components/dropdown-question/dropdown-question.vue", 
+    "!src/common-components/dropdown-question/dropdown-question.vue",
-    "!src/common-components/textbox-question/textbox-question.vue", 
+    "!src/common-components/textbox-question/textbox-question.vue",
-    // END  
+    "!src/helpers/validation-rules.js",
+    "!src/helpers/damage-helper.js",
+    // END
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {

src/common-components/textbox-question/textbox-question.vue

@@ -15,7 +15,7 @@
 			autocomplete="off"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
-			@input="handleChange"
+			@change="handleChange"
 			@blur="handleBlur" />
 		<div v-show="errorMessage" class="row mt-2 form-test-error">
 			<span role="alert">{{ errorMessage }}</span>
@@ -110,11 +110,6 @@ export default {
 			}
 		}
 	},
-	watch: {
-		value(newValue) {
-			this.handleChange(newValue);
-		}
-	}
 };
 </script>
 

src/constants/application-config.js

@@ -1,6 +1,6 @@
 
 const applicationConfig = {
-  CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY,
+  CONSUMER_CF_DISTRO: process.env.VUE_APP_CONSUMER_CF_DISTRO,
   GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
   ANALYTICS_SESSION_TIMEOUT_MINUTES: 30,
   SAVED_SESSION_TIMEOUT_DAYS: 45,

src/global-methods.js

@@ -7,10 +7,10 @@ import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
 export default {
   callHttpClient({ method, endpoint, payload, logApiCall = true }) {
     return new Promise((resolve, reject) => {
-      const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
+      const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
       const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
 
-      axios({ method: method, url: apiGatewayUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {} })
+      axios({ method: method, url: cfDistroUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {} })
         .then((response) => {
 
           if (logApiCall) {

src/helpers/damage-helper.js

@@ -24,8 +24,8 @@ export async function isGlassAvailableForCarId(carId){
     for(const option of currentGlassOptions){
       if(!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
         return false;
-      } 
+      }
     }
 
     return true;
-  }
+  }

src/helpers/damage-helper.spec.js

@@ -13,30 +13,4 @@ jest.mock("@/store", () => ({
       const damage = getDamageString();
       expect(damage).toEqual("Windshield")
     });
-  });
+  });
-
-  // describe("damage-helper.js", () => {
-  //   it("Should return false if no mismatches between each array", async () => {
-  //     const updatedOptions = {
-  //       data: {
-  //         windshieldOptions: {availableReplacementOptions: ["windshield"]}
-  //       }
-  //     }
-  //     baseMixin.methods.dispatchStoreAction = jest.fn().mockImplementation(()=> {
-  //       return updatedOptions;
-  //     });
-  //     const misMatch = await isGlassAvailableForCarId();
-  //     expect(misMatch).toEqual(false);
-  //   });
-  // });
-
-  // describe("damage-helper.js", () => {
-  //   it("Should return true if there are any mismatches between arrays", () => {
-  //     const newOptions = {
-  //       windshieldOptions: {availableReplacementOptions: ["window"]}
-  //     }
-  //     const currentOptions = [{location: "Windshield", name: "windshield"}];
-  //     const misMatch = compareGlassOptions(newOptions, currentOptions);
-  //     expect(misMatch).toEqual(true);
-  //   });
-  // });

src/helpers/heritage-integration/navigation-helper.js

@@ -95,7 +95,7 @@ async function getLatestPageForRedirection() {
         if (store.getters.vehicle.vin) {
             return fmgPageValues.LICENSE_PLATE_LOOKUP;
         } else {
-            return fmgPageValues.ESTIMATE;
+            return fmgPageValues.VIN_LOOKUP;
         }
     }
 }
@@ -134,7 +134,7 @@ function overrideYmmsDirectionIfNeeded(toRoute) {
 /* istanbul ignore next */
 function isVinRelatedPage(toRoute) {
     const fmgPageValue = toRoute.query[queryStrings.FMG_PAGE];
-    
+
     return fmgPageValue === fmgPageValues.VIN_LOOKUP ||
         fmgPageValue === fmgPageValues.LICENSE_PLATE_LOOKUP ||
         fmgPageValue === fmgPageValues.ADDRESS_LOOKUP ||

src/helpers/heritage-integration/navigation-helper.spec.js

@@ -283,7 +283,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         const result = await getPageToRouteExistingOrderTo(toRoute, false);
 
         //Assert
-        expect(result).toBe('estimate');
+        expect(result).toBe('vin-lookup');
     });
 
     test("getPageToRouteExistingOrderTo, existing order, should return heritage", async () => {

src/layouts/address-lookup/address-lookup.spec.js1

@@ -118,7 +118,7 @@ describe("address-lookup.vue", () => {
     },
   }) {
     //Mock api responses
-    baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+    baseMixin.methods.dispatchStoreAction = jest.fn();
     const apiResponses = {
       cmsContent: {
         FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -51,7 +51,7 @@ jest.mock("@/store", () => ({
     },
     eventBusItem: jest.fn(),
     damage: {
-      glassToReplace: [] 
+      glassToReplace: []
     },
   },
 }));
@@ -144,4 +144,4 @@ function setupMocks({
   wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
 
   return { wrapper, apiPromise };
-}
+}

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -11,17 +11,17 @@
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" validationRules="license-plate-required"  />
+          <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required"  />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
+          <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" isRequired inputId="zip" mask="#####" validationRules="zip-required" />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
+          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" isRequired inputId="email" validationRules="email-address-required|email-address-format" />
         </div>
       </div>
       <alert
@@ -282,4 +282,4 @@ export default {
     funnelFooter,
   },
 };
-</script>
+</script>

src/layouts/vin-lookup/vin-lookup.vue

@@ -31,10 +31,11 @@
       </div>
       <alert
         class="my-3"
+        :manualHeadline="MatchedDifferentVehicleAlertHeader"
+        :manualCopy="MatchedDifferentVehicleAlertBody"
         v-model="customAlertData"
         v-if="matchedDifferentVehicle"
         alertClass="alert-danger"
-        cmsWidgetName="MatchedDifferentVehicle"
       />
       <alert
         class="my-3"
@@ -45,24 +46,11 @@
       />
       <alert
         class="my-3"
+        :manualHeadline="NoServiceZipHeader"
+        :manualCopy="NoServiceZipBody"
         v-model="customAlertData"
         v-if="noServiceZip"
         alertClass="alert-warning"
-        cmsWidgetName="NoServiceZipWidget"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="vinFound"
-        alertClass="alert-warning"
-        cmsWidgetName="VinFoundWidget"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="vinFoundReadOnly"
-        alertClass="alert-warning"
-        cmsWidgetName="VinFoundReadOnlyWidget"
       />
       <alert
         class="my-3"
@@ -114,8 +102,10 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import { errorMessages } from "@/constants/error-messages";
+import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
 import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
+import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
@@ -159,12 +149,48 @@ export default {
       foundWindshieldAlert: false,
       vinNotFound: false,
       perfectMatchNewVinAlert: false,
-      vin: '',
+      vin: this.getVinFromStore(),
-      zip: '',
+      zip: this.getZipFromStore(),
-      email: '',
+      email: this.getEmailFromStore(),
       customAlertData: {},
+      isCarIdDifferent: false,
+      previouslyEnteredCarId: '',
+      invalidZip: '',
     };
   },
+  computed: {
+    MatchedDifferentVehicleAlertHeader(){
+      let text = this.getCmsContent("MatchedDifferentVehicle",
+      "HeadlineText").replaceAll("{custom:damage}", getDamageString());
+
+      return text;
+    },
+    MatchedDifferentVehicleAlertBody(){
+      let text = this.getCmsContent("MatchedDifferentVehicle",
+        "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}",
+        this.customAlertData?.vehicleInfo?.model);
+
+      return text;
+    },
+    NoServiceZipHeader(){
+      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip);
+
+      return text;
+    },
+    NoServiceZipBody(){
+      return this.getCmsContent("NoServiceZipWidget", "BodyText");
+    },
+    PerfectMatchNewVinAlertHeader() {
+      return this.getCmsContent("PerfectMatchNewVinAlert", "HeadlineText");
+    },
+    PerfectMatchNewVinAlertBody() {
+      return this.getCmsContent("PerfectMatchNewVinAlert", "BodyText").replaceAll("{custom:damage}",
+      getDamageString())
+    },
+    isVinFieldReadOnly(){
+        return this.$store.getters.payment.insuranceCoverage.isVerified;
+    },
+  },
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
@@ -176,6 +202,15 @@ export default {
       store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
+    getEmailFromStore(){
+      return store.getters.order.customer.emailAddress
+    },
+    getVinFromStore(){
+      return store.getters.vehicle.vin
+    },
+    getZipFromStore(){
+      return store.getters.vehicle.registration.zipCode
+    },
     backButtonAction() {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
@@ -187,42 +222,38 @@ export default {
         this.customAlertData.zip = this.zip;
         this.$refs.funnelFooter.removeLoader();
         this.noServiceZip = true;
+        this.invalidZip = this.zip;
         return;
       }
-      const vinLookup = await this.lookupVin(this.vin).catch(() => {
+      const vehicleLookup = await this.lookupVehicle(this.vin).catch(() => {
+        this.vinNotFound = true;
         this.$refs.funnelFooter.removeLoader();
-        this.noMatchAlert = true;
+        this.noServiceZip = false;
         return;
       });
-      if (vinLookup.data.carId !== store.getters.vehicle.carId) {
+      this.isCarIdDifferent = vehicleLookup.data.carId !== store.getters.vehicle.carId;
-        this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
+
+      if (this.isCarIdDifferent && (vehicleLookup.data.carId !== this.previouslyEnteredCarId)) {
+        this.previouslyEnteredCarId = vehicleLookup.data.carId;
+        this.noServiceZip = false;
+        this.customAlertData.vehicleInfo = vehicleLookup.data;
+        this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookup.data.year} ${vehicleLookup.data.make} ${vehicleLookup.data.model}`);
+        this.isVinValid = true;
+        this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId);
         this.$refs.funnelFooter.removeLoader();
-        this.foundWindshieldAlert = true;
+        this.matchedDifferentVehicle = true;
         return;
       }
-      const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
+      this.updateStore(vehicleLookup.data);
-      this.updateStore(carInfo)
+      this.navigateForward();
-      const partsData = await baseMixin.methods.dispatchStoreAction(
-        this.storeActions.GET_PARTS_OR_QUESTIONS,
-        {
-          carId: store.getters.vehicle.carId,
-          glassArray: store.getters.damage.glassToReplace,
-          zipCode: this.zip,
-          vin: vinLookup.vin
-        },
-        false
-      );
-      this.navigateForward(partsData);
     },
-    navigateForward(partsData){
+    navigateForward(){
-        if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){
+        if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
-            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});
             return;
-        } else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) {
-           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
-           return;
         } else {
-            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
+            navigateAfterSaveToHeritageFunnel(this.$route);
+            return;
         }
     },
     validateZip(zip) {
@@ -231,16 +262,16 @@ export default {
         { zip }
       );
     },
-    lookupVin(vin) {
+    lookupVehicle(vin) {
       return baseMixin.methods.dispatchStoreAction(
         storeActions.LOOKUP_VEHICLE_BY_VIN,
         { vin }
       );
     },
     updateStore(carInfo) {
-      // if(vehicleDamage){
+      if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
-      //     store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+          store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-      // }
+      }
       store.commit(storeMutations.UPDATE_VEHICLE_VIN, this.vin);
       store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
       store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
@@ -250,16 +281,11 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
       store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
       store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageVifNumber);
       store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
       store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
     },
   },
-  computed: {
-      isVinFieldReadOnly(){
-          return this.$store.getters.payment.insuranceCoverage.isVerified;
-      }
-  },
   components: {
     Form,
     funnelHeader,

src/mixins/base-mixin.spec.js

@@ -6,7 +6,7 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import store from "@/store";
 
 describe("baseMixin.js", () => {
-  test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
+  test("dispatchStoreAction: calls dispatch with type and payload", () => {
     const mixIn = getMixInInstance({});
     const type = "";
     const payload = {};
@@ -16,7 +16,7 @@ describe("baseMixin.js", () => {
     expect(store.dispatch).toBeCalledWith(type, payload);
   });
 
-  test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
+  test("dispatchStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
     const mixIn = getMixInInstance({});
     const type = "";
     const payload = { make: "Alfa Romeo/Chrysler" };

src/router/router-constants/routing-table.js

@@ -67,7 +67,7 @@ const routingTable = [
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
       },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS,
@@ -124,6 +124,10 @@ const routingTable = [
         scenario: navigationScenarios.VIN_LOOKUP,
         destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
       },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+      }
     ],
   },
   {

src/store/index.js

@@ -147,14 +147,14 @@ export const mutations = {
   updateServiceLocationZip(state, serviceLocationZip){
     state.order.serviceLocation.zip = serviceLocationZip;
   },
-  updateRegistrationCity(state, registrationCity){
+  updateRegistrationCity(state, serviceCity){
-    state.order.vehicle.registration.city = registrationCity;
+    state.order.serviceLocation.city = serviceCity;
   },
   updateRegistrationFirstName(state, firstName){
-    state.order.vehicle.registration.firstName = firstName;
+    state.order.serviceLocation.firstName = firstName;
   },
   updateRegistrationLastName(state, lastName){
-    state.order.vehicle.registration.lastName = lastName;
+    state.order.serviceLocation.lastName = lastName;
   },
   updateCustomerEmailAddress(state, customerEmailAddress){
     state.order.customer.emailAddress = customerEmailAddress;
@@ -303,13 +303,13 @@ export const actions = {
       method: endpoints.LookupVinByAddress.method,
       endpoint: endpoints.LookupVinByAddress.url,
       payload: {
-        licenseLastName: licenseLastName, 
+        licenseLastName: licenseLastName,
         licenseStreetAddress: licenseStreetAddress,
         licenseZip: licenseZip,
         licenseState: licenseState
       },
     });
-  },  
+  },
   getVehicleMakes(context, { year }) {
     return globalMethods.callHttpClient({
       method: endpoints.GetVehicleMakes.method,
@@ -466,7 +466,7 @@ export const actions = {
       payload: {}
     });
   },
-  
+
 
   // Parts API Actions
   getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {

vue.config.js

@@ -1,4 +1,4 @@
-process.env.VUE_APP_CONSUMER_API_GATEWAY =
+process.env.VUE_APP_CONSUMER_CF_DISTRO =
   "https://consumerapidev.safelite.com";
 process.env.VUE_APP_HERITAGE_FUNNEL =
   "http://localhost:38000/default.aspx";

vue.release.config.js

@@ -1,4 +1,4 @@
-process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__";
+process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__";
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
 process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";