feat: Disable attachments and emoji picker in the web widget (#1102)

Signed-off-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/controllers/api/v1/accounts/inboxes_controller.rb

@@ -4,7 +4,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   before_action :check_authorization
 
   def index
-    @inboxes = policy_scope(Current.account.inboxes.includes(:channel, :avatar_attachment))
+    @inboxes = policy_scope(Current.account.inboxes.order_by_id.includes(:channel, :avatar_attachment))
   end
 
   def create
@@ -23,7 +23,10 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
 
   def update
     @inbox.update(inbox_update_params.except(:channel))
-    @inbox.channel.update!(inbox_update_params[:channel]) if @inbox.channel.is_a?(Channel::WebWidget) && inbox_update_params[:channel].present?
+    return unless @inbox.channel.is_a?(Channel::WebWidget) && inbox_update_params[:channel].present?
+
+    @inbox.channel.update!(inbox_update_params[:channel])
+    update_channel_feature_flags
   end
 
   def set_agent_bot
@@ -67,6 +70,13 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     end
   end
 
+  def update_channel_feature_flags
+    return unless inbox_update_params[:channel].key? :selected_feature_flags
+
+    @inbox.channel.selected_feature_flags = inbox_update_params[:channel][:selected_feature_flags]
+    @inbox.channel.save!
+  end
+
   def permitted_params
     params.permit(:id, :avatar, :name, :greeting_message, :greeting_enabled, channel:
       [:type, :website_url, :widget_color, :welcome_title, :welcome_tagline, :webhook_url, :email])
@@ -74,6 +84,14 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
 
   def inbox_update_params
     params.permit(:enable_auto_assignment, :name, :avatar, :greeting_message, :greeting_enabled,
-                  channel: [:website_url, :widget_color, :welcome_title, :welcome_tagline, :webhook_url, :email])
+                  channel: [
+                    :website_url,
+                    :widget_color,
+                    :welcome_title,
+                    :welcome_tagline,
+                    :webhook_url,
+                    :email,
+                    selected_feature_flags: []
+                  ])
   end
 end

app/javascript/dashboard/assets/scss/_layout.scss

