chore: Provider APIs for SMS Channel - Bandwidth (#3889)

fixes: #3888
2022-02-03 15:22:13 -08:00
parent fba7f40bee
commit cf10f3d03b
40 changed files with 879 additions and 51 deletions
@@ -247,7 +247,7 @@ export default {
      if (this.isOngoingType) {
        return this.$store.getters['inboxes/getWebsiteInboxes'];
      }
-      return this.$store.getters['inboxes/getTwilioSMSInboxes'];
+      return this.$store.getters['inboxes/getSMSInboxes'];
    },
    sendersAndBotList() {
      return [
@@ -171,7 +171,7 @@ export default {
      if (this.isOngoingType) {
        return this.$store.getters['inboxes/getWebsiteInboxes'];
      }
-      return this.$store.getters['inboxes/getTwilioSMSInboxes'];
+      return this.$store.getters['inboxes/getSMSInboxes'];
    },
    pageTitle() {
      return `${this.$t('CAMPAIGN.EDIT.TITLE')} - ${
@@ -50,7 +50,7 @@ export default {
        { key: 'facebook', name: 'Messenger' },
        { key: 'twitter', name: 'Twitter' },
        { key: 'whatsapp', name: 'WhatsApp' },
-        { key: 'sms', name: 'SMS via Twilio' },
+        { key: 'sms', name: 'SMS' },
        { key: 'email', name: 'Email' },
        {
          key: 'api',
@@ -29,6 +29,14 @@
          >
          </woot-code>
        </div>
+        <div class="medium-6 small-offset-3">
+          <woot-code
+            v-if="isASmsInbox"
+            lang="html"
+            :script="currentInbox.callback_webhook_url"
+          >
+          </woot-code>
+        </div>
        <div class="medium-6 small-offset-3">
          <woot-code
            v-if="isAEmailInbox"
@@ -86,6 +94,9 @@ export default {
    isALineInbox() {
      return this.currentInbox.channel_type === 'Channel::Line';
    },
+    isASmsInbox() {
+      return this.currentInbox.channel_type === 'Channel::Sms';
+    },
    message() {
      if (this.isATwilioInbox) {
        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
@@ -93,6 +104,12 @@ export default {
        )}`;
      }

+      if (this.isASmsInbox) {
+        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
+          'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
+        )}`;
+      }
+
      if (this.isALineInbox) {
        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
          'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
@@ -103,10 +120,11 @@ export default {
        return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
      }

-      if (!this.currentInbox.web_widget_script) {
-        return this.$t('INBOX_MGMT.FINISH.MESSAGE');
+      if (this.currentInbox.web_widget_script) {
+        return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
      }
-      return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
+
+      return this.$t('INBOX_MGMT.FINISH.MESSAGE');
    },
  },
 };
@@ -48,6 +48,9 @@
                <span v-if="item.channel_type === 'Channel::Whatsapp'">
                  Whatsapp
                </span>
+                <span v-if="item.channel_type === 'Channel::Sms'">
+                  Sms
+                </span>
                <span v-if="item.channel_type === 'Channel::Email'">
                  Email
                </span>
@@ -0,0 +1,181 @@
+<template>
+  <form class="row" @submit.prevent="createChannel()">
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
+        <input
+          v-model.trim="inboxName"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.PLACEHOLDER')
+          "
+          @blur="$v.inboxName.$touch"
+        />
+        <span v-if="$v.inboxName.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.phoneNumber.$error }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model.trim="phoneNumber"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.PLACEHOLDER')
+          "
+          @blur="$v.phoneNumber.$touch"
+        />
+        <span v-if="$v.phoneNumber.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.accountId.$error }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
+        <input
+          v-model.trim="accountId"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.PLACEHOLDER')
+          "
+          @blur="$v.accountId.$touch"
+        />
+        <span v-if="$v.accountId.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.applicationId.$error }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
+        <input
+          v-model.trim="applicationId"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.PLACEHOLDER')
+          "
+          @blur="$v.applicationId.$touch"
+        />
+        <span v-if="$v.applicationId.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.apiKey.$error }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
+        <input
+          v-model.trim="apiKey"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.PLACEHOLDER')"
+          @blur="$v.apiKey.$touch"
+        />
+        <span v-if="$v.apiKey.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="medium-8 columns">
+      <label :class="{ error: $v.apiSecret.$error }">
+        {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
+        <input
+          v-model.trim="apiSecret"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.PLACEHOLDER')
+          "
+          @blur="$v.apiSecret.$touch"
+        />
+        <span v-if="$v.apiSecret.$error" class="message">{{
+          $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.ERROR')
+        }}</span>
+      </label>
+    </div>
+
+    <div class="medium-12 columns">
+      <woot-submit-button
+        :loading="uiFlags.isCreating"
+        :button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.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 {
+      accountId: '',
+      apiKey: '',
+      apiSecret: '',
+      applicationId: '',
+      inboxName: '',
+      phoneNumber: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  validations: {
+    inboxName: { required },
+    phoneNumber: { required, shouldStartWithPlusSign },
+    apiKey: { required },
+    apiSecret: { required },
+    applicationId: { required },
+    accountId: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+
+      try {
+        const smsChannel = await this.$store.dispatch('inboxes/createChannel', {
+          name: this.inboxName,
+          channel: {
+            type: 'sms',
+            phone_number: this.phoneNumber,
+            provider_config: {
+              api_key: this.apiKey,
+              api_secret: this.apiSecret,
+              application_id: this.applicationId,
+              account_id: this.accountId,
+            },
+          },
+        });
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: smsChannel.id,
+          },
+        });
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.ADD.SMS.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
@@ -4,18 +4,39 @@
      :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
      :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
    />
-    <twilio type="sms"></twilio>
+    <div class="medium-8 columns">
+      <label>
+        {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
+        <select v-model="provider">
+          <option value="twilio">
+            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.TWILIO') }}
+          </option>
+          <option value="360dialog">
+            {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.BANDWIDTH') }}
+          </option>
+        </select>
+      </label>
+    </div>
+    <twilio v-if="provider === 'twilio'" type="sms"></twilio>
+    <bandwidth-sms v-else />
  </div>
 </template>

 <script>
 import PageHeader from '../../SettingsSubPageHeader';
+import BandwidthSms from './BandwidthSms.vue';
 import Twilio from './Twilio';

 export default {
  components: {
    PageHeader,
    Twilio,
+    BandwidthSms,
+  },
+  data() {
+    return {
+      provider: 'twilio',
+    };
  },
 };
 </script>