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 { 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,
            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 = "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() {
            switch (applicationConfig.CURRENT_ENVIRONMENT) {
                case "Prod":
                    initializeSalesforceWebchatForProd(
                        this.modifyEmbeddedSvcCallback,
                        this.finishedLoadingCallback,
                        this.onWebchatOpenCallback,
                        this.onWebchatCloseCallback
                    );
                    break;
                case "QA":
                case "SysTest":
                    initializeSalesforceWebchatForQa(
                        this.modifyEmbeddedSvcCallback,
                        this.finishedLoadingCallback,
                        this.onWebchatOpenCallback,
                        this.onWebchatCloseCallback
                    );
                    break;
                case "Dev":
                case "Localhost":
                    initializeSalesforceWebchatForDev(
                        this.modifyEmbeddedSvcCallback,
                        this.finishedLoadingCallback,
                        this.onWebchatOpenCallback,
                        this.onWebchatCloseCallback
                    );
                    break;
            }
        },
        modifyEmbeddedSvcCallback() {
            window.embedded_svc.settings.avatarImgURL = require("@/assets/img/salesforce-webchat/avatar_webchat.png");
            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;
            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.isAgentAvailable &&
                !this.isWebchatOpen;
        },
    },
    computed: {},
    components: {},
};
</script>

<style lang="scss">
.dockableContainer {
    &.showDockableContainer {
        font-family: AvertaRegular;
        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>