fix: Twitter inbox creation error (#1783)

fixes #1708

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

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>