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

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

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,
-    headerContent: String,
-    headerImage: String,
+    headerTitle: {
+      type: 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: {
-    isActive(channel) {
+  computed: {
+    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)) {
-        this.$emit('channel-item-click', this.channel);
+      if (this.isActive) {
+        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 ||