Chore: Add Facebook app set up documentation (#647)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>

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

@@ -3,7 +3,7 @@ import ApiClient from '../ApiClient';
 
 class FBChannel extends ApiClient {
   constructor() {
-    super('facebook_indicators');
+    super('facebook_indicators', { accountScoped: true });
   }
 
   markSeen({ inboxId, contactId }) {
@@ -22,7 +22,7 @@ class FBChannel extends ApiClient {
 
   create(params) {
     return axios.post(
-      `${this.apiVersion}/callbacks/register_facebook_page`,
+      `${this.url.replace(this.resource, '')}callbacks/register_facebook_page`,
       params
     );
   }

app/javascript/dashboard/api/channels.js

@@ -5,9 +5,9 @@
 import endPoints from './endPoints';
 
 export default {
-  fetchFacebookPages(token) {
+  fetchFacebookPages(token, accountId) {
     const urlData = endPoints('fetchFacebookPages');
     urlData.params.omniauth_token = token;
-    return axios.post(urlData.url, urlData.params);
+    return axios.post(urlData.url(accountId), urlData.params);
   },
 };

app/javascript/dashboard/api/endPoints.js

@@ -28,7 +28,9 @@ const endPoints = {
   },
 
   fetchFacebookPages: {
-    url: 'api/v1/callbacks/facebook_pages.json',
+    url(accountId) {
+      return `api/v1/accounts/${accountId}/callbacks/facebook_pages.json`;
+    },
     params: { omniauth_token: '' },
   },
 

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

@@ -0,0 +1,15 @@
+import fbChannel from '../../channel/fbChannel';
+import ApiClient from '../../ApiClient';
+
+describe('#FBChannel', () => {
+  it('creates correct instance', () => {
+    expect(fbChannel).toBeInstanceOf(ApiClient);
+    expect(fbChannel).toHaveProperty('get');
+    expect(fbChannel).toHaveProperty('show');
+    expect(fbChannel).toHaveProperty('create');
+    expect(fbChannel).toHaveProperty('update');
+    expect(fbChannel).toHaveProperty('delete');
+    expect(fbChannel).toHaveProperty('markSeen');
+    expect(fbChannel).toHaveProperty('toggleTyping');
+  });
+});

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

@@ -68,6 +68,7 @@
 /* global FB */
 import { required } from 'vuelidate/lib/validators';
 import LoadingState from 'dashboard/components/widgets/LoadingState';
+import { mapGetters } from 'vuex';
 import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader';
 import router from '../../../../index';
@@ -111,6 +112,12 @@ export default {
     getSelectablePages() {
       return this.pageList.filter(item => !item.exists);
     },
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+    }),
+    accountId() {
+      return this.currentUser.account_id;
+    },
   },
 
   created() {
@@ -194,13 +201,20 @@ export default {
       );
     },
 
-    fetchPages(_token) {
-      ChannelApi.fetchFacebookPages(_token)
-        .then(response => {
-          this.pageList = response.data.data.page_details;
-          this.user_access_token = response.data.data.user_access_token;
-        })
-        .catch();
+    async fetchPages(_token) {
+      try {
+        const response = await ChannelApi.fetchFacebookPages(
+          _token,
+          this.accountId
+        );
+        const {
+          data: { data },
+        } = response;
+        this.pageList = data.page_details;
+        this.user_access_token = data.user_access_token;
+      } catch (error) {
+        // Ignore error
+      }
     },
 
     channelParams() {