Merge pull request #392 from Safelite/feature/CSR-7

Fixed weird formatting / duplicates and added QA var's

azure-pipelines.yml

@@ -121,4 +121,7 @@ stages:
                       __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                       __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
                       __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                    indexDeployVariables:
+                      __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
+                      __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
                     cfDistributionId: $(cfDistributionId)

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

@@ -1,104 +1,33 @@
 <template>
-  <Form
+<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-    @submit="onSubmit"
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
-    @invalid-submit="onInvalidSubmit"
-    ref="theForm"
-    v-slot="{ meta }"
-  >
-    <div
-      class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
-    >
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-      <vehicleBanner
+        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
-        cmsWidgetName="VehicleBannerWidget"
-        :displayGenericVehicleImage="false"
-      />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
         <div class="row my-2">
             <div class="col">
-          <textboxQuestion
+                <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
-            cmsWidgetName="LicensePlateNumber"
-            v-model="licensePlate"
-            isRequired
-            inputId="license_plate"
-            validationRules="license-plate-required"
-          />
             </div>
         </div>
         <div class="row my-2">
             <div class="col">
-          <textboxQuestion
+                <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
-            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
+                <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
-            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
+        <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
-        class="my-3"
-        :manualHeadline="NoServiceZipHeader"
-        :manualCopy="NoServiceZipBody"
-        v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
-        alertClass="alert-danger"
-      />
         <div class="row my-2">
             <div class="col">
-          <textboxQuestion
+                <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
-            v-if="!isRegistrationZipServicable"
-            cmsWidgetName="ServiceZip"
-            v-model="serviceZip"
-            inputId="serviceZip"
-            validationRules="zip-required"
-          />
             </div>
         </div>
-      <alert
+        <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
-        class="my-3"
+        <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
-        cmsWidgetName="NoMatchAlertWidget"
+        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
-        v-if="!isVinValid"
-        alertClass="alert-danger"
-      />
-      <alert
-        class="my-3"
-        :manualHeadline="MatchedDifferentVehicleAlertHeader"
-        :manualCopy="MatchedDifferentVehicleAlertBody"
-        v-if="isCarIdDifferent"
-        alertClass="alert-warning"
-      />
-      <funnelFooter
-        ref="funnelFooter"
-        cmsWidgetName="FunnelFooterWidget"
-        :isForwardActionDisabled="!meta.valid"
-        @back-clicked="backButtonAction"
-        @ForwardClicked="forwardButtonAction"
-      />
     </div>
 </Form>
 </template>
@@ -113,20 +42,38 @@ import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 
 // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
-import { settleAllPromises } from "@/helpers/layout-helper";
+    fetchCmsContentForPage
+} from "@/helpers/cms-content-helper";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
-import { storeActions } from "@/constants/store-actions";
+import {
-import { storeMutations } from "@/constants/store-mutations";
+    storeActions
-import { errorMessages } from "@/constants/error-messages";
+} 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 {
-import { Form, defineRule } from "vee-validate";
+    required,
-import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+    regex
+} from "@/helpers/validation-rules";
+import {
+    Form,
+    defineRule
+} from "vee-validate";
+import {
+    navigateAfterSaveToHeritageFunnel
+} from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule(
@@ -153,12 +100,10 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
         // Settle promises and get results
-    const promiseResultMap = [
+        const promiseResultMap = [{
-      {
             resultKey: "cmsContent",
             promise: cmsContentPromise,
-      },
+        }, ];
-    ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -266,9 +211,9 @@ export default {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
-      const zipValidation = this.serviceZip
+            const zipValidation = this.serviceZip ?
-        ? await this.validateZip(this.serviceZip)
+                await this.validateZip(this.serviceZip) :
-        : await this.validateZip(this.registrationZip);
+                await this.validateZip(this.registrationZip);
             if (!zipValidation.data.isServiceable) {
                 this.$refs.funnelFooter.removeLoader();
                 this.isVinValid = true;
@@ -313,13 +258,9 @@ export default {
             );
 
             const partsData = await baseMixin.methods.dispatchStoreAction(
-        this.storeActions.GET_PARTS_OR_QUESTIONS,
+                this.storeActions.GET_PARTS_OR_QUESTIONS, {
-        {
                     carId: vinLookup.data.vehicle.carId,
-          glassArray:
+                    glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace,
-            this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle
-              ? []
-              : store.getters.damage.glassToReplace,
                     zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
                     vin: vinLookup.data.vin,
                 },
@@ -331,9 +272,9 @@ export default {
             if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
                 this.$router.navigateAfterSave(
                     this.navigationScenarios.CLICKED_FORWARD,
-          this.$route,
+                    this.$route, {}, {
-          {},
+                        displayVehicleChangeAlert: true
-          { displayVehicleChangeAlert: true },
+                    },
                     partsData.data
                 );
                 return;
@@ -349,8 +290,10 @@ export default {
         },
         lookupVin(plate, state) {
             return baseMixin.methods.dispatchStoreAction(
-        storeActions.LOOKUP_VIN_BY_PLATE,
+                storeActions.LOOKUP_VIN_BY_PLATE, {
-        { licensePlate: plate, licenseState: state }
+                    licensePlate: plate,
+                    licenseState: state
+                }
             );
         },
         updateCustomerInfo(vin, vehicleInfo, registrationState) {