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

<template>
    <span class="salesforce-webchat">
        <button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
    </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";

export default {
    name: "salesforceWebchat",
    data() {
        return {};
    },
    props: {
        hideSalesforceWebchatLaunchButton: {
            type: Boolean,
            default: false,
        },
    },
    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);
    },
    methods: {
        initializeSalesforceWebchat() {
            switch (applicationConfig.CURRENT_ENVIRONMENT) {
                case "Prod":
                    initializeSalesforceWebchatForProd();
                    break;
                case "QA":
                case "SysTest":
                    initializeSalesforceWebchatForQa();
                    break;
                case "Dev":
                case "Localhost":
                    initializeSalesforceWebchatForDev();
                    break;
            }
        },
    },
    computed: {},
    components: {},
};
</script>

<style lang="scss">
.salesforce-webchat {
    .salesforce-chat-button {
        width: 1.5rem;
        height: 1.5rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 1.5rem 1.5rem;
        background-position: center;
        border: none;
        background-color: transparent;
    }
}

.dockableContainer {
    &.showDockableContainer {
        font-family: AvertaRegular;
        color: #4d5151;
        .sidebarBody {
            button {
                background: #0070d1;
                color: #fff;
                &:hover {
                    background: #06577c !important;
                }
            }
            .form-element__help {
                color: #db0020;
            }
            .embeddedServiceSidebarFormField {
                .uiInput {
                    .uiLabel-left {
                        color: #4d5151;
                    }
                }
            }
            .embeddedServiceSidebarButton {
                &.uiButton--inverse {
                    .label {
                        color: #fff;
                        text-decoration: underline;
                    }
                    &:not(:disabled):focus {
                        background-color: #0070d1;
                    }
                }
            }
            .embeddedServiceLiveAgentStateChatAvatar {
                &.isLightningOutContext {
                    .agentIconColor0 {
                        background-color: #0070d1;
                    }
                }
            }
            .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: #0070d1;
        }
        span {
            &.required {
                color: #db0020;
            }
        }
    }
}
.embeddedServiceHelpButton {
    .helpButton {
        .uiButton {
            background-color: #0070d1 !important;
        }
    }
    .embeddedServiceIcon {
        display: inline-block !important;
    }
}
.modalContainer {
    &.sidebarMinimized {
        &.layout-docted {
            &.embeddedServiceSidebar {
                .embeddedServiceSidebarMinimizedDefaultUI {
                    .helpButton,
                    .sidebarHeader {
                        &.minimizedContainer {
                            .embeddedServiceSidebarMinimizedDefaultUI {
                                background-color: #0070d1;
                                border: 1px solid #0070d1;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>