Merge pull request #2572 from Safelite/rlsmerge/2025.06.05-to-develop
Rlsmerge/2025.06.05 to develop
This commit is contained in:
CarlNation
GitHub
commit
7518a3896e
17 changed files with 242 additions and 135 deletions
|
|
@ -1081,7 +1081,7 @@ export default {
|
|||
border-radius: 50%;
|
||||
background-color: $black;
|
||||
position: absolute;
|
||||
top: 1.875rem;
|
||||
top: 1.75rem;
|
||||
}
|
||||
.first-day {
|
||||
color: $blue;
|
||||
|
|
@ -1090,13 +1090,6 @@ export default {
|
|||
input[type="radio"]:checked + label:after {
|
||||
background-color: $black;
|
||||
}
|
||||
&.selectable-day {
|
||||
label {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1285,6 +1278,13 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
&.selectable-day.current-day {
|
||||
label {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@ import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
|
|||
import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
|
||||
import { applicationConfig } from "@/constants/application-config";
|
||||
import { webchatHelper } from "@/helpers/webchat-helper";
|
||||
import analyticsMixin from "@/mixins/analytics-mixin";
|
||||
|
||||
export default {
|
||||
name: "salesforceWebchat",
|
||||
mixins: [analyticsMixin],
|
||||
data() {
|
||||
return {
|
||||
isAgentAvailable: false,
|
||||
|
|
@ -34,6 +36,29 @@ export default {
|
|||
script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
|
||||
script.onload = this.initializeSalesforceWebchat;
|
||||
document.body.appendChild(script);
|
||||
|
||||
// Notify funnel-header about Salesforce chat open/close state
|
||||
this._salesforceChatOpenObserver = new MutationObserver(() => {
|
||||
const isOpen = !!document.querySelector(".embeddedServiceSidebar");
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("salesforce-chat-visibility", { detail: { open: isOpen } })
|
||||
);
|
||||
});
|
||||
this._salesforceChatOpenObserver.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
// Clean up event listeners and observers
|
||||
window.removeEventListener(
|
||||
"salesforce-chat-visibility",
|
||||
this._handleSalesforceChatVisibility
|
||||
);
|
||||
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
||||
if (this._salesforceChatOpenObserver) {
|
||||
this._salesforceChatOpenObserver.disconnect();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeSalesforceWebchat() {
|
||||
|
|
@ -71,6 +96,9 @@ export default {
|
|||
window.embedded_svc.settings.prechatBackgroundImgURL = require("@/assets/img/salesforce-webchat/safelite_logo_webchat.png");
|
||||
window.embedded_svc.settings.smallCompanyLogoImgURL = require("@/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png");
|
||||
window.embedded_svc.settings.displayHelpButton = false;
|
||||
window.embedded_svc.addEventHandler("onChatEstablished", () => {
|
||||
this.pushEventForChatsToGA("support_chat", "chat_opened", "Live Agent", true);
|
||||
});
|
||||
},
|
||||
finishedLoadingCallback(data) {
|
||||
this.isAgentAvailable = data.isAgentAvailable;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,28 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import SierraWebchat from "./sierra-webchat.vue";
|
||||
import sierraWebchat from "./sierra-webchat.vue";
|
||||
|
||||
jest.mock("@/mixins/analytics-mixin");
|
||||
// Mock router for analytics-mixin
|
||||
jest.mock("@/router", () => ({
|
||||
currentRoute: {
|
||||
value: {
|
||||
name: "mockedPageName",
|
||||
},
|
||||
},
|
||||
default: {
|
||||
currentRoute: {
|
||||
value: {
|
||||
name: "mockedPageName",
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
describe("sierraWebchat.vue", () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowMount(SierraWebchat);
|
||||
wrapper = shallowMount(sierraWebchat);
|
||||
// Mock global window properties
|
||||
window.sierraChat = { openChatModal: jest.fn(), closeChatModal: jest.fn() };
|
||||
window.sierra = undefined;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import analyticsMixin from "@/mixins/analytics-mixin";
|
||||
export default {
|
||||
name: "sierraWebchat",
|
||||
mixins: [analyticsMixin],
|
||||
methods: {
|
||||
openSierraChatModal() {
|
||||
const sierra = window.sierraChat || window.sierra || window.SierraChat;
|
||||
|
|
@ -18,6 +20,7 @@ export default {
|
|||
launchLink.click();
|
||||
document.body.removeChild(launchLink);
|
||||
}
|
||||
this.pushEventForChatsToGA("support_chat", "chat_opened", "Scarlett", true);
|
||||
},
|
||||
createSierraConfig() {
|
||||
return {
|
||||
|
|
@ -93,7 +96,6 @@ export default {
|
|||
Email: transfer.data.email,
|
||||
Subject: transfer.data.chat_summary, // for now passing in chat_summery in Subject. But this will be changed in future.
|
||||
};
|
||||
// Start chat immediately if required fields are present
|
||||
if (
|
||||
window.embedded_svc.liveAgentAPI &&
|
||||
typeof window.embedded_svc.liveAgentAPI.startChat === "function"
|
||||
|
|
@ -106,10 +108,25 @@ export default {
|
|||
}
|
||||
};
|
||||
window.addEventListener("sierra-chat-transfer", this._handleSierraTransfer);
|
||||
|
||||
// Notify funnel-header about Sierra chat open/close state
|
||||
this._sierraChatContainerObserver = new MutationObserver(() => {
|
||||
const isOpen = !!document.querySelector("[data-sierra-chat-container]");
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("sierra-chat-visibility", { detail: { open: isOpen } })
|
||||
);
|
||||
});
|
||||
this._sierraChatContainerObserver.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("launch-sierra-webchat", this.triggerSierraChat);
|
||||
window.removeEventListener("sierra-chat-transfer", this._handleSierraTransfer);
|
||||
if (this._sierraChatContainerObserver) {
|
||||
this._sierraChatContainerObserver.disconnect();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -208,8 +208,9 @@ export default {
|
|||
justify-content: center;
|
||||
background: $blue-100;
|
||||
border-radius: 3rem;
|
||||
box-shadow: 0px 0px 4px 1px rgba(0, 112, 209, 1) inset;
|
||||
box-shadow: inset 0px 2px 4px 0px rgba(0, 112, 209, 0.2);
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid $blue;
|
||||
.label {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
|
@ -231,7 +232,7 @@ export default {
|
|||
left: -2rem;
|
||||
background: $blue;
|
||||
border-radius: 3rem;
|
||||
box-shadow: 0px 0px 0px 1px rgba(0, 112, 209, 1) inset;
|
||||
box-shadow: 0px 3px 4px 0px rgba(66, 68, 90, 0.2);
|
||||
transition: transform 750ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
|
||||
transform: translate3d(2rem, 0, 0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@ export default {
|
|||
return {
|
||||
globalAlertMessages: [],
|
||||
sierraChatOpen: false,
|
||||
salesforceChatOpen: false,
|
||||
isSalesforceTransferInProgress: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -73,16 +75,19 @@ export default {
|
|||
return this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
||||
},
|
||||
shouldShowWebchatButton() {
|
||||
// Always update experiment flag before computing visibility
|
||||
this.syncSierraExperimentFlag();
|
||||
// Show if Sierra experiment is active and chat is not open
|
||||
if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) {
|
||||
return !this.sierraChatOpen;
|
||||
// Hide the chat icon if Sierra chat is open
|
||||
if (this.sierraChatOpen) {
|
||||
return false;
|
||||
}
|
||||
// Otherwise, use Salesforce logic
|
||||
// Hide the chat icon if Salesforce chat is open or transfer is in progress
|
||||
if (this.salesforceChatOpen || this.isSalesforceTransferInProgress) {
|
||||
return false;
|
||||
}
|
||||
// Show if either Sierra is enabled or Salesforce button is available and not hidden by page
|
||||
return (
|
||||
!this.shouldHideWebchatButtonOnPage &&
|
||||
this.webchatGlobalNonpersistedState.showWebchatButton
|
||||
(this.webchatGlobalNonpersistedState.shouldLaunchSierra ||
|
||||
this.webchatGlobalNonpersistedState.showWebchatButton) &&
|
||||
!this.shouldHideWebchatButtonOnPage
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
@ -123,6 +128,7 @@ export default {
|
|||
progressBar,
|
||||
},
|
||||
mounted() {
|
||||
this.syncSierraExperimentFlag();
|
||||
// Check if alert event is on the bus
|
||||
const alertEvent = eventBus.readAndPopEventFromBus(
|
||||
globalEvents.Categories.GLOBAL_ALERT,
|
||||
|
|
@ -144,14 +150,47 @@ export default {
|
|||
unknownAlertEvent.displayAlert = true;
|
||||
this.globalAlertMessages.push(unknownAlertEvent);
|
||||
}
|
||||
// Listen for Sierra chat close event to re-enable the chat button if needed
|
||||
this._handleSierraChatClosed = () => {
|
||||
this.sierraChatOpen = false;
|
||||
// Listen for Sierra chat open/close events from sierra-webchat
|
||||
this._handleSierraChatVisibility = (event) => {
|
||||
this.sierraChatOpen = !!(event.detail && event.detail.open);
|
||||
if (this.sierraChatOpen) {
|
||||
this.isSalesforceTransferInProgress = false;
|
||||
}
|
||||
};
|
||||
window.addEventListener("sierra-chat-closed", this._handleSierraChatClosed);
|
||||
window.addEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
|
||||
|
||||
// Listen for Salesforce chat open/close events from salesforce-webchat
|
||||
this._handleSalesforceChatVisibility = (event) => {
|
||||
this.salesforceChatOpen = !!(event.detail && event.detail.open === true);
|
||||
};
|
||||
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatVisibility);
|
||||
|
||||
// Listen for transfer event to set transfer-in-progress flag
|
||||
this._handleSierraToSalesforceTransfer = () => {
|
||||
this.isSalesforceTransferInProgress = true;
|
||||
};
|
||||
window.addEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
||||
|
||||
// Reset transfer flag when Salesforce chat opens
|
||||
this._handleSalesforceChatOpened = (event) => {
|
||||
if (event.detail && event.detail.open === true) {
|
||||
this.isSalesforceTransferInProgress = false;
|
||||
this.salesforceChatOpen = true;
|
||||
} else {
|
||||
this.salesforceChatOpen = false;
|
||||
}
|
||||
};
|
||||
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
|
||||
window.removeEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
|
||||
window.removeEventListener(
|
||||
"salesforce-chat-visibility",
|
||||
this._handleSalesforceChatVisibility
|
||||
);
|
||||
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
||||
window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -919,6 +919,9 @@ export default {
|
|||
|
||||
.payment-method-question {
|
||||
padding: 0 1.5rem;
|
||||
.question-text span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-block {
|
||||
|
|
|
|||
|
|
@ -2,35 +2,14 @@
|
|||
<transition name="fade" mode="out-in">
|
||||
<div class="mobile-location-questions">
|
||||
<div class="text-center" :id="componentId">
|
||||
<label
|
||||
for="mobileLocationLinkPromptId"
|
||||
:aria-label="mobileLocationLinkPromptText"
|
||||
class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
|
||||
v-html="mobileLocationLinkPromptText"></label>
|
||||
<div class="update-mobile-location-text-link">
|
||||
<textLink
|
||||
ref="mobileLocationLink"
|
||||
id="mobileLocationLinkPromptId"
|
||||
linkType="text"
|
||||
:text="mobileLocationLinkText"
|
||||
href="#!"
|
||||
@click-event="toggleMobileLocation" />
|
||||
</div>
|
||||
<div v-show="errorMessage" class="row my-1 form-test-error">
|
||||
<span
|
||||
class="d-inline-flex small mt-0 center-error-message"
|
||||
aria-atomic="true"
|
||||
aria-live="polite">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
<textBlock
|
||||
v-if="mobileFeeApplies"
|
||||
:customText="mobileFeeText"
|
||||
cmsWidgetName="MobileFeeDisclaimerWidget"
|
||||
typeStyle="caption" />
|
||||
typeStyle="caption"
|
||||
class="ps-4 pe-4 mt-4" />
|
||||
</div>
|
||||
<div v-if="isMobileLocationOpened" class="address-questions-container">
|
||||
<div v-if="this.modelValue.isMobileSelected" class="address-questions-container">
|
||||
<div v-html="headerText" class="HeaderText" />
|
||||
<addressQuestions
|
||||
ref="addressQuestions"
|
||||
|
|
@ -64,7 +43,6 @@
|
|||
</template>
|
||||
<script>
|
||||
// Components
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import addressQuestions from "@/fmg-components/address-questions/address-questions";
|
||||
|
|
@ -97,7 +75,6 @@ export default {
|
|||
return {
|
||||
internalModel: deepClone(this.modelValue),
|
||||
displayInvalidZipAlert: false,
|
||||
isMobileLocationOpened: false,
|
||||
displayMismatchStateAndZipAlert: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -159,15 +136,6 @@ export default {
|
|||
mobileFeeApplies: Boolean,
|
||||
},
|
||||
computed: {
|
||||
mobileLocationLinkPromptText() {
|
||||
return this.getCmsContent(this.linkWidgetName, "HeaderText");
|
||||
},
|
||||
mobileLocationLinkText() {
|
||||
if (this.isMobileAddressComplete()) {
|
||||
return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
|
||||
}
|
||||
return this.getCmsContent(this.linkWidgetName, "BodyText");
|
||||
},
|
||||
mobileFeeText() {
|
||||
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
|
||||
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
|
||||
|
|
@ -208,25 +176,6 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
isMobileAddressComplete() {
|
||||
return (
|
||||
this.addressModel.streetAddress &&
|
||||
this.addressModel.streetAddress !== "" &&
|
||||
this.addressModel.city &&
|
||||
this.addressModel.city !== "" &&
|
||||
this.addressModel.state &&
|
||||
this.addressModel.state !== "" &&
|
||||
this.addressModel.zipCode &&
|
||||
this.addressModel.zipCode !== "" &&
|
||||
this.internalModel.isVehicleProtected !== null
|
||||
);
|
||||
},
|
||||
getIsMobleLocationOpened() {
|
||||
if (this.isServiceAddressFromStoreAvailable) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
setMobileLocationInvalid(isFormInvalid) {
|
||||
this.$emit("set-mobile-location-invalid", isFormInvalid);
|
||||
},
|
||||
|
|
@ -300,9 +249,6 @@ export default {
|
|||
// update the page level model
|
||||
this.$emit("setMobileLocation", this.internalModel);
|
||||
},
|
||||
toggleMobileLocation() {
|
||||
this.isMobileLocationOpened = !this.isMobileLocationOpened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
internalModel: {
|
||||
|
|
@ -324,7 +270,6 @@ export default {
|
|||
addressQuestions,
|
||||
vehicleProtectedQuestion,
|
||||
textBlock,
|
||||
textLink,
|
||||
alert,
|
||||
},
|
||||
};
|
||||
|
|
@ -350,14 +295,11 @@ export default {
|
|||
.update-mobile-location-text-link {
|
||||
white-space: pre-line;
|
||||
}
|
||||
.address-questions-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: $black;
|
||||
}
|
||||
.HeaderText {
|
||||
margin-top: 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.625rem;
|
||||
|
|
|
|||
|
|
@ -469,10 +469,9 @@ describe("service-location.vue", () => {
|
|||
zipCode: "43054",
|
||||
},
|
||||
isVehicleProtected: true,
|
||||
isMobileSelected: false,
|
||||
isMobileSelected: true,
|
||||
};
|
||||
|
||||
//wrapper.vm.closeModalAction = jest.fn();
|
||||
// Act
|
||||
|
||||
// Trigger the event
|
||||
|
|
@ -1436,6 +1435,7 @@ function setupMocks({ mountOptionsMockData = {} }) {
|
|||
const wrapper = shallowMount(serviceLocation, mountOptions);
|
||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
|
||||
wrapper.vm.$refs.mobileLocationQuestions.resetAlerts = jest.fn();
|
||||
wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -174,13 +174,20 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
|
|||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("mobile-location-required", (value) => {
|
||||
const addressQuestionsValues = Object.values(
|
||||
[
|
||||
value.addressQuestions.streetAddress,
|
||||
value.addressQuestions.city,
|
||||
value.isVehicleProtected,
|
||||
] || {}
|
||||
);
|
||||
const filledFields = addressQuestionsValues.filter(
|
||||
(val) => val !== null && val !== undefined && val !== ""
|
||||
);
|
||||
if (
|
||||
value.isMobileSelected &&
|
||||
(!value.addressQuestions.streetAddress ||
|
||||
!value.addressQuestions.city ||
|
||||
!value.addressQuestions.state ||
|
||||
!value.addressQuestions.zipCode ||
|
||||
!value.isVehicleProtected)
|
||||
filledFields.length > 0 &&
|
||||
filledFields.length < addressQuestionsValues.length
|
||||
) {
|
||||
return errorMessages.MOBILE_LOCATION_REQUIRED;
|
||||
}
|
||||
|
|
@ -305,9 +312,7 @@ export default {
|
|||
zipCode: this.zipCode,
|
||||
},
|
||||
isVehicleProtected: this.isVehicleProtected,
|
||||
isMobileSelected:
|
||||
this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
|
||||
!this.getIsMobileLocationOpened(),
|
||||
isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
|
@ -758,18 +763,6 @@ export default {
|
|||
setMobileLocationInValid(isMobileLocationInValid) {
|
||||
this.isMobileAddressValid = !isMobileLocationInValid;
|
||||
},
|
||||
displayMobileAddressQuestion(openMobileLocation) {
|
||||
var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
|
||||
var isMobileAddressComplete = mobileLocationQuestionsRef?.isMobileAddressComplete;
|
||||
if (isMobileAddressComplete?.()) {
|
||||
mobileLocationQuestionsRef.isMobileLocationOpened = false;
|
||||
} else {
|
||||
mobileLocationQuestionsRef.isMobileLocationOpened = openMobileLocation;
|
||||
}
|
||||
},
|
||||
getIsMobileLocationOpened() {
|
||||
return this.$refs.mobileLocationQuestions?.isMobileLocationOpened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
zipCode: {
|
||||
|
|
@ -794,10 +787,18 @@ export default {
|
|||
this.selectedProvider = new Provider(
|
||||
this.shopProviderData.mobileProviderNumber
|
||||
);
|
||||
this.displayMobileAddressQuestion(true);
|
||||
if (this.zipCode == this.getServiceZipCodeFromStore()) {
|
||||
//restore mobile address from store in case user make changes to address but not commit it.
|
||||
this.streetAddress = this.getServiceAddressFromStore();
|
||||
this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
|
||||
this.city = this.getServiceCityFromStore();
|
||||
this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
|
||||
} else {
|
||||
this.resetMobileLocation();
|
||||
}
|
||||
this.$refs.mobileLocationQuestions.resetAlerts();
|
||||
} else {
|
||||
this.selectedProvider = new Provider();
|
||||
this.displayMobileAddressQuestion(false);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -30,15 +30,16 @@ import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
|||
import { routeData } from "@/router/constants/routes";
|
||||
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
||||
import { Variables } from "../constants/analytics";
|
||||
import router from "@/router";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
getPageName() {
|
||||
return getPageNameByQueryString();
|
||||
return getPageNameFromRouter();
|
||||
},
|
||||
|
||||
async logPageView(pageEvent) {
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
const currentPageName = getPageNameFromRouter();
|
||||
await this.validateSession();
|
||||
|
||||
const submittedOrder = baseMixin.methods.getSubmittedOrder();
|
||||
|
|
@ -71,7 +72,7 @@ export default {
|
|||
},
|
||||
|
||||
async logCustomEvent(category, action, label, value) {
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
const currentPageName = getPageNameFromRouter();
|
||||
await this.validateSession();
|
||||
|
||||
const refSequenceNum =
|
||||
|
|
@ -100,8 +101,15 @@ export default {
|
|||
);
|
||||
},
|
||||
|
||||
async pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
async pushEventToGA(
|
||||
category,
|
||||
action,
|
||||
label,
|
||||
pushToLogApp = false,
|
||||
valueToLogType = null,
|
||||
value = null
|
||||
) {
|
||||
const currentPageName = getPageNameFromRouter();
|
||||
const labelToLog = getValueToLog(label, valueToLogType);
|
||||
|
||||
const eventToBePushed = {
|
||||
|
|
@ -109,8 +117,8 @@ export default {
|
|||
category: category,
|
||||
action: action,
|
||||
label: labelToLog,
|
||||
value: undefined,
|
||||
path: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
|
||||
value: value ?? undefined,
|
||||
path: `/fmg/${currentPageName}`,
|
||||
};
|
||||
|
||||
pushToDataLayerIfDefined(eventToBePushed);
|
||||
|
|
@ -120,15 +128,21 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
async pushEventForChatsToGA(category, action, label, pushToLogApp = false) {
|
||||
const currentPageName = getPageNameFromRouter();
|
||||
const value = `2.0_${currentPageName}`;
|
||||
await this.pushEventToGA(category, action, label, pushToLogApp, null, value);
|
||||
},
|
||||
|
||||
async pushVariableToDataLayer(data) {
|
||||
pushToDataLayerIfDefined(data);
|
||||
},
|
||||
|
||||
async pushPageViewToGA() {
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
const currentPageName = getPageNameFromRouter();
|
||||
const pageViewEvent = {
|
||||
event: GaEvents.PAGE_VIEW_EVENT,
|
||||
pagePath: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
|
||||
pagePath: `/fmg/${currentPageName}`,
|
||||
pageTitle: currentPageName,
|
||||
};
|
||||
|
||||
|
|
@ -790,13 +804,14 @@ function pushToDataLayerIfDefined(data) {
|
|||
}
|
||||
}
|
||||
|
||||
function getPageNameByQueryString() {
|
||||
const params = new URLSearchParams(location.search);
|
||||
|
||||
if (params.has(queryStrings.FMG_PAGE)) {
|
||||
return params.get(queryStrings.FMG_PAGE);
|
||||
} else {
|
||||
return "";
|
||||
function getPageNameFromRouter() {
|
||||
if (
|
||||
router &&
|
||||
router.currentRoute &&
|
||||
router.currentRoute.value &&
|
||||
router.currentRoute.value.name
|
||||
) {
|
||||
return router.currentRoute.value.name;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ describe("analyticsMixin.js", () => {
|
|||
action: "action",
|
||||
label: "label",
|
||||
value: undefined,
|
||||
path: "/fmg/?fmgPage=",
|
||||
path: "/fmg/mockedPageName",
|
||||
});
|
||||
|
||||
// Act
|
||||
|
|
@ -172,7 +172,7 @@ describe("analyticsMixin.js", () => {
|
|||
action: "action",
|
||||
label: "33333",
|
||||
value: undefined,
|
||||
path: "/fmg/?fmgPage=",
|
||||
path: "/fmg/mockedPageName",
|
||||
});
|
||||
|
||||
const mockData = {
|
||||
|
|
@ -211,7 +211,7 @@ describe("analyticsMixin.js", () => {
|
|||
action: "action",
|
||||
label: "111",
|
||||
value: undefined,
|
||||
path: "/fmg/?fmgPage=",
|
||||
path: "/fmg/mockedPageName",
|
||||
});
|
||||
|
||||
const mockData = {
|
||||
|
|
@ -1048,3 +1048,11 @@ describe("analyticsMixin.js", () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
jest.mock("@/router", () => ({
|
||||
currentRoute: {
|
||||
value: {
|
||||
name: "mockedPageName",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { routeData } from "@/router/constants/routes";
|
|||
import { consumeReferralQuerystrings } from "@/router/methods/helpers/consume-referral-info";
|
||||
import { initializeFromQueryStrings } from "@/router/methods/helpers/initialize-from-querystrings";
|
||||
import { stashAllQueries } from "@/router/methods/helpers/querystring-stash";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
import store from "@/store";
|
||||
|
||||
export async function landingBeforeEnter(to, from) {
|
||||
|
|
@ -21,9 +22,10 @@ export async function landingBeforeEnter(to, from) {
|
|||
};
|
||||
}
|
||||
|
||||
// If a session is still in memory, go to return-user.
|
||||
if (store.getters.vehicle?.year > 0) {
|
||||
console.log(`trying to redirect!`);
|
||||
const fromHeritage = to.query[queryStrings.FROM_HERITAGE];
|
||||
|
||||
// If a session is still in memory and not loading a save quote, go to return-user.
|
||||
if (store.getters.vehicle?.year > 0 && !fromHeritage) {
|
||||
return {
|
||||
name: routeData.RETURN_USER.name,
|
||||
replace: true,
|
||||
|
|
|
|||
9
src/router/methods/route-logic/payment-method.js
Normal file
9
src/router/methods/route-logic/payment-method.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { routeData } from "@/router/constants/routes";
|
||||
import router from "@/router";
|
||||
|
||||
export async function paymentMethodBeforeEnter(to, from) {
|
||||
// Refresh page when navigating back from payment to avoid iframe issues.
|
||||
if (from.name === routeData.PAYMENT.name) {
|
||||
router.go(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ import { loadSessionBeforeEnter } from "@/router/methods/route-logic/load-sessio
|
|||
import { autoRouteBeforeEnter } from "@/router/methods/route-logic/auto-route";
|
||||
import { errorBeforeEnter } from "@/router/methods/route-logic/error";
|
||||
import { restartBeforeEnter } from "@/router/methods/route-logic/restart";
|
||||
import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-method";
|
||||
|
||||
export const routes = [
|
||||
// Non-virtual pages.
|
||||
|
|
@ -30,7 +31,7 @@ export const routes = [
|
|||
createRoute(routeData.SERVICE_LOCATION),
|
||||
createRoute(routeData.SCHEDULE),
|
||||
createRoute(routeData.CUSTOMER_DETAILS),
|
||||
createRoute(routeData.PAYMENT_METHOD),
|
||||
createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),
|
||||
createRoute(routeData.PAYMENT),
|
||||
createRoute(routeData.PAYMENT_PIA_RETURN),
|
||||
createRoute(routeData.CONFIRMATION),
|
||||
|
|
|
|||
|
|
@ -963,6 +963,8 @@ export const getters = {
|
|||
funnelServiceState: state.order.serviceLocation.state,
|
||||
funnelServiceZipCode: state.order.serviceLocation.zipCode,
|
||||
funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
|
||||
funnelPolicyIsItac: state.order.policy.isItac ? "true" : "false",
|
||||
funnelPolicyIsNoComp: state.order.policy.isNoComp ? "true" : "false",
|
||||
funnelProviderNumber: state.order.serviceLocation.provider.providerNumber,
|
||||
funnelParentAccountNumber: state.order.payment.parentAccountNumber,
|
||||
funnelReferralType: state.order.payment.isInsurance ? "INSURANCE" : "CASH QUOTE",
|
||||
|
|
@ -1497,7 +1499,7 @@ export const actions = {
|
|||
parentAccountNumber,
|
||||
}
|
||||
) {
|
||||
if (!pageName) {
|
||||
if (!pageName || !category) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -2190,6 +2192,7 @@ export const actions = {
|
|||
serverData: lineItems.serverData,
|
||||
promos: lineItems.promos,
|
||||
},
|
||||
coverageStatus: order.payment.insuranceCoverage.coverageStatus ?? "",
|
||||
},
|
||||
logApiCall: true,
|
||||
pageNameToLog: pageNameToLog,
|
||||
|
|
|
|||
|
|
@ -930,6 +930,7 @@ describe("Actions", () => {
|
|||
pageName: "pageName",
|
||||
sessionId: "sessionId",
|
||||
customEvent: customEvent,
|
||||
category: "category",
|
||||
shouldUseSessionId: false,
|
||||
});
|
||||
expect(response).toEqual({});
|
||||
|
|
@ -3758,6 +3759,8 @@ describe("Getters", () => {
|
|||
funnelServiceState: "OH-IO",
|
||||
funnelServiceZipCode: 43215,
|
||||
funnelParentAccountNumber: "999999",
|
||||
funnelPolicyIsItac: "false",
|
||||
funnelPolicyIsNoComp: "false",
|
||||
funnelIsCoverageVerified: true,
|
||||
funnelGlassParts: null,
|
||||
funnelSupportingItems: null,
|
||||
|
|
@ -3809,6 +3812,8 @@ describe("Getters", () => {
|
|||
funnelServiceState: mockStateValues.funnelServiceState,
|
||||
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
|
||||
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
|
||||
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
|
||||
funnelOrderPartNumbers: [],
|
||||
funnelOrderPartTypes: [],
|
||||
|
|
@ -3839,6 +3844,8 @@ describe("Getters", () => {
|
|||
funnelServiceState: "OH-IO",
|
||||
funnelServiceZipCode: 43215,
|
||||
funnelParentAccountNumber: "999999",
|
||||
funnelPolicyIsItac: "false",
|
||||
funnelPolicyIsNoComp: "false",
|
||||
funnelIsCoverageVerified: true,
|
||||
funnelGlassParts: [],
|
||||
funnelOtherParts: [],
|
||||
|
|
@ -3889,6 +3896,8 @@ describe("Getters", () => {
|
|||
funnelServiceState: mockStateValues.funnelServiceState,
|
||||
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
|
||||
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
|
||||
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
|
||||
funnelOrderPartNumbers: [],
|
||||
funnelOrderPartTypes: [],
|
||||
|
|
@ -3919,6 +3928,8 @@ describe("Getters", () => {
|
|||
serviceState: "OH-IO",
|
||||
serviceZipCode: 43215,
|
||||
parentAccountNumber: "999999",
|
||||
funnelPolicyIsItac: "false",
|
||||
funnelPolicyIsNoComp: "false",
|
||||
isCoverageVerified: false,
|
||||
glassParts: [
|
||||
{
|
||||
|
|
@ -3979,6 +3990,8 @@ describe("Getters", () => {
|
|||
funnelServiceState: mockStateValues.serviceState,
|
||||
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
||||
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
||||
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
||||
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
|
||||
funnelOrderPartTypes: ["ADAS, maybe"],
|
||||
|
|
@ -4009,6 +4022,8 @@ describe("Getters", () => {
|
|||
serviceState: "OH-IO",
|
||||
serviceZipCode: 43215,
|
||||
parentAccountNumber: "999999",
|
||||
funnelPolicyIsItac: "false",
|
||||
funnelPolicyIsNoComp: "false",
|
||||
isCoverageVerified: false,
|
||||
glassParts: [
|
||||
{
|
||||
|
|
@ -4084,6 +4099,8 @@ describe("Getters", () => {
|
|||
funnelServiceState: mockStateValues.serviceState,
|
||||
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
||||
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
||||
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
||||
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
|
||||
funnelOrderPartTypes: ["ADAS, maybe"],
|
||||
|
|
@ -4114,6 +4131,8 @@ describe("Getters", () => {
|
|||
serviceState: "OH-IO",
|
||||
serviceZipCode: 43215,
|
||||
parentAccountNumber: "999999",
|
||||
funnelPolicyIsItac: "false",
|
||||
funnelPolicyIsNoComp: "false",
|
||||
isCoverageVerified: false,
|
||||
glassParts: [
|
||||
{
|
||||
|
|
@ -4200,6 +4219,8 @@ describe("Getters", () => {
|
|||
funnelServiceState: mockStateValues.serviceState,
|
||||
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
||||
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
||||
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
||||
funnelOrderPartNumbers: ["BACKGLASS_PN", "DRIVERGLASS_PN", "PASSENGERGLASS_PN"],
|
||||
funnelOrderPartTypes: [],
|
||||
|
|
|
|||
Loading…
Reference in a new issue