diff --git a/src/App.vue b/src/App.vue index 045a28bf8..cae31dd24 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,6 +8,7 @@ + diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue index d740cbc8b..fc77336d3 100644 --- a/src/fmg-components/funnel-header/funnel-header.vue +++ b/src/fmg-components/funnel-header/funnel-header.vue @@ -44,6 +44,7 @@ import { globalEvents } from "@/constants/events"; import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal"; import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar"; import { webchatHelper } from "@/helpers/webchat-helper"; +import store from "@/store"; // Constants const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal @@ -53,6 +54,7 @@ export default { data() { return { globalAlertMessages: [], + sierraChatOpen: false, }; }, props: { @@ -71,6 +73,13 @@ 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; + } + // Otherwise, use Salesforce logic return ( !this.shouldHideWebchatButtonOnPage && this.webchatGlobalNonpersistedState.showWebchatButton @@ -91,8 +100,21 @@ export default { this.globalAlertMessages.push(alertToPush); }, webchatClicked(event) { - event.preventDefault(); // avoid validation firing + event.preventDefault(); this.launchWebchat(); + // Only set sierraChatOpen if Sierra experiment is active + if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) { + this.sierraChatOpen = true; + } + }, + syncSierraExperimentFlag() { + const experiments = store.getters.applicationUser.experiments; + const sierraExp = experiments?.find( + (exp) => + exp.universeName === "CONTENT_FMG_SierraWebchat" && + exp.settings?.UseSierraChat === "true" + ); + this.webchatGlobalNonpersistedState.shouldLaunchSierra = !!sierraExp; }, }, components: { @@ -122,6 +144,14 @@ 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; + }; + window.addEventListener("sierra-chat-closed", this._handleSierraChatClosed); + }, + beforeUnmount() { + window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed); }, }; diff --git a/src/helpers/webchat-helper.js b/src/helpers/webchat-helper.js index f2b624916..917d6de0f 100644 --- a/src/helpers/webchat-helper.js +++ b/src/helpers/webchat-helper.js @@ -9,7 +9,7 @@ const webchatGlobalNonpersistedState = reactive({ export const webchatHelper = () => { function launchWebchat() { if (webchatGlobalNonpersistedState.shouldLaunchSierra) { - // do sierra logic here + window.dispatchEvent(new CustomEvent("launch-sierra-webchat")); // launches the sierra chat } else { window.embedded_svc.bootstrapEmbeddedService(); // launches the salesForce prechat form } diff --git a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue index abe6221ba..9e98eb9c3 100644 --- a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue +++ b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue @@ -1,6 +1,9 @@