Chore: Add docs for Twilio Whatsapp/SMS channel (#804)

app/javascript/dashboard/assets/scss/widgets/_forms.scss

@@ -1,18 +1,17 @@
 .error {
   #{$all-text-inputs},
+  select,
   .multiselect > .multiselect__tags {
-    @include thin-border( darken(get-color(alert), 25%));
+    @include thin-border(darken(get-color(alert), 25%));
   }
-}
 
-.error {
   .message {
-    display: block;
-    width: 100%;
-    margin-top: -$space-normal;
-    margin-bottom: $space-one;
     color: darken(get-color(alert), 25%);
+    display: block;
     font-weight: $font-weight-normal;
+    margin-bottom: $space-one;
+    margin-top: -$space-normal;
+    width: 100%;
   }
 }
 
@@ -25,7 +24,7 @@ input {
 }
 
 .input-wrap {
-  font-size: $font-size-small;
   color: $color-heading;
+  font-size: $font-size-small;
   font-weight: $font-weight-medium;
 }

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

@@ -91,6 +91,10 @@
           "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_CALLBACK": {
+          "TITLE": "Callback URL",
+          "SUBTITLE": "You have to configure the message callback URL in Twilio with the URL mentioned here."
+        },
         "SUBMIT_BUTTON": "Create Twilio Channel",
         "API": {
           "ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"

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

@@ -13,6 +13,14 @@
           >
           </woot-code>
         </div>
+        <div class="medium-6 small-offset-3">
+          <woot-code
+            v-if="isATwilioInbox"
+            lang="html"
+            :script="twilioCallbackURL"
+          >
+          </woot-code>
+        </div>
         <router-link
           class="button success nice"
           :to="{
@@ -42,7 +50,16 @@ export default {
         this.$route.params.inbox_id
       );
     },
+    isATwilioInbox() {
+      return this.currentInbox.channel_type === 'Channel::TwilioSms';
+    },
     message() {
+      if (this.isATwilioInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
       if (!this.currentInbox.website_token) {
         return this.$t('INBOX_MGMT.FINISH.MESSAGE');
       }

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

@@ -100,7 +100,6 @@
             </label>
           </div>
         </div>
-
         <div>
           <label>
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
@@ -155,6 +154,19 @@
         </woot-submit-button>
       </settings-section>
     </div>
+
+    <div
+      v-if="inbox.channel_type === 'Channel::TwilioSms'"
+      class="settings--content"
+    >
+      <settings-section
+        :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
+        :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
+      >
+        <woot-code :script="twilioCallbackURL" lang="html"></woot-code>
+      </settings-section>
+    </div>
+
     <div
       v-if="inbox.channel_type === 'Channel::FacebookPage'"
       class="settings--content"

app/javascript/shared/mixins/configMixin.js

@@ -3,5 +3,8 @@ export default {
     hostURL() {
       return window.chatwootConfig.hostURL;
     },
+    twilioCallbackURL() {
+      return `${this.hostURL}/twilio/callback`;
+    },
   },
 };

docs/channels/whatsapp-sms-twilio.md

@@ -0,0 +1,51 @@
+---
+path: "/docs/channels/whatsapp-sms-twilio"
+title: "How to create a Whatsapp/SMS channel with Twilio?"
+---
+
+**Step 1**. Click on "Add Inbox" button from Settings > Inboxes page.
+
+![sms_create](./images/twilio/inbox_create.png)
+
+**Step 2**. Click on "Twilio" icon.
+
+![list_of_channels](./images/twilio/list_of_channels.png)
+
+**Step 3**. Configure the inbox.
+
+These are input required to create this channel
+
+| Input | Description | Where can I find it |
+| -- | -- | -- |
+| Channel Name | This is the name inbox, this will used across the application | N/A |
+| Channel Type | Select SMS if you are integrating SMS channel, select Whatsapp if you have a verified Whatsapp number in Twilio | N/A |
+| Phone Number | This is number you will be using to communicate with you customer, this has to be verified in Twilio | Enter your number as in Twilio Dashboard  |
+| Account SID | Account SID in Twilio Console | Login to Twilio Console, you would be able to see Account SID and Auth Token |
+| Auth Token | Auth token for the account | Login to Twilio Console, you would be able to see Account SID and Auth Token |
+
+![create_twilio](./images/twilio/create_twilio_inbox.png)
+
+**Step 4**. "Add agents" to your inbox.
+
+![add_agents](./images/add_agents.png)
+
+**Step 6**. Hooray! You have sucessfully created a whatsapp/sms inbox.
+
+![finish_inbox](./images/twilio/finish_inbox.png)
+
+If it is an SMS Channel then you don't need to do anything else, you will start receiving the messages in the dashboard whenever a customer sends you one.
+
+If you are connecting a **Whatsapp** channel, you have configure a callback URL in the Twilio inbox.
+
+- Login to your Twilio Console.
+- Go to `Programmable SMS > Whatsapp > Senders`
+- You will be able to see your phone number. Click on it, it will display a field like the one below.
+
+![twilio_console](./images/twilio/twilio_console.png)
+
+- Provide `https://app.chatwoot.com/twilio/callback` as the value for `WHEN A MESSAGE COMES IN` input.
+
+
+**Step 7**. If you want to update the agents who have access to the inbox, you can go to Settings > Inboxes.
+
+![inbox_settings](./images/twilio/inbox_settings.png)