Feature: Twilio SMS Channel (#658)

Twilio SMS Channel
Fixes :  #350

app/builders/contact_builder.rb

@@ -0,0 +1,37 @@
+class ContactBuilder
+  pattr_initialize [:source_id!, :inbox!, :contact_attributes!]
+
+  def perform
+    contact_inbox = inbox.contact_inboxes.find_by(source_id: source_id)
+    return contact_inbox if contact_inbox
+
+    build_contact
+  end
+
+  private
+
+  def account
+    @account ||= inbox.account
+  end
+
+  def build_contact
+    ActiveRecord::Base.transaction do
+      contact = account.contacts.create!(
+        name: contact_attributes[:name],
+        phone_number: contact_attributes[:phone_number],
+        email: contact_attributes[:email],
+        identifier: contact_attributes[:identifier],
+        additional_attributes: contact_attributes[:identifier]
+      )
+      contact_inbox = ::ContactInbox.create!(
+        contact_id: contact.id,
+        inbox_id: inbox.id,
+        source_id: source_id
+      )
+      ::ContactAvatarJob.perform_later(contact, contact_attributes[:avatar_url]) if contact_attributes[:avatar_url]
+      contact_inbox
+    rescue StandardError => e
+      Rails.logger e
+    end
+  end
+end

app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb

@@ -0,0 +1,50 @@
+class Api::V1::Accounts::Channels::TwilioChannelsController < Api::BaseController
+  before_action :authorize_request
+
+  def create
+    authenticate_twilio
+    build_inbox
+    setup_webhooks
+  rescue Twilio::REST::TwilioError => e
+    render_could_not_create_error(e.message)
+  rescue StandardError => e
+    render_could_not_create_error(e.message)
+  end
+
+  private
+
+  def authorize_request
+    authorize ::Inbox
+  end
+
+  def authenticate_twilio
+    client = Twilio::REST::Client.new(permitted_params[:account_sid], permitted_params[:auth_token])
+    client.messages.list(limit: 1)
+  end
+
+  def setup_webhooks
+    ::Twilio::WebhookSetupService.new(inbox: @inbox).perform
+  end
+
+  def build_inbox
+    ActiveRecord::Base.transaction do
+      twilio_sms = current_account.twilio_sms.create(
+        account_sid: permitted_params[:account_sid],
+        auth_token: permitted_params[:auth_token],
+        phone_number: permitted_params[:phone_number]
+      )
+      @inbox = current_account.inboxes.create(
+        name: permitted_params[:name],
+        channel: twilio_sms
+      )
+    rescue StandardError => e
+      render_could_not_create_error(e.message)
+    end
+  end
+
+  def permitted_params
+    params.require(:twilio_channel).permit(
+      :account_id, :phone_number, :account_sid, :auth_token, :name
+    )
+  end
+end

app/controllers/twilio/callback_controller.rb

@@ -0,0 +1,29 @@
+class Twilio::CallbackController < ApplicationController
+  def create
+    ::Twilio::IncomingMessageService.new(params: permitted_params).perform
+
+    head :no_content
+  end
+
+  private
+
+  def permitted_params
+    params.permit(
+      :ApiVersion,
+      :SmsSid,
+      :From,
+      :ToState,
+      :ToZip,
+      :AccountSid,
+      :MessageSid,
+      :FromCountry,
+      :ToCity,
+      :FromCity,
+      :To,
+      :FromZip,
+      :Body,
+      :ToCountry,
+      :FromState
+    )
+  end
+end

app/javascript/dashboard/api/channel/twilioChannel.js

@@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class TwilioChannel extends ApiClient {
+  constructor() {
+    super('channels/twilio_channel', { accountScoped: true });
+  }
+}
+
+export default new TwilioChannel();

app/javascript/dashboard/components/layout/SidebarItem.vue

@@ -56,6 +56,7 @@ const INBOX_TYPES = {
   WEB: 'Channel::WebWidget',
   FB: 'Channel::FacebookPage',
   TWITTER: 'Channel::TwitterProfile',
+  TWILIO: 'Channel::TwilioSms',
 };
 const getInboxClassByType = type => {
   switch (type) {
@@ -68,6 +69,9 @@ const getInboxClassByType = type => {
     case INBOX_TYPES.TWITTER:
       return 'ion-social-twitter';
 
+    case INBOX_TYPES.TWILIO:
+      return 'ion-android-textsms';
+
     default:
       return '';
   }

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

@@ -24,6 +24,10 @@
       v-if="channel === 'website'"
       src="~dashboard/assets/images/channels/website.png"
     />
+    <img
+      v-if="channel === 'twilio'"
+      src="~dashboard/assets/images/channels/twilio.png"
+    />
     <h3 class="channel__title">
       {{ channel }}
     </h3>
@@ -39,7 +43,7 @@ export default {
   },
   methods: {
     isActive(channel) {
-      return ['facebook', 'website', 'twitter'].includes(channel);
+      return ['facebook', 'website', 'twitter', 'twilio'].includes(channel);
     },
     onItemClick() {
       if (this.isActive(this.channel)) {

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

@@ -21,6 +21,7 @@
       "WEBSITE_CHANNEL": {
         "TITLE": "Website channel",
         "DESC": "Create a channel for your website and start supporting your customers via our website widget.",
+        "LOADING_MESSAGE": "Creating Website Support Channel",
         "CHANNEL_NAME": {
           "LABEL": "Website Name",
           "PLACEHOLDER": "Enter your website name (eg: Acme Inc)"
@@ -35,6 +36,34 @@
         },
         "SUBMIT_BUTTON":"Create inbox"
       },
+      "TWILIO": {
+        "TITLE": "Twilio SMS Channel",
+        "DESC": "Integrate Twilio and start supporting your customers via SMS.",
+        "ACCOUNT_SID": {
+          "LABEL": "Account SID",
+          "PLACEHOLDER": "Please enter your Twilio Account SID",
+          "ERROR": "This field is required"
+        },
+        "AUTH_TOKEN": {
+          "LABEL": "Auth Token",
+          "PLACEHOLDER": "Please enter your Twilio Auth Token",
+          "ERROR": "This field is required"
+        },
+        "CHANNEL_NAME": {
+          "LABEL": "Channel Name",
+          "PLACEHOLDER": "Please enter a channel 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."
+        },
+        "SUBMIT_BUTTON": "Create Twilio Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
+        }
+      },
       "AUTH": {
         "TITLE": "Channels",
         "DESC": "Currently we support Website live chat widgets, Facebook Pages and Twitter profiles as platforms. We have more platforms like Whatsapp, Email, Telegram and Line in the works, which will be out soon."

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'));
+        }
       }
     },
   },

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: {

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'](

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 -->

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);
     },

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 {

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>

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: {

app/javascript/dashboard/store/modules/inboxes.js

@@ -3,6 +3,7 @@ import * as types from '../mutation-types';
 import InboxesAPI from '../../api/inboxes';
 import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';
+import TwilioChannel from '../../api/channel/twilioChannel';
 
 export const state = {
   records: [],
@@ -54,6 +55,18 @@ export const actions = {
       throw new Error(error);
     }
   },
+  createTwilioChannel: async ({ commit }, params) => {
+    try {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: true });
+      const response = await TwilioChannel.create(params);
+      commit(types.default.ADD_INBOXES, response.data);
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      return response.data;
+    } catch (error) {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      throw new Error(error);
+    }
+  },
   createFBChannel: async ({ commit }, params) => {
     try {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: true });

app/javascript/shared/mixins/alertMixin.js

@@ -0,0 +1,8 @@
+/* global bus */
+export default {
+  methods: {
+    showAlert(message) {
+      bus.$emit('newToastMessage', message);
+    },
+  },
+};

app/javascript/shared/mixins/configMixin.js

@@ -0,0 +1,7 @@
+export default {
+  computed: {
+    hostURL() {
+      return window.chatwootConfig.hostURL;
+    },
+  },
+};

app/models/account.rb

@@ -23,9 +23,10 @@ class Account < ApplicationRecord
   has_many :messages, dependent: :destroy
   has_many :contacts, dependent: :destroy
   has_many :facebook_pages, dependent: :destroy, class_name: '::Channel::FacebookPage'
+  has_many :telegram_bots, dependent: :destroy
+  has_many :twilio_sms, dependent: :destroy, class_name: '::Channel::TwilioSms'
   has_many :twitter_profiles, dependent: :destroy, class_name: '::Channel::TwitterProfile'
   has_many :web_widgets, dependent: :destroy, class_name: '::Channel::WebWidget'
-  has_many :telegram_bots, dependent: :destroy
   has_many :canned_responses, dependent: :destroy
   has_many :webhooks, dependent: :destroy
   has_one :subscription, dependent: :destroy

app/models/channel/twilio_sms.rb

@@ -0,0 +1,33 @@
+# == Schema Information
+#
+# Table name: channel_twilio_sms
+#
+#  id           :bigint           not null, primary key
+#  account_sid  :string           not null
+#  auth_token   :string           not null
+#  phone_number :string           not null
+#  created_at   :datetime         not null
+#  updated_at   :datetime         not null
+#  account_id   :integer          not null
+#
+# Indexes
+#
+#  index_channel_twilio_sms_on_account_id_and_phone_number  (account_id,phone_number) UNIQUE
+#
+
+class Channel::TwilioSms < ApplicationRecord
+  self.table_name = 'channel_twilio_sms'
+
+  validates :account_id, presence: true
+  validates :account_sid, presence: true
+  validates :auth_token, presence: true
+  validates :phone_number, uniqueness: { scope: :account_id }, presence: true
+
+  belongs_to :account
+
+  has_one :inbox, as: :channel, dependent: :destroy
+
+  def name
+    'Twilio SMS'
+  end
+end

app/models/channel/twitter_profile.rb

@@ -11,6 +11,10 @@
 #  account_id                  :integer          not null
 #  profile_id                  :string           not null
 #
+# Indexes
+#
+#  index_channel_twitter_profiles_on_account_id_and_profile_id  (account_id,profile_id) UNIQUE
+#
 
 class Channel::TwitterProfile < ApplicationRecord
   self.table_name = 'channel_twitter_profiles'

app/models/message.rb

@@ -113,6 +113,8 @@ class Message < ApplicationRecord
       ::Facebook::SendReplyService.new(message: self).perform
     elsif channel_name == 'Channel::TwitterProfile'
       ::Twitter::SendReplyService.new(message: self).perform
+    elsif channel_name == 'Channel::TwilioSms'
+      ::Twilio::OutgoingMessageService.new(message: self).perform
     end
   end
 

app/models/webhook.rb

@@ -10,6 +10,10 @@
 #  account_id   :integer
 #  inbox_id     :integer
 #
+# Indexes
+#
+#  index_webhooks_on_account_id_and_url  (account_id,url) UNIQUE
+#
 
 class Webhook < ApplicationRecord
   belongs_to :account

app/services/twilio/incoming_message_service.rb

@@ -0,0 +1,77 @@
+class Twilio::IncomingMessageService
+  pattr_initialize [:params!]
+
+  def perform
+    set_contact
+    set_conversation
+    @conversation.messages.create(
+      content: params[:Body],
+      account_id: @inbox.account_id,
+      inbox_id: @inbox.id,
+      message_type: :incoming,
+      contact_id: @contact.id,
+      source_id: params[:SmsSid]
+    )
+  end
+
+  private
+
+  def twilio_inbox
+    @twilio_inbox ||= ::Channel::TwilioSms.find_by!(
+      account_sid: params[:AccountSid],
+      phone_number: params[:To]
+    )
+  end
+
+  def inbox
+    @inbox ||= twilio_inbox.inbox
+  end
+
+  def account
+    @account ||= inbox.account
+  end
+
+  def set_contact
+    contact_inbox = ::ContactBuilder.new(
+      source_id: params[:From],
+      inbox: inbox,
+      contact_attributes: contact_attributes
+    ).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,
+      additional_attributes: additional_attributes
+    }
+  end
+
+  def set_conversation
+    @conversation = @contact_inbox.conversations.first
+    return if @conversation
+
+    @conversation = ::Conversation.create!(conversation_params)
+  end
+
+  def contact_attributes
+    {
+      name: params[:From],
+      phone_number: params[:From],
+      contact_attributes: additional_attributes
+    }
+  end
+
+  def additional_attributes
+    {
+      from_zip_code: params[:FromZip],
+      from_country: params[:FromCountry],
+      from_state: params[:FromState]
+    }
+  end
+end

app/services/twilio/outgoing_message_service.rb

@@ -0,0 +1,34 @@
+class Twilio::OutgoingMessageService
+  pattr_initialize [:message!]
+
+  def perform
+    return if message.private
+    return if message.source_id
+    return if inbox.channel.class.to_s != 'Channel::TwilioSms'
+    return unless message.outgoing?
+
+    twilio_message = client.messages.create(
+      body: message.content,
+      from: channel.phone_number,
+      to: contact.phone_number
+    )
+    message.update!(source_id: twilio_message.sid)
+  end
+
+  private
+
+  delegate :conversation, to: :message
+  delegate :contact, to: :conversation
+
+  def inbox
+    @inbox ||= message.inbox
+  end
+
+  def channel
+    @channel ||= inbox.channel
+  end
+
+  def client
+    ::Twilio::REST::Client.new(channel.account_sid, channel.auth_token)
+  end
+end

app/services/twilio/webhook_setup_service.rb

@@ -0,0 +1,35 @@
+class Twilio::WebhookSetupService
+  include Rails.application.routes.url_helpers
+
+  pattr_initialize [:inbox!]
+
+  def perform
+    if phone_numbers.empty?
+      Rails.logger.info "TWILIO_PHONE_NUMBER_NOT_FOUND: #{channel.phone_number}"
+    else
+      twilio_client
+        .incoming_phone_numbers(phonenumber_sid)
+        .update(sms_method: 'POST', sms_url: twilio_callback_index_url)
+    end
+  rescue Twilio::REST::TwilioError => e
+    Rails.logger.info "TWILIO_FAILURE: #{e.message}"
+  end
+
+  private
+
+  def phonenumber_sid
+    phone_numbers.first.sid
+  end
+
+  def phone_numbers
+    @phone_numbers ||= twilio_client.incoming_phone_numbers.list(phone_number: channel.phone_number)
+  end
+
+  def channel
+    @channel ||= inbox.channel
+  end
+
+  def twilio_client
+    @twilio_client ||= ::Twilio::REST::Client.new(channel.account_sid, channel.auth_token)
+  end
+end

app/views/api/v1/accounts/channels/twilio_channels/create.json.jbuilder

@@ -0,0 +1,6 @@
+json.id @inbox.id
+json.channel_id @inbox.channel_id
+json.name @inbox.name
+json.channel_type @inbox.channel_type
+json.enable_auto_assignment @inbox.enable_auto_assignment
+json.phone_number @inbox.channel.phone_number

app/views/api/v1/accounts/inboxes/index.json.jbuilder

@@ -10,5 +10,6 @@ json.payload do
     json.website_token inbox.channel.try(:website_token)
     json.enable_auto_assignment inbox.enable_auto_assignment
     json.web_widget_script inbox.channel.try(:web_widget_script)
+    json.phone_number inbox.channel.try(:phone_number)
   end
 end

app/views/layouts/vueapp.html.erb

@@ -31,6 +31,7 @@
     <%= yield %>
     <script>
       window.chatwootConfig = {
+        hostURL: '<%= ENV.fetch('FRONTEND_URL', '') %>',
         fbAppId: '<%= ENV.fetch('FB_APP_ID', nil) %>',
         billingEnabled: <%= ActiveModel::Type::Boolean.new.cast(ENV.fetch('BILLING_ENABLED', false)) %>,
         signupEnabled: '<%= ENV.fetch('ENABLE_ACCOUNT_SIGNUP', true) %>'