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

Csr 101 code review updates

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,

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 }">
+  <Form
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+    @submit="onSubmit"
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+    @invalid-submit="onInvalidSubmit"
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+    ref="theForm"
-        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+    v-slot="{ meta }"
-        <div class="row my-2">
+  >
-            <div class="col">
+    <div
-                <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
+      class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
-            </div>
+    >
+      <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>
-            <div class="col">
+      <div class="row my-2">
-                <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
+        <div class="col">
-            </div>
+          <textboxQuestion
+            cmsWidgetName="RegistrationZip"
+            v-model="registrationZip"
+            inputId="zip"
+            mask="#####"
+            validationRules="zip-required"
+          />
         </div>
-        <div class="row my-2">
+      </div>
-            <div class="col">
+      <div class="row my-2">
-                <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
+        <div class="col">
-            </div>
+          <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>
-        <div class="row my-2">
+      <alert
-            <div class="col">
+        class="my-3"
-                <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
+        :manualHeadline="NoServiceZipHeader"
-            </div>
+        :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" />
+      </div>
-        <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
+      <alert
-        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+        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",
+  name: "license-plate-lookup",
-    async beforeRouteEnter(to, from, next) {
+  async beforeRouteEnter(to, from, next) {
-        // Call APIs
+    // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-        // Settle promises and get results
+    // Settle promises and get results
-        const promiseResultMap = [{
+    const promiseResultMap = [
-            resultKey: "cmsContent",
+      {
-            promise: cmsContentPromise,
+        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.
+    // Call the "next" function to complete the transition to this page.
-        next((vm) => {
+    next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
+      vm.setCmsContent(resultMap.cmsContent);
-        });
+    });
-    },
+  },
-    props: {
+  data() {
-        validationRules: String,
+    return {
-    },
+      isRegistrationZipServicable: true,
-    data() {
+      isVinValid: true,
-        return {
+      isCarIdDifferent: false,
-            isRegistrationZipServicable: true,
+      licensePlate: this.getLicensePlateFromStore(),
-            isVinValid: true,
+      registrationZip: this.getRegistrationZipFromStore(),
-            isCarIdDifferent: false,
+      email: this.getEmailFromStore(),
-            licensePlate: this.getLicensePlateFromStore(),
+      serviceZip: this.getServiceZipFromStore(),
-            registrationZip: this.getRegistrationZipFromStore(),
+      previouslyEnteredCarId: "",
-            email: this.getEmailFromStore(),
+      customAlertData: {},
-            serviceZip: this.getServiceZipFromStore(),
+      isSelectedGlassAvailableForVehicle: true,
-            previouslyEnteredCarId: "",
+    };
-            customAlertData: {},
+  },
-            isSelectedGlassAvailableForVehicle: true,
+  mounted() {
-        };
+    this.attachCustomEvents();
-    },
+  },
-    mounted() {
-        this.attachCustomEvents();
-    },
     computed: {
         MatchedDifferentVehicleAlertHeader() {
             let text = this.getCmsContent(
@@ -343,5 +398,5 @@ export default {
         alert,
         funnelFooter,
     },
-};
+}
 </script>

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,
+      isCarIdDifferent: false,
-      noMatchAlert: 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);

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

@@ -102,19 +102,11 @@ const routingTable = [
     maps: [
       {
         scenario: navigationScenarios.CLICKED_BACK,
-        destinationFmgPageValue: fmgPageValues.REVEAL,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
-      },
-      {
-        scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      },
-      {
-        scenario: navigationScenarios.VIN_LOOKUP,
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
       },
       {
         scenario: navigationScenarios.CLICKED_FORWARD,
-        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
       }
     ],
   },

src/store/index.js

@@ -144,17 +144,17 @@ export const mutations = {
   updateRegistrationAddress(state, registrationAddress){
     state.order.vehicle.registration.address = registrationAddress;
   },
-  updateServiceLocationZipCode(state, serviceLocationZipCode){
+  updateServiceLocationZip(state, serviceLocationZip){
-    state.order.serviceLocation.zipCode = serviceLocationZipCode;
+    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;