Merge pull request #393 from Safelite/CSR-101-code-review-updates

Csr 101 code review updates
2022-05-05 11:21:29 -04:00 · 2022-05-05 11:21:29 -04:00 · 27b9ed72e8
commit 27b9ed72e8
parent ae3fbf1c91 aaf70410e2
5 changed files with 145 additions and 112 deletions
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@ -57,8 +57,13 @@ export default {
 		const fieldOptions = {
 			type: "text",
 			value: props.modelValue,
+			potentialInitialValue: props.modelValue,
 		};

+		if (props.modelValue && props.modelValue.length > 0) {
+      fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
+    }
+
 		const {
 			errorMessage,
 			handleBlur,
@ -98,10 +103,10 @@ export default {
 					words.forEach(function (word) {
 						const position = 1;
 						word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
-						questionText += `${word} `;					
-					});	
-					
-					questionText = questionText.trimEnd(); 
+						questionText += `${word} `;
+					});
+
+					questionText = questionText.trimEnd();
 				} else {
 					questionText = this.questionText.toString();
 				}
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@ -1,35 +1,91 @@
 <template>
-<Form @submit="onSubmit" @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 cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
-        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
-            </div>
+  <Form
+    @submit="onSubmit"
+    @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
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
+      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion
+            cmsWidgetName="LicensePlateNumber"
+            v-model="licensePlate"
+            isRequired
+            inputId="license_plate"
+            validationRules="license-plate-required"
+          />
        </div>
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
-            </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion
+            cmsWidgetName="RegistrationZip"
+            v-model="registrationZip"
+            inputId="zip"
+            mask="#####"
+            validationRules="zip-required"
+          />
        </div>
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
-            </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"
+          />
        </div>
-        <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
-        <div class="row my-2">
-            <div class="col">
-                <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
-            </div>
+      </div>
+      <alert
+        class="my-3"
+        :manualHeadline="NoServiceZipHeader"
+        :manualCopy="NoServiceZipBody"
+        v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
+        alertClass="alert-danger"
+      />
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion
+            v-if="!isRegistrationZipServicable"
+            cmsWidgetName="ServiceZip"
+            v-model="serviceZip"
+            inputId="serviceZip"
+            validationRules="zip-required"
+          />
        </div>
-        <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" 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>
+      <alert
+        class="my-3"
+        cmsWidgetName="NoMatchAlertWidget"
+        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>
+  </Form>
 </template>

 <script>
@ -94,44 +150,43 @@ defineRule(
 );

 export default {
-    name: "license-plate-lookup",
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+  name: "license-plate-lookup",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

-        // Settle promises and get results
-        const promiseResultMap = [{
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
-        }, ];
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];

-        const resultMap = await settleAllPromises(promiseResultMap);
+    const resultMap = await settleAllPromises(promiseResultMap);

-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    props: {
-        validationRules: String,
-    },
-    data() {
-        return {
-            isRegistrationZipServicable: true,
-            isVinValid: true,
-            isCarIdDifferent: false,
-            licensePlate: this.getLicensePlateFromStore(),
-            registrationZip: this.getRegistrationZipFromStore(),
-            email: this.getEmailFromStore(),
-            serviceZip: this.getServiceZipFromStore(),
-            previouslyEnteredCarId: "",
-            customAlertData: {},
-            isSelectedGlassAvailableForVehicle: true,
-        };
-    },
-    mounted() {
-        this.attachCustomEvents();
-    },
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  data() {
+    return {
+      isRegistrationZipServicable: true,
+      isVinValid: true,
+      isCarIdDifferent: false,
+      licensePlate: this.getLicensePlateFromStore(),
+      registrationZip: this.getRegistrationZipFromStore(),
+      email: this.getEmailFromStore(),
+      serviceZip: this.getServiceZipFromStore(),
+      previouslyEnteredCarId: "",
+      customAlertData: {},
+      isSelectedGlassAvailableForVehicle: true,
+    };
+  },
+  mounted() {
+    this.attachCustomEvents();
+  },
    computed: {
        MatchedDifferentVehicleAlertHeader() {
            let text = this.getCmsContent(
@ -343,5 +398,5 @@ export default {
        alert,
        funnelFooter,
    },
-};
+}
 </script>
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@ -62,16 +62,9 @@
        :manualHeadline="MatchedDifferentVehicleAlertHeader"
        :manualCopy="MatchedDifferentVehicleAlertBody"
        v-model="customAlertData"
-        v-if="matchedDifferentVehicle"
+        v-if="isCarIdDifferent"
        alertClass="alert-danger"
      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="noMatchAlert"
-        alertClass="alert-warning"
-        cmsWidgetName="NoMatchAlertWidget"
-      />
      <alert
        class="my-3"
        :manualHeadline="NoServiceZipHeader"
@ -80,13 +73,6 @@
        v-if="noServiceZip"
        alertClass="alert-warning"
      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="foundWindshieldAlert"
-        alertClass="alert-warning"
-        cmsWidgetName="FoundWindshieldAlert"
-      />
      <alert
        class="my-3"
        v-model="customAlertData"
@ -98,7 +84,7 @@
        class="my-3"
        v-model="customAlertData"
        v-if="perfectMatchNewVinAlert"
-        alertClass="alert-warning"
+        alertClass="alert-success"
        cmsWidgetName="PerfectMatchNewVinAlert"
      />
      <funnelFooter
@ -175,44 +161,39 @@ export default {
      vm.setCmsContent(resultMap.cmsContent);
    });
  },
