diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 17d06d057..f73ce44eb 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -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; + } + } + } } } } diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue index 2cac40833..29c0906b9 100644 --- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue +++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue @@ -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; diff --git a/src/digital-components/sierra-webchat/sierra-webchat.spec.js b/src/digital-components/sierra-webchat/sierra-webchat.spec.js index 5734eaab8..e4d819ffb 100644 --- a/src/digital-components/sierra-webchat/sierra-webchat.spec.js +++ b/src/digital-components/sierra-webchat/sierra-webchat.spec.js @@ -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; diff --git a/src/digital-components/sierra-webchat/sierra-webchat.vue b/src/digital-components/sierra-webchat/sierra-webchat.vue index 0d686202f..2a114616a 100644 --- a/src/digital-components/sierra-webchat/sierra-webchat.vue +++ b/src/digital-components/sierra-webchat/sierra-webchat.vue @@ -3,8 +3,10 @@ diff --git a/src/experiment-components/donation-block.vue b/src/experiment-components/donation-block.vue index 30fe9f8ed..0e14588d7 100644 --- a/src/experiment-components/donation-block.vue +++ b/src/experiment-components/donation-block.vue @@ -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); } diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue index fc77336d3..f7d55b354 100644 --- a/src/fmg-components/funnel-header/funnel-header.vue +++ b/src/fmg-components/funnel-header/funnel-header.vue @@ -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); }, }; diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index bb617ec58..3a9fc4cd0 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -919,6 +919,9 @@ export default { .payment-method-question { padding: 0 1.5rem; + .question-text span { + text-align: left; + } } .ui-block { diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index f50d855f7..ccd4b1aca 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -2,35 +2,14 @@ - - - - - - - {{ errorMessage }} - - + typeStyle="caption" + class="ps-4 pe-4 mt-4" /> - +