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 @@