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