jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merged from develop

Browse source
This commit is contained in:
Leah Schumann 2023-12-18 06:55:31 -05:00
commit d9cf3da2a5
5 changed files with 80 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
public/css/hop-styling.css
View file

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

8
public/scss/hop-styling.scss
View file

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

87
src/layouts/vehicle/vehicle.vue
View file

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

12
src/mixins/analytics-mixin.js
View file

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

5
src/router/index.js
View file

@ -172,7 +172,10 @@ router.beforeEach(async (to, from, next) => {
if (isInIframe && notToPIAReturn) { if (isInIframe && notToPIAReturn) {
const newUrl = `${window.top.location.origin}${to.href}`; const newUrl = `${window.top.location.origin}${to.href}`;
window.top.location.href = newUrl; 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); router.go(0);
} else { } else {
next(); next();