fix: Twitter inbox creation error (#1783)

fixes #1708

Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class TwitterClient extends ApiClient {
+  constructor() {
+    super('twitter', { accountScoped: true });
+  }
+
+  generateAuthorization() {
+    return axios.post(`${this.url}/authorization`);
+  }
+}
+
+export default new TwitterClient();

app/javascript/dashboard/api/specs/channel/twitterClient.spec.js

@@ -0,0 +1,9 @@
+import TwitterClient from '../../channel/twitterClient';
+import ApiClient from '../../ApiClient';
+
+describe('#TwitterClient', () => {
+  it('creates correct instance', () => {
+    expect(TwitterClient).toBeInstanceOf(ApiClient);
+    expect(TwitterClient).toHaveProperty('generateAuthorization');
+  });
+});

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

@@ -38,7 +38,8 @@
         "PICK_A_VALUE": "Pick a value"
       },
       "TWITTER": {
-        "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' "
+        "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' ",
+        "ERROR_MESSAGE": "There was an error connecting to Twitter, please try again"
       },
       "WEBSITE_CHANNEL": {
         "TITLE": "Website channel",

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

@@ -1,27 +1,42 @@
 <template>
   <div class="wizard-body columns content-box small-9">
     <div class="login-init full-height text-center">
-      <form method="POST" action="/twitter/authorization">
-        <input type="hidden" name="user_id" :value="currentUserID" />
+      <form @submit.prevent="requestAuthorization">
         <woot-submit-button
           icon-class="ion-social-twitter"
           button-text="Sign in with Twitter"
           type="submit"
+          :loading="isRequestingAuthorization"
         />
       </form>
       <p>{{ $t('INBOX_MGMT.ADD.TWITTER.HELP') }}</p>
     </div>
   </div>
 </template>
-
 <script>
-import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import twitterClient from '../../../../../api/channel/twitterClient';
 
 export default {
-  computed: {
-    ...mapGetters({
-      currentUserID: 'getCurrentUserID',
-    }),
+  mixins: [alertMixin],
+  data() {
+    return { isRequestingAuthorization: false };
+  },
+  methods: {
+    async requestAuthorization() {
+      try {
+        this.isRequestingAuthorization = true;
+        const response = await twitterClient.generateAuthorization();
+        const {
+          data: { url },
+        } = response;
+        window.location.href = url;
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.ADD.TWITTER.ERROR_MESSAGE'));
+      } finally {
+        this.isRequestingAuthorization = false;
+      }
+    },
   },
 };
 </script>