DigitalConsumer.FixMyGlass/src/digital-components/salesforce-webchat/salesforce-webchat.vue

<template>
    <span style="display: none"></span>
</template>

<script>
// Supporting files
import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
import { initializeSalesforceWebchatForSys } from "./salesforce-helper-sys";
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 {
            isWebchatLoaded: false,
            isWebchatOpen: false,
        };
    },
    props: {
        hideSalesforceWebchatLaunchButton: {
            type: Boolean,
            default: false,
        },
    },
    setup() {
        const { webchatGlobalNonpersistedState } = webchatHelper();
        return { webchatGlobalNonpersistedState };
    },
    mounted() {
        // Load in script from salesforce CDN
        const script = document.createElement("script");
        script.src = this.webChatScriptSrc;
        script.onload = this.initializeSalesforceWebchat;
        document.body.appendChild(script);
    },
    beforeUnmount() {
        // Clean up event listeners and observers
        window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
    },
    methods: {
        initializeSalesforceWebchat() {
            switch (applicationConfig.CURRENT_ENVIRONMENT) {
                case "Prod":
                    initializeSalesforceWebchatForProd(
                        this.modifyEmbeddedSvcCallback,
                        this.finishedLoadingCallback,
                        this.onWebchatOpenCallback,
                        this.onWebchatCloseCallback
                    );
                    break;
                case "QA":
                    initializeSalesforceWebchatForQa(
                        this.modifyEmbeddedSvcCallback,
                        this.finishedLoadingCallback,
                        this.onWebchatOpenCallback,
                        this.onWebchatCloseCallback
                    );
                    break;
                case "SysTest":
                    initializeSalesforceWebchatForSys(
                        this.modifyEmbeddedSvcCallback,
                        this.finishedLoadingCallback,
                        this.onWebchatOpenCallback,
                        this.onWebchatCloseCallback
                    );
                    break;
                case "Dev":
                case "Localhost":
                default:
                    initializeSalesforceWebchatForDev(
                        this.modifyEmbeddedSvcCallback,
                        this.finishedLoadingCallback,
                        this.onWebchatOpenCallback,
                        this.onWebchatCloseCallback
                    );
                    break;
            }
        },
        modifyEmbeddedSvcCallback() {
            window.embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
            window.addEventListener("onEmbeddedMessagingConversationStarted", () => {
                this.pushEventForChatsToGA("support_chat", "chat_opened", "Live Agent", true);
            });
        },
        finishedLoadingCallback(data) {
            this.isWebchatLoaded = true;
            this.updateShouldShowWebchatButton();
        },
        onWebchatOpenCallback() {
            // This could be done on webchatClicked() but this eliminates some of the delay between the button disappearing and the
            //   prechat form opening
            this.isWebchatOpen = true;
            this.updateShouldShowWebchatButton();
        },
        onWebchatCloseCallback() {
            this.isWebchatOpen = false;
            this.updateShouldShowWebchatButton();
        },
        updateShouldShowWebchatButton() {
            this.webchatGlobalNonpersistedState.showWebchatButton =
                !this.hideSalesforceWebchatLaunchButton &&
                this.isWebchatLoaded &&
                !this.isWebchatOpen;
        },
    },
    computed: {
        webChatScriptSrc() {
            // These URLs are from the src tag on the script tag in the Salesforce generated code.
            switch (applicationConfig.CURRENT_ENVIRONMENT) {
                case "Prod":
                    return "https://safelite2.my.site.com/ESWSalesCentralTFN1769108630294/assets/js/bootstrap.min.js";
                case "QA":
                    return "https://safelite2--qa.sandbox.my.site.com/ESWSalesCentralTFN1768832680884/assets/js/bootstrap.min.js";
                case "SysTest":
                    return "https://safelite2--sys.sandbox.my.site.com/ESWSalesCentralTFN1767797265631/assets/js/bootstrap.min.js";
                case "Dev":
                case "Localhost":
                default:
                    return "https://safelite2--dev.sandbox.my.site.com/ESWSalesCentralTFN1755660094477/assets/js/bootstrap.min.js";
            }
        },
    },
    components: {},
};
</script>

<style lang="scss">
.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {
    z-index: 9999 !important;
}
.dockableContainer {
    &.showDockableContainer {
        color: $gray-600;
        .sidebarBody {
            button {
                background: $blue;
                color: $white;
                &:hover {
                    background: $blue-700 !important;
                }
            }
            .form-element__help {
                color: $red;
            }
            .embeddedServiceSidebarFormField {
                .uiInput {
                    .uiLabel-left {
                        color: $gray-600;
                    }
                }
            }
            .embeddedServiceSidebarButton {
                &.uiButton--inverse {
                    .label {
                        color: $white;
                        text-decoration: underline;
                    }
                    &:not(:disabled):focus {
                        background-color: $blue;
                    }
                }
            }
            .embeddedServiceLiveAgentStateChatAvatar {
                &.isLightningOutContext {
                    .agentIconColor0 {
                        background-color: $blue;
                    }
                }
            }
            .embeddedServiceLiveAgentStateChatInputFooter {
                .footerMenuWrapper {
                    .footer-menu-items {
                        .slds-dropdown__item {
                            > a {
                                padding-left: 0;
                                max-width: 100%;
                                display: flex;
                                justify-content: center;
                            }
                        }
                    }
                }
            }
            .embeddedServiceLiveAgentStateChatInputFooter {
                .footerMenuWrapper {
                    .footer-menu-items {
                        a {
                            margin: 0 auto;
                        }
                    }
                }
            }
        }
        .chatHeaderBranding {
            background-color: $blue;
        }
        span {
            &.required {
                color: $red;
            }
        }
    }
}
.embeddedServiceHelpButton {
    .helpButton {
        .uiButton {
            background-color: $blue !important;
        }
    }
    .embeddedServiceIcon {
        display: inline-block !important;
    }
}
.modalContainer {
    &.sidebarMinimized {
        &.layout-docted {
            &.embeddedServiceSidebar {
                .embeddedServiceSidebarMinimizedDefaultUI {
                    .helpButton,
                    .sidebarHeader {
                        &.minimizedContainer {
                            .embeddedServiceSidebarMinimizedDefaultUI {
                                background-color: $blue;
                                border: 1px solid $blue;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>