diff --git a/app/javascript/dashboard/composables/spec/useFacebookPageConnect.spec.js b/app/javascript/dashboard/composables/spec/useFacebookPageConnect.spec.js index 5d9edb993..4ec17e753 100644 --- a/app/javascript/dashboard/composables/spec/useFacebookPageConnect.spec.js +++ b/app/javascript/dashboard/composables/spec/useFacebookPageConnect.spec.js @@ -70,7 +70,8 @@ describe('useFacebookPageConnect', () => { ACCOUNT_ID ); expect(window.FB.login).toHaveBeenCalledWith(expect.any(Function), { - scope: expect.stringContaining('pages_show_list'), + scope: + 'pages_manage_metadata,business_management,pages_messaging,pages_show_list,pages_read_engagement', }); }); diff --git a/app/javascript/dashboard/composables/useFacebookPageConnect.js b/app/javascript/dashboard/composables/useFacebookPageConnect.js index 46a177d58..dbe06dd0d 100644 --- a/app/javascript/dashboard/composables/useFacebookPageConnect.js +++ b/app/javascript/dashboard/composables/useFacebookPageConnect.js @@ -1,13 +1,9 @@ import { ref } from 'vue'; import { useMapGetter } from 'dashboard/composables/store'; import ChannelApi from 'dashboard/api/channels'; +import { buildFacebookLoginScopes } from 'dashboard/helper/facebookScopes'; import { setupFacebookSdk } from 'dashboard/routes/dashboard/settings/inbox/channels/whatsapp/utils'; -// Page-management + messaging scopes required to list pages and create a -// Channel::FacebookPage inbox (mirrors the standalone settings flow). -const FB_PAGE_SCOPES = - 'pages_manage_metadata,business_management,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages'; - // Headless half of the Facebook Page connect flow: load the Meta SDK, run // FB.login for page scopes, and fetch the user's pages. The caller owns the // page-picker UI and the channel creation, because choosing a page is an @@ -51,7 +47,7 @@ export function useFacebookPageConnect() { : null ); }, - { scope: FB_PAGE_SCOPES } + { scope: buildFacebookLoginScopes() } ); }); diff --git a/app/javascript/dashboard/helper/facebookScopes.js b/app/javascript/dashboard/helper/facebookScopes.js new file mode 100644 index 000000000..755b3f465 --- /dev/null +++ b/app/javascript/dashboard/helper/facebookScopes.js @@ -0,0 +1,22 @@ +export const FACEBOOK_PAGE_SCOPES = [ + 'pages_manage_metadata', + 'business_management', + 'pages_messaging', + 'pages_show_list', + 'pages_read_engagement', +]; + +export const INSTAGRAM_SCOPES = [ + 'instagram_basic', + 'instagram_manage_messages', +]; + +export const buildFacebookLoginScopes = ({ + includeInstagramScopes = false, +} = {}) => { + const scopes = [...FACEBOOK_PAGE_SCOPES]; + if (includeInstagramScopes) { + scopes.push(...INSTAGRAM_SCOPES); + } + return scopes.join(','); +}; diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue index dd566f131..cf25177ea 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue @@ -4,6 +4,7 @@ import InboxReconnectionRequired from '../components/InboxReconnectionRequired.v import { useAlert } from 'dashboard/composables'; import { loadScript } from 'dashboard/helper/DOMHelpers'; +import { buildFacebookLoginScopes } from 'dashboard/helper/facebookScopes'; import * as Sentry from '@sentry/vue'; export default { @@ -20,6 +21,11 @@ export default { inboxId() { return this.inbox.id; }, + facebookLoginScopes() { + return buildFacebookLoginScopes({ + includeInstagramScopes: !!this.inbox.instagram_id, + }); + }, }, mounted() { window.fbAsyncInit = this.runFBInit; @@ -77,8 +83,7 @@ export default { } }, { - scope: - 'pages_manage_metadata,business_management,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages', + scope: this.facebookLoginScopes, auth_type: 'reauthorize', } );