feat: Line Channel (#2904)

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

fixes: #2738

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

@@ -76,7 +76,16 @@ export default {
       if (key === 'email') {
         return this.enabledFeatures.channel_email;
       }
-      return ['website', 'twilio', 'api', 'whatsapp', 'sms', 'telegram'].includes(key);
+
+      return [
+        'website',
+        'twilio',
+        'api',
+        'whatsapp',
+        'sms',
+        'telegram',
+        'line',
+      ].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::Line'"
+      id="badge"
+      class="source-badge"
+      :style="badgeStyle"
+      src="~dashboard/assets/images/channels/line.png"
+    />
     <img
       v-if="badge === 'Channel::Telegram'"
       id="badge"

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

@@ -172,7 +172,32 @@
         },
         "FINISH_MESSAGE": "Start forwarding your emails to the following email address."
       },
-       "TELEGRAM_CHANNEL": {
+      "LINE_CHANNEL": {
+        "TITLE": "LINE Channel",
+        "DESC": "Integrate with LINE channel and start supporting your customers.",
+        "CHANNEL_NAME": {
+          "LABEL": "Channel Name",
+          "PLACEHOLDER": "Please enter a channel name",
+          "ERROR": "This field is required"
+        },
+        "LINE_CHANNEL_ID": {
+          "LABEL": "LINE Channel ID",
+          "PLACEHOLDER": "LINE Channel ID"
+        },
+        "LINE_CHANNEL_SECRET": {
+          "LABEL": "LINE Channel Secret",
+          "PLACEHOLDER": "LINE Channel Secret"
+        },
+        "LINE_CHANNEL_TOKEN": {
+          "LABEL": "LINE Channel Token",
+          "PLACEHOLDER": "LINE Channel Token"
+        },
+        "SUBMIT_BUTTON": "Create LINE Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the LINE channel"
+        }
+      },
+      "TELEGRAM_CHANNEL": {
         "TITLE": "Telegram Channel",
         "DESC": "Integrate with Telegram channel and start supporting your customers.",
         "BOT_TOKEN": {

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

@@ -17,7 +17,15 @@
           <woot-code
             v-if="isATwilioInbox"
             lang="html"
-            :script="twilioCallbackURL"
+            :script="currentInbox.webhook_url"
+          >
+          </woot-code>
+        </div>
+        <div class="medium-6 small-offset-3">
+          <woot-code
+            v-if="isALineInbox"
+            lang="html"
+            :script="currentInbox.webhook_url"
           >
           </woot-code>
         </div>
@@ -75,6 +83,9 @@ export default {
     isAEmailInbox() {
       return this.currentInbox.channel_type === 'Channel::Email';
     },
+    isALineInbox() {
+      return this.currentInbox.channel_type === 'Channel::Line';
+    },
     message() {
       if (this.isATwilioInbox) {
         return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(

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 Line from './channels/Line';
 import Telegram from './channels/Telegram';
 
 const channelViewList = {
@@ -15,6 +16,7 @@ const channelViewList = {
   email: Email,
   sms: Sms,
   whatsapp: Whatsapp,
+  line: Line,
   telegram: Telegram,
 };
 

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="wizard-body small-9 columns">
+    <page-header
+      :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
+    />
+    <form class="row" @submit.prevent="createChannel()">
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="$v.channelName.$touch"
+          />
+          <span v-if="$v.channelName.$error" class="message">{{
+            $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.ERROR')
+          }}</span>
+        </label>
+      </div>
+
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.lineChannelId.$error }">
+          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
+          <input
+            v-model.trim="lineChannelId"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
+            "
+            @blur="$v.lineChannelId.$touch"
+          />
+        </label>
+      </div>
+
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.lineChannelSecret.$error }">
+          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
+          <input
+            v-model.trim="lineChannelSecret"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
+            "
+            @blur="$v.lineChannelSecret.$touch"
+          />
+        </label>
+      </div>
+
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.lineChannelToken.$error }">
+          {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
+          <input
+            v-model.trim="lineChannelToken"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
+            "
+            @blur="$v.lineChannelToken.$touch"
+          />
+        </label>
+      </div>
+
+      <div class="medium-12 columns">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.LINE_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 {
+      channelName: '',
+      lineChannelId: '',
+      lineChannelSecret: '',
+      lineChannelToken: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    channelName: { required },
+    lineChannelId: { required },
+    lineChannelSecret: { required },
+    lineChannelToken: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+
+      try {
+        const lineChannel = await this.$store.dispatch('inboxes/createChannel', {
+          name: this.channelName,
+          channel: {
+            type: 'line',
+            line_channel_id: this.lineChannelId,
+            line_channel_secret: this.lineChannelSecret,
+            line_channel_token: this.lineChannelToken,
+          },
+        });
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: lineChannel.id,
+          },
+        });
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>

app/javascript/shared/mixins/configMixin.js

@@ -3,9 +3,6 @@ export default {
     hostURL() {
       return window.chatwootConfig.hostURL;
     },
-    twilioCallbackURL() {
-      return `${this.hostURL}/twilio/callback`;
-    },
     vapidPublicKey() {
       return window.chatwootConfig.vapidPublicKey;
     },