Merge branch 'develop' into feature/CASH-69.01
This commit is contained in:
commit
901911e548
27 changed files with 973 additions and 87 deletions
|
|
@ -2,7 +2,9 @@
|
|||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade modal-component"
|
||||
:class="modalId"
|
||||
v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
|
||||
:data-bs-backdrop="backdropSetting"
|
||||
:id="modalId"
|
||||
tabindex="-1"
|
||||
aria-labelledby="ModalComponentLabel"
|
||||
|
|
@ -25,17 +27,17 @@
|
|||
</div>
|
||||
<div class="modal-body ps-5 pe-5 pb-4 pt-1">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="modal-footer px-5 py-4">
|
||||
<modalButtonMain
|
||||
isPrimary
|
||||
class="w-100"
|
||||
id="modalbtn"
|
||||
ref="modalButtonMain"
|
||||
loaderColor="white"
|
||||
:buttonText="footerButtonText"
|
||||
@click-event="validateAndEmit"
|
||||
:class="isFooterButtonDisabled && 'form-test-invalid'" />
|
||||
<div class="modal-footer">
|
||||
<modalButtonMain
|
||||
isPrimary
|
||||
class="w-100"
|
||||
:id="modalId + '-modalbtn'"
|
||||
ref="modalButtonMain"
|
||||
loaderColor="white"
|
||||
:buttonText="footerButtonText"
|
||||
@click-event="validateAndEmit"
|
||||
:class="isFooterButtonDisabled && 'form-test-invalid'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -53,6 +55,8 @@ export default {
|
|||
props: {
|
||||
headerText: String,
|
||||
footerButtonText: String,
|
||||
suppressPageScroll: Boolean,
|
||||
staticBackdrop: Boolean,
|
||||
onModalOpenedCallback: {
|
||||
type: Function,
|
||||
},
|
||||
|
|
@ -91,7 +95,7 @@ export default {
|
|||
e.preventDefault();
|
||||
if (this.isEnterClicked) return;
|
||||
this.isEnterClicked = true;
|
||||
document.getElementById("modalbtn")?.focus();
|
||||
document.getElementById(this.modalId + "-modalbtn")?.focus();
|
||||
this.$refs.modalButtonMain.clicked();
|
||||
document.getElementById(this.modalId)?.focus();
|
||||
setTimeout(() => {
|
||||
|
|
@ -107,8 +111,12 @@ export default {
|
|||
onModalClosed() {
|
||||
this.resetButtonStyle();
|
||||
this.onModalClosedCallback?.();
|
||||
if (this.suppressPageScroll)
|
||||
document.querySelector("body").classList.remove("prevent-modal-scroll");
|
||||
},
|
||||
openModal() {
|
||||
if (this.suppressPageScroll)
|
||||
document.querySelector("body").classList.add("prevent-modal-scroll");
|
||||
const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
|
||||
modal.show();
|
||||
this.$emit("isModalOpened", true);
|
||||
|
|
@ -126,6 +134,9 @@ export default {
|
|||
}
|
||||
return !this.meta.dirty || !this.meta.valid;
|
||||
},
|
||||
backdropSetting() {
|
||||
return this.staticBackdrop ? "static" : "true";
|
||||
},
|
||||
},
|
||||
components: {
|
||||
modalButtonMain,
|
||||
|
|
@ -162,6 +173,7 @@ export default {
|
|||
}
|
||||
}
|
||||
.modal-footer {
|
||||
padding: 1rem 0;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
|
@ -231,6 +243,54 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.save-progress-modal-question {
|
||||
p.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.textbox-question {
|
||||
padding: 0;
|
||||
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-progress-modal-question,
|
||||
.save-progress-popup-question {
|
||||
p.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.textbox-question {
|
||||
padding: 0;
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body-inner {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.modal-disclaimer {
|
||||
font-size: 0.75rem;
|
||||
order: 2;
|
||||
}
|
||||
.modal-footer {
|
||||
margin: 0 0 1.5rem 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
body {
|
||||
.modal-backdrop {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="col-md-6 col-xl-4 question-chain-wrapper">
|
||||
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
|
||||
<questionChain
|
||||
ref="questionChain"
|
||||
|
|
@ -37,6 +37,8 @@
|
|||
:validationRules="validationRules" />
|
||||
</div>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
<navbar
|
||||
ref="navbar"
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
|
|
@ -112,5 +114,13 @@ export default {
|
|||
text-align: left;
|
||||
}
|
||||
}
|
||||
.question-chain-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.nav-bar {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import saveProgressModalQuestion from "./save-progress-modal-question";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
|
||||
jest.mock("@/digital-components/modal/modal", () => ({
|
||||
methods: {
|
||||
openModal: jest.fn(),
|
||||
resetButtonStyle: jest.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe("save-progress-modal-question ", () => {
|
||||
describe("when openModal is run ", () => {
|
||||
test("the modal should open ", () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modelValue: "",
|
||||
modalWidgetName: "testModal",
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.openModal();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.modal).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({ options, props }) {
|
||||
const mountOptions = getMountOptions({
|
||||
...options,
|
||||
});
|
||||
|
||||
const mockBaseMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn(),
|
||||
dispatchStoreAction: jest.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
if (props) mountOptions.propsData = props;
|
||||
|
||||
mountOptions.global.mixins = [mockBaseMixin];
|
||||
|
||||
const wrapper = mount(saveProgressModalQuestion, mountOptions);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<div class="save-progress-modal-question">
|
||||
<buttonMain
|
||||
ref="buttonMain"
|
||||
v-if="!isProgressSaved"
|
||||
:buttonText="buttonText"
|
||||
loaderColor="white"
|
||||
:suppressLoader="true"
|
||||
class="save-progress-button"
|
||||
@click-event="openModal" />
|
||||
<alert
|
||||
class="my-4"
|
||||
v-else
|
||||
cmsWidgetName="SaveProgressModalAlertWidget"
|
||||
alertClass="alert-success" />
|
||||
<modal
|
||||
:ref="modalName"
|
||||
:headerText="modalHeaderText"
|
||||
suppressPageScroll
|
||||
:footerButtonText="modalButtonText"
|
||||
@footer-button-event="saveProgress">
|
||||
<p class="modal-body-inner">{{ modalBodyText }}</p>
|
||||
<saveProgressQuestion
|
||||
ref="saveProgressQuestion"
|
||||
v-model="userInput"
|
||||
cmsWidgetName="SaveProgressQuestionWidget" />
|
||||
<p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
|
||||
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";
|
||||
|
||||
export default {
|
||||
name: "save-progress-modal-question",
|
||||
|
||||
data() {
|
||||
return {
|
||||
userInput: "",
|
||||
isProgressSaved: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modelValue: Object,
|
||||
modalWidgetName: String,
|
||||
pageName: String,
|
||||
},
|
||||
computed: {
|
||||
buttonText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "SubheaderText");
|
||||
},
|
||||
modalHeaderText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "HeaderText");
|
||||
},
|
||||
modalBodyText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "BodyText");
|
||||
},
|
||||
modalButtonText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
||||
},
|
||||
modalDisclaimerText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "FooterText2");
|
||||
},
|
||||
modalName() {
|
||||
return this.modalWidgetName;
|
||||
},
|
||||
modal() {
|
||||
return this.$refs[this.modalName];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.openModal();
|
||||
this.modal.resetButtonStyle();
|
||||
},
|
||||
async saveProgress() {
|
||||
// save email address to store
|
||||
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
|
||||
|
||||
// hide save progress button; show success message alert
|
||||
this.isProgressSaved = true;
|
||||
|
||||
this.modal.closeModal();
|
||||
|
||||
// send store call to send to new API (that triggers an email send)
|
||||
this.$emit("save-progress");
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
modal,
|
||||
buttonMain,
|
||||
saveProgressQuestion,
|
||||
alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.save-progress-modal-question {
|
||||
margin-bottom: 1.5rem;
|
||||
order: 2;
|
||||
text-align: center;
|
||||
background: $blue-100;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.save-progress-button {
|
||||
order: 4;
|
||||
position: relative;
|
||||
color: $blue;
|
||||
border: none;
|
||||
font-weight: 900;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.375rem;
|
||||
line-height: 1rem;
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
transition: all 150ms linear;
|
||||
background: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
color: $blue-700;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.delay {
|
||||
// fixes flicker while transitioning between states
|
||||
transition: background 0s 0s ease-in-out;
|
||||
}
|
||||
}
|
||||
:deep(.alert) {
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $green;
|
||||
}
|
||||
:deep(.alert-heading) {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: $black;
|
||||
text-align: left;
|
||||
padding-left: 1.5rem;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.applied-promo {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: $green;
|
||||
|
||||
.promo-code {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
color: $red;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import saveProgressQuestion from "./save-progress-question";
|
||||
|
||||
describe("save-progress-question.vue", () => {
|
||||
it("Should get the modelValue", async () => {
|
||||
// Arrange
|
||||
const text = "test";
|
||||
const wrapper = shallowMount(saveProgressQuestion, {
|
||||
props: {
|
||||
modelValue: text,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
const modelValueText = wrapper.vm.value;
|
||||
wrapper.vm.value = "test also";
|
||||
|
||||
// Assert
|
||||
expect(modelValueText).toEqual("test");
|
||||
});
|
||||
|
||||
it("Should emit to set value", async () => {
|
||||
// Arrange
|
||||
const text = "test";
|
||||
const wrapper = shallowMount(saveProgressQuestion, {
|
||||
props: {
|
||||
modelValue: text,
|
||||
},
|
||||
attachTo: document.body,
|
||||
});
|
||||
|
||||
// Act
|
||||
const modelValueText = wrapper.vm.value;
|
||||
wrapper.vm.value = "test also";
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted("update:modelValue")).toEqual([["test also"]]);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<textboxQuestion
|
||||
ref="saveProgressInputTextQuestion"
|
||||
:cmsWidgetName="cmsWidgetName"
|
||||
v-model="value"
|
||||
inputId="saveProgressUserInput"
|
||||
questionAlignment="center"
|
||||
cornerStyle="rounded"
|
||||
:displayQuestionText="true"
|
||||
isRequired
|
||||
@input="validateEmail"
|
||||
validationRules="email-address-required|email-address-format" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
|
||||
//Supporting Files
|
||||
import { defineRule } from "vee-validate";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
|
||||
// Define Validation Rules
|
||||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
defineRule(
|
||||
"email-address-format",
|
||||
regex(
|
||||
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
|
||||
errorMessages.EMAIL_ADDRESS_FORMAT
|
||||
)
|
||||
);
|
||||
|
||||
const EMAIL_REGEX = /[^a-zA-Z0-9_\-.+@]/g;
|
||||
|
||||
export default {
|
||||
name: "save-progress-question",
|
||||
props: {
|
||||
modelValue: String,
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
validateEmail() {
|
||||
setTimeout(() => {
|
||||
this.value = this.value.replace(EMAIL_REGEX, "");
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textboxQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { mount, shallowMount } from "@vue/test-utils";
|
||||
import saveProgressPopupQuestion from "./save-progress-popup-question";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
|
||||
jest.mock("@/digital-components/modal/modal", () => ({
|
||||
methods: {
|
||||
closeModal: jest.fn(),
|
||||
resetButtonStyle: jest.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe("save-progress-popup-question ", () => {
|
||||
describe("when closeModal is run ", () => {
|
||||
test("the modal should close ", () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modelValue: "",
|
||||
modalWidgetName: "testModal",
|
||||
},
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.closeModal();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.modal).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({ options, props }) {
|
||||
const mountOptions = getMountOptions({
|
||||
...options,
|
||||
});
|
||||
|
||||
const mockBaseMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn(),
|
||||
dispatchStoreAction: jest.fn(),
|
||||
},
|
||||
};
|
||||
|
||||
if (props) mountOptions.propsData = props;
|
||||
|
||||
mountOptions.global.mixins = [mockBaseMixin];
|
||||
|
||||
const wrapper = mount(saveProgressPopupQuestion, mountOptions);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<div class="save-progress-popup-question" :class="[isProgressSaved ? 'progress-saved' : '']">
|
||||
<modal
|
||||
:ref="modalName"
|
||||
:headerText="modalHeaderText"
|
||||
suppressPageScroll
|
||||
:staticBackdrop="true"
|
||||
:onModalClosedCallback="onModalClosed"
|
||||
:footerButtonText="modalButtonText"
|
||||
@footer-button-event="saveProgress">
|
||||
<p class="modal-body-inner">{{ modalBodyText }}</p>
|
||||
<saveProgressQuestion
|
||||
ref="saveProgressQuestion"
|
||||
v-model="userInput"
|
||||
cmsWidgetName="SaveProgressPopupQuestionWidget"
|
||||
class="save-progress-popup-question" />
|
||||
<buttonMain
|
||||
ref="skipButton"
|
||||
:buttonText="buttonText"
|
||||
loaderColor="white"
|
||||
:suppressLoader="true"
|
||||
class="skip-button"
|
||||
@click-event="closeModal" />
|
||||
<alert
|
||||
class="my-4"
|
||||
v-if="isProgressSaved"
|
||||
cmsWidgetName="SaveProgressModalAlertWidget"
|
||||
alertClass="alert-success" />
|
||||
<p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
|
||||
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";
|
||||
|
||||
export default {
|
||||
name: "save-progress-popup-question",
|
||||
|
||||
data() {
|
||||
return {
|
||||
userInput: "",
|
||||
isProgressSaved: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.showSaveProgressPopup) this.modal.openModal();
|
||||
},
|
||||
emits: ["close-save-progress-popup", "save-progress"], // <--- should remove oodles of warnings in dev tools
|
||||
props: {
|
||||
modelValue: Object,
|
||||
modalWidgetName: String,
|
||||
pageName: String,
|
||||
showSaveProgressPopup: Boolean,
|
||||
},
|
||||
computed: {
|
||||
buttonText() {
|
||||
return this.isProgressSaved
|
||||
? "Close"
|
||||
: this.getCmsContent(this.modalWidgetName, "BodyText2");
|
||||
},
|
||||
modalHeaderText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "HeaderText");
|
||||
},
|
||||
modalBodyText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "BodyText");
|
||||
},
|
||||
modalButtonText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
||||
},
|
||||
modalDisclaimerText() {
|
||||
return this.getCmsContent(this.modalWidgetName, "FooterText2");
|
||||
},
|
||||
modalName() {
|
||||
return this.modalWidgetName;
|
||||
},
|
||||
modal() {
|
||||
return this.$refs[this.modalName];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.modal.closeModal();
|
||||
},
|
||||
onModalClosed() {
|
||||
// send call to close popup
|
||||
this.$emit("close-save-progress-popup");
|
||||
},
|
||||
async saveProgress() {
|
||||
// save email address to store
|
||||
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);
|
||||
|
||||
// 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");
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
modal,
|
||||
buttonMain,
|
||||
saveProgressQuestion,
|
||||
alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.save-progress-popup-question {
|
||||
order: 2;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.modal-header {
|
||||
padding-top: 1rem;
|
||||
|
||||
.modal-title {
|
||||
padding-top: 4.25rem;
|
||||
}
|
||||
|
||||
.modal-title::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 63 62'%3E%3Cpath fill='%23B3B4B5' d='M31.5 62c17.052 0 30.876-1.503 30.876-3.358 0-1.854-13.824-3.358-30.876-3.358S.624 56.788.624 58.642C.624 60.497 14.448 62 31.5 62Z' opacity='.4'/%3E%3Cpath fill='%23DA291C' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m33.358 52.715-4.574 4.573-24.192-24.2 4.491-4.491 24.275 24.118Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M58.408 13.402 55.61 30.469 33.356 52.715 9.083 28.597 31.411 6.269l17.067-2.797 9.93 9.93Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M45.586 19.907a3.618 3.618 0 1 0 0-7.237 3.618 3.618 0 0 0 0 7.237Z'/%3E%3C/svg%3E");
|
||||
width: 3.875rem;
|
||||
height: 3.875rem;
|
||||
top: 2.5rem;
|
||||
left: calc(50% - 3.875rem / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.skip-button {
|
||||
order: 4;
|
||||
position: relative;
|
||||
color: $black;
|
||||
border: none;
|
||||
font-weight: 900;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.375rem;
|
||||
line-height: 1rem;
|
||||
padding: 0 0 4px 0;
|
||||
margin: 0 auto 1.5rem auto;
|
||||
transition: all 150ms linear;
|
||||
background: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
color: $blue-700;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.delay {
|
||||
// fixes flicker while transitioning between states
|
||||
transition: background 0s 0s ease-in-out;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $green;
|
||||
order: 2;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
.alert-heading {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: $black;
|
||||
text-align: left;
|
||||
padding-left: 1.5rem;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.modal-footer {
|
||||
order: 3;
|
||||
padding: 0;
|
||||
}
|
||||
.modal-disclaimer {
|
||||
order: 4;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-saved {
|
||||
.modal-footer,
|
||||
.save-progress-popup-question {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.applied-promo {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: $green;
|
||||
|
||||
.promo-code {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
color: $red;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -42,13 +42,10 @@ export async function getDirectNavigation(toRoute) {
|
|||
return fmgPageValues.VEHICLE_DAMAGE;
|
||||
}
|
||||
|
||||
if (
|
||||
fmgPageValue === fmgPageValues.QUOTE ||
|
||||
fmgPageValue === fmgPageValues.INSURANCE_COMPANY
|
||||
) {
|
||||
if (fmgPageValue === fmgPageValues.QUOTE) {
|
||||
const skipVin = await skipVinLookup();
|
||||
|
||||
if (skipVin) {
|
||||
if (skipVin || !store.getters.vehicle?.vin) {
|
||||
return fmgPageValues.ESTIMATE;
|
||||
} else {
|
||||
return fmgPageValues.VIN_LOOKUP;
|
||||
|
|
|
|||
|
|
@ -400,26 +400,6 @@ describe("getPageToRouteExistingOrderTo", () => {
|
|||
// Assert
|
||||
expect(result).toBe(fmgPageValues.ESTIMATE);
|
||||
});
|
||||
|
||||
test("Replace navigation to `insurance-company` with `estimate`", async () => {
|
||||
// Arrange
|
||||
const toRoute = {
|
||||
query: {
|
||||
fmgPage: fmgPageValues.INSURANCE_COMPANY,
|
||||
},
|
||||
};
|
||||
|
||||
store.commit(storeMutations.UPDATE_IS_VERIFIED_INSURANCE, true);
|
||||
store.commit(storeMutations.UPDATE_REFERRAL_NUMBER, "666666");
|
||||
store.commit(storeMutations.UPDATE_IS_REPAIR, true);
|
||||
store.commit(storeMutations.UPDATE_MAKE, "acura");
|
||||
|
||||
// Act
|
||||
const result = await getPageToRouteExistingOrderTo(toRoute);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(fmgPageValues.ESTIMATE);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Vin-Required", () => {
|
||||
|
|
@ -438,29 +418,7 @@ describe("getPageToRouteExistingOrderTo", () => {
|
|||
store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, [
|
||||
{ glassLocation: glassLocations.WINDSHIELD },
|
||||
]);
|
||||
|
||||
// Act
|
||||
const result = await getPageToRouteExistingOrderTo(toRoute);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(fmgPageValues.VIN_LOOKUP);
|
||||
});
|
||||
|
||||
test("Replace navigation to `insurance-company` with `vin-lookup`", async () => {
|
||||
// Arrange
|
||||
const toRoute = {
|
||||
query: {
|
||||
fmgPage: fmgPageValues.INSURANCE_COMPANY,
|
||||
},
|
||||
};
|
||||
|
||||
store.commit(storeMutations.UPDATE_IS_VERIFIED_INSURANCE, true);
|
||||
store.commit(storeMutations.UPDATE_REFERRAL_NUMBER, "666666");
|
||||
store.commit(storeMutations.UPDATE_IS_REPAIR, false);
|
||||
store.commit(storeMutations.UPDATE_MAKE, "acura");
|
||||
store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, [
|
||||
{ glassLocation: glassLocations.WINDSHIELD },
|
||||
]);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_VIN, "abcd1234");
|
||||
|
||||
// Act
|
||||
const result = await getPageToRouteExistingOrderTo(toRoute);
|
||||
|
|
|
|||
|
|
@ -99,12 +99,22 @@ export async function submitWorkOrder({
|
|||
}
|
||||
|
||||
export async function saveQuote({ pageNameToLog }) {
|
||||
return await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.SAVE_QUOTE,
|
||||
{},
|
||||
pageNameToLog,
|
||||
false
|
||||
);
|
||||
|
||||
// save session back to sv2 so the email gets saved just in case they refresh or step away and come back later
|
||||
await saveSession({
|
||||
pageNameToLog: pageNameToLog,
|
||||
shouldAwaitSaveSessionQueue: true,
|
||||
submitAfterSave: false,
|
||||
createUnscheduledStatusWorkOrderForPIA: false,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// PRIVATE FUNCTIONS //
|
||||
|
|
|
|||
|
|
@ -32,7 +32,12 @@ export class Logger {
|
|||
}
|
||||
|
||||
formatLogEntry(message, details) {
|
||||
return `Application: ${applicationConfig.APPLICATION_NAME}\n${message}\n${
|
||||
const refSeqNumber = store.getters.order.referralSequenceNumber ?? "";
|
||||
const year = store.getters.vehicle.year ?? "";
|
||||
const make = store.getters.vehicle.make ?? "";
|
||||
const model = store.getters.vehicle.model ?? "";
|
||||
const vehicle = `${year} ${make} ${model}`;
|
||||
return `${new Date()} ReferralSequenceNumber: ${refSeqNumber}\nVehicle: ${vehicle}\nApplication: ${applicationConfig.APPLICATION_NAME}\n${message}\n${
|
||||
details ? JSON.stringify(details, undefined, 2) : ""
|
||||
}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,20 @@
|
|||
@forwardButtonAction="forwardButtonAction"
|
||||
@back-click="navigateBack"
|
||||
:key="currentGlassIndex"
|
||||
:index="currentGlassIndex" />
|
||||
:index="currentGlassIndex">
|
||||
<!-- save progress goes into <slot> on questions-page-layout -->
|
||||
<saveProgressModalQuestion
|
||||
modalWidgetName="SaveProgressModalWidget"
|
||||
v-if="!isEmailInStoreOnPageLoad"
|
||||
@save-progress="saveProgress" />
|
||||
</questions-page-layout>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -31,6 +38,7 @@ 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));
|
||||
|
|
@ -52,9 +60,12 @@ export default {
|
|||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
|
||||
if (store.getters.externalParameterState?.isExternalParameter) {
|
||||
if (store.getters.externalParameterServiceZip.zipCode) {
|
||||
await baseMixin.methods.dispatchStoreAction(
|
||||
|
|
@ -76,6 +87,7 @@ export default {
|
|||
questionsData: null,
|
||||
selectedAnswers: {},
|
||||
currentGlassIndex: 0,
|
||||
isEmailInStoreOnPageLoad: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -145,6 +157,9 @@ export default {
|
|||
this.questionsData
|
||||
);
|
||||
},
|
||||
saveProgress() {
|
||||
saveQuote({ pageNameToLog: "capability-questions" });
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const questionAnswersArray = this.questionsData.map((glass) => {
|
||||
// get answerResult2 of returned answer
|
||||
|
|
@ -205,6 +220,7 @@ export default {
|
|||
components: {
|
||||
Form,
|
||||
questionsPageLayout,
|
||||
saveProgressModalQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ import { required, regex } from "@/helpers/validation-rules";
|
|||
import { Form, defineRule } from "vee-validate";
|
||||
import { useField, validate } from "vee-validate";
|
||||
import store from "@/store";
|
||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
|
||||
|
|
@ -162,7 +163,7 @@ export default {
|
|||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
async forwardButtonAction() {
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_CUSTOMER_DETAILS,
|
||||
{
|
||||
|
|
@ -181,6 +182,17 @@ export default {
|
|||
false
|
||||
);
|
||||
|
||||
// if the user has resorted to using browser back/forward buttons we could have promises unresolved if they clicked back before pia work order submission.
|
||||
// so attempt to wait for them to finish.
|
||||
if (store.getters.order.payment.isPia) {
|
||||
this.dispatchStoreAction(
|
||||
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||
paymentMethods.NONE,
|
||||
false
|
||||
);
|
||||
await store.getters.applicationUser.saveSessionPromise;
|
||||
}
|
||||
|
||||
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,13 +12,20 @@
|
|||
@forwardButtonAction="forwardButtonAction"
|
||||
@back-click="navigateBack"
|
||||
:key="currentGlassIndex"
|
||||
:index="currentGlassIndex" />
|
||||
:index="currentGlassIndex">
|
||||
<!-- save progress goes into <slot> on questions-page-layout -->
|
||||
<saveProgressModalQuestion
|
||||
modalWidgetName="SaveProgressModalWidget"
|
||||
v-if="!isEmailInStoreOnPageLoad"
|
||||
@save-progress="saveProgress" />
|
||||
</questions-page-layout>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -31,6 +38,7 @@ 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));
|
||||
|
|
@ -52,9 +60,12 @@ export default {
|
|||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
|
||||
if (store.getters.externalParameterState?.isExternalParameter) {
|
||||
if (store.getters.externalParameterServiceZip.zipCode) {
|
||||
await baseMixin.methods.dispatchStoreAction(
|
||||
|
|
@ -77,6 +88,7 @@ export default {
|
|||
questionsData: null,
|
||||
selectedAnswers: {},
|
||||
currentGlassIndex: 0,
|
||||
isEmailInStoreOnPageLoad: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -145,6 +157,9 @@ export default {
|
|||
this.questionsData
|
||||
);
|
||||
},
|
||||
saveProgress() {
|
||||
saveQuote({ pageNameToLog: "molding-questions" });
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const questionAnswersArray = this.questionsData.map((glass) => {
|
||||
return {
|
||||
|
|
@ -189,6 +204,7 @@ export default {
|
|||
components: {
|
||||
Form,
|
||||
questionsPageLayout,
|
||||
saveProgressModalQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,20 @@
|
|||
@forwardButtonAction="forwardButtonAction"
|
||||
@back-click="navigateBack"
|
||||
:key="currentGlassIndex"
|
||||
:index="currentGlassIndex" />
|
||||
:index="currentGlassIndex">
|
||||
<!-- save progress goes into <slot> on questions-page-layout -->
|
||||
<saveProgressModalQuestion
|
||||
modalWidgetName="SaveProgressModalWidget"
|
||||
v-if="!isEmailInStoreOnPageLoad"
|
||||
@save-progress="saveProgress" />
|
||||
</questions-page-layout>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -31,6 +38,7 @@ 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));
|
||||
|
|
@ -52,9 +60,12 @@ export default {
|
|||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
|
||||
if (store.getters.externalParameterState?.isExternalParameter) {
|
||||
if (store.getters.externalParameterServiceZip.zipCode) {
|
||||
const serviceState = store.getters.order.serviceLocation.state;
|
||||
|
|
@ -78,6 +89,7 @@ export default {
|
|||
questionsData: null,
|
||||
selectedAnswers: {},
|
||||
currentGlassIndex: 0,
|
||||
isEmailInStoreOnPageLoad: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -144,6 +156,9 @@ export default {
|
|||
this.questionsData
|
||||
);
|
||||
},
|
||||
saveProgress() {
|
||||
saveQuote({ pageNameToLog: "part-questions" });
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const questionAnswersArray = this.questionsData.map((glass) => {
|
||||
return {
|
||||
|
|
@ -185,6 +200,7 @@ export default {
|
|||
components: {
|
||||
Form,
|
||||
questionsPageLayout,
|
||||
saveProgressModalQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -202,6 +202,9 @@ describe("payment.vue", () => {
|
|||
jobMaxMinutes: "45",
|
||||
},
|
||||
},
|
||||
applicationUser: {
|
||||
loggingOption: false,
|
||||
},
|
||||
policy: {
|
||||
currentDeductible: 1,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -532,13 +532,53 @@ export default {
|
|||
store.getters.order.payment.isPia !== null &&
|
||||
(store.getters.order.payment.isPia || !!store.getters.order.payment.piaType);
|
||||
|
||||
return (
|
||||
const preReqResult =
|
||||
serviceLocationReqs &&
|
||||
isInsuranceSet &&
|
||||
scheduleReqs &&
|
||||
customerReqs &&
|
||||
paymentMethodReqs
|
||||
);
|
||||
paymentMethodReqs;
|
||||
|
||||
// prettier-ignore
|
||||
{
|
||||
if (store.getters.applicationUser.loggingOption || !preReqResult) {
|
||||
console.log("------------- payment.vue pagePrereqs start -----------------");
|
||||
console.log(new Date() + "mobileReqs:" + mobileReqs);
|
||||
console.log(new Date() + "serviceLocation.address:" + serviceLocation.address);
|
||||
console.log(new Date() + "serviceLocation.city:" + serviceLocation.city);
|
||||
console.log(new Date() + "serviceLocation.state:" + serviceLocation.state);
|
||||
console.log(new Date() + "serviceLocation.zipCode:" + serviceLocation.zipCode);
|
||||
console.log("");
|
||||
console.log(new Date() + "dropOffInshopReqs:" + dropOffInshopReqs);
|
||||
console.log(new Date() + "serviceLocationReqs:" + serviceLocationReqs);
|
||||
console.log(new Date() + "providerLocation.streetAddress:" + providerLocation.streetAddress);
|
||||
console.log(new Date() + "providerLocation.city:" + providerLocation.city);
|
||||
console.log(new Date() + "providerLocation.state:" + providerLocation.state);
|
||||
console.log(new Date() + "providerLocation.zipCode:" + providerLocation.zipCode);
|
||||
console.log("");
|
||||
console.log(new Date() + "isInsuranceSet:" + isInsuranceSet);
|
||||
console.log("");
|
||||
console.log(new Date() + "scheduleReqs:" + scheduleReqs);
|
||||
console.log(new Date() + "schedule.date:" + schedule.date);
|
||||
console.log(new Date() + "schedule.startTime:" + schedule.startTime);
|
||||
console.log(new Date() + "schedule.endTime:" + schedule.endTime);
|
||||
console.log(new Date() + "schedule.jobMaxMinutes:" + schedule.jobMaxMinutes);
|
||||
console.log(new Date() + "schedule.jobMinMinutes:" + schedule.jobMinMinutes);
|
||||
console.log("");
|
||||
console.log(new Date() + "customerReqs:" + customerReqs);
|
||||
console.log(new Date() + "customer.firstName:" + customer.firstName);
|
||||
console.log(new Date() + "customer.lastName:" + customer.lastName);
|
||||
console.log(new Date() + "customer.phoneNumber:" + customer.phoneNumber);
|
||||
console.log(new Date() + "customer.emailAddress:" + customer.emailAddress);
|
||||
console.log("");
|
||||
console.log(new Date() + "paymentMethodReqs:" + paymentMethodReqs);
|
||||
console.log(new Date() + "store.getters.order.payment.isPia:" + store.getters.order.payment.isPia);
|
||||
console.log(new Date() + "store.getters.order.payment.piaType:" + store.getters.order.payment.piaType);
|
||||
console.log("------------- payment.vue pagePrereqs end -------------------");
|
||||
}
|
||||
}
|
||||
|
||||
return preReqResult;
|
||||
},
|
||||
getWOrkOrderNumber() {
|
||||
if (store.getters.order.workOrderNumber) {
|
||||
|
|
|
|||
|
|
@ -121,6 +121,9 @@ store.getters = {
|
|||
isInsurance: false,
|
||||
parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -136,6 +139,9 @@ afterEach(() => {
|
|||
insuranceCoverage: {},
|
||||
isInsurance: false,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -263,6 +269,9 @@ describe("quote.vue", () => {
|
|||
glassParts: ["item", "item2"],
|
||||
},
|
||||
payment: {},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
zipCode: "12345",
|
||||
zipCodeCtu: "value",
|
||||
|
|
@ -309,6 +318,9 @@ describe("quote.vue", () => {
|
|||
glassParts: ["item", "item2"],
|
||||
},
|
||||
payment: {},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
zipCode: "12345",
|
||||
zipCodeCtu: "value",
|
||||
|
|
@ -355,6 +367,9 @@ describe("quote.vue", () => {
|
|||
payment: {
|
||||
isInsurance: null,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
state: null,
|
||||
},
|
||||
|
|
@ -396,6 +411,9 @@ describe("quote.vue", () => {
|
|||
payment: {
|
||||
isInsurance: null,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
state: null,
|
||||
},
|
||||
|
|
@ -438,6 +456,9 @@ describe("quote.vue", () => {
|
|||
payment: {
|
||||
isInsurance: true,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
state: null,
|
||||
},
|
||||
|
|
@ -480,6 +501,9 @@ describe("quote.vue", () => {
|
|||
payment: {
|
||||
isInsurance: false,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
state: null,
|
||||
},
|
||||
|
|
@ -523,6 +547,9 @@ describe("quote.vue", () => {
|
|||
payment: {
|
||||
isInsurance: null, // Ensure that previous selection isn't overriding selection
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
state: null,
|
||||
},
|
||||
|
|
@ -568,6 +595,9 @@ describe("quote.vue", () => {
|
|||
payment: {
|
||||
isInsurance: null, // Ensure that previous selection isn't overriding selection
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
state: null,
|
||||
},
|
||||
|
|
@ -612,6 +642,9 @@ describe("quote.vue", () => {
|
|||
payment: {
|
||||
isInsurance: null,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
serviceLocation: {
|
||||
state: "AZ",
|
||||
},
|
||||
|
|
@ -717,6 +750,9 @@ describe("quote.vue", () => {
|
|||
isInsurance: true,
|
||||
inactivePromos: [],
|
||||
},
|
||||
customer: {
|
||||
emailAddress: "test@test.com",
|
||||
},
|
||||
},
|
||||
externalParameterState: { isExternalParameter: 1 },
|
||||
externalParameterQuote: {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<div class="container-fluid page-container-grouped-styles">
|
||||
<div class="row justify-content-center">
|
||||
<div
|
||||
class="container-fluid page-container-grouped-styles quote-page"
|
||||
:class="showSaveProgressPopup ? 'show-save-progress-popup' : ''">
|
||||
<div class="row justify-content-center funnel-header-wrapper">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
</div>
|
||||
|
|
@ -77,6 +79,12 @@
|
|||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
|
||||
<saveProgressModalQuestion
|
||||
modalWidgetName="SaveProgressModalWidget"
|
||||
modalName="SaveProgressModal"
|
||||
v-if="!isEmailInStoreOnPageLoad"
|
||||
@save-progress="saveProgress" />
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="quoteDisclaimer"
|
||||
justifyText="center"
|
||||
|
|
@ -84,9 +92,16 @@
|
|||
class="mb-5 quote-disclaimer" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="row justify-content-center save-progress-popup">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<button @click="handleClick">Click me!</button>
|
||||
<saveProgressPopupQuestion
|
||||
modalWidgetName="SaveProgressPopupWidget"
|
||||
modalName="SaveProgressPopup"
|
||||
v-if="!isEmailInStoreOnPageLoad && showSaveProgressPopup"
|
||||
:showSaveProgressPopup="showSaveProgressPopup"
|
||||
@save-progress="saveProgress"
|
||||
@close-save-progress-popup="closeSaveProgressPopup" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,6 +120,8 @@ import contentGroupModal from "@/fmg-components/content-group-modal/content-grou
|
|||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import afterpayModalBanner from "@/layouts/quote/afterpay-modal-banner/afterpay-modal-banner";
|
||||
import recalDisclaimer from "@/layouts/quote/recal-disclaimer/recal-disclaimer.vue";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
import saveProgressPopupQuestion from "@/fmg-components/save-progress-popup-question/save-progress-popup-question";
|
||||
|
||||
// Supporting files
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
|
@ -189,6 +206,10 @@ export default {
|
|||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const emailFromStore = store.getters.order.customer.emailAddress;
|
||||
const isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
|
||||
const showSaveProgressPopup = isEmailInStoreOnPageLoad ? false : true;
|
||||
|
||||
const lineItems = deepClone(store.getters.order.lineItems);
|
||||
lineItems.vaps = lineItems.vaps ?? [];
|
||||
const nullSafeGlassParts = lineItems.glassParts ?? [];
|
||||
|
|
@ -269,6 +290,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.addableVaps = addableVaps;
|
||||
vm.lineItems = lineItems;
|
||||
vm.availableLineItems = pricingResults;
|
||||
|
|
@ -415,6 +438,8 @@ export default {
|
|||
servicePackage: null,
|
||||
holdParentAccountNumber: null,
|
||||
holdBillToAccountNumber: null,
|
||||
isEmailInStoreOnPageLoad: null,
|
||||
showSaveProgressPopup: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -461,9 +486,6 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
async handleClick() {
|
||||
await saveQuote({ pageNameToLog: "quote" });
|
||||
},
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName].openModal();
|
||||
},
|
||||
|
|
@ -504,6 +526,14 @@ export default {
|
|||
backButtonAction() {
|
||||
vehicleQuestionsMixin.methods.navigateBack(this);
|
||||
},
|
||||
saveProgress() {
|
||||
this.isEmailInStoreOnPageLoad = true;
|
||||
this.showSaveProgressPopup = false;
|
||||
saveQuote({ pageNameToLog: "quote" });
|
||||
},
|
||||
closeSaveProgressPopup() {
|
||||
this.showSaveProgressPopup = false;
|
||||
},
|
||||
forwardButtonAction() {
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_PAYMENT_TYPE,
|
||||
|
|
@ -689,10 +719,22 @@ export default {
|
|||
afterpayModalBanner,
|
||||
promoModalQuestion,
|
||||
recalDisclaimer,
|
||||
saveProgressModalQuestion,
|
||||
saveProgressPopupQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.quote-page.show-save-progress-popup .row.justify-content-center {
|
||||
display: none;
|
||||
|
||||
&.funnel-header-wrapper,
|
||||
&.save-progress-popup {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.funnel-sub-header {
|
||||
p {
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -45,6 +45,11 @@
|
|||
:isForwardActionDisabled="isForwardActionDisabled"
|
||||
@back-clicked="navigateBack"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
|
||||
<saveProgressModalQuestion
|
||||
modalWidgetName="SaveProgressModalWidget"
|
||||
v-if="!isEmailInStoreOnPageLoad"
|
||||
@save-progress="saveProgress" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,6 +65,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
|
|||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -69,6 +75,7 @@ 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",
|
||||
|
|
@ -84,10 +91,11 @@ export default {
|
|||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const emailFromStore = store.getters.order?.customer?.emailAddress;
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
|
||||
vm.isEmailInStoreOnPageLoad = emailFromStore?.length > 0;
|
||||
// Glass Part Question dynamic component
|
||||
Object.keys(vm.$refs)
|
||||
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
|
||||
|
|
@ -107,6 +115,7 @@ export default {
|
|||
selectedGlassParts: {},
|
||||
alertWidgetData: Object,
|
||||
alreadyPopulatedPartsData: [],
|
||||
isEmailInStoreOnPageLoad: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -225,6 +234,9 @@ export default {
|
|||
});
|
||||
});
|
||||
},
|
||||
saveProgress() {
|
||||
saveQuote({ pageNameToLog: "vehicle-parts" });
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.LoadInitialPartsData();
|
||||
|
|
@ -237,6 +249,7 @@ export default {
|
|||
navbar,
|
||||
alert,
|
||||
loadingModal,
|
||||
saveProgressModalQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -403,7 +403,7 @@ export default {
|
|||
!options.length ||
|
||||
store.getters.payment?.insuranceCoverage?.isVerified ||
|
||||
(store.getters.order.payment?.isInsurance &&
|
||||
getFunnelCookie().HasDelayedClaimRegistration)
|
||||
getFunnelCookie()?.HasDelayedClaimRegistration)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -113,6 +113,7 @@ const routes = [
|
|||
store.commit(storeMutations.UPDATE_AFFILIATE_COOKIES, affiliateCookies);
|
||||
}
|
||||
setupAdvertiserTracking();
|
||||
log(" --load session start");
|
||||
const loadSessionResponse = await loadSessionIfPresent(
|
||||
to.query.isInsurance != null
|
||||
? to.query.isInsurance == "true"
|
||||
|
|
@ -121,6 +122,7 @@ const routes = [
|
|||
: null,
|
||||
to.query.fmgPage
|
||||
);
|
||||
log(" --load session end");
|
||||
|
||||
//Update external parameter state but not when returning from heritage
|
||||
if (!to.query.fmgPage?.startsWith("service-location")) {
|
||||
|
|
@ -155,7 +157,10 @@ const routes = [
|
|||
// Reroute around pages that should not be available.
|
||||
|
||||
// Exception 1: Integrated Users should not see vehicle or quote pages.
|
||||
if (store.getters.payment?.insuranceCoverage?.isVerified) {
|
||||
if (
|
||||
store.getters.payment?.insuranceCoverage?.isVerified ||
|
||||
store.getters.order?.referralNumber?.length === 6
|
||||
) {
|
||||
if (to.query.fmgPage === fmgPageValues.VEHICLE) {
|
||||
to.query.fmgPage = fmgPageValues.VEHICLE_DAMAGE;
|
||||
} else if (
|
||||
|
|
@ -194,6 +199,13 @@ const routes = [
|
|||
|
||||
if (!arePagePrerequisitesValid(component)) {
|
||||
console.log("Page prereq error: " + component.default.name);
|
||||
|
||||
if (to.query.fmgPage === fmgPageValues.PAYMENT) {
|
||||
await store.getters.applicationUser.saveSessionPromise;
|
||||
window.location = applicationConfig.PIA_CANCEL_URL;
|
||||
return;
|
||||
}
|
||||
|
||||
GoToFunnelStartOn404(next);
|
||||
}
|
||||
|
||||
|
|
@ -380,6 +392,8 @@ router.navigateWithSaving = (
|
|||
};
|
||||
|
||||
router.navigateToExternalUrl = (url, optionalQuery = {}) => {
|
||||
log("------------- router navigateToExternalUrl -----------------");
|
||||
log("url:", url);
|
||||
navigateToUrl(url, optionalQuery);
|
||||
};
|
||||
|
||||
|
|
@ -397,6 +411,13 @@ router.overrideNavigation = (
|
|||
optionalParams = {},
|
||||
optionalPageData
|
||||
) => {
|
||||
log("------------- router overrideNavigation -----------------");
|
||||
log("scenario:", scenario);
|
||||
log("currentRoute:", currentRoute);
|
||||
log("isSavingNavigation:", isSavingNavigation);
|
||||
log("optionalQuery:", optionalQuery);
|
||||
log("optionalParams:", optionalParams);
|
||||
log("optionalPageData:", optionalPageData);
|
||||
navigate(
|
||||
scenario,
|
||||
currentRoute,
|
||||
|
|
@ -508,6 +529,9 @@ async function navigate(
|
|||
// Get navigation map depending on the scenario and the current 'page' you're on.
|
||||
function getNavigationMap(scenario, currentRoute) {
|
||||
const fmgPageValue = currentRoute.query.fmgPage;
|
||||
log("------------- router index.js getNavigationMap start -----------------");
|
||||
log("fmgPage: " + fmgPageValue + " scenario: " + scenario, "");
|
||||
log("------------- router index.js getNavigationMap end -----------------");
|
||||
const matchedQueryValue = routingTable(store)
|
||||
.filter(
|
||||
(item) =>
|
||||
|
|
@ -525,7 +549,7 @@ function log(message, data) {
|
|||
data = data ?? "";
|
||||
const outData = typeof data === "object" ? JSON.stringify(data) : data;
|
||||
|
||||
if (log === "true") {
|
||||
if (log === "true" || store.getters.applicationUser.loggingOption) {
|
||||
console.log(new Date() + message + outData);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -470,6 +470,10 @@ const routingTable = function (store) {
|
|||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_PAY_NOW,
|
||||
destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1057,6 +1057,7 @@ export const actions = {
|
|||
payload: {
|
||||
licensePlate: licensePlate,
|
||||
licenseState: licenseState,
|
||||
logEnabled: context.getters.applicationUser.loggingOption,
|
||||
},
|
||||
logApiCall: true,
|
||||
pageNameToLog: pageNameToLog,
|
||||
|
|
@ -1969,7 +1970,7 @@ export const actions = {
|
|||
referralCorrelationId: order.referralCorrelationId,
|
||||
referralNumber: order.referralNumber?.toString(),
|
||||
referralSequenceNumber: order.referralSequenceNumber,
|
||||
emailAddress: "cn@gm.com", //order.customer.emailAddress,
|
||||
emailAddress: order.customer.emailAddress,
|
||||
lastPage: pageNameToLog,
|
||||
isRepair: damage.isRepair,
|
||||
firstName: order.customer.firstName,
|
||||
|
|
@ -2547,10 +2548,12 @@ export const actions = {
|
|||
},
|
||||
|
||||
savePaymentMethodChoice(context, paymentMethod) {
|
||||
const isPia = paymentMethod !== paymentMethods.LATER;
|
||||
var isPia = null;
|
||||
if (paymentMethod !== paymentMethods.NONE) {
|
||||
isPia = paymentMethod !== paymentMethods.LATER;
|
||||
}
|
||||
|
||||
context.commit(storeMutations.UPDATE_IS_PIA, isPia);
|
||||
|
||||
context.commit(storeMutations.UPDATE_PIA_TYPE, isPia ? paymentMethod : null);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
.modal-open {
|
||||
.modal-open:not(.prevent-modal-scroll) {
|
||||
.container-fluid {
|
||||
&.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
:class="[
|
||||
isPrimary ? 'btn-primary' : 'btn-secondary',
|
||||
isFloat ? 'float-end' : '',
|
||||
isLoaderDisplayed ? 'has-loader' : '',
|
||||
(isLoaderDisplayed && !suppressLoader) ? 'has-loader' : '',
|
||||
]"
|
||||
@click="clicked">
|
||||
<span class="m-0">{{ this.buttonText }}</span>
|
||||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
true
|
||||
);
|
||||
if (!this.isDisabled) {
|
||||
this.isLoaderDisplayed = true;
|
||||
if (!this.suppressLoader) this.isLoaderDisplayed = true;
|
||||
this.$emit("click-event");
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue