Chore: Web widget Inbox Tech Debts (#738)

* Chore: Webwidget Inbox Tech Debts

* Additional customization options creating Web Widget
* Changes to edit Page for Web Widget
* Remove the WebWidget API end points
* Minor chores

Address: #680, #502

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/javascript/widget/App.vue

@@ -17,7 +17,7 @@ export default {
     };
   },
   mounted() {
-    const { website_token: websiteToken = '' } = window.chatwootWebChannel;
+    const { websiteToken } = window.chatwootWebChannel;
     if (IFrameHelper.isIFrame()) {
       IFrameHelper.sendMessage({
         event: 'loaded',

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -20,11 +20,6 @@ import { IFrameHelper } from 'widget/helpers/utils';
 
 export default {
   name: 'ChatHeaderExpanded',
-  computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
-  },
   props: {
     introHeading: {
       type: String,
@@ -36,6 +31,11 @@ export default {
         'We make it simple to connect with us. Ask us anything, or share your feedback.',
     },
   },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+  },
   methods: {
     closeWindow() {
       if (IFrameHelper.isIFrame()) {

app/javascript/widget/store/modules/appConfig.js

@@ -16,7 +16,7 @@ const actions = {
 
 const mutations = {
   [SET_WIDGET_COLOR]($state, data) {
-    $state.widgetColor = data.widget_color;
+    $state.widgetColor = data.widgetColor;
   },
 };
 

app/javascript/widget/views/Home.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="home">
     <div class="header-wrap">
-      <ChatHeaderExpanded v-if="isHeaderExpanded" />
-      <ChatHeader v-else :title="getHeaderName" />
+      <ChatHeaderExpanded
+        v-if="isHeaderExpanded"
+        :intro-heading="channelConfig.welcomeTitle"
+        :intro-body="channelConfig.welcomeTagline"
+      />
+      <ChatHeader v-else :title="channelConfig.websiteName" />
     </div>
     <AvailableAgents v-if="showAvailableAgents" :agents="availableAgents" />
     <ConversationWrap :grouped-messages="groupedMessages" />
@@ -45,8 +49,8 @@ export default {
     isHeaderExpanded() {
       return this.conversationSize === 0;
     },
-    getHeaderName() {
-      return window.chatwootWebChannel.website_name;
+    channelConfig() {
+      return window.chatwootWebChannel;
     },
     showAvailableAgents() {
       return this.availableAgents.length > 0 && this.conversationSize < 1;