From fc4ef1595bbe9a2a41b1d7c4ca28d6fe12ac3e66 Mon Sep 17 00:00:00 2001
From: Siddharth Ramesh <siddhartharramesh@gmail.com>
Date: Mon, 12 Jul 2021 22:33:39 +0530
Subject: [PATCH] chore: Twilio to individual(SMS/Whatsapp) channels (#2566)

---
 .../dashboard/assets/images/channels/sms.png  | Bin 0 -> 14570 bytes
 .../components/widgets/ChannelItem.vue        |  10 +-
 .../dashboard/i18n/locale/en/inboxMgmt.json   |   8 +
 .../dashboard/settings/inbox/ChannelList.vue  |   3 +-
 .../settings/inbox/channel-factory.js         |   6 +-
 .../dashboard/settings/inbox/channels/Sms.vue |  21 +++
 .../settings/inbox/channels/Twilio.vue        | 164 ++++++++----------
 .../settings/inbox/channels/Whatsapp.vue      |  22 +++
 8 files changed, 138 insertions(+), 96 deletions(-)
 create mode 100644 app/javascript/dashboard/assets/images/channels/sms.png
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue

diff --git a/app/javascript/dashboard/assets/images/channels/sms.png b/app/javascript/dashboard/assets/images/channels/sms.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8cfa6428a2791998548f504e43fd2e9c08e43e4
GIT binary patch
literal 14570
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

literal 0
HcmV?d00001

diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index 37b82436e..8e9f1455e 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -37,8 +37,12 @@
       src="~dashboard/assets/images/channels/website.png"
     />
     <img
-      v-if="channel.key === 'twilio'"
-      src="~dashboard/assets/images/channels/twilio.png"
+      v-if="channel.key === 'sms'"
+      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: {
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 24463aac8..74203a4bb 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/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",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index ce19b918e..0ee3b8f03 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/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',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js
index 47c4e4e6e..0cf37f148 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js
+++ b/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 {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
new file mode 100644
index 000000000..5b5c9f09c
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
index e6d4056c1..28d132ab0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/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">
-    <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.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')"
+  <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"
         />
-      </div>
-    </form>
-  </div>
+        <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>
 </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: '',
     };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
new file mode 100644
index 000000000..d8e31c97c
--- /dev/null
+++ b/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>