@@ -1,11 +1,11 @@
 html,
 body {
-  height: 100%;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-    -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 
 .app-wrapper {
@@ -26,36 +26,40 @@ body {
 
 .view-box {
   @include full-height;
-  height: 100vh;
   @include margin(0);
   @include space-between-column;
+
+  height: 100vh;
 }
 
 .view-panel {
-  flex-direction: column;
   @include margin($zero);
   @include padding($space-normal);
+
+  flex-direction: column;
   overflow-y: auto;
 }
 
 .content-box {
-  overflow: auto;
   @include padding($space-normal);
+
+  overflow: auto;
 }
 
 .back-button {
   @include flex;
+
   align-items: center;
   color: $color-woot;
+  cursor: pointer;
   font-size: $font-size-default;
   font-weight: $font-weight-normal;
   margin-right: $space-normal;
-  cursor: pointer;
 
-  &:before {
+  &::before {
-    vertical-align: text-bottom;
-    margin-right: $space-smaller;
     font-size: $font-size-large;
+    margin-right: $space-small;
+    vertical-align: text-bottom;
   }
 }
 
@@ -66,12 +70,14 @@ body {
 .no-items-error-message {
   @include flex;
   @include full-height;
-  justify-content: center;
+
   align-items: center;
   flex-direction: column;
+  justify-content: center;
 
   img {
-    max-width: $space-mega;
     @include padding($space-one);
+
+    max-width: $space-mega;
   }
 }

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -202,7 +202,7 @@
 }
 
 .settings--content {
-  @include margin($space-small $space-larger);
+  @include margin($space-small $space-large);
 
   .title {
     font-weight: $font-weight-medium;

app/javascript/dashboard/components/ModalHeader.vue

@@ -7,15 +7,25 @@
     <p v-if="headerContent" class="small-12 column">
       {{ headerContent }}
     </p>
+    <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    headerTitle: String,
+    headerTitle: {
-    headerContent: String,
+      type: String,
-    headerImage: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+    headerImage: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

app/javascript/dashboard/components/layout/SidebarItem.vue

@@ -57,15 +57,8 @@ import { mapGetters } from 'vuex';
 
 import router from '../../routes';
 import adminMixin from '../../mixins/isAdmin';
+import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 
-const INBOX_TYPES = {
-  WEB: 'Channel::WebWidget',
-  FB: 'Channel::FacebookPage',
-  TWITTER: 'Channel::TwitterProfile',
-  TWILIO: 'Channel::TwilioSms',
-  API: 'Channel::Api',
-  EMAIL: 'Channel::Email',
-};
 const getInboxClassByType = type => {
   switch (type) {
     case INBOX_TYPES.WEB:

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -1,43 +1,43 @@
 <template>
   <div
     class="small-3 columns channel"
-    :class="{ inactive: !isActive(channel) }"
+    :class="{ inactive: !isActive }"
     @click="onItemClick"
   >
     <img
-      v-if="channel === 'facebook'"
+      v-if="channel.key === 'facebook'"
       src="~dashboard/assets/images/channels/facebook.png"
     />
     <img
-      v-if="channel === 'twitter'"
+      v-if="channel.key === 'twitter'"
       src="~dashboard/assets/images/channels/twitter.png"
     />
     <img
-      v-if="channel === 'telegram'"
+      v-if="channel.key === 'telegram'"
       src="~dashboard/assets/images/channels/telegram.png"
     />
     <img
-      v-if="channel === 'api'"
+      v-if="channel.key === 'api'"
       src="~dashboard/assets/images/channels/api.png"
     />
     <img
-      v-if="channel === 'email'"
+      v-if="channel.key === 'email'"
       src="~dashboard/assets/images/channels/email.png"
     />
     <img
-      v-if="channel === 'line'"
+      v-if="channel.key === 'line'"
       src="~dashboard/assets/images/channels/line.png"
     />
     <img
-      v-if="channel === 'website'"
+      v-if="channel.key === 'website'"
       src="~dashboard/assets/images/channels/website.png"
     />
     <img
-      v-if="channel === 'twilio'"
+      v-if="channel.key === 'twilio'"
       src="~dashboard/assets/images/channels/twilio.png"
     />
     <h3 class="channel__title">
-      {{ channel }}
+      {{ channel.name }}
     </h3>
   </div>
 </template>
@@ -45,7 +45,7 @@
 export default {
   props: {
     channel: {
-      type: String,
+      type: Object,
       required: true,
     },
     enabledFeatures: {
@@ -53,25 +53,28 @@ export default {
       required: true,
     },
   },
-  methods: {
+  computed: {
-    isActive(channel) {
+    isActive() {
+      const { key } = this.channel;
       if (Object.keys(this.enabledFeatures) === 0) {
         return false;
       }
-      if (channel === 'facebook') {
+      if (key === 'facebook') {
         return this.enabledFeatures.channel_facebook;
       }
-      if (channel === 'twitter') {
+      if (key === 'twitter') {
         return this.enabledFeatures.channel_twitter;
       }
-      if (channel === 'email') {
+      if (key === 'email') {
         return this.enabledFeatures.channel_email;
       }
-      return ['website', 'twilio', 'api'].includes(channel);
+      return ['website', 'twilio', 'api'].includes(key);
     },
+  },
+  methods: {
     onItemClick() {
-      if (this.isActive(this.channel)) {
+      if (this.isActive) {
-        this.$emit('channel-item-click', this.channel);
+        this.$emit('channel-item-click', this.channel.key);
       }
     },
   },

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -96,6 +96,7 @@ import {
   hasPressedShift,
 } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
+import inboxMixin from 'shared/mixins/inboxMixin';
 
 export default {
   components: {
@@ -104,7 +105,7 @@ export default {
     FileUpload,
     ResizableTextArea,
   },
-  mixins: [clickaway],
+  mixins: [clickaway, inboxMixin],
   data() {
     return {
       message: '',
@@ -148,9 +149,6 @@ export default {
         this.message.length > this.maxLength
       );
     },
-    channelType() {
-      return this.inbox.channel_type;
-    },
     conversationType() {
       const { additional_attributes: additionalAttributes } = this.currentChat;
       const type = additionalAttributes ? additionalAttributes.type : '';
@@ -174,29 +172,6 @@ export default {
       }
       return MESSAGE_MAX_LENGTH.GENERAL;
     },
-    isATwitterInbox() {
-      return this.channelType === 'Channel::TwitterProfile';
-    },
-    isAFacebookInbox() {
-      return this.channelType === 'Channel::FacebookPage';
-    },
-    isAWebWidgetInbox() {
-      return this.channelType === 'Channel::WebWidget';
-    },
-    isATwilioSMSChannel() {
-      const { phone_number: phoneNumber = '' } = this.inbox;
-      return (
-        this.channelType === 'Channel::TwilioSms' &&
-        !phoneNumber.startsWith('whatsapp')
-      );
-    },
-    isATwilioWhatsappChannel() {
-      const { phone_number: phoneNumber = '' } = this.inbox;
-      return (
-        this.channelType === 'Channel::TwilioSms' &&
-        phoneNumber.startsWith('whatsapp')
-      );
-    },
     showFileUpload() {
       return (
         this.isAWebWidgetInbox ||

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -117,16 +117,16 @@
       },
       "API_CHANNEL": {
         "TITLE": "API Channel",
-        "DESC": "Integrate with API channel and start supporting your customers via chatwoot.",
+        "DESC": "Integrate with API channel and start supporting your customers.",
         "CHANNEL_NAME": {
           "LABEL": "Channel Name",
           "PLACEHOLDER": "Please enter a channel name",
           "ERROR": "This field is required"
         },
         "WEBHOOK_URL": {
-          "LABEL": "Webhook Url",
+          "LABEL": "Webhook URL",
-          "SUBTITLE": "Configure the url where you want to recieve callbacks from chatwoot on events.",
+          "SUBTITLE": "Configure the URL where you want to recieve callbacks on events.",
-          "PLACEHOLDER": "Webhook Url"
+          "PLACEHOLDER": "Webhook URL"
         },
         "SUBMIT_BUTTON": "Create API Channel",
         "API": {
@@ -135,7 +135,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Email Channel",
-        "DESC": "Integrate you email inbox with chatwoot.",
+        "DESC": "Integrate you email inbox.",
         "CHANNEL_NAME": {
           "LABEL": "Channel Name",
           "PLACEHOLDER": "Please enter a channel name",
@@ -150,7 +150,7 @@
         "API": {
           "ERROR_MESSAGE": "We were not able to save the email channel"
         },
-        "FINISH_MESSAGE" : "Start forwarding your emails to the following email address."
+        "FINISH_MESSAGE": "Start forwarding your emails to the following email address."
       },
       "AUTH": {
         "TITLE": "Channels",
@@ -212,7 +212,17 @@
         "ERROR_MESSAGE": "Could not delete inbox. Please try again later."
       }
     },
+    "TABS": {
+      "SETTINGS": "Settings",
+      "COLLABORATORS": "Collaborators",
+      "CONFIGURATION": "Configuration"
+    },
     "SETTINGS": "Settings",
+    "FEATURES": {
+      "LABEL": "Features",
+      "DISPLAY_FILE_PICKER": "Display file picker on the widget",
+      "DISPLAY_EMOJI_PICKER": "Display emoji picker on the widget"
+    },
     "SETTINGS_POPUP": {
       "MESSENGER_HEADING": "Messenger Script",
       "MESSENGER_SUB_HEAD": "Place this button inside your body tag",

app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue

@@ -15,7 +15,7 @@
               v-model="selectedAgents"
               :options="agentList"
               track-by="id"
-              label="name"
+              label="available_name"
               :multiple="true"
               :close-on-select="false"
               :clear-on-select="false"

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -30,14 +30,14 @@ export default {
   data() {
     return {
       channelList: [
-        'website',
+        { key: 'website', name: 'Website' },
-        'facebook',
+        { key: 'facebook', name: 'Facebook' },
-        'twitter',
+        { key: 'twitter', name: 'Twitter' },
-        'twilio',
+        { key: 'twilio', name: 'Twilio' },
-        'email',
+        { key: 'email', name: 'Email' },
-        'api',
+        { key: 'api', name: 'API' },
-        'telegram',
+        { key: 'telegram', name: 'Telegram' },
-        'line',
+        { key: 'line', name: 'Line' },
       ],
       enabledFeatures: {},
     };

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -3,9 +3,18 @@
     <woot-modal-header
       :header-image="inbox.avatarUrl"
       :header-title="inboxName"
-    />
+    >
+      <woot-tabs :index="selectedTabIndex" @change="onTabChange">
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+    </woot-modal-header>
 
-    <div class="settings--content">
+    <div v-if="selectedTabKey === 'inbox_settings'" 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')"
@@ -16,7 +25,7 @@
           @change="handleImageUpload"
         />
         <woot-input
-          v-if="isAWidgetInbox"
+          v-if="isAWebWidgetInbox"
           v-model.trim="selectedInboxName"
           class="medium-9 columns"
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL')"
@@ -25,7 +34,7 @@
           "
         />
         <woot-input
-          v-if="isAWidgetInbox"
+          v-if="isAWebWidgetInbox"
           v-model.trim="channelWebsiteUrl"
           class="medium-9 columns"
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
@@ -34,7 +43,7 @@
           "
         />
         <woot-input
-          v-if="isAWidgetInbox"
+          v-if="isAWebWidgetInbox"
           v-model.trim="channelWelcomeTitle"
           class="medium-9 columns"
           :label="
@@ -48,7 +57,7 @@
         />
 
         <woot-input
-          v-if="isAWidgetInbox"
+          v-if="isAWebWidgetInbox"
           v-model.trim="channelWelcomeTagline"
           class="medium-9 columns"
           :label="
@@ -61,7 +70,7 @@
           "
         />
 
-        <label v-if="isAWidgetInbox" class="medium-9 columns">
+        <label v-if="isAWebWidgetInbox" class="medium-9 columns">
           {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
           <woot-color-picker v-model="inbox.widget_color" />
         </label>
@@ -94,7 +103,6 @@
             }}
           </p>
         </label>
-
         <woot-input
           v-if="greetingEnabled"
           v-model.trim="greetingMessage"
@@ -122,6 +130,33 @@
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
           </p>
         </label>
+
+        <label v-if="isAWebWidgetInbox">
+          {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
+        </label>
+        <div v-if="isAWebWidgetInbox" class="widget--feature-flag">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="attachments"
+            @input="handleFeatureFlag"
+          />
+          <label for="attachments">
+            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
+          </label>
+        </div>
+        <div v-if="isAWebWidgetInbox">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="emoji_picker"
+            @input="handleFeatureFlag"
+          />
+          <label for="emoji_picker">
+            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
+          </label>
+        </div>
+
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
           :loading="uiFlags.isUpdatingInbox"
@@ -132,7 +167,7 @@
 
     <!-- update agents in inbox -->
 
-    <div class="settings--content">
+    <div v-if="selectedTabKey === 'collaborators'" class="settings--content">
       <settings-section
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
@@ -141,7 +176,7 @@
           v-model="selectedAgents"
           :options="agentList"
           track-by="id"
-          label="name"
+          label="available_name"
           :multiple="true"
           :close-on-select="false"
           :clear-on-select="false"
@@ -157,56 +192,43 @@
         />
       </settings-section>
     </div>
-
+    <div v-if="selectedTabKey === 'configuration'">
-    <div
+      <div v-if="isATwilioChannel" class="settings--content">
-      v-if="inbox.channel_type === 'Channel::TwilioSms'"
-      class="settings--content"
-    >
-      <settings-section
-        :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
-        :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
-      >
-        <woot-code :script="twilioCallbackURL" lang="html"></woot-code>
-      </settings-section>
-    </div>
-
-    <div
-      v-if="inbox.channel_type === 'Channel::FacebookPage'"
-      class="settings--content"
-    >
-      <settings-section
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
-      >
-        <woot-code :script="messengerScript"></woot-code>
-      </settings-section>
-    </div>
-    <div v-else-if="inbox.channel_type === 'Channel::WebWidget'">
-      <div class="settings--content">
         <settings-section
-          :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
+          :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
-          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
+          :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
         >
-          <woot-code :script="inbox.web_widget_script"></woot-code>
+          <woot-code :script="twilioCallbackURL" lang="html"></woot-code>
         </settings-section>
       </div>
+      <div v-else-if="isAWebWidgetInbox">
+        <div class="settings--content">
+          <settings-section
+            :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
+            :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
+          >
+            <woot-code :script="inbox.web_widget_script"></woot-code>
+          </settings-section>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 /* eslint no-console: 0 */
-/* global bus */
 import { mapGetters } from 'vuex';
 import { createMessengerScript } from 'dashboard/helper/scriptGenerator';
 import configMixin from 'shared/mixins/configMixin';
+import alertMixin from 'shared/mixins/alertMixin';
 import SettingsSection from '../../../../components/SettingsSection';
+import inboxMixin from 'shared/mixins/inboxMixin';
 
 export default {
   components: {
     SettingsSection,
   },
-  mixins: [configMixin],
+  mixins: [alertMixin, configMixin, inboxMixin],
   data() {
     return {
       avatarFile: null,
@@ -220,6 +242,7 @@ export default {
       channelWebsiteUrl: '',
       channelWelcomeTitle: '',
       channelWelcomeTagline: '',
+      selectedFeatureFlags: [],
       autoAssignmentOptions: [
         {
           value: true,
@@ -230,6 +253,7 @@ export default {
           label: this.$t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED'),
         },
       ],
+      selectedTabIndex: 0,
     };
   },
   computed: {
@@ -237,17 +261,41 @@ export default {
       agentList: 'agents/getAgents',
       uiFlags: 'inboxes/getUIFlags',
     }),
+    selectedTabKey() {
+      return this.tabs[this.selectedTabIndex]?.key;
+    },
+    tabs() {
+      const visibleToAllChannelTabs = [
+        {
+          key: 'inbox_settings',
+          name: this.$t('INBOX_MGMT.TABS.SETTINGS'),
+        },
+        {
+          key: 'collaborators',
+          name: this.$t('INBOX_MGMT.TABS.COLLABORATORS'),
+        },
+      ];
+
+      if (this.isAWebWidgetInbox || this.isATwilioChannel) {
+        return [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'configuration',
+            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
+          },
+        ];
+      }
+
+      return visibleToAllChannelTabs;
+    },
     currentInboxId() {
       return this.$route.params.inboxId;
     },
     inbox() {
       return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
     },
-    isAWidgetInbox() {
-      return this.inbox.channel_type === 'Channel::WebWidget';
-    },
     inboxName() {
-      if (this.inbox.channel_type === 'Channel::TwilioSms') {
+      if (this.isATwilioSMSChannel || this.isATwilioWhatsappChannel) {
         return `${this.inbox.name} (${this.inbox.phone_number})`;
       }
       return this.inbox.name;
@@ -267,10 +315,25 @@ export default {
     this.fetchInboxSettings();
   },
   methods: {
-    showAlert(message) {
+    handleFeatureFlag(e) {
-      bus.$emit('newToastMessage', message);
+      console.log(e.target.value);
+      this.selectedFeatureFlags = this.toggleInput(
+        this.selectedFeatureFlags,
+        e.target.value
+      );
+    },
+    toggleInput(selected, current) {
+      if (selected.includes(current)) {
+        const newSelectedFlags = selected.filter(flag => flag !== current);
+        return newSelectedFlags;
+      }
+      return [...selected, current];
+    },
+    onTabChange(selectedTabIndex) {
+      this.selectedTabIndex = selectedTabIndex;
     },
     fetchInboxSettings() {
+      this.selectedTabIndex = 0;
       this.selectedAgents = [];
       this.$store.dispatch('agents/get');
       this.$store.dispatch('inboxes/get').then(() => {
@@ -283,6 +346,7 @@ export default {
         this.channelWebsiteUrl = this.inbox.website_url;
         this.channelWelcomeTitle = this.inbox.welcome_title;
         this.channelWelcomeTagline = this.inbox.welcome_tagline;
+        this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
       });
     },
     async fetchAttachedAgents() {
@@ -325,6 +389,7 @@ export default {
             website_url: this.channelWebsiteUrl,
             welcome_title: this.channelWelcomeTitle || '',
             welcome_tagline: this.channelWelcomeTagline || '',
+            selectedFeatureFlags: this.selectedFeatureFlags,
           },
         };
         if (this.avatarFile) {
@@ -370,7 +435,16 @@ export default {
   .page-top-bar {
     @include background-light;
     @include border-normal-bottom;
-    padding: $space-normal $space-larger;
+    padding: $space-normal $space-large 0;
+
+    .tabs {
+      padding: 0;
+      margin-bottom: -1px;
+    }
   }
 }
+
+.widget--feature-flag {
+  padding-top: var(--space-small);
+}
 </style>

app/javascript/dashboard/store/modules/inboxes.js

@@ -11,7 +11,15 @@ const buildInboxData = inboxParams => {
   Object.keys(inboxProperties).forEach(key => {
     formData.append(key, inboxProperties[key]);
   });
-  Object.keys(channel).forEach(key => {
+  const { selectedFeatureFlags = [], ...channelParams } = channel;
+  if (selectedFeatureFlags.length) {
+    selectedFeatureFlags.forEach(featureFlag => {
+      formData.append(`channel[selected_feature_flags][]`, featureFlag);
+    });
+  } else {
+    formData.append('channel[selected_feature_flags][]', '');
+  }
+  Object.keys(channelParams).forEach(key => {
     formData.append(`channel[${key}]`, channel[key]);
   });
   return formData;

app/javascript/shared/mixins/inboxMixin.js

@@ -0,0 +1,42 @@
+export const INBOX_TYPES = {
+  WEB: 'Channel::WebWidget',
+  FB: 'Channel::FacebookPage',
+  TWITTER: 'Channel::TwitterProfile',
+  TWILIO: 'Channel::TwilioSms',
+  API: 'Channel::Api',
+  EMAIL: 'Channel::Email',
+};
+
+export default {
+  computed: {
+    channelType() {
+      return this.inbox.channel_type;
+    },
+    isAPIInbox() {
+      return this.channelType === INBOX_TYPES.API;
+    },
+    isATwitterInbox() {
+      return this.channelType === INBOX_TYPES.TWITTER;
+    },
+    isAFacebookInbox() {
+      return this.channelType === INBOX_TYPES.FB;
+    },
+    isAWebWidgetInbox() {
+      return this.channelType === INBOX_TYPES.WEB;
+    },
+    isATwilioChannel() {
+      return this.channelType === INBOX_TYPES.TWILIO;
+    },
+    isAnEmailChannel() {
+      return this.channelType === INBOX_TYPES.EMAIL;
+    },
+    isATwilioSMSChannel() {
+      const { phone_number: phoneNumber = '' } = this.inbox;
+      return this.isATwilioChannel && !phoneNumber.startsWith('whatsapp');
+    },
+    isATwilioWhatsappChannel() {
+      const { phone_number: phoneNumber = '' } = this.inbox;
+      return this.isATwilioChannel && phoneNumber.startsWith('whatsapp');
+    },
+  },
+};

app/javascript/shared/mixins/specs/inboxMixin.spec.js

@@ -0,0 +1,114 @@
+import { shallowMount } from '@vue/test-utils';
+import inboxMixin from '../inboxMixin';
+
+describe('inboxMixin', () => {
+  it('returns the correct channel type', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return { inbox: { channel_type: 'Channel::WebWidget' } };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.channelType).toBe('Channel::WebWidget');
+  });
+
+  it('isAPIInbox returns true if channel type is API', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return { inbox: { channel_type: 'Channel::Api' } };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isAPIInbox).toBe(true);
+  });
+
+  it('isATwitterInbox returns true if channel type is twitter', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return { inbox: { channel_type: 'Channel::TwitterProfile' } };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATwitterInbox).toBe(true);
+  });
+
+  it('isAFacebookInbox returns true if channel type is Facebook', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return { inbox: { channel_type: 'Channel::FacebookPage' } };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isAFacebookInbox).toBe(true);
+  });
+
+  it('isAWebWidgetInbox returns true if channel type is Facebook', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return { inbox: { channel_type: 'Channel::WebWidget' } };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isAWebWidgetInbox).toBe(true);
+  });
+
+  it('isATwilioChannel returns true if channel type is Twilio', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          inbox: {
+            channel_type: 'Channel::TwilioSms',
+            phone_number: '+91944444444',
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATwilioChannel).toBe(true);
+    expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
+  });
+
+  it('isATwilioWhatsappChannel returns true if channel type is Twilio and phonenumber is a whatsapp number', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          inbox: {
+            channel_type: 'Channel::TwilioSms',
+            phone_number: 'whatsapp:+91944444444',
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATwilioChannel).toBe(true);
+    expect(wrapper.vm.isATwilioWhatsappChannel).toBe(true);
+  });
+
+  it('isAnEmailChannel returns true if channel type is email', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          inbox: { channel_type: 'Channel::Email' },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isAnEmailChannel).toBe(true);
+  });
+});

app/javascript/widget/components/ChatInputWrap.vue

@@ -18,6 +18,7 @@
         :on-click="emojiOnClick"
       />
       <i
+        v-if="hasEmojiPickerEnabled"
         class="emoji-toggle icon ion-happy-outline"
         :class="{ active: showEmojiPicker }"
         @click="toggleEmojiPicker()"
@@ -39,6 +40,7 @@ import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea';
 import EmojiInput from 'dashboard/components/widgets/emoji/EmojiInput';
+import configMixin from '../mixins/configMixin';
 
 export default {
   name: 'ChatInputWrap',
@@ -48,7 +50,7 @@ export default {
     EmojiInput,
     ResizableTextArea,
   },
-  mixins: [clickaway],
+  mixins: [clickaway, configMixin],
   props: {
     onSendMessage: {
       type: Function,
@@ -72,7 +74,7 @@ export default {
       widgetColor: 'appConfig/getWidgetColor',
     }),
     showAttachment() {
-      return this.userInput.length === 0;
+      return this.hasAttachmentsEnabled && this.userInput.length === 0;
     },
     showSendButton() {
       return this.userInput.length > 0;

app/javascript/widget/mixins/configMixin.js

@@ -15,5 +15,11 @@ export default {
     channelConfig() {
       return window.chatwootWebChannel;
     },
+    hasEmojiPickerEnabled() {
+      return this.channelConfig.enabledFeatures.includes('emoji_picker');
+    },
+    hasAttachmentsEnabled() {
+      return this.channelConfig.enabledFeatures.includes('attachments');
+    },
   },
 };

app/javascript/widget/mixins/specs/configMixin.spec.js

@@ -6,6 +6,7 @@ global.chatwootWebChannel = {
   hideInputForBotConversations: true,
   avatarUrl: 'https://test.url',
   hasAConnectedAgentBot: 'AgentBot',
+  enabledFeatures: ['emoji_picker', 'attachments'],
 };
 
 global.chatwootWidgetDefaults = {
@@ -22,6 +23,8 @@ describe('configMixin', () => {
     const Constructor = Vue.extend(Component);
     const vm = new Constructor().$mount();
     const wrapper = createWrapper(vm);
+    expect(wrapper.vm.hasEmojiPickerEnabled).toBe(true);
+    expect(wrapper.vm.hasAttachmentsEnabled).toBe(true);
     expect(wrapper.vm.hideInputForBotConversations).toBe(true);
     expect(wrapper.vm.hasAConnectedAgentBot).toBe(true);
     expect(wrapper.vm.useInboxAvatarForBot).toBe(true);
@@ -30,6 +33,7 @@ describe('configMixin', () => {
       hideInputForBotConversations: true,
       avatarUrl: 'https://test.url',
       hasAConnectedAgentBot: 'AgentBot',
+      enabledFeatures: ['emoji_picker', 'attachments'],
     });
   });
 });

app/models/channel/web_widget.rb

@@ -3,6 +3,7 @@
 # Table name: channel_web_widgets
 #
 #  id              :integer          not null, primary key
+#  feature_flags   :integer          default(3), not null
 #  website_token   :string
 #  website_url     :string
 #  welcome_tagline :string
@@ -18,6 +19,8 @@
 #
 
 class Channel::WebWidget < ApplicationRecord
+  include FlagShihTzu
+
   self.table_name = 'channel_web_widgets'
 
   validates :website_url, presence: true
@@ -26,6 +29,9 @@ class Channel::WebWidget < ApplicationRecord
   belongs_to :account
   has_one :inbox, as: :channel, dependent: :destroy
   has_secure_token :website_token
+  has_flags 1 => :attachments,
+            2 => :emoji_picker,
+            :column => 'feature_flags'
 
   def has_24_hour_messaging_window?
     false

app/models/inbox.rb

@@ -46,6 +46,8 @@ class Inbox < ApplicationRecord
 
   after_destroy :delete_round_robin_agents
 
+  scope :order_by_id, -> { order(id: :asc) }
+
   def add_member(user_id)
     member = inbox_members.new(user_id: user_id)
     member.save!

app/views/api/v1/models/_inbox.json.jbuilder

@@ -14,3 +14,4 @@ json.enable_auto_assignment resource.enable_auto_assignment
 json.web_widget_script resource.channel.try(:web_widget_script)
 json.forward_to_address resource.channel.try(:forward_to_address)
 json.phone_number resource.channel.try(:phone_number)
+json.selected_feature_flags resource.channel.try(:selected_feature_flags)

app/views/widgets/show.html.erb

@@ -17,6 +17,7 @@
         welcomeTagline: '<%= @web_widget.welcome_tagline %>',
         welcomeTitle: '<%= @web_widget.welcome_title %>',
         widgetColor: '<%= @web_widget.widget_color %>',
+        enabledFeatures: <%= @web_widget.selected_feature_flags.to_json.html_safe %>,
         enabledLanguages: <%= available_locales_with_name.to_json.html_safe %>,
       }
       window.chatwootWidgetDefaults = {

db/migrate/20200730080242_add_feature_setting_to_website_inbox.rb

@@ -0,0 +1,5 @@
+class AddFeatureSettingToWebsiteInbox < ActiveRecord::Migration[6.0]
+  def change
+    add_column :channel_web_widgets, :feature_flags, :integer, default: 3, null: false
+  end
+end

db/schema.rb

@@ -178,6 +178,7 @@ ActiveRecord::Schema.define(version: 2020_08_02_170002) do
     t.string "widget_color", default: "#1f93ff"
     t.string "welcome_title"
     t.string "welcome_tagline"
+    t.integer "feature_flags", default: 3, null: false
     t.index ["website_token"], name: "index_channel_web_widgets_on_website_token", unique: true
   end