CASH-188 | Initial changes for webchat

Still lacking higher environment setup
Still need to pass through the hide flag into the component itself

src/digital-components/salesforce-webchat/salesforce-helper-dev.js

@@ -0,0 +1,62 @@
+/*
+The code below is generated from salesforce but modified in the following ways:
+  * Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
+  * CSS is not copied in
+  * First <script> tag loading in the file from the CDN is not copied in
+  * The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
+*/
+
+export function initializeSalesforceWebchatForDev() {
+    var initESW = function(gslbBaseURL) {
+
+        let embedded_svc = window.embedded_svc;
+        
+		embedded_svc.settings.displayHelpButton = true; //Or false
+		embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'
+ 
+		//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
+		//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
+ 
+		//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
+		//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
+ 
+		// Settings for Chat
+		//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
+			// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
+			// Returns a valid button ID.
+		//};
+		//embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
+		//embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
+		//embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
+ 
+		embedded_svc.settings.enabledFeatures = ['LiveAgent'];
+		embedded_svc.settings.entryFeature = 'LiveAgent';
+ 
+		embedded_svc.init(
+			'https://safelite2--safeliteua.sandbox.my.salesforce.com',
+			'https://safelite2--safeliteua.sandbox.my.salesforce-sites.com/chat',
+			gslbBaseURL,
+'00DDJ000000HRqO',
+			'Sales_Central_Snap_in',
+			{
+				baseLiveAgentContentURL: 'https://c.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/content',
+				deploymentId: '572DJ00000001j3',
+				buttonId: '573DJ00000001ur',
+				baseLiveAgentURL: 'https://d.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/chat',
+				eswLiveAgentDevName: 'EmbeddedServiceLiveAgent_Parent04IDJ0000008OZk2AM_1883057c9a6',
+				isOfflineSupportEnabled: false
+			}
+		);
+	};
+ 
+	if (!window.embedded_svc) {
+		var s = document.createElement('script');
+		s.setAttribute('src', 'https://safelite2--safeliteua.sandbox.my.salesforce.com/embeddedservice/5.0/esw.min.js');
+		s.onload = function() {
+			initESW(null);
+		};
+		document.body.appendChild(s);
+	} else {
+		initESW('https://service.force.com');
+	}
+}

src/digital-components/salesforce-webchat/salesforce-helper-prod.js

@@ -0,0 +1,2 @@
+export function initializeSalesforceWebchatForProd(embedded_svc) {
+}

src/digital-components/salesforce-webchat/salesforce-helper-qa.js

@@ -0,0 +1,2 @@
+export function initializeSalesforceWebchatForQa(embedded_svc) {
+}

src/digital-components/salesforce-webchat/salesforce-helper-sys.js

@@ -0,0 +1,2 @@
+export function initializeSalesforceWebchatForSys(embedded_svc) {
+}

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

@@ -0,0 +1,60 @@
+<template>
+    <span class="salesforce-webchat"></span>
+</template>
+
+<script>
+// Supporting files
+import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
+import { initializeSalesforceWebchatForSys } from "./salesforce-helper-sys";
+import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
+import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
+
+export default {
+    name: "salesforceWebchat",
+    data() {
+        return {
+        }
+    },
+    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 = () => {
+            const embedded_svc = window.embedded_svc;
+            switch (process.env.VUE_APP_CURRENT_ENVIRONMENT) {
+                case "Prod":
+                    initializeSalesforceWebchatForProd(embedded_svc)
+                    break;
+                case "QA":
+                    initializeSalesforceWebchatForQa(embedded_svc)
+                    break;
+                case "SysTest":
+                    initializeSalesforceWebchatForSys(embedded_svc)
+                    break;
+                case "Dev":
+                case "Localhost":
+                    initializeSalesforceWebchatForDev(embedded_svc)
+                    break;
+            }
+        
+        }
+        document.body.appendChild(script);
+    },
+    props: {},
+    methods: {
+    },
+    computed: {
+    },
+    components: {},
+};
+</script>
+
+<style type="text/css">
+.embeddedServiceHelpButton .helpButton .uiButton {
+    background-color: #167cac;
+    font-family: "Arial", sans-serif;
+}
+.embeddedServiceHelpButton .helpButton .uiButton:focus {
+    outline: 1px solid #167cac;
+}
+</style>

src/fmg-components/funnel-header/funnel-header.vue

@@ -2,6 +2,8 @@
     <div
         class="funnel-header d-flex justify-content-center align-items-center flex-column"
         v-if="imageSrc">
+        <salesforceWebchat 
+        />
         <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
         <menuModal />
     </div>
@@ -24,6 +26,7 @@ import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
+import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
 
 // Constants
 const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
@@ -37,6 +40,10 @@ export default {
     },
     props: {
         cmsWidgetName: String,
+        hideSalesforceWebchat: {
+            type: Boolean,
+            default: false
+        }
     },
     computed: {
         imageSrc() {
@@ -60,6 +67,7 @@ export default {
     components: {
         alert,
         menuModal,
+        salesforceWebchat
     },
     mounted() {
         // Check if alert event is on the bus

src/layouts/confirmation/confirmation.vue

@@ -5,7 +5,7 @@
                 <div class="container-fluid pb-2">
                     <div class="row justify-content-center">
                         <div class="col-md-6">
-                            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" hideSalesforceWebchat />
                         </div>
                     </div>
                     <div class="row justify-content-center">