feat: Enable reauthorization for Facebook (#1286)

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

@@ -12,6 +12,13 @@ class FBChannel extends ApiClient {
       params
     );
   }
+
+  reauthorizeFacebookPage({ omniauthToken, inboxId }) {
+    return axios.post(`${this.baseUrl()}/callbacks/reauthorize_page`, {
+      omniauth_token: omniauthToken,
+      inbox_id: inboxId,
+    });
+  }
 }
 
 export default new FBChannel();

app/javascript/dashboard/assets/scss/widgets/_forms.scss

@@ -28,3 +28,7 @@ input {
   font-size: $font-size-small;
   font-weight: $font-weight-medium;
 }
+
+.help-text {
+  font-weight: $font-weight-normal;
+}

app/javascript/dashboard/components/SettingsSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="row settings--section">
-    <div class="medium-4 small-12">
+    <div class="medium-4 small-12 title--section">
       <p class="sub-block-title">
         {{ title }}
       </p>
@@ -35,7 +35,7 @@ export default {
 .settings--section {
   border-bottom: 1px solid $color-border;
   display: flex;
-  padding: $space-normal 0;
+  padding: $space-normal $space-normal $space-normal 0;
 
   .sub-block-title {
     color: $color-woot;

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

@@ -233,6 +233,12 @@
       "INBOX_UPDATE_TITLE": "Inbox Settings",
       "INBOX_UPDATE_SUB_TEXT": "Update your inbox settings",
       "AUTO_ASSIGNMENT_SUB_TEXT": "Enable or disable the automatic assignment of new conversations to the agents added to this inbox."
+    },
+    "FACEBOOK_REAUTHORIZE": {
+      "TITLE": "Reauthorize",
+      "SUBTITLE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+      "MESSAGE_SUCCESS": "Reconnection successful",
+      "MESSAGE_ERROR": "There was an error, please try again"
     }
   }
 }

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

@@ -112,8 +112,6 @@
   </div>
 </template>
 <script>
-/* global bus */
-
 import { mapGetters } from 'vuex';
 import Settings from './Settings';
 import adminMixin from '../../../../mixins/isAdmin';

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

@@ -163,6 +163,10 @@
           @click="updateInbox"
         />
       </settings-section>
+      <facebook-reauthorize
+        v-if="isAFacebookInbox && inbox.reauthorization_required"
+        :inbox-id="inbox.id"
+      />
     </div>
 
     <!-- update agents in inbox -->
@@ -223,10 +227,12 @@ import configMixin from 'shared/mixins/configMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import SettingsSection from '../../../../components/SettingsSection';
 import inboxMixin from 'shared/mixins/inboxMixin';
+import FacebookReauthorize from './facebook/Reauthorize';
 
 export default {
   components: {
     SettingsSection,
+    FacebookReauthorize,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -316,7 +322,6 @@ export default {
   },
   methods: {
     handleFeatureFlag(e) {
-      console.log(e.target.value);
       this.selectedFeatureFlags = this.toggleInput(
         this.selectedFeatureFlags,
         e.target.value
@@ -425,10 +430,8 @@ export default {
   background: $color-white;
 
   .settings--content {
-    &:last-child {
-      .settings--section {
-        border-bottom: 0;
-      }
+    div:last-child {
+      border-bottom: 0;
     }
   }
 

app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue

@@ -0,0 +1,115 @@
+<template>
+  <settings-section
+    :title="$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.TITLE')"
+    :sub-title="$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.SUBTITLE')"
+  >
+    <a class="fb--login" href="#" @click="tryFBlogin">
+      <img
+        src="~dashboard/assets/images/channels/facebook_login.png"
+        alt="Facebook-logo"
+      />
+    </a>
+  </settings-section>
+</template>
+
+<script>
+/* global FB */
+import SettingsSection from '../../../../../components/SettingsSection';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: {
+    SettingsSection,
+  },
+  mixins: [alertMixin],
+  props: {
+    inboxId: {
+      type: Number,
+      required: true,
+    },
+  },
+  mounted() {
+    this.initFB();
+    this.loadFBsdk();
+  },
+
+  methods: {
+    initFB() {
+      if (window.fbSDKLoaded === undefined) {
+        window.fbAsyncInit = () => {
+          FB.init({
+            appId: window.chatwootConfig.fbAppId,
+            xfbml: true,
+            version: 'v7.0',
+            status: true,
+          });
+          window.fbSDKLoaded = true;
+          FB.AppEvents.logPageView();
+        };
+      }
+    },
+
+    loadFBsdk() {
+      ((d, s, id) => {
+        let js;
+        // eslint-disable-next-line
+        const fjs = (js = d.getElementsByTagName(s)[0]);
+        if (d.getElementById(id)) {
+          return;
+        }
+        js = d.createElement(s);
+        js.id = id;
+        js.src = 'https://connect.facebook.net/en_US/sdk.js';
+        fjs.parentNode.insertBefore(js, fjs);
+      })(document, 'script', 'facebook-jssdk');
+    },
+
+    tryFBlogin() {
+      FB.login(
+        response => {
+          if (response.status === 'connected') {
+            this.reauthorizeFBPage(response.authResponse.accessToken);
+          } else if (response.status === 'not_authorized') {
+            // The person is logged into Facebook, but not your app.
+            this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
+          } else {
+            // The person is not logged into Facebook, so we're not sure if
+            // they are logged into this app or not.
+            this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
+          }
+        },
+        {
+          scope: 'pages_manage_metadata,pages_messaging',
+          auth_type: 'reauthorize',
+        }
+      );
+    },
+    async reauthorizeFBPage(omniauthToken) {
+      try {
+        await this.$store.dispatch('inboxes/reauthorizeFacebookPage', {
+          omniauthToken,
+          inboxId: this.inboxId,
+        });
+        this.showAlert(
+          this.$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.MESSAGE_SUCCESS')
+        );
+      } catch (error) {
+        this.showAlert(
+          this.$t('INBOX_MGMT.FACEBOOK_REAUTHORIZE.MESSAGE_ERROR')
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+
+.fb--login {
+  img {
+    max-width: 240px;
+    padding: $space-normal 0;
+  }
+}
+</style>

app/javascript/dashboard/store/modules/inboxes.js

@@ -139,6 +139,14 @@ export const actions = {
       throw new Error(error);
     }
   },
+  reauthorizeFacebookPage: async ({ commit }, params) => {
+    try {
+      const response = await FBChannel.reauthorizeFacebookPage(params);
+      commit(types.default.EDIT_INBOXES, response.data);
+    } catch (error) {
+      throw new Error(error.message);
+    }
+  },
 };
 
 export const mutations = {