chore: Provider API prototype (#3112)

Enabling Support for Whatsapp via 360Dialog as a prototype for the provider APIs. Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2021-10-05 23:35:06 +05:30
parent 40d0b2faf3
commit bd7aeba484
31 changed files with 506 additions and 60 deletions
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="view-box fill-height">
    <div
-      v-if="!currentChat.can_reply && !isATwilioWhatsappChannel"
+      v-if="!currentChat.can_reply && !isAWhatsappChannel"
      class="banner messenger-policy--banner"
    >
      <span>
@@ -16,7 +16,7 @@
      </span>
    </div>
    <div
-      v-if="!currentChat.can_reply && isATwilioWhatsappChannel"
+      v-if="!currentChat.can_reply && isAWhatsappChannel"
      class="banner messenger-policy--banner"
    >
      <span>
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -156,7 +156,7 @@ export default {
      return !!this.uiSettings.enter_to_send_enabled;
    },
    isPrivate() {
-      if (this.currentChat.can_reply || this.isATwilioWhatsappChannel) {
+      if (this.currentChat.can_reply || this.isAWhatsappChannel) {
        return this.isOnPrivateNote;
      }
      return true;
@@ -203,7 +203,7 @@ export default {
      if (this.isAFacebookInbox) {
        return MESSAGE_MAX_LENGTH.FACEBOOK;
      }
-      if (this.isATwilioWhatsappChannel) {
+      if (this.isAWhatsappChannel) {
        return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
      }
      if (this.isATwilioSMSChannel) {
@@ -278,7 +278,7 @@ export default {
        return;
      }

-      if (canReply || this.isATwilioWhatsappChannel) {
+      if (canReply || this.isAWhatsappChannel) {
        this.replyType = REPLY_EDITOR_MODES.REPLY;
      } else {
        this.replyType = REPLY_EDITOR_MODES.NOTE;
@@ -364,7 +364,7 @@ export default {
    setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
      const { can_reply: canReply } = this.currentChat;

-      if (canReply || this.isATwilioWhatsappChannel) this.replyType = mode;
+      if (canReply || this.isAWhatsappChannel) this.replyType = mode;
      if (this.showRichContentEditor) {
        return;
      }
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -16,6 +16,9 @@ export const getInboxClassByType = (type, phoneNumber) => {
        ? 'ion-social-whatsapp-outline'
        : 'ion-android-textsms';

+    case INBOX_TYPES.WHATSAPP:
+      return 'ion-social-whatsapp-outline';
+
    case INBOX_TYPES.API:
      return 'ion-cloud';

--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -97,8 +97,8 @@
        "SUBMIT_BUTTON": "Create inbox"
      },
      "TWILIO": {
-        "TITLE": "Twilio SMS/Whatsapp Channel",
-        "DESC": "Integrate Twilio and start supporting your customers via SMS or Whatsapp.",
+        "TITLE": "Twilio SMS/WhatsApp Channel",
+        "DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp.",
        "ACCOUNT_SID": {
          "LABEL": "Account SID",
          "PLACEHOLDER": "Please enter your Twilio Account SID",
@@ -114,8 +114,8 @@
          "ERROR": "This field is required"
        },
        "CHANNEL_NAME": {
-          "LABEL": "Channel Name",
-          "PLACEHOLDER": "Please enter a channel name",
+          "LABEL": "Inbox Name",
+          "PLACEHOLDER": "Please enter a inbox name",
          "ERROR": "This field is required"
        },
        "PHONE_NUMBER": {
@@ -136,9 +136,36 @@
        "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."
+			"WHATSAPP": {
+        "TITLE": "WhatsApp Channel",
+        "DESC": "Start supporting your customers via WhatsApp.",
+        "PROVIDERS": {
+          "LABEL": "API Provider",
+          "TWILIO": "Twilio",
+          "360_DIALOG": "360Dialog"
+        },
+        "INBOX_NAME": {
+          "LABEL": "Inbox Name",
+          "PLACEHOLDER": "Please enter an inbox name",
+          "ERROR": "This field is required"
+        },
+        "PHONE_NUMBER": {
+          "LABEL": "Phone number",
+          "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
+          "ERROR": "Please enter a valid value. Phone number should start with `+` sign."
+        },
+        "API_KEY": {
+          "LABEL": "API key",
+          "SUBTITLE": "Configure the WhatsApp API key.",
+          "PLACEHOLDER": "API key",
+          "APPLY_FOR_ACCESS": "Don't have any API key? Apply for access here",
+          "ERROR": "Please enter a valid value."
+
+        },
+        "SUBMIT_BUTTON": "Create WhatsApp Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the WhatsApp channel"
+        }
      },
      "API_CHANNEL": {
        "TITLE": "API Channel",
@@ -221,7 +248,7 @@
      },
      "AUTH": {
        "TITLE": "Choose a channel",
-        "DESC": "Chatwoot supports live-chat widget, Facebook page, Twitter profile, Whatsapp, Email etc., as channels. If you want to build a custom channel, you can create it using the API channel. Select one channel from the options below to proceed."
+        "DESC": "Chatwoot supports live-chat widget, Facebook page, Twitter profile, WhatsApp, Email etc., as channels. If you want to build a custom channel, you can create it using the API channel. Select one channel from the options below to proceed."
      },
      "AGENTS": {
        "TITLE": "Agents",
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -42,7 +42,7 @@ export default {
        { key: 'website', name: 'Website' },
        { key: 'facebook', name: 'Messenger' },
        { key: 'twitter', name: 'Twitter' },
-        { key: 'whatsapp', name: 'WhatsApp via Twilio' },
+        { key: 'whatsapp', name: 'WhatsApp' },
        { key: 'sms', name: 'SMS via Twilio' },
        { key: 'email', name: 'Email' },
        {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -45,6 +45,9 @@
                <span v-if="item.channel_type === 'Channel::TwilioSms'">
                  Twilio SMS
                </span>
+                <span v-if="item.channel_type === 'Channel::Whatsapp'">
+                  Whatsapp
+                </span>
                <span v-if="item.channel_type === 'Channel::Email'">
                  Email
                </span>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -245,10 +245,7 @@
          @click="updateInbox"
        />
      </settings-section>
-      <facebook-reauthorize
-        v-if="isAFacebookInbox && inbox.reauthorization_required"
-        :inbox-id="inbox.id"
-      />
+      <facebook-reauthorize v-if="isAFacebookInbox" :inbox-id="inbox.id" />
    </div>

    <!-- update agents in inbox -->
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -0,0 +1,128 @@
+<template>
+  <form class="row" @submit.prevent="createChannel()">
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
+        <input
+          v-model.trim="inboxName"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
+          @blur="$v.inboxName.$touch"
+        />
+        <span v-if="$v.inboxName.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.phoneNumber.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model.trim="phoneNumber"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
+          @blur="$v.phoneNumber.$touch"
+        />
+        <span v-if="$v.phoneNumber.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.apiKey.$error }">
+        <span>
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
+          <a
+            href="https://hub.360dialog.com/lp/whatsapp/L9dj7aPA"
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+          >
+            ({{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.APPLY_FOR_ACCESS') }})
+          </a>
+        </span>
+        <input
+          v-model.trim="apiKey"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
+          @blur="$v.apiKey.$touch"
+        />
+        <span v-if="$v.apiKey.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="medium-12 columns">
+      <woot-submit-button
+        :loading="uiFlags.isCreating"
+        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import { required } from 'vuelidate/lib/validators';
+import router from '../../../../index';
+
+const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
+
+export default {
+  mixins: [alertMixin],
+  data() {
+    return {
+      inboxName: '',
+      phoneNumber: '',
+      apiKey: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    inboxName: { required },
+    phoneNumber: { required, shouldStartWithPlusSign },
+    apiKey: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+
+      try {
+        const whatsappChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.inboxName,
+            channel: {
+              type: 'whatsapp',
+              phone_number: this.phoneNumber,
+              provider_config: {
+                api_key: this.apiKey,
+              },
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: whatsappChannel.id,
+          },
+        });
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -206,7 +206,8 @@ export default {
          }
        },
        {
-          scope: 'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
+          scope:
+            'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
        }
      );
    },
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -79,12 +79,12 @@ const shouldStartWithPlusSign = (value = '') => value.startsWith('+');

 export default {
  mixins: [alertMixin],
-	props: {
-		type: {
-			type: String,
-			required: true,
+  props: {
+    type: {
+      type: String,
+      required: true,
    },
-	},
+  },
  data() {
    return {
      accountSID: '',
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -1,22 +1,43 @@
 <template>
  <div class="wizard-body small-9 columns">
-     <page-header
+    <page-header
      :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
      :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
    />
-		<twilio type="whatsapp"></twilio>
+    <div class="medium-8 columns">
+      <label>
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
+        <select v-model="provider">
+          <option value="twilio">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
+          </option>
+          <option value="360dialog">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG') }}
+          </option>
+        </select>
+      </label>
+    </div>
+
+    <twilio v-if="provider === 'twilio'" type="whatsapp"></twilio>
+    <three-sixty-dialog-whatsapp v-else />
  </div>
 </template>

 <script>
-
 import PageHeader from '../../SettingsSubPageHeader';
 import Twilio from './Twilio';
+import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp';

 export default {
  components: {
    PageHeader,
-		Twilio,
+    Twilio,
+    ThreeSixtyDialogWhatsapp,
+  },
+  data() {
+    return {
+      provider: 'twilio',
+    };
  },
 };
 </script>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -79,7 +79,8 @@ export default {
          }
        },
        {
-          scope: 'pages_manage_metadata,pages_messaging',
+          scope:
+            'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
          auth_type: 'reauthorize',
        }
      );
--- a/app/javascript/shared/mixins/inboxMixin.js
+++ b/app/javascript/shared/mixins/inboxMixin.js
@@ -3,6 +3,7 @@ export const INBOX_TYPES = {
  FB: 'Channel::FacebookPage',
  TWITTER: 'Channel::TwitterProfile',
  TWILIO: 'Channel::TwilioSms',
+  WHATSAPP: 'Channel::Whatsapp',
  API: 'Channel::Api',
  EMAIL: 'Channel::Email',
  TELEGRAM: 'Channel::Telegram',
@@ -68,5 +69,11 @@ export default {
      }
      return this.channelType;
    },
+    isAWhatsappChannel() {
+      return (
+        this.channelType === INBOX_TYPES.WHATSAPP ||
+        this.isATwilioWhatsappChannel
+      );
+    },
  },
 };