-  props: {
-    validationRules: String,
-  },
  data() {
    return {
-      matchedDifferentVehicle: false,
-      noMatchAlert: false,
+      isCarIdDifferent: false,
      noServiceZip: false,
-      vinFound: false,
-      vinFoundReadOnly: false,
-      foundWindshieldAlert: false,
      vinNotFound: false,
-      perfectMatchNewVinAlert: false,
      vin: this.getVinFromStore(),
      zip: this.getZipFromStore(),
      email: this.getEmailFromStore(),
      customAlertData: {},
-      isCarIdDifferent: false,
      previouslyEnteredCarId: '',
      invalidZip: '',
+      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
    };
  },
  computed: {
+    perfectMatchNewVinAlert() {
+      return this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
+    },
    MatchedDifferentVehicleAlertHeader(){
-      let text = this.getCmsContent("MatchedDifferentVehicle",
+      const text = this.getCmsContent("MatchedDifferentVehicle",
      "HeadlineText").replaceAll("{custom:damage}", getDamageString());

      return text;
    },
    MatchedDifferentVehicleAlertBody(){
-      let text = this.getCmsContent("MatchedDifferentVehicle",
+      const 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);
+      const text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip);

      return text;
    },
@ -288,7 +269,7 @@ export default {
        this.isVinValid = true;
        this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId);
        this.$refs.funnelFooter.removeLoader();
-        this.matchedDifferentVehicle = true;
+        this.isCarIdDifferent = true;
        return;
      }
      this.updateStore(vehicleLookup.data);
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@ -102,19 +102,11 @@ const routingTable = [
    maps: [
      {
        scenario: navigationScenarios.CLICKED_BACK,
-        destinationFmgPageValue: fmgPageValues.REVEAL,
-      },
-      {
-        scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      },
-      {
-        scenario: navigationScenarios.VIN_LOOKUP,
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
      },
      {
        scenario: navigationScenarios.CLICKED_FORWARD,
-        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
      }
    ],
  },
@ -157,7 +149,7 @@ const routingTable = [
      {
        scenario: navigationScenarios.CLICKED_FORWARD,
        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      },         
+      },
    ],
  },  
    {fmgPageValue: fmgPageValues.ESTIMATE,
--- a/src/store/index.js
+++ b/src/store/index.js
@ -144,17 +144,17 @@ export const mutations = {
  updateRegistrationAddress(state, registrationAddress){
    state.order.vehicle.registration.address = registrationAddress;
  },
-  updateServiceLocationZipCode(state, serviceLocationZipCode){
-    state.order.serviceLocation.zipCode = serviceLocationZipCode;
+  updateServiceLocationZip(state, serviceLocationZip){
+    state.order.vehicle.registration.zip = serviceLocationZip;
  },
  updateRegistrationCity(state, serviceCity){
-    state.order.serviceLocation.city = serviceCity;
+    state.order.vehicle.registration.city = serviceCity;
  },
  updateRegistrationFirstName(state, firstName){
-    state.order.serviceLocation.firstName = firstName;
+    state.order.vehicle.registration.firstName = firstName;
  },
  updateRegistrationLastName(state, lastName){
-    state.order.serviceLocation.lastName = lastName;
+    state.order.vehicle.registration.lastName = lastName;
  },
  updateCustomerEmailAddress(state, customerEmailAddress){
    state.order.customer.emailAddress = customerEmailAddress;