feat: Telegram Channel (#2901)

- Ability to configure telegram bots as a channel in chatwoot
- Receive a message sent to the telegram bot in chatwoot
- Ability to reply to telegram users from chatwoot
- Receive attachment messages in chatwoot

fixes: #1843

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

@@ -76,7 +76,7 @@ export default {
       if (key === 'email') {
         return this.enabledFeatures.channel_email;
       }
-      return ['website', 'twilio', 'api', 'whatsapp', 'sms'].includes(key);
+      return ['website', 'twilio', 'api', 'whatsapp', 'sms', 'telegram'].includes(key);
     },
   },
   methods: {

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

@@ -35,6 +35,13 @@
       :style="badgeStyle"
       src="~dashboard/assets/images/channels/whatsapp.png"
     />
+    <img
+      v-if="badge === 'Channel::Telegram'"
+      id="badge"
+      class="source-badge"
+      :style="badgeStyle"
+      src="~dashboard/assets/images/channels/telegram.png"
+    />
     <div
       v-if="showStatusIndicator"
       :class="`source-badge user-online-status user-online-status--${status}`"

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

@@ -171,6 +171,19 @@
           "ERROR_MESSAGE": "We were not able to save the email channel"
         },
         "FINISH_MESSAGE": "Start forwarding your emails to the following email address."
+      },
+       "TELEGRAM_CHANNEL": {
+        "TITLE": "Telegram Channel",
+        "DESC": "Integrate with Telegram channel and start supporting your customers.",
+        "BOT_TOKEN": {
+          "LABEL": "Bot Token",
+          "SUBTITLE": "Configure the bot token you have obtained from Telegram BotFather.",
+          "PLACEHOLDER": "Bot Token"
+        },
+        "SUBMIT_BUTTON": "Create Telegram Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the telegram channel"
+        }
       },
       "AUTH": {
         "TITLE": "Choose a channel",

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

@@ -48,6 +48,9 @@
                 <span v-if="item.channel_type === 'Channel::Email'">
                   Email
                 </span>
+                <span v-if="item.channel_type === 'Channel::Telegram'">
+                  Telegram
+                </span>
                 <span v-if="item.channel_type === 'Channel::Api'">
                   {{ globalConfig.apiChannelName || 'API' }}
                 </span>

app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js

@@ -5,6 +5,7 @@ import Api from './channels/Api';
 import Email from './channels/Email';
 import Sms from './channels/Sms';
 import Whatsapp from './channels/Whatsapp';
+import Telegram from './channels/Telegram';
 
 const channelViewList = {
   facebook: Facebook,
@@ -14,6 +15,7 @@ const channelViewList = {
   email: Email,
   sms: Sms,
   whatsapp: Whatsapp,
+  telegram: Telegram,
 };
 
 export default {

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

@@ -0,0 +1,93 @@
+<template>
+  <div class="wizard-body small-9 columns">
+    <page-header
+      :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
+    />
+    <form class="row" @submit.prevent="createChannel()">
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.botToken.$error }">
+          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
+          <input
+            v-model.trim="botToken"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
+            "
+            @blur="$v.botToken.$touch"
+          />
+        </label>
+        <p class="help-text">
+          {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.SUBTITLE') }}
+        </p>
+      </div>
+
+      <div class="medium-12 columns">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import { required } from 'vuelidate/lib/validators';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader';
+
+export default {
+  components: {
+    PageHeader,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      botToken: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    botToken: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+
+      try {
+        const telegramChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            channel: {
+              type: 'telegram',
+              bot_token: this.botToken,
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: telegramChannel.id,
+          },
+        });
+      } catch (error) {
+        this.showAlert(
+          this.$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>