chore: Twilio to individual(SMS/Whatsapp) channels (#2566)

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

@@ -37,8 +37,12 @@
       src="~dashboard/assets/images/channels/website.png"
     />
     <img
-      v-if="channel.key === 'twilio'"
+      v-if="channel.key === 'sms'"
-      src="~dashboard/assets/images/channels/twilio.png"
+      src="~dashboard/assets/images/channels/sms.png"
+    />
+    <img
+      v-if="channel.key === 'whatsapp'"
+      src="~dashboard/assets/images/channels/whatsapp.png"
     />
     <h3 class="channel__title">
       {{ channel.name }}
@@ -72,7 +76,7 @@ export default {
       if (key === 'email') {
         return this.enabledFeatures.channel_email;
       }
-      return ['website', 'twilio', 'api'].includes(key);
+      return ['website', 'twilio', 'api', 'whatsapp', 'sms'].includes(key);
     },
   },
   methods: {

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

@@ -126,6 +126,14 @@
         "API": {
           "ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
         }
+      },
+			"SMS": {
+        "TITLE": "SMS Channel via Twilio",
+        "DESC": "Start supporting your customers via SMS with Twilio integration."
+      },
+			"WHATSAPP": {
+        "TITLE": "Whatsapp Channel via Twilio",
+        "DESC": "Start supporting your customers via Whatsapp with Twilio integration."
       },
       "API_CHANNEL": {
         "TITLE": "API Channel",

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

@@ -42,7 +42,8 @@ export default {
         { key: 'website', name: 'Website' },
         { key: 'facebook', name: 'Facebook' },
         { key: 'twitter', name: 'Twitter' },
-        { key: 'twilio', name: 'Twilio' },
+        { key: 'whatsapp', name: 'WhatsApp via Twilio' },
+        { key: 'sms', name: 'SMS via Twilio' },
         { key: 'email', name: 'Email' },
         {
           key: 'api',

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

@@ -1,17 +1,19 @@
 import Facebook from './channels/Facebook';
 import Website from './channels/Website';
 import Twitter from './channels/Twitter';
-import Twilio from './channels/Twilio';
 import Api from './channels/Api';
 import Email from './channels/Email';
+import Sms from './channels/Sms';
+import Whatsapp from './channels/Whatsapp';
 
 const channelViewList = {
   facebook: Facebook,
   website: Website,
   twitter: Twitter,
-  twilio: Twilio,
   api: Api,
   email: Email,
+  sms: Sms,
+  whatsapp: Whatsapp,
 };
 
 export default {

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="wizard-body small-9 columns">
+    <page-header
+      :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
+    />
+		<twilio type="sms"></twilio>
+  </div>
+</template>
+
+<script>
+import PageHeader from '../../SettingsSubPageHeader';
+import Twilio from './Twilio';
+
+export default {
+  components: {
+    PageHeader,
+		Twilio,
+  },
+};
+</script>

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

@@ -1,90 +1,72 @@
+<!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
 <template>
-  <div class="wizard-body small-9 columns">
+  <form class="row" @submit.prevent="createChannel()">
-    <page-header
+    <div class="medium-8 columns">
-      :header-title="$t('INBOX_MGMT.ADD.TWILIO.TITLE')"
+      <label :class="{ error: $v.channelName.$error }">
-      :header-content="$t('INBOX_MGMT.ADD.TWILIO.DESC')"
+        {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
-    />
+        <input
-    <form class="row" @submit.prevent="createChannel()">
+          v-model.trim="channelName"
-      <div class="medium-8 columns">
+          type="text"
-        <label :class="{ error: $v.channelName.$error }">
+          :placeholder="$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.PLACEHOLDER')"
-          {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
+          @blur="$v.channelName.$touch"
-          <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.medium.$error }">
-          {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_TYPE.LABEL') }}
-          <select v-model="medium">
-            <option value="sms">SMS</option>
-            <option value="whatsapp">Whatsapp</option>
-          </select>
-          <span v-if="$v.medium.$error" class="message">{{
-            $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_TYPE.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>
+        <span v-if="$v.channelName.$error" class="message">{{
-    </form>
+          $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
-  </div>
+        }}</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>
 </template>
 
 <script>
@@ -92,20 +74,22 @@ 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],
+	props: {
+		type: {
+			type: String,
+			required: true,
+    },
+	},
   data() {
     return {
       accountSID: '',
       authToken: '',
-      medium: '',
+      medium: this.type,
       channelName: '',
       phoneNumber: '',
     };

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

@@ -0,0 +1,22 @@
+<template>
+  <div class="wizard-body small-9 columns">
+     <page-header
+      :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
+    />
+		<twilio type="whatsapp"></twilio>
+  </div>
+</template>
+
+<script>
+
+import PageHeader from '../../SettingsSubPageHeader';
+import Twilio from './Twilio';
+
+export default {
+  components: {
+    PageHeader,
+		Twilio,
+  },
+};
+</script>