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

Merge branch 'release/2025.01.23' into feature/CASH-109

Browse source
This commit is contained in:
CarlNation 2025-01-17 09:31:38 -05:00
commit 66da230cc9
12 changed files with 177 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/digital-components/modal/modal.vue
View file

@ -216,8 +216,12 @@ export default {
overflow: auto;
flex: none;
}
.textbox-question {
padding: .25rem 0;
}
}
}
&.modal-dialog-centered {
align-items: flex-end;
min-height: 100%;
@ -269,8 +273,6 @@ export default {
flex-direction: column;
.textbox-question {
padding: 0;
label {
text-align: left;
font-weight: 900;
@ -284,6 +286,10 @@ export default {
.modal-disclaimer {
font-size: 0.75rem;
order: 2;
text-align: left;
a {
text-decoration: none;
}
}
.modal-footer {
margin: 0 0 1.5rem 0;

27
src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
View file

@ -1,7 +1,8 @@
<template>
<div class="save-progress-modal-question">
<div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
<buttonMain
ref="buttonMain"
type="button"
v-if="!isProgressSaved"
:buttonText="buttonText"
loaderColor="white"
@ -17,6 +18,7 @@
:ref="modalName"
:headerText="modalHeaderText"
suppressPageScroll
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalButtonText"
@footer-button-event="saveProgress">
<p class="modal-body-inner">{{ modalBodyText }}</p>
@ -35,6 +37,7 @@ import modal from "@/digital-components/modal/modal";
import { storeActions } from "@/constants/store-actions.js";
import buttonMain from "@/ux-components/button-main/button-main";
import alert from "@/ux-components/alert/alert";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
export default {
name: "save-progress-modal-question",
@ -78,17 +81,24 @@ export default {
this.modal.openModal();
this.modal.resetButtonStyle();
},
onModalClosed() {
this.userInput = "";
this.modal.resetForm();
},
async saveProgress() {
// save email address to store
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
// send store call to send to new API (that triggers an email send)
await saveQuote({ pageNameToLog: this.pageName });
// hide save progress button; show success message alert
this.isProgressSaved = true;
// communicate to parent the new status
this.$emit("save-progress-saved");
this.modal.closeModal();
// send store call to send to new API (that triggers an email send)
this.$emit("save-progress");
},
},
@ -113,6 +123,10 @@ export default {
align-items: center;
border-radius: 0.5rem;
&.progress-saved {
background: none;
}
.save-progress-button {
order: 4;
position: relative;
@ -125,7 +139,7 @@ export default {
width: auto;
height: auto;
text-decoration: underline;
text-underline-offset: 0.375rem;
text-underline-offset: 0.25rem;
line-height: 1rem;
padding: 1rem;
margin: 0 auto;
@ -148,6 +162,7 @@ export default {
:deep(.alert) {
border-radius: $border-radius-lg;
border: 1px solid $green;
margin-top: 0;
}
:deep(.alert-heading) {
position: relative;

22
src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
View file

@ -16,6 +16,7 @@
class="save-progress-popup-question" />
<buttonMain
ref="skipButton"
type="button"
:buttonText="buttonText"
loaderColor="white"
:suppressLoader="true"
@ -37,6 +38,7 @@ import modal from "@/digital-components/modal/modal";
import { storeActions } from "@/constants/store-actions.js";
import buttonMain from "@/ux-components/button-main/button-main";
import alert from "@/ux-components/alert/alert";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
export default {
name: "save-progress-popup-question",
@ -50,6 +52,10 @@ export default {
mounted() {
if (this.showSaveProgressPopup) this.modal.openModal();
},
unmounted() {
// remove any modal effects before leaving page (e.g. user hits browser back button)
this.modal.closeModal();
},
emits: ["close-save-progress-popup", "save-progress"], // <--- should remove oodles of warnings in dev tools
props: {
modelValue: Object,
@ -94,15 +100,14 @@ export default {
// save email address to store
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
// send store call to send to new API (that triggers an email send)
await saveQuote({ pageNameToLog: this.pageName });
// hide save progress button; show success message alert
this.isProgressSaved = true;
// send store call to send to new API (that triggers an email send)
this.$emit("save-progress");
// send call to close popup
this.closeModal();
this.$emit("close-save-progress-popup");
// communicate to parent the new status
this.$emit("save-progress-saved");
},
},
@ -150,7 +155,7 @@ export default {
width: auto;
height: auto;
text-decoration: underline;
text-underline-offset: 0.375rem;
text-underline-offset: 0.25rem;
line-height: 1rem;
padding: 0 0 4px 0;
margin: 0 auto 1.5rem auto;
@ -200,9 +205,6 @@ export default {
}
.modal-disclaimer {
order: 4;
a {
text-decoration: none;
}
}
&.progress-saved {

8
src/global-methods.js
View file

@ -110,7 +110,13 @@ export default {
if (error.response.status && error.response.status != "404") {
// Do not route to error logic when no wipers found or no promo found (404s)
router.navigateError();
const errorPayload = {
cause: `Response error ${error.response.status}`,
currentPage: pageNameToLog,
endpoint: endpoint,
};
router.navigateError(errorPayload);
// do not log 404 errors from services because we return NotFound
// when a service doesn't return an object

12
src/layouts/capability-questions/capability-questions.vue
View file

@ -16,8 +16,8 @@
<!-- save progress goes into <slot> on questions-page-layout -->
<saveProgressModalQuestion
modalWidgetName="SaveProgressModalWidget"
v-if="!isEmailInStoreOnPageLoad"
@save-progress="saveProgress" />
pageName="capability-questions"
v-if="showSaveProgressModal" />
</questions-page-layout>
</Form>
</template>
@ -38,7 +38,6 @@ import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import baseMixin from "@/mixins/base-mixin.js";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@ -65,7 +64,7 @@ export default {
// Call the "next" function to complete the transition to this page.
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
if (store.getters.externalParameterState?.isExternalParameter) {
if (store.getters.externalParameterServiceZip.zipCode) {
await baseMixin.methods.dispatchStoreAction(
@ -87,7 +86,7 @@ export default {
questionsData: null,
selectedAnswers: {},
currentGlassIndex: 0,
isEmailInStoreOnPageLoad: null,
showSaveProgressModal: null,
};
},
computed: {
@ -157,9 +156,6 @@ export default {
this.questionsData
);
},
saveProgress() {
saveQuote({ pageNameToLog: "capability-questions" });
},
async forwardButtonAction() {
const questionAnswersArray = this.questionsData.map((glass) => {
// get answerResult2 of returned answer

12
src/layouts/molding-questions/molding-questions.vue
View file

@ -16,8 +16,8 @@
<!-- save progress goes into <slot> on questions-page-layout -->
<saveProgressModalQuestion
modalWidgetName="SaveProgressModalWidget"
v-if="!isEmailInStoreOnPageLoad"
@save-progress="saveProgress" />
pageName="molding-questions"
v-if="showSaveProgressModal" />
</questions-page-layout>
</Form>
</template>
@ -38,7 +38,6 @@ import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import baseMixin from "@/mixins/base-mixin.js";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@ -65,7 +64,7 @@ export default {
// Call the "next" function to complete the transition to this page.
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
if (store.getters.externalParameterState?.isExternalParameter) {
if (store.getters.externalParameterServiceZip.zipCode) {
await baseMixin.methods.dispatchStoreAction(
@ -88,7 +87,7 @@ export default {
questionsData: null,
selectedAnswers: {},
currentGlassIndex: 0,
isEmailInStoreOnPageLoad: null,
showSaveProgressModal: null,
};
},
computed: {
@ -157,9 +156,6 @@ export default {
this.questionsData
);
},
saveProgress() {
saveQuote({ pageNameToLog: "molding-questions" });
},
async forwardButtonAction() {
const questionAnswersArray = this.questionsData.map((glass) => {
return {

12
src/layouts/part-questions/part-questions.vue
View file

@ -16,8 +16,8 @@
<!-- save progress goes into <slot> on questions-page-layout -->
<saveProgressModalQuestion
modalWidgetName="SaveProgressModalWidget"
v-if="!isEmailInStoreOnPageLoad"
@save-progress="saveProgress" />
pageName="part-questions"
v-if="showSaveProgressModal" />
</questions-page-layout>
</Form>
</template>
@ -38,7 +38,6 @@ import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import baseMixin from "@/mixins/base-mixin.js";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@ -65,7 +64,7 @@ export default {
// Call the "next" function to complete the transition to this page.
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
if (store.getters.externalParameterState?.isExternalParameter) {
if (store.getters.externalParameterServiceZip.zipCode) {
const serviceState = store.getters.order.serviceLocation.state;
@ -89,7 +88,7 @@ export default {
questionsData: null,
selectedAnswers: {},
currentGlassIndex: 0,
isEmailInStoreOnPageLoad: null,
showSaveProgressModal: null,
};
},
computed: {
@ -156,9 +155,6 @@ export default {
this.questionsData
);
},
saveProgress() {
saveQuote({ pageNameToLog: "part-questions" });
},
async forwardButtonAction() {
const questionAnswersArray = this.questionsData.map((glass) => {
return {

30
src/layouts/quote/quote.vue
View file

@ -20,7 +20,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-xl-8">
<div class="col-md-12 col-xl-8 mb-5">
<servicePackageQuestion
ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget"
@ -82,8 +82,9 @@
<saveProgressModalQuestion
modalWidgetName="SaveProgressModalWidget"
modalName="SaveProgressModal"
v-if="!isEmailInStoreOnPageLoad"
@save-progress="saveProgress" />
v-if="showSaveProgressModal"
pageName="quote"
@save-progress-saved="updateSaveProgressAsSaved" />
<textBlock
cmsWidgetName="quoteDisclaimer"
@ -98,9 +99,10 @@
<saveProgressPopupQuestion
modalWidgetName="SaveProgressPopupWidget"
modalName="SaveProgressPopup"
v-if="!isEmailInStoreOnPageLoad && showSaveProgressPopup"
pageName="quote"
v-if="showSaveProgressPopup"
:showSaveProgressPopup="showSaveProgressPopup"
@save-progress="saveProgress"
@save-progress-saved="updateSaveProgressAsSaved"
@close-save-progress-popup="closeSaveProgressPopup" />
</div>
</div>
@ -209,6 +211,7 @@ export default {
const emailFromStore = store.getters.order.customer.emailAddress;
const isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
const showSaveProgressPopup = isEmailInStoreOnPageLoad ? false : true;
const showSaveProgressModal = isEmailInStoreOnPageLoad ? false : true;
const lineItems = deepClone(store.getters.order.lineItems);
lineItems.vaps = lineItems.vaps ?? [];
@ -290,8 +293,8 @@ export default {
// Call the "next" function to complete the transition to this page.
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.isEmailInStoreOnPageLoad = isEmailInStoreOnPageLoad;
vm.showSaveProgressPopup = showSaveProgressPopup;
vm.showSaveProgressModal = showSaveProgressModal;
vm.addableVaps = addableVaps;
vm.lineItems = lineItems;
vm.availableLineItems = pricingResults;
@ -438,10 +441,14 @@ export default {
servicePackage: null,
holdParentAccountNumber: null,
holdBillToAccountNumber: null,
isEmailInStoreOnPageLoad: null,
showSaveProgressPopup: null,
showSaveProgressModal: null,
isSaveProgressComplete: null,
};
},
mounted() {
this.attachCustomEvents();
},
computed: {
lineItemsCloneForWatcher() {
return Object.assign({}, this.lineItems);
@ -526,10 +533,8 @@ export default {
backButtonAction() {
vehicleQuestionsMixin.methods.navigateBack(this);
},
saveProgress() {
this.isEmailInStoreOnPageLoad = true;
this.showSaveProgressPopup = false;
saveQuote({ pageNameToLog: "quote" });
updateSaveProgressAsSaved() {
this.showSaveProgressModal = false;
},
closeSaveProgressPopup() {
this.showSaveProgressPopup = false;
@ -677,9 +682,6 @@ export default {
});
},
},
mounted() {
this.attachCustomEvents();
},
watch: {
lineItemsCloneForWatcher: {
handler(newValue, oldValue) {

6
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -141,8 +141,11 @@ export default {
.package-main {
.package-wrapper {
margin: 1rem 0;
&:last-child {
margin: 1rem 0 0 0;
}
@include media-breakpoint-up(md) {
margin: 1rem 0.5rem;
margin: 1rem 0.5rem 0 0.5rem;
display: flex;
flex-direction: column;
}
@ -322,6 +325,7 @@ export default {
display: flex;
justify-content: flex-end;
align-items: center;
align-self: flex-start;
div.strikethrough-discount-price {
text-decoration: line-through;
margin-right: 0.5rem;

12
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -48,8 +48,8 @@
<saveProgressModalQuestion
modalWidgetName="SaveProgressModalWidget"
v-if="!isEmailInStoreOnPageLoad"
@save-progress="saveProgress" />
pageName="vehicle-parts"
v-if="showSaveProgressModal" />
</div>
</div>
</div>
@ -75,7 +75,6 @@ import store from "@/store";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import baseMixin from "@/mixins/base-mixin.js";
import { partTypeStrings } from "@/constants/part-type-strings";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";
export default {
name: "vehicle-parts",
@ -95,7 +94,7 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
vm.showSaveProgressModal = !(emailFromStore?.length > 0);
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
@ -115,7 +114,7 @@ export default {
selectedGlassParts: {},
alertWidgetData: Object,
alreadyPopulatedPartsData: [],
isEmailInStoreOnPageLoad: null,
showSaveProgressModal: null,
};
},
computed: {
@ -234,9 +233,6 @@ export default {
});
});
},
saveProgress() {
saveQuote({ pageNameToLog: "vehicle-parts" });
},
},
mounted() {
this.LoadInitialPartsData();

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

@ -650,6 +650,14 @@ export default {
});
},
pushPageErrorToDataLayer(error) {
pushToDataLayerIfDefined({
event: "page-error",
error: error,
});
},
prependActionToMethod(object, method, actionToPrepend) {
const baseMethodName = method.name.startsWith("bound ")
? method.name.substring(6)

99
src/router/index.js
View file

@ -65,9 +65,17 @@ const routes = [
// If the saved session has timed out, clear the session, execute 404 logic.
if (getFunnelCookie() !== null && !isSavedSessionStillActive()) {
log(" --save session timeout go to start");
const errorPayload = {
cause: "expired session",
currentPage: from?.query?.fmgPage,
nextPage: to?.query?.fmgPage,
};
await baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
deleteFunnelCookie();
GoToFunnelStartOn404(next);
GoToFunnelStartOn404(next, errorPayload);
return;
}
// Intercept all navigation if a submitted order exists in storage
@ -206,7 +214,14 @@ const routes = [
return;
}
GoToFunnelStartOn404(next);
const errorPayload = {
cause: "invalid page prerequisites for page",
currentPage: from?.query?.fmgPage,
nextPage: to?.query?.fmgPage,
};
GoToFunnelStartOn404(next, errorPayload);
return;
}
log(" --has route:", to.query.fmgPage);
@ -214,9 +229,15 @@ const routes = [
}
if (!isExistingFmgPageName(to.query.fmgPage)) {
console.log("Not an existing fmg page name:" + to.query.fmgPage);
GoToFunnelStartOn404(next);
const errorPayload = {
cause: "invalid page name",
currentPage: from?.query?.fmgPage,
nextPage: to?.query?.fmgPage,
};
GoToFunnelStartOn404(next, errorPayload);
return;
}
// Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
@ -237,9 +258,18 @@ const routes = [
.components.default();
if (!arePagePrerequisitesValid(nextComponent)) {
// prettier-ignore
console.log("Page Prereqs not valid for next component: " + nextComponent.default.name);
GoToFunnelStartOn404(next);
const errorPayload = {
cause: "invalid page prerequisites for page",
currentPage: from?.query?.fmgPage,
nextPage: to?.query?.fmgPage,
};
GoToFunnelStartOn404(next, errorPayload);
return;
}
log("------------- router index.js beforeEnter end -----------------");
@ -261,7 +291,16 @@ const routes = [
console.log(new Date() + " Exception in beforeEnter:" + JSON.stringify(error));
// If we don't have a route, go to our 404 page.
GoToFunnelStartOn404(next);
const errorPayload = {
cause: "uncaught error in beforeEnter",
currentPage: from?.query?.fmgPage,
nextPage: to?.query?.fmgPage,
fullError: error,
errorStack: error?.stack,
};
GoToFunnelStartOn404(next, errorPayload);
return;
}
},
},
@ -397,8 +436,8 @@ router.navigateToExternalUrl = (url, optionalQuery = {}) => {
navigateToUrl(url, optionalQuery);
};
router.navigateError = () => {
DisplayPageError();
router.navigateError = (errorPayload = null) => {
DisplayPageError(errorPayload);
};
//Use this navigation when you need to call next() explicitly. beforeRouteEnter is a good example.
@ -588,7 +627,19 @@ function GetRouteInfoFromPageName(pageName) {
}
// Go to our start page on a 404.
function GoToFunnelStartOn404(next) {
function GoToFunnelStartOn404(next, errorPayload = null) {
if (errorPayload !== null) {
errorPayload.type = "GoToFunnelStartOn404";
analyticsMixin.methods.pushPageErrorToDataLayer(errorPayload);
console.log(
"%cGoToFunnelStartOn404()... errorPayload",
"color: white; background-color: blue; padding: 5px;",
errorPayload
);
}
// Put item on the bus
eventBus.addEventToBus(
globalEvents.Categories.GLOBAL_ALERT,
@ -607,7 +658,28 @@ function GoToFunnelStartOn404(next) {
});
}
async function DisplayPageError() {
async function DisplayPageError(errorPayload = null) {
console.log("%c running DisplayPageError()... ", "font-size: 20px; color: purple;");
if(errorPayload !== null) {
errorPayload.type = "DisplayPageError";
analyticsMixin.methods.pushPageErrorToDataLayer(errorPayload);
} else {
// very cautiously to avoid additional errors:
var currentPage = "";
try {
currentPage = getQuerystringParameter(queryStrings.FMG_PAGE);
} catch (e) {
// pass
}
errorPayload = {
type: "DisplayPageError",
cause: "Unknown page error",
currentPage: currentPage,
};
analyticsMixin.methods.pushPageErrorToDataLayer(errorPayload);
}
// Put item on the bus
eventBus.addEventToBus(
globalEvents.Categories.GLOBAL_ALERT,
@ -620,12 +692,9 @@ async function DisplayPageError() {
}
);
if (
store.getters.externalParameterState?.isExternalParameter ==
externalParameterStatus.ACTIVE ||
store.getters.externalParameterState?.isExternalParameter ==
externalParameterStatus.INACTIVE
store.getters.externalParameterState?.isExternalParameter == externalParameterStatus.ACTIVE
) {
store.commit(storeMutations.UPDATE_IS_EXTERNAL_PARAMETER, externalParameterStatus.NOT_SET);
store.commit(storeMutations.UPDATE_IS_EXTERNAL_PARAMETER, externalParameterStatus.INACTIVE);
}
baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
const pageError = getQuerystringParameter(queryStrings.PAGE_ERROR);