IntegratedOnboardingDialog

src/components/integrated-onboarding-dialog/ (4 componentes)

Overlay High 1 uso

Grupo de 4 componentes para o fluxo de onboarding/integração de instâncias Meta (WhatsApp Business API, Instagram, Messenger). Composto por: ConnectButton (OAuth Dialog), MetaConnectButton (Facebook SDK JS), BusinessSelectionModal (seleciona Facebook Business), PageTokenSelectionModal (seleciona página Facebook/Instagram). Usado exclusivamente em BuildInstance.vue.

Fluxo de Onboarding — 4 Etapas

Os 4 componentes formam um pipeline sequencial obrigatório. Cada etapa dispara um evento que abre a próxima. ConnectButton e MetaConnectButton são intercambiáveis via <component :is> dinâmico.

Connect Button

OAuth / FB.login

→

Business Modal

@token-saved

→

Page Modal

@business-selected

→

✓

Ativada

@page-selected

<component
  :is="currentActionButton"
  v-if="currentActionButton"
  color="primary"
  :instance-id="instanceId"
  :platform="platformName"
  :can-handle-status="actualIndexPage === 3"
  @window-open="disablePopUp"
  @token-saved="showBusinessModal = true"
  @login-success="handleMetaLoginSuccess">
  <span>{{ currentButtonText }}</span>
</component>
<!-- currentActionButton: isMeta ? 'meta-connect-button' : 'connect-button' -->

ConnectButton e MetaConnectButton

ConnectButton — abre janela popup OAuth do Dialog (parceiro WhatsApp Business API oficial). MetaConnectButton — inicia login via Facebook SDK JS (FB.login). Aparência visual idêntica (vs-button); a diferença está no fluxo de autenticação.

ConnectButton (Dialog/WhatsApp)

MetaConnectButton — WhatsApp

MetaConnectButton — Instagram

MetaConnectButton — desabilitado (SDK loading)

<!-- Exemplo sintético — no admin usa <component :is> dinâmico -->
<meta-connect-button
  color="primary"
  platform="instagram"
  :instance-id="instanceId"
  :can-handle-status="true"
  @window-open="disablePopUp"
  @token-saved="showBusinessModal = true"
>
  Conectar Instagram
</meta-connect-button>

BusinessSelectionModal — Estados

Modal sem botão de fechar (button-close-hidden=true) — usuário deve selecionar um business ou cancelar. Exibe lista de Facebook Businesses vinculados ao token. Item selecionado: borda e fundo azul. Confirmar dispara @business-selected.

Lista com seleção

Empty state

<business-selection-modal
  :active.sync="showBusinessModal"
  :instance-id="instanceId"
  :platform="platformName"
  @business-selected="onBusinessSelected"
/>

PageTokenSelectionModal — Seleção de Página

Último passo do fluxo. Layout idêntico ao BusinessSelectionModal. Para Instagram: exibe username em rosa e filtra apenas páginas com ig_user_id != null. Ao confirmar: salva token, page_id, page_name, ig_user_id e ig_username; ativa a instância com activated=true.

PageTokenSelectionModal (Instagram)

<page-token-selection-modal
  :active.sync="showPageModal"
  :instance-id="instanceId"
  :platform="platformName"
  @page-selected="onPageSelected"
/>

API

<!-- Fluxo completo de onboarding -->
<connect-button color="primary" :instance-id="instanceId" @window-open="disablePopUp" />

<meta-connect-button color="primary" platform="instagram" :instance-id="instanceId"
  :can-handle-status="true" @token-saved="showBusinessModal = true" />

<business-selection-modal :active.sync="showBusinessModal" :instance-id="instanceId"
  platform="instagram" @business-selected="onBusinessSelected" />

<page-token-selection-modal :active.sync="showPageModal" :instance-id="instanceId"
  platform="instagram" @page-selected="onPageSelected" />

Componentes do Grupo

Componente	Arquivo	Props principais	Eventos
`ConnectButton`	connect-button.vue	`color`, `instanceId`, `queryParameters`	`@window-open`
`MetaConnectButton`	MetaConnectButton.vue	`color`, `platform`, `instanceId`, `canHandleStatus`	`@window-open`, `@token-saved`
`BusinessSelectionModal`	BusinessSelectionModal.vue	`active` (.sync), `instanceId`, `platform`	`@business-selected`, `@update:active`
`PageTokenSelectionModal`	PageTokenSelectionModal.vue	`active` (.sync), `instanceId`*, `platform`	`@page-selected`, `@update:active`

MetaConnectButton — Scopes por Plataforma

platform	Scopes Facebook solicitados
`instagram`	instagram_basic, business_management, instagram_manage_messages, pages_show_list, pages_utility_messaging, pages_read_engagement, pages_manage_metadata, pages_messaging
`messenger`	pages_messaging, pages_utility_messaging, pages_show_list, business_management, pages_read_engagement, pages_manage_metadata
outros (WhatsApp)	pages_messaging

Design Compartilhado — Modais de Seleção

Propriedade	Valor
Lista max-height	300px com overflow-y: auto
Item padding	12px 16px
Item border-radius	8px
Item hover	border #007bff, bg #f8f9fa
Item selecionado	border #007bff, bg #e7f3ff
Radio position	vs-radio à direita
Botão fechar	button-close-hidden=true (ausente)
Username Instagram	cor #e91e63 (PageTokenSelectionModal)

Dependências

vs-button vs-popup vs-radio vs-loading feather-icon: AlertCircleIcon Facebook SDK JS (FB.login, FB.getLoginStatus) store: instance/update, instance/fetchBusinesses, instance/fetchAccessTokens

Variáveis de Ambiente

VUE_APP_WHATSAPP_DIALOG_PARTNER_ID VUE_APP_BOKER_DIALOG_BASE_URL VUE_APP_FACEBOOK_MESSAGING_APP_ID VUE_APP_FACEBOOK_API_VERSION

Onde é usado (1 uso)

src/views/instances/BuildInstance.vue (via <component :is> dinâmico)