From bd7aeba484895e35739665b7c191cc93189ca589 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 5 Oct 2021 23:35:06 +0530
Subject: [PATCH] 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>
---
 .env.example                                  |   2 +-
 .../api/v1/accounts/inboxes_controller.rb     |   2 +
 .../webhooks/whatsapp_controller.rb           |   6 +
 .../widgets/conversation/MessagesView.vue     |   4 +-
 .../widgets/conversation/ReplyBox.vue         |   8 +-
 app/javascript/dashboard/helper/inbox.js      |   3 +
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  43 ++++--
 .../dashboard/settings/inbox/ChannelList.vue  |   2 +-
 .../routes/dashboard/settings/inbox/Index.vue |   3 +
 .../dashboard/settings/inbox/Settings.vue     |   5 +-
 .../inbox/channels/360DialogWhatsapp.vue      | 128 ++++++++++++++++++
 .../settings/inbox/channels/Facebook.vue      |   3 +-
 .../settings/inbox/channels/Twilio.vue        |  10 +-
 .../settings/inbox/channels/Whatsapp.vue      |  29 +++-
 .../settings/inbox/facebook/Reauthorize.vue   |   3 +-
 app/javascript/shared/mixins/inboxMixin.js    |   7 +
 app/jobs/send_reply_job.rb                    |  18 ++-
 app/jobs/webhooks/whatsapp_events_job.rb      |  13 ++
 app/models/account.rb                         |   1 +
 app/models/channel/whatsapp.rb                |  67 +++++++++
 .../contacts/contactable_inboxes_service.rb   |  25 +++-
 .../whatsapp/incoming_message_service.rb      |  61 +++++++++
 .../whatsapp/send_on_whatsapp_service.rb      |  11 ++
 config/routes.rb                              |   1 +
 .../20210916112533_add_whatsapp_channel.rb    |  11 ++
 db/schema.rb                                  |  24 +---
 .../webhooks/whatsapp_controller_spec.rb      |  12 ++
 spec/factories/channel/channel_whatsapp.rb    |  11 ++
 spec/jobs/send_reply_job_spec.rb              |   9 ++
 .../whatsapp/incoming_message_service_spec.rb |  21 +++
 .../whatsapp/send_on_whatsapp_service_spec.rb |  23 ++++
 31 files changed, 506 insertions(+), 60 deletions(-)
 create mode 100644 app/controllers/webhooks/whatsapp_controller.rb
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
 create mode 100644 app/jobs/webhooks/whatsapp_events_job.rb
 create mode 100644 app/models/channel/whatsapp.rb
 create mode 100644 app/services/whatsapp/incoming_message_service.rb
 create mode 100644 app/services/whatsapp/send_on_whatsapp_service.rb
 create mode 100644 db/migrate/20210916112533_add_whatsapp_channel.rb
 create mode 100644 spec/controllers/webhooks/whatsapp_controller_spec.rb
 create mode 100644 spec/factories/channel/channel_whatsapp.rb
 create mode 100644 spec/services/whatsapp/incoming_message_service_spec.rb
 create mode 100644 spec/services/whatsapp/send_on_whatsapp_service_spec.rb

diff --git a/.env.example b/.env.example
index 3a5600495..dd4052f69 100644
--- a/.env.example
+++ b/.env.example
@@ -101,7 +101,7 @@ FB_APP_SECRET=
 FB_APP_ID=
 
 # https://developers.facebook.com/docs/messenger-platform/instagram/get-started#app-dashboard
-IG_VERIFY_TOKEN
+IG_VERIFY_TOKEN=
 
 # Twitter
 # documentation: https://www.chatwoot.com/docs/twitter-app-setup
diff --git a/app/controllers/api/v1/accounts/inboxes_controller.rb b/app/controllers/api/v1/accounts/inboxes_controller.rb
index df055923c..3f8686499 100644
--- a/app/controllers/api/v1/accounts/inboxes_controller.rb
+++ b/app/controllers/api/v1/accounts/inboxes_controller.rb
@@ -96,6 +96,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
       Current.account.line_channels.create!(permitted_params(Channel::Line::EDITABLE_ATTRS)[:channel].except(:type))
     when 'telegram'
       Current.account.telegram_channels.create!(permitted_params(Channel::Telegram::EDITABLE_ATTRS)[:channel].except(:type))
+    when 'whatsapp'
+      Current.account.whatsapp_channels.create!(permitted_params(Channel::Whatsapp::EDITABLE_ATTRS)[:channel].except(:type))
     end
   end
 
diff --git a/app/controllers/webhooks/whatsapp_controller.rb b/app/controllers/webhooks/whatsapp_controller.rb
new file mode 100644
index 000000000..7560da1e4
--- /dev/null
+++ b/app/controllers/webhooks/whatsapp_controller.rb
@@ -0,0 +1,6 @@
+class Webhooks::WhatsappController < ActionController::API
+  def process_payload
+    Webhooks::WhatsappEventsJob.perform_later(params.to_unsafe_hash)
+    head :ok
+  end
+end
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index c84b14b01..db042b5b7 100644
--- 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>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 0d3c35cde..fedd96927 100644
--- 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;
       }
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 3b91f1bc9..9355b9aa8 100644
--- 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';
 
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index b585eda4d..1d935dd64 100644
--- 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",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 27b3cbc73..296c6912f 100644
--- 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' },
         {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index a708f8064..b58515a35 100644
--- 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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index fd7204fe7..63e74e2fc 100644
--- 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 -->
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
new file mode 100644
index 000000000..751f10141
--- /dev/null
+++ 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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 338d7bbeb..25d85b486 100644
--- 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',
         }
       );
     },
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 28d132ab0..27cf47437 100644
--- 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: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
index d8e31c97c..d6f13c426 100644
--- 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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index 62c8712a2..c8d12df89 100644
--- 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',
         }
       );
diff --git a/app/javascript/shared/mixins/inboxMixin.js b/app/javascript/shared/mixins/inboxMixin.js
index 5ec1aeb14..562dd2a3b 100644
--- 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
+      );
+    },
   },
 };
diff --git a/app/jobs/send_reply_job.rb b/app/jobs/send_reply_job.rb
index 8e73433f6..08597a54d 100644
--- a/app/jobs/send_reply_job.rb
+++ b/app/jobs/send_reply_job.rb
@@ -8,11 +8,7 @@ class SendReplyJob < ApplicationJob
 
     case channel_name
     when 'Channel::FacebookPage'
-      if conversation.additional_attributes['type'] == 'instagram_direct_message'
-        ::Instagram::SendOnInstagramService.new(message: message).perform
-      else
-        ::Facebook::SendOnFacebookService.new(message: message).perform
-      end
+      send_on_facebook_page(message)
     when 'Channel::TwitterProfile'
       ::Twitter::SendOnTwitterService.new(message: message).perform
     when 'Channel::TwilioSms'
@@ -21,6 +17,18 @@ class SendReplyJob < ApplicationJob
       ::Line::SendOnLineService.new(message: message).perform
     when 'Channel::Telegram'
       ::Telegram::SendOnTelegramService.new(message: message).perform
+    when 'Channel::Whatsapp'
+      ::Whatsapp::SendOnWhatsappService.new(message: message).perform
+    end
+  end
+
+  private
+
+  def send_on_facebook_page(message)
+    if message.conversation.additional_attributes['type'] == 'instagram_direct_message'
+      ::Instagram::SendOnInstagramService.new(message: message).perform
+    else
+      ::Facebook::SendOnFacebookService.new(message: message).perform
     end
   end
 end
diff --git a/app/jobs/webhooks/whatsapp_events_job.rb b/app/jobs/webhooks/whatsapp_events_job.rb
new file mode 100644
index 000000000..315f08907
--- /dev/null
+++ b/app/jobs/webhooks/whatsapp_events_job.rb
@@ -0,0 +1,13 @@
+class Webhooks::WhatsappEventsJob < ApplicationJob
+  queue_as :default
+
+  def perform(params = {})
+    return unless params[:phone_number]
+
+    channel = Channel::Whatsapp.find_by(phone_number: params[:phone_number])
+    return unless channel
+
+    # TODO: pass to appropriate provider service from here
+    Whatsapp::IncomingMessageService.new(inbox: channel.inbox, params: params['whatsapp'].with_indifferent_access).perform
+  end
+end
diff --git a/app/models/account.rb b/app/models/account.rb
index 0b8287be5..8ce2a4beb 100644
--- a/app/models/account.rb
+++ b/app/models/account.rb
@@ -53,6 +53,7 @@ class Account < ApplicationRecord
   has_many :api_channels, dependent: :destroy, class_name: '::Channel::Api'
   has_many :line_channels, dependent: :destroy, class_name: '::Channel::Line'
   has_many :telegram_channels, dependent: :destroy, class_name: '::Channel::Telegram'
+  has_many :whatsapp_channels, dependent: :destroy, class_name: '::Channel::Whatsapp'
   has_many :canned_responses, dependent: :destroy
   has_many :webhooks, dependent: :destroy
   has_many :labels, dependent: :destroy
diff --git a/app/models/channel/whatsapp.rb b/app/models/channel/whatsapp.rb
new file mode 100644
index 000000000..f0e79a5cf
--- /dev/null
+++ b/app/models/channel/whatsapp.rb
@@ -0,0 +1,67 @@
+# == Schema Information
+#
+# Table name: channel_whatsapp
+#
+#  id              :bigint           not null, primary key
+#  phone_number    :string           not null
+#  provider        :string           default("default")
+#  provider_config :jsonb
+#  created_at      :datetime         not null
+#  updated_at      :datetime         not null
+#  account_id      :integer          not null
+#
+# Indexes
+#
+#  index_channel_whatsapp_on_phone_number  (phone_number) UNIQUE
+#
+
+class Channel::Whatsapp < ApplicationRecord
+  include Channelable
+
+  self.table_name = 'channel_whatsapp'
+  EDITABLE_ATTRS = [:phone_number, { provider_config: {} }].freeze
+
+  validates :phone_number, presence: true, uniqueness: true
+  before_save :validate_provider_config
+
+  def name
+    'Whatsapp'
+  end
+
+  # all this should happen in provider service . but hack mode on
+  def api_base_path
+    # provide the environment variable when testing against sandbox : 'https://waba-sandbox.360dialog.io/v1'
+    ENV.fetch('360DIALOG_BASE_URL', 'https://waba.360dialog.io/v1')
+  end
+
+  # Extract later into provider Service
+  def send_message(phone_number, message)
+    HTTParty.post(
+      "#{api_base_path}/messages",
+      headers: { 'D360-API-KEY': provider_config['api_key'], 'Content-Type': 'application/json' },
+      body: {
+        to: phone_number,
+        text: { body: message },
+        type: 'text'
+      }.to_json
+    )
+  end
+
+  def has_24_hour_messaging_window?
+    true
+  end
+
+  private
+
+  # Extract later into provider Service
+  def validate_provider_config
+    response = HTTParty.post(
+      "#{api_base_path}/configs/webhook",
+      headers: { 'D360-API-KEY': provider_config['api_key'], 'Content-Type': 'application/json' },
+      body: {
+        url: "#{ENV['FRONTEND_URL']}/webhooks/whatsapp/#{phone_number}"
+      }.to_json
+    )
+    errors.add(:bot_token, 'error setting up the webook') unless response.success?
+  end
+end
diff --git a/app/services/contacts/contactable_inboxes_service.rb b/app/services/contacts/contactable_inboxes_service.rb
index 1950b190c..fcd91d4c3 100644
--- a/app/services/contacts/contactable_inboxes_service.rb
+++ b/app/services/contacts/contactable_inboxes_service.rb
@@ -9,12 +9,18 @@ class Contacts::ContactableInboxesService
   private
 
   def get_contactable_inbox(inbox)
-    return twilio_contactable_inbox(inbox) if inbox.channel_type == 'Channel::TwilioSms'
-    return email_contactable_inbox(inbox) if inbox.channel_type == 'Channel::Email'
-    return api_contactable_inbox(inbox) if inbox.channel_type == 'Channel::Api'
-    return website_contactable_inbox(inbox) if inbox.channel_type == 'Channel::WebWidget'
-
-    nil
+    case inbox.channel_type
+    when 'Channel::TwilioSms'
+      twilio_contactable_inbox(inbox)
+    when 'Channel::Whatsapp'
+      whatsapp_contactable_inbox(inbox)
+    when 'Channel::Email'
+      email_contactable_inbox(inbox)
+    when 'Channel::Api'
+      api_contactable_inbox(inbox)
+    when 'Channel::WebWidget'
+      website_contactable_inbox(inbox)
+    end
   end
 
   def website_contactable_inbox(inbox)
@@ -39,6 +45,13 @@ class Contacts::ContactableInboxesService
     { source_id: @contact.email, inbox: inbox }
   end
 
+  def whatsapp_contactable_inbox(inbox)
+    return unless @contact.phone_number
+
+    # Remove the plus since thats the format 360 dialog uses
+    { source_id: @contact.phone_number.delete('+'), inbox: inbox }
+  end
+
   def twilio_contactable_inbox(inbox)
     return if @contact.phone_number.blank?
 
diff --git a/app/services/whatsapp/incoming_message_service.rb b/app/services/whatsapp/incoming_message_service.rb
new file mode 100644
index 000000000..c654c75e9
--- /dev/null
+++ b/app/services/whatsapp/incoming_message_service.rb
@@ -0,0 +1,61 @@
+# Find the various telegram payload samples here: https://core.telegram.org/bots/webhooks#testing-your-bot-with-updates
+# https://core.telegram.org/bots/api#available-types
+
+class Whatsapp::IncomingMessageService
+  pattr_initialize [:inbox!, :params!]
+
+  def perform
+    set_contact
+    return unless @contact
+
+    set_conversation
+
+    return if params[:messages].blank?
+
+    @message = @conversation.messages.create(
+      content: params[:messages].first.dig(:text, :body),
+      account_id: @inbox.account_id,
+      inbox_id: @inbox.id,
+      message_type: :incoming,
+      sender: @contact,
+      source_id: params[:messages].first[:id].to_s
+    )
+    @message.save!
+  end
+
+  private
+
+  def account
+    @account ||= inbox.account
+  end
+
+  def set_contact
+    contact_params = params[:contacts]&.first
+    return if contact_params.blank?
+
+    contact_inbox = ::ContactBuilder.new(
+      source_id: contact_params[:wa_id],
+      inbox: inbox,
+      contact_attributes: { name: contact_params.dig(:profile, :name), phone_number: "+#{params[:messages].first[:from]}" }
+    ).perform
+
+    @contact_inbox = contact_inbox
+    @contact = contact_inbox.contact
+  end
+
+  def conversation_params
+    {
+      account_id: @inbox.account_id,
+      inbox_id: @inbox.id,
+      contact_id: @contact.id,
+      contact_inbox_id: @contact_inbox.id
+    }
+  end
+
+  def set_conversation
+    @conversation = @contact_inbox.conversations.last
+    return if @conversation
+
+    @conversation = ::Conversation.create!(conversation_params)
+  end
+end
diff --git a/app/services/whatsapp/send_on_whatsapp_service.rb b/app/services/whatsapp/send_on_whatsapp_service.rb
new file mode 100644
index 000000000..4f93d5085
--- /dev/null
+++ b/app/services/whatsapp/send_on_whatsapp_service.rb
@@ -0,0 +1,11 @@
+class Whatsapp::SendOnWhatsappService < Base::SendOnChannelService
+  private
+
+  def channel_class
+    Channel::Whatsapp
+  end
+
+  def perform_reply
+    channel.send_message(message.conversation.contact_inbox.source_id, message.content)
+  end
+end
diff --git a/config/routes.rb b/config/routes.rb
index 871490d2b..9a210473e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -251,6 +251,7 @@ Rails.application.routes.draw do
   post 'webhooks/twitter', to: 'api/v1/webhooks#twitter_events'
   post 'webhooks/line/:line_channel_id', to: 'webhooks/line#process_payload'
   post 'webhooks/telegram/:bot_token', to: 'webhooks/telegram#process_payload'
+  post 'webhooks/whatsapp/:phone_number', to: 'webhooks/whatsapp#process_payload'
   get 'instagram_callbacks/event', to: 'api/v1/instagram_callbacks#verify'
   post 'instagram_callbacks/event', to: 'api/v1/instagram_callbacks#events'
 
diff --git a/db/migrate/20210916112533_add_whatsapp_channel.rb b/db/migrate/20210916112533_add_whatsapp_channel.rb
new file mode 100644
index 000000000..7e1f35951
--- /dev/null
+++ b/db/migrate/20210916112533_add_whatsapp_channel.rb
@@ -0,0 +1,11 @@
+class AddWhatsappChannel < ActiveRecord::Migration[6.1]
+  def change
+    create_table :channel_whatsapp do |t|
+      t.integer :account_id, null: false
+      t.string :phone_number, null: false, index: { unique: true }
+      t.string :provider, default: 'default'
+      t.jsonb :provider_config, default: {}
+      t.timestamps
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index b7040e19a..b065ead82 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -245,26 +245,14 @@ ActiveRecord::Schema.define(version: 2021_09_22_082754) do
     t.index ["website_token"], name: "index_channel_web_widgets_on_website_token", unique: true
   end
 
-  create_table "companies", force: :cascade do |t|
-    t.string "name", null: false
-    t.text "address"
-    t.string "city", null: false
-    t.string "state"
-    t.string "country", null: false
-    t.integer "no_of_employees", null: false
-    t.string "industry_type"
-    t.bigint "annual_revenue"
-    t.text "website"
-    t.string "office_phone_number"
-    t.string "facebook"
-    t.string "twitter"
-    t.string "linkedin"
-    t.jsonb "additional_attributes"
-    t.bigint "contact_id"
+  create_table "channel_whatsapp", force: :cascade do |t|
+    t.integer "account_id", null: false
+    t.string "phone_number", null: false
+    t.string "provider", default: "default"
+    t.jsonb "provider_config", default: {}
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
-    t.index ["contact_id"], name: "index_companies_on_contact_id"
-    t.index ["name"], name: "index_companies_on_name", unique: true
+    t.index ["phone_number"], name: "index_channel_whatsapp_on_phone_number", unique: true
   end
 
   create_table "contact_inboxes", force: :cascade do |t|
diff --git a/spec/controllers/webhooks/whatsapp_controller_spec.rb b/spec/controllers/webhooks/whatsapp_controller_spec.rb
new file mode 100644
index 000000000..bb6947862
--- /dev/null
+++ b/spec/controllers/webhooks/whatsapp_controller_spec.rb
@@ -0,0 +1,12 @@
+require 'rails_helper'
+
+RSpec.describe 'Webhooks::WhatsappController', type: :request do
+  describe 'POST /webhooks/whatsapp/{:phone_number}' do
+    it 'call the whatsapp events job with the params' do
+      allow(Webhooks::WhatsappEventsJob).to receive(:perform_later)
+      expect(Webhooks::WhatsappEventsJob).to receive(:perform_later)
+      post '/webhooks/whatsapp/123221321', params: { content: 'hello' }
+      expect(response).to have_http_status(:success)
+    end
+  end
+end
diff --git a/spec/factories/channel/channel_whatsapp.rb b/spec/factories/channel/channel_whatsapp.rb
new file mode 100644
index 000000000..ea8b563dc
--- /dev/null
+++ b/spec/factories/channel/channel_whatsapp.rb
@@ -0,0 +1,11 @@
+FactoryBot.define do
+  factory :channel_whatsapp, class: 'Channel::Whatsapp' do
+    sequence(:phone_number) { |n| "+123456789#{n}1" }
+    account
+    provider_config { { 'api_key' => 'test_key' } }
+
+    after(:create) do |channel_whatsapp|
+      create(:inbox, channel: channel_whatsapp, account: channel_whatsapp.account)
+    end
+  end
+end
diff --git a/spec/jobs/send_reply_job_spec.rb b/spec/jobs/send_reply_job_spec.rb
index 94c7663f2..bf25a8e04 100644
--- a/spec/jobs/send_reply_job_spec.rb
+++ b/spec/jobs/send_reply_job_spec.rb
@@ -64,5 +64,14 @@ RSpec.describe SendReplyJob, type: :job do
       expect(process_service).to receive(:perform)
       described_class.perform_now(message.id)
     end
+
+    it 'calls ::Whatsapp:SendOnWhatsappService when its line message' do
+      whatsapp_channel = create(:channel_whatsapp)
+      message = create(:message, conversation: create(:conversation, inbox: whatsapp_channel.inbox))
+      allow(::Whatsapp::SendOnWhatsappService).to receive(:new).with(message: message).and_return(process_service)
+      expect(::Whatsapp::SendOnWhatsappService).to receive(:new).with(message: message)
+      expect(process_service).to receive(:perform)
+      described_class.perform_now(message.id)
+    end
   end
 end
diff --git a/spec/services/whatsapp/incoming_message_service_spec.rb b/spec/services/whatsapp/incoming_message_service_spec.rb
new file mode 100644
index 000000000..1c004a6d4
--- /dev/null
+++ b/spec/services/whatsapp/incoming_message_service_spec.rb
@@ -0,0 +1,21 @@
+require 'rails_helper'
+
+describe Whatsapp::IncomingMessageService do
+  let!(:whatsapp_channel) { create(:channel_whatsapp) }
+
+  describe '#perform' do
+    context 'when valid text message params' do
+      it 'creates appropriate conversations, message and contacts' do
+        params = {
+          'contacts' => [{ 'profile' => { 'name' => 'Sojan Jose' }, 'wa_id' => '2423423243' }],
+          'messages' => [{ 'from' => '2423423243', 'id' => 'SDFADSf23sfasdafasdfa', 'text' => { 'body' => 'Test' },
+                           'timestamp' => '1633034394', 'type' => 'text' }]
+        }.with_indifferent_access
+        described_class.new(inbox: whatsapp_channel.inbox, params: params).perform
+        expect(whatsapp_channel.inbox.conversations.count).not_to eq(0)
+        expect(Contact.all.first.name).to eq('Sojan Jose')
+        expect(whatsapp_channel.inbox.messages.first.content).to eq('Test')
+      end
+    end
+  end
+end
diff --git a/spec/services/whatsapp/send_on_whatsapp_service_spec.rb b/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
new file mode 100644
index 000000000..efb063aa1
--- /dev/null
+++ b/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
@@ -0,0 +1,23 @@
+require 'rails_helper'
+
+describe Whatsapp::SendOnWhatsappService do
+  describe '#perform' do
+    context 'when a valid message' do
+      it 'calls channel.send_message' do
+        whatsapp_request = double
+        whatsapp_channel = create(:channel_whatsapp)
+        contact_inbox = create(:contact_inbox, inbox: whatsapp_channel.inbox, source_id: '123456789')
+        conversation = create(:conversation, contact_inbox: contact_inbox, inbox: whatsapp_channel.inbox)
+        message = create(:message, message_type: :outgoing, content: 'test',
+                                   conversation: conversation)
+        allow(HTTParty).to receive(:post).and_return(whatsapp_request)
+        expect(HTTParty).to receive(:post).with(
+          'https://waba.360dialog.io/v1/messages',
+          headers: { 'D360-API-KEY': 'test_key', 'Content-Type': 'application/json' },
+          body: { to: '123456789', text: { body: 'test' }, type: 'text' }.to_json
+        )
+        described_class.new(message: message).perform
+      end
+    end
+  end
+end