Merged from develop

public/css/hop-styling.css

@@ -39,27 +39,36 @@ body input,
 body select {
   margin-top: 4px;
 }
-body input {
+body input,
+body select {
   border-radius: 8px;
   border: 1px solid #8E9292;
   padding: 16px;
   font-size: 16px;
   color: #000;
+  background-color: #fff;
 }
-body input:focus, body input:focus-visible {
+body input:focus, body input:focus-visible,
+body select:focus,
+body select:focus-visible {
   box-shadow: 0 0 0 2.5px #1574a1;
-  border: none;
+  border: 1px solid transparent;
   outline: none;
 }
-body input:disabled, body input.disabled {
+body input:disabled, body input.disabled,
+body select:disabled,
+body select.disabled {
   background-color: #f5f5f5;
   filter: grayscale(100%);
 }
-body input:disabled:hover, body input.disabled:hover {
+body input:disabled:hover, body input.disabled:hover,
+body select:disabled:hover,
+body select.disabled:hover {
   box-shadow: 0 0 0 4px transparent;
   border: 1px solid #8e9292;
 }
-body input:hover {
+body input:hover,
+body select:hover {
   border: 1px solid #8e9292;
   box-shadow: 0 0 0 4px #9fcee6;
 }
@@ -171,7 +180,7 @@ body .has-error select {
 }
 body .has-error input:focus,
 body .has-error select:focus {
-  border: 1px solid transparent;
+  box-shadow: 0 0 0 2.5px #fcbfbb;
 }
 body .has-error input:hover,
 body .has-error select:hover {

public/scss/hop-styling.scss

@@ -48,16 +48,18 @@ body {
         margin-top: 4px;
     }
 
-    input {
+    input,
+    select {
         border-radius: 8px;
         border: 1px solid #8E9292;
         padding: 16px;
         font-size: 16px;
         color: #000;
+        background-color: #fff;
         &:focus,
         &:focus-visible {
             box-shadow: 0 0 0 2.5px #1574a1;
-            border: none;
+            border: 1px solid transparent;
             outline: none;
         }
         &:disabled,
@@ -191,7 +193,7 @@ body {
         select {
             border: 1px solid #d4281c;
             &:focus {
-                border: 1px solid transparent;
+                box-shadow: 0 0 0 2.5px #fcbfbb;
             }
             &:hover {
                 border: 1px solid #d4281c;

src/layouts/vehicle/vehicle.vue

@@ -17,7 +17,7 @@
                         cmsWidgetName="VehicleYearQuestion"
                         validationRules="year-required"
                         placeHolderText="Select year"
-                        inputId="yearQuestionField" />
+                        customDropdownId="yearQuestionField" />
 
                     <vehicleQuestion
                         ref="vehicleMakeQuestion"
@@ -27,7 +27,7 @@
                         cmsWidgetName="VehicleMakeQuestion"
                         validationRules="make-required"
                         placeHolderText="Select make"
-                        inputId="makeQuestionField" />
+                        customDropdownId="makeQuestionField" />
 
                     <vehicleQuestion
                         ref="vehicleModelQuestion"
@@ -37,7 +37,7 @@
                         :options="modelOptions"
                         validationRules="model-required"
                         placeHolderText="Select model"
-                        inputId="modelQuestionField" />
+                        customDropdownId="modelQuestionField" />
 
                     <vehicleQuestion
                         ref="vehicleStyleQuestion"
@@ -47,7 +47,7 @@
                         :options="styleOptions"
                         validationRules="style-required"
                         placeHolderText="Select style"
-                        inputId="styleQuestionField" />
+                        customDropdownId="styleQuestionField" />
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="displayGeneric"
@@ -79,7 +79,7 @@ import vehicleQuestion from "@/layouts/vehicle/vehicle-question/vehicle-question
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { experimentUniverses } from "@/constants/experiments";
-import { getDeviceIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
+import { getSessionKeyValue, getUserIdValue } from "@/helpers/heritage-integration/cookie-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
@@ -169,7 +169,7 @@ export default {
             baseMixin.methods.dispatchStoreActionWithLogging(
                 storeActions.LOG_EXPERIMENT_EXPOSURE,
                 {
-                    userId: getDeviceIdValue(),
+                    userId: getUserIdValue(),
                     sessionKey: getSessionKeyValue(),
                     pageName: to.query.fmgPage,
                     experiment: experimentForLogging,
@@ -225,62 +225,65 @@ export default {
 
     watch: {
         async selectedYear(year) {
+            this.makeOptions = [];
+            this.selectedMake = null;
+            this.selectedModel = null;
+            this.selectedStyle = null;
+            this.carId = null;
             if (year) {
                 const result = await this.getMakeOptions(year);
-                this.makeOptions = result?.data;
-                if (this.selectedYearfromStore() !== year) {
-                    this.selectedMake = null;
-                    this.selectedModel = null;
-                    this.selectedStyle = null;
-                    this.carId = null;
+                if (this.selectedYear == year) {
+                    this.makeOptions = result?.data;
+                    if (this.selectedYearfromStore() !== year) {
+                        this.selectedMake = null;
+                        this.selectedModel = null;
+                        this.selectedStyle = null;
+                        this.carId = null;
+                    }
                 }
-            } else {
-                this.makeOptions = [];
-                this.selectedMake = null;
-                this.selectedModel = null;
-                this.selectedStyle = null;
-                this.carId = null;
             }
         },
         async selectedMake(make) {
+            this.modelOptions = [];
+            this.selectedModel = null;
+            this.selectedStyle = null;
+            this.carId = null;
             if (make) {
                 const result = await this.getModelOptions(this.selectedYear, make);
-                this.modelOptions = result?.data;
-                if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
-                else {
-                    this.selectedModel = null;
-                    this.selectedStyle = null;
-                    this.carId = null;
+                if (this.selectedMake == make) {
+                    this.modelOptions = result?.data;
+                    if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
+                    else {
+                        this.selectedModel = null;
+                        this.selectedStyle = null;
+                        this.carId = null;
+                    }
                 }
-            } else {
-                this.modelOptions = [];
-                this.selectedModel = null;
-                this.selectedStyle = null;
-                this.carId = null;
             }
         },
         async selectedModel(model) {
+            this.styleOptions = [];
+            this.selectedStyle = null;
+            this.carId = null;
             if (model) {
                 const result = await this.getStyleOptions(
                     this.selectedYear,
                     this.selectedMake,
                     model
                 );
-                this.styleOptions = result?.data;
-                if (this.styleOptions.length === 1) {
-                    const sameStyle = this.selectedStyle === this.styleOptions[0];
-                    this.selectedStyle = this.styleOptions[0];
-                    if (sameStyle) {
-                        this.getVehicleDetails();
+                if (this.selectedModel == model) {
+                    this.styleOptions = result?.data;
+                    if (this.styleOptions.length === 1) {
+                        const sameStyle = this.selectedStyle === this.styleOptions[0];
+                        this.selectedStyle = this.styleOptions[0];
+                        if (sameStyle) {
+                            this.getVehicleDetails();
+                        }
+                    } else {
+                        this.selectedStyle = null;
+                        this.carId = null;
                     }
-                } else {
-                    this.selectedStyle = null;
-                    this.carId = null;
                 }
-            } else {
-                this.styleOptions = [];
-                this.selectedStyle = null;
-                this.carId = null;
             }
         },
         async selectedStyle(style) {

src/mixins/analytics-mixin.js

@@ -36,6 +36,10 @@ export default {
             const currentPageName = getPageNameByQueryString();
             await this.validateSession();
 
+            const refSequenceNum =
+                store.getters.order.referralSequenceNumber ||
+                store.getters.submittedOrder?.referralSequenceNumber;
+
             var payload = {
                 userId: getUserIdValue(),
                 sessionKey: getSessionKeyValue(),
@@ -45,7 +49,7 @@ export default {
                 event: pageEvent,
                 shouldUseSessionId: false,
                 experimentsForUser: store.getters.applicationUser.experiments,
-                referralSequenceNumber: store.getters.order.referralSequenceNumber,
+                referralSequenceNumber: refSequenceNum,
                 parentAccountNumber: store.getters.order.payment.parentAccountNumber,
             };
 
@@ -56,6 +60,10 @@ export default {
             const currentPageName = getPageNameByQueryString();
             await this.validateSession();
 
+            const refSequenceNum =
+                store.getters.order.referralSequenceNumber ||
+                store.getters.submittedOrder?.referralSequenceNumber;
+
             var payload = {
                 userId: getUserIdValue(),
                 sessionKey: getSessionKeyValue(),
@@ -67,7 +75,7 @@ export default {
                 value: value,
                 shouldUseSessionId: false,
                 experimentsForUser: store.getters.applicationUser.experiments,
-                referralSequenceNumber: store.getters.order.referralSequenceNumber,
+                referralSequenceNumber: refSequenceNum,
                 parentAccountNumber: store.getters.order.payment.parentAccountNumber,
             };
 

src/router/index.js

@@ -172,7 +172,10 @@ router.beforeEach(async (to, from, next) => {
     if (isInIframe && notToPIAReturn) {
         const newUrl = `${window.top.location.origin}${to.href}`;
         window.top.location.href = newUrl;
-    } else if (toQueryPage === fromQueryPage) {
+        // Refresh page if navigating to self to prevent locking.
+        // For now only carved out for vehicle; all modals are opened through anchor tags at the moment,
+        // which also self navigate, but relied on the page remaining the same on self-navigation.
+    } else if (toQueryPage === fromQueryPage && toQueryPage === "vehicle") {
         router.go(0);
     } else {
         next();