feat: Support Twilio Messaging Services (#4242)

This allows sending and receiving from multiple phone numbers using Twilio messaging services

Fixes: #4204

app/javascript/dashboard/helper/inbox.js

@@ -12,7 +12,7 @@ export const getInboxClassByType = (type, phoneNumber) => {
       return 'brand-twitter';
 
     case INBOX_TYPES.TWILIO:
-      return phoneNumber.startsWith('whatsapp')
+      return phoneNumber?.startsWith('whatsapp')
         ? 'brand-whatsapp'
         : 'brand-sms';
 

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

@@ -111,6 +111,12 @@
           "PLACEHOLDER": "Please enter your Twilio Account SID",
           "ERROR": "This field is required"
         },
+        "MESSAGING_SERVICE_SID": {
+          "LABEL": "Messaging Service SID",
+          "PLACEHOLDER": "Please enter your Twilio Messaging Service SID",
+          "ERROR": "This field is required",
+          "USE_MESSAGING_SERVICE": "Use a Twilio Messaging Service"
+        },
         "CHANNEL_TYPE": {
           "LABEL": "Channel Type",
           "ERROR": "Please select your Channel Type"

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

@@ -438,7 +438,11 @@ export default {
       return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
     },
     inboxName() {
-      if (this.isATwilioSMSChannel || this.isAWhatsappChannel) {
+      if (this.isATwilioSMSChannel || this.isATwilioWhatsappChannel) {
+        return `${this.inbox.name} (${this.inbox.messaging_service_sid ||
+          this.inbox.phone_number})`;
+      }
+      if (this.isAWhatsappChannel) {
         return `${this.inbox.name} (${this.inbox.phone_number})`;
       }
       if (this.isAnEmailChannel) {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue

@@ -17,6 +17,26 @@
     </div>
 
     <div class="medium-8 columns">
+      <label
+        v-if="useMessagingService"
+        :class="{ error: $v.messagingServiceSID.$error }"
+      >
+        {{ $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.LABEL') }}
+        <input
+          v-model.trim="messagingServiceSID"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.PLACEHOLDER')
+          "
+          @blur="$v.messagingServiceSID.$touch"
+        />
+        <span v-if="$v.messagingServiceSID.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div v-if="!useMessagingService" class="medium-8 columns">
       <label :class="{ error: $v.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
         <input
@@ -31,6 +51,22 @@
       </label>
     </div>
 
+    <div class="medium-8 columns messagingServiceHelptext">
+      <label for="useMessagingService">
+        <input
+          id="useMessagingService"
+          v-model="useMessagingService"
+          type="checkbox"
+          class="checkbox"
+        />
+        {{
+          $t(
+            'INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.USE_MESSAGING_SERVICE'
+          )
+        }}
+      </label>
+    </div>
+
     <div class="medium-8 columns">
       <label :class="{ error: $v.accountSID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
@@ -91,6 +127,8 @@ export default {
       authToken: '',
       medium: this.type,
       channelName: '',
+      messagingServiceSID: '',
+      useMessagingService: false,
       phoneNumber: '',
     };
   },
@@ -99,12 +137,25 @@ export default {
       uiFlags: 'inboxes/getUIFlags',
     }),
   },
-  validations: {
-    channelName: { required },
-    phoneNumber: { required, shouldStartWithPlusSign },
-    authToken: { required },
-    accountSID: { required },
-    medium: { required },
+  validations() {
+    if (this.phoneNumber) {
+      return {
+        channelName: { required },
+        messagingServiceSID: {},
+        phoneNumber: { shouldStartWithPlusSign },
+        authToken: { required },
+        accountSID: { required },
+        medium: { required },
+      };
+    }
+    return {
+      channelName: { required },
+      messagingServiceSID: { required },
+      phoneNumber: {},
+      authToken: { required },
+      accountSID: { required },
+      medium: { required },
+    };
   },
   methods: {
     async createChannel() {
@@ -122,7 +173,10 @@ export default {
               medium: this.medium,
               account_sid: this.accountSID,
               auth_token: this.authToken,
-              phone_number: `+${this.phoneNumber.replace(/\D/g, '')}`,
+              messaging_service_sid: this.messagingServiceSID,
+              phone_number: this.messagingServiceSID
+                ? null
+                : `+${this.phoneNumber.replace(/\D/g, '')}`,
             },
           }
         );
@@ -141,3 +195,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.messagingServiceHelptext {
+  margin-top: -10px;
+  margin-bottom: 15px;
+
+  .checkbox {
+    margin: 0px 4px;
+  }
+}
+</style>