Feature: Twilio SMS Channel (#658)

Twilio SMS Channel Fixes : #350
2020-04-05 22:11:27 +05:30
parent 8e59564793
commit a1a81e3799
44 changed files with 918 additions and 33 deletions
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@@ -128,11 +128,11 @@ export default {
        this.showAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
        this.onClose();
      } catch (error) {
-          if (error.response.status === 422) {
-            this.showAlert(this.$t('AGENT_MGMT.ADD.API.EXIST_MESSAGE'));
-          } else {
-            this.showAlert(this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE'));
-          }
+        if (error.response.status === 422) {
+          this.showAlert(this.$t('AGENT_MGMT.ADD.API.EXIST_MESSAGE'));
+        } else {
+          this.showAlert(this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE'));
+        }
      }
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -27,7 +27,14 @@ export default {
  },
  data() {
    return {
-      channelList: ['website', 'facebook', 'twitter', 'telegram', 'line'],
+      channelList: [
+        'website',
+        'facebook',
+        'twitter',
+        'twilio',
+        'telegram',
+        'line',
+      ],
    };
  },
  methods: {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -28,12 +28,14 @@
 </template>

 <script>
+import configMixin from 'shared/mixins/configMixin';
 import EmptyState from '../../../../components/widgets/EmptyState';

 export default {
  components: {
    EmptyState,
  },
+  mixins: [configMixin],
  computed: {
    currentInbox() {
      return this.$store.getters['inboxes/getInbox'](
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -42,6 +42,9 @@
                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
                  Twitter
                </span>
+                <span v-if="item.channel_type === 'Channel::TwilioSms'">
+                  Twilio SMS
+                </span>
              </td>

              <!-- Action Buttons -->
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -2,7 +2,7 @@
  <div class="settings columns container">
    <woot-modal-header
      :header-image="inbox.avatarUrl"
-      :header-title="inbox.name"
+      :header-title="inboxName"
    />
    <div
      v-if="inbox.channel_type === 'Channel::FacebookPage'"
@@ -87,6 +87,7 @@
 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';

 export default {
@@ -94,6 +95,7 @@ export default {
    Compact,
    SettingsFormHeader,
  },
+  mixins: [configMixin],
  data() {
    return {
      selectedAgents: [],
@@ -113,6 +115,12 @@ export default {
    inbox() {
      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
    },
+    inboxName() {
+      if (this.inbox.channel_type === 'Channel::TwilioSms') {
+        return `${this.inbox.name} (${this.inbox.phone_number})`;
+      }
+      return this.inbox.name;
+    },
    messengerScript() {
      return createMessengerScript(this.inbox.page_id);
    },
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js
@@ -1,11 +1,13 @@
 import Facebook from './channels/Facebook';
 import Website from './channels/Website';
 import Twitter from './channels/Twitter';
+import Twilio from './channels/Twilio';

 const channelViewList = {
  facebook: Facebook,
  website: Website,
  twitter: Twitter,
+  twilio: Twilio,
 };

 export default {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="wizard-body small-9 columns">
+    <page-header
+      :header-title="$t('INBOX_MGMT.ADD.TWILIO.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.TWILIO.DESC')"
+    />
+    <form class="row" @submit.prevent="createChannel()">
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model.trim="channelName"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.PLACEHOLDER')"
+            @blur="$v.channelName.$touch"
+          />
+          <span v-if="$v.channelName.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.phoneNumber.$error }">
+          {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
+          <input
+            v-model.trim="phoneNumber"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.PLACEHOLDER')"
+            @blur="$v.phoneNumber.$touch"
+          />
+          <span v-if="$v.phoneNumber.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.accountSID.$error }">
+          {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
+          <input
+            v-model.trim="accountSID"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
+            @blur="$v.accountSID.$touch"
+          />
+          <span v-if="$v.accountSID.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR') }}
+          </span>
+        </label>
+      </div>
+      <div class="medium-8 columns">
+        <label :class="{ error: $v.authToken.$error }">
+          {{ $t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.LABEL') }}
+          <input
+            v-model.trim="authToken"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.PLACEHOLDER')"
+            @blur="$v.authToken.$touch"
+          />
+          <span v-if="$v.authToken.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="medium-12 columns">
+        <woot-submit-button
+          :loading="uiFlags.isCreating"
+          :button-text="$t('INBOX_MGMT.ADD.TWILIO.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';
+
+const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
+
+export default {
+  components: {
+    PageHeader,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      accountSID: '',
+      authToken: '',
+      channelName: '',
+      phoneNumber: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    channelName: { required },
+    phoneNumber: { required, shouldStartWithPlusSign },
+    authToken: { required },
+    accountSID: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+
+      try {
+        const twilioChannel = await this.$store.dispatch(
+          'inboxes/createTwilioChannel',
+          {
+            twilio_channel: {
+              name: this.channelName,
+              account_sid: this.accountSID,
+              auth_token: this.authToken,
+              phone_number: this.phoneNumber,
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: twilioChannel.id,
+          },
+        });
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.ADD.TWILIO.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -5,11 +5,15 @@
      :header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
    />
    <woot-loading-state
-      v-if="isCreating"
-      message="Creating Website Support Channel"
+      v-if="uiFlags.isCreating"
+      :message="$('INBOX_MGMT.ADD.WEBSITE_CHANNEL.LOADING_MESSAGE')"
    >
    </woot-loading-state>
-    <form v-if="!isCreating" class="row" @submit.prevent="createChannel()">
+    <form
+      v-if="!uiFlags.isCreating"
+      class="row"
+      @submit.prevent="createChannel()"
+    >
      <div class="medium-12 columns">
        <label>
          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_NAME.LABEL') }}
@@ -45,6 +49,7 @@
      <div class="modal-footer">
        <div class="medium-12 columns">
          <woot-submit-button
+            :loading="uiFlags.isCreating"
            :disabled="!websiteUrl || !websiteName"
            :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
          />
@@ -70,7 +75,6 @@ export default {
      websiteName: '',
      websiteUrl: '',
      widgetColor: { hex: '#009CE0' },
-      isCreating: false,
    };
  },
  computed: {