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/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -4,79 +4,177 @@
       :header-image="inbox.avatarUrl"
       :header-title="inboxName"
     />
+
+    <div class="settings--content">
+      <settings-section
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
+      >
+        <div v-if="inbox.channel_type === 'Channel::WebWidget'">
+          <div class="medium-12 columns">
+            <label>
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL') }}
+              <input
+                v-model.trim="inboxName"
+                type="text"
+                :placeholder="
+                  $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL') }}
+              <input
+                v-model.trim="channelWebsiteUrl"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{
+                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
+              }}
+              <input
+                v-model.trim="channelWelcomeTitle"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL'
+                )
+              }}
+              <input
+                v-model.trim="channelWelcomeTagline"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+          <div class="medium-12 columns">
+            <label>
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.LABEL'
+                )
+              }}
+              <input
+                v-model.trim="channelAgentAwayMessage"
+                type="text"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.PLACEHOLDER'
+                  )
+                "
+              />
+            </label>
+          </div>
+
+          <div class="medium-12 columns">
+            <label>
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+              <compact
+                v-model="inbox.widget_color"
+                class="widget-color--selector"
+              />
+            </label>
+          </div>
+        </div>
+
+        <div>
+          <label>
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
+            <select v-model="autoAssignment">
+              <option value="true">
+                {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
+              </option>
+              <option value="false">
+                {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
+              </option>
+            </select>
+            <p class="help-text">
+              {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
+            </p>
+          </label>
+        </div>
+
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="uiFlags.isUpdatingInbox"
+          @click="updateInbox"
+        >
+        </woot-submit-button>
+      </settings-section>
+    </div>
+
+    <!-- update agents in inbox -->
+
+    <div class="settings--content">
+      <settings-section
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+      >
+        <multiselect
+          v-model="selectedAgents"
+          :options="agentList"
+          track-by="id"
+          label="name"
+          :multiple="true"
+          :close-on-select="false"
+          :clear-on-select="false"
+          :hide-selected="true"
+          placeholder="Pick some"
+          @select="$v.selectedAgents.$touch"
+        />
+
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :loading="isAgentListUpdating"
+          @click="updateAgents"
+        >
+        </woot-submit-button>
+      </settings-section>
+    </div>
     <div
       v-if="inbox.channel_type === 'Channel::FacebookPage'"
       class="settings--content"
     >
-      <settings-form-header
+      <settings-section
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
       >
-      </settings-form-header>
-      <woot-code :script="messengerScript"></woot-code>
+        <woot-code :script="messengerScript"></woot-code>
+      </settings-section>
     </div>
     <div v-else-if="inbox.channel_type === 'Channel::WebWidget'">
       <div class="settings--content">
-        <settings-form-header
+        <settings-section
           :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
           :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
         >
-        </settings-form-header>
-        <woot-code :script="inbox.web_widget_script"></woot-code>
+          <woot-code :script="inbox.web_widget_script"></woot-code>
+        </settings-section>
       </div>
-      <div class="settings--content">
-        <settings-form-header
-          :title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL')"
-          :sub-title="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.PLACEHOLDER')
-          "
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :is-updating="uiFlags.isUpdating"
-          @update="updateWidgetColor"
-        >
-        </settings-form-header>
-        <Compact v-model="inbox.widget_color" class="widget-color--selector" />
-      </div>
-    </div>
-    <div class="settings--content">
-      <settings-form-header
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :is-updating="isAgentListUpdating"
-        @update="updateAgents"
-      >
-      </settings-form-header>
-      <multiselect
-        v-model="selectedAgents"
-        :options="agentList"
-        track-by="id"
-        label="name"
-        :multiple="true"
-        :close-on-select="false"
-        :clear-on-select="false"
-        :hide-selected="true"
-        placeholder="Pick some"
-        @select="$v.selectedAgents.$touch"
-      />
-    </div>
-    <div class="settings--content">
-      <settings-form-header
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT')"
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :is-updating="uiFlags.isUpdatingAutoAssignment"
-        @update="updateAutoAssignment"
-      >
-      </settings-form-header>
-      <select v-model="autoAssignment">
-        <option value="true">
-          {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}
-        </option>
-        <option value="false">
-          {{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}
-        </option>
-      </select>
     </div>
   </div>
 </template>
@@ -88,12 +186,12 @@ import { mapGetters } from 'vuex';
 import { createMessengerScript } from 'dashboard/helper/scriptGenerator';
 import { Compact } from 'vue-color';
 import configMixin from 'shared/mixins/configMixin';
-import SettingsFormHeader from '../../../../components/SettingsFormHeader.vue';
+import SettingsSection from '../../../../components/SettingsSection';
 
 export default {
   components: {
     Compact,
-    SettingsFormHeader,
+    SettingsSection,
   },
   mixins: [configMixin],
   data() {
@@ -102,6 +200,10 @@ export default {
       autoAssignment: false,
       isUpdating: false,
       isAgentListUpdating: false,
+      channelWebsiteUrl: '',
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      channelAgentAwayMessage: '',
     };
   },
   computed: {
@@ -145,6 +247,10 @@ export default {
       this.$store.dispatch('inboxes/get').then(() => {
         this.fetchAttachedAgents();
         this.autoAssignment = this.inbox.enable_auto_assignment;
+        this.channelWebsiteUrl = this.inbox.website_url;
+        this.channelWelcomeTitle = this.inbox.welcome_title;
+        this.channelWelcomeTagline = this.inbox.welcome_tagline;
+        this.channelAgentAwayMessage = this.inbox.agent_away_message;
       });
     },
     async fetchAttachedAgents() {
@@ -181,34 +287,23 @@ export default {
       }
       this.isAgentListUpdating = false;
     },
-    async updateWidgetColor() {
+    async updateInbox() {
       try {
-        await this.$store.dispatch('inboxes/updateWebsiteChannel', {
-          id: this.inbox.channel_id,
-          website: {
-            widget_color: this.getWidgetColor(this.inbox.widget_color),
-          },
-        });
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      }
-    },
-    async updateAutoAssignment() {
-      try {
-        await this.$store.dispatch('inboxes/updateAutoAssignment', {
+        await this.$store.dispatch('inboxes/updateInbox', {
           id: this.currentInboxId,
-          inbox: {
-            enable_auto_assignment: this.autoAssignment,
+          name: this.inboxName,
+          enable_auto_assignment: this.autoAssignment,
+          channel: {
+            widget_color: this.getWidgetColor(this.inbox.widget_color),
+            website_url: this.channelWebsiteUrl,
+            welcome_title: this.channelWelcomeTitle,
+            welcome_tagline: this.channelWelcomeTagline,
+            agent_away_message: this.channelAgentAwayMessage,
           },
         });
-        this.showAlert(
-          this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE')
-        );
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(
-          this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE')
-        );
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       }
     },
     getWidgetColor() {
@@ -226,3 +321,26 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+.settings {
+  background: $color-white;
+
+  .settings--content {
+    &:last-child {
+      .settings--section {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .page-top-bar {
+    @include background-light;
+    @include border-normal-bottom;
+    padding: $space-normal $space-larger;
+  }
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -221,9 +221,8 @@ export default {
       return {
         user_access_token: this.user_access_token,
         page_access_token: this.selectedPage.access_token,
-        page_name: this.selectedPage.name,
         page_id: this.selectedPage.id,
-        inbox_name: this.pageName,
+        inbox_name: this.selectedPage.name,
       };
     },
 

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue

@@ -18,7 +18,7 @@
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
-            v-model.trim="websiteName"
+            v-model.trim="inboxName"
             type="text"
             :placeholder="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
@@ -30,7 +30,7 @@
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL') }}
           <input
-            v-model.trim="websiteUrl"
+            v-model.trim="channelWebsiteUrl"
             type="text"
             :placeholder="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
@@ -38,11 +38,62 @@
           />
         </label>
       </div>
+      <div class="medium-12 columns">
+        <label>
+          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL') }}
+          <input
+            v-model.trim="channelWelcomeTitle"
+            type="text"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+      </div>
+      <div class="medium-12 columns">
+        <label>
+          {{
+            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+          }}
+          <input
+            v-model.trim="channelWelcomeTagline"
+            type="text"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+      </div>
+      <div class="medium-12 columns">
+        <label>
+          {{
+            $t(
+              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.LABEL'
+            )
+          }}
+          <input
+            v-model.trim="channelAgentAwayMessage"
+            type="text"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AGENT_AWAY_MESSAGE.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+      </div>
 
       <div class="medium-12 columns">
         <label>
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
-          <compact v-model="widgetColor" class="widget-color--selector" />
+          <compact
+            v-model="channelWidgetColor"
+            class="widget-color--selector"
+          />
         </label>
       </div>
 
@@ -50,7 +101,7 @@
         <div class="medium-12 columns">
           <woot-submit-button
             :loading="uiFlags.isCreating"
-            :disabled="!websiteUrl || !websiteName"
+            :disabled="!channelWebsiteUrl || !inboxName"
             :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
           />
         </div>
@@ -72,9 +123,12 @@ export default {
   },
   data() {
     return {
-      websiteName: '',
-      websiteUrl: '',
-      widgetColor: { hex: '#009CE0' },
+      inboxName: '',
+      channelWebsiteUrl: '',
+      channelWidgetColor: { hex: '#009CE0' },
+      channelWelcomeTitle: '',
+      channelWelcomeTagline: '',
+      channelAgentAwayMessage: '',
     };
   },
   computed: {
@@ -87,10 +141,14 @@ export default {
       const website = await this.$store.dispatch(
         'inboxes/createWebsiteChannel',
         {
-          website: {
-            website_name: this.websiteName,
-            website_url: this.websiteUrl,
-            widget_color: this.widgetColor.hex,
+          name: this.inboxName,
+          channel: {
+            type: 'web_widget',
+            website_url: this.channelWebsiteUrl,
+            widget_color: this.channelWidgetColor.hex,
+            welcome_title: this.channelWelcomeTitle,
+            welcome_tagline: this.channelWelcomeTagline,
+            agent_away_message: this.channelAgentAwayMessage,
           },
         }
       );