@adatechnology/conversations-ui 0.1.0-rc.35 → 0.1.0-rc.36

package/dist/index.d.ts

@@ -1334,12 +1334,20 @@ interface WhatsAppTemplatesSettingsProps {
         submitting?: boolean;
         result?: WhatsAppCreateTemplateResult | null;
         labels?: Partial<WhatsAppCreateTemplateFormLabels>;
+        /** Nome exibido na prévia do template criado; sem isto o form usa seu próprio fallback. */
+        previewCompanyName?: string;
+        variableExamples?: readonly string[];
     };
     labels?: Partial<WhatsAppTemplatesSettingsLabels>;
     /** Vocabulário do formulário de seleção — separado de `labels`, que nomeia só as abas daqui. */
     settingsLabels?: Partial<WhatsAppTemplateSettingsFormLabels>;
+    /**
+     * Formulários extras de seleção (um por papel adicional de template, ex.: despedida), empilhados
+     * abaixo do principal na mesma sub-aba. Ausente = só o papel principal, comportamento de sempre.
+     */
+    extraRoleForms?: ReactNode;
 }
-declare function WhatsAppTemplatesSettings({ labels: labelsOverride, settingsLabels, create, ...settingsProps }: WhatsAppTemplatesSettingsProps): react.JSX.Element;
+declare function WhatsAppTemplatesSettings({ labels: labelsOverride, settingsLabels, create, extraRoleForms, ...settingsProps }: WhatsAppTemplatesSettingsProps): react.JSX.Element;
 
 interface TopicItem {
     key: string;
@@ -1374,6 +1382,22 @@ interface TemplateSettings {
     templateLanguage: string;
     variables: string[];
 }
+/**
+ * Papel adicional de template (ex.: despedida) além do principal (`getTemplateSettings`/
+ * `saveTemplateSettings`). Cada papel ganha seu próprio formulário empilhado na mesma aba, com
+ * carregamento e salvamento independentes — é o que permite hosts com mais de um papel (o
+ * financiamento tem boas-vindas + despedida) convergirem para este componente em vez de remontar
+ * a tela à parte.
+ */
+interface MessagesWorkspaceTemplateRole {
+    readonly key: string;
+    readonly labels: {
+        sectionTitle: string;
+        sectionDescription: string;
+    };
+    getSettings(): Promise<TemplateSettings>;
+    saveSettings(settings: TemplateSettings): Promise<void>;
+}
 interface TranscriptionSettings {
     enabled: boolean;
     mode: TranscriptionMode;
@@ -1388,6 +1412,8 @@ interface MessagesWorkspaceApi {
     /** Sem este par, a aba de templates não é desenhada. */
     getTemplateSettings?(): Promise<TemplateSettings>;
     saveTemplateSettings?(settings: TemplateSettings): Promise<void>;
+    /** Papéis adicionais de template (ex.: despedida) além do principal acima. */
+    templateRoles?: MessagesWorkspaceTemplateRole[];
     /**
      * Lista de templates aprovados na Meta. Ausente, a aba ainda existe (dá para salvar o nome
      * escolhido), mas nasce sem opções e sem botão de recarregar.
@@ -1422,9 +1448,12 @@ interface MessagesWorkspaceProps {
     readonly availableVariables?: WhatsAppTemplateVariableSuggestion[];
     /** Aviso do produto acima da aba de templates (ex.: rota da Graph API ainda não implementada). */
     readonly renderTemplatesNotice?: () => ReactNode;
+    /** Repassados ao formulário de criação — mesma prévia que `WhatsAppCreateTemplateForm` já suporta. */
+    readonly createTemplatePreviewCompanyName?: string;
+    readonly createTemplateVariableExamples?: readonly string[];
     readonly className?: string;
 }
-declare function MessagesWorkspace({ api, labels: labelsOverride, welcomePlaceholders, farewellPlaceholders, availableVariables, renderTemplatesNotice, className, }: MessagesWorkspaceProps): react.JSX.Element;
+declare function MessagesWorkspace({ api, labels: labelsOverride, welcomePlaceholders, farewellPlaceholders, availableVariables, renderTemplatesNotice, createTemplatePreviewCompanyName, createTemplateVariableExamples, className, }: MessagesWorkspaceProps): react.JSX.Element;
 
 interface UseConversationMessagesResult {
     messages: MessagePayload[];

package/dist/index.js

@@ -3267,6 +3267,7 @@ function WhatsAppTemplatesSettings({
   labels: labelsOverride,
   settingsLabels,
   create,
+  extraRoleForms,
   ...settingsProps
 }) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride };
@@ -3300,7 +3301,10 @@ function WhatsAppTemplatesSettings({
         }
       ) : null
     ] }),
-    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsx22(WhatsAppTemplateSettingsForm, { ...settingsProps, ...settingsLabels ? { labels: settingsLabels } : {} }) : create ? /* @__PURE__ */ jsx22(WhatsAppCreateTemplateForm, { ...create }) : null
+    tab === TEMPLATE_SETTINGS_TAB.SELECT ? /* @__PURE__ */ jsxs20("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx22(WhatsAppTemplateSettingsForm, { ...settingsProps, ...settingsLabels ? { labels: settingsLabels } : {} }),
+      extraRoleForms
+    ] }) : create ? /* @__PURE__ */ jsx22(WhatsAppCreateTemplateForm, { ...create }) : null
   ] });
 }
 
@@ -3390,7 +3394,7 @@ function TopicsForm({
 
 // src/settings/MessagesWorkspace.tsx
 import { useCallback as useCallback6, useEffect as useEffect9, useState as useState14 } from "react";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_LABELS7 = {
   title: "Mensagens",
   subtitle: "Mensagens do bot e templates do WhatsApp.",
@@ -3439,9 +3443,12 @@ function MessagesWorkspace({
   farewellPlaceholders,
   availableVariables,
   renderTemplatesNotice,
+  createTemplatePreviewCompanyName,
+  createTemplateVariableExamples,
   className
 }) {
   const labels = { ...DEFAULT_LABELS7, ...labelsOverride };
+  const templateRoles = api.templateRoles ?? [];
   const hasTopics = Boolean(api.getTopics && api.saveTopics);
   const hasTemplates = Boolean(api.getTemplateSettings && api.saveTemplateSettings);
   const hasTranscription = Boolean(api.getTranscription && api.saveTranscription);
@@ -3459,6 +3466,9 @@ function MessagesWorkspace({
   const [templatesError, setTemplatesError] = useState14(false);
   const [savingTemplate, setSavingTemplate] = useState14(false);
   const [templateSaved, setTemplateSaved] = useState14(false);
+  const [roleSettings, setRoleSettings] = useState14({});
+  const [savingRole, setSavingRole] = useState14({});
+  const [roleSaved, setRoleSaved] = useState14({});
   const [createTemplate, setCreateTemplate] = useState14(EMPTY_CREATE_TEMPLATE);
   const [creatingTemplate, setCreatingTemplate] = useState14(false);
   const [createResult, setCreateResult] = useState14(null);
@@ -3481,17 +3491,20 @@ function MessagesWorkspace({
     let active = true;
     async function load() {
       try {
-        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription] = await Promise.all([
+        const roles = api.templateRoles ?? [];
+        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription, loadedRoleSettings] = await Promise.all([
           api.getMessages(),
           api.getTopics?.(),
           api.getTemplateSettings?.(),
-          api.getTranscription?.()
+          api.getTranscription?.(),
+          Promise.all(roles.map((role) => role.getSettings()))
         ]);
         if (!active) return;
         setMessages(loadedMessages);
         if (loadedTopics) setTopics(loadedTopics);
         if (loadedTemplateSettings) setTemplateSettings(loadedTemplateSettings);
         if (loadedTranscription) setTranscription(loadedTranscription);
+        setRoleSettings(Object.fromEntries(roles.map((role, index) => [role.key, loadedRoleSettings[index]])));
         setLoadState("ready");
       } catch {
         if (active) setLoadState("error");
@@ -3541,6 +3554,36 @@ function MessagesWorkspace({
       setSavingTemplate(false);
     }
   }
+  function handleSaveRole(role) {
+    return async (event) => {
+      event.preventDefault();
+      const settings = roleSettings[role.key];
+      if (!settings) return;
+      setSavingRole((previous) => ({ ...previous, [role.key]: true }));
+      try {
+        await role.saveSettings(settings);
+        setRoleSaved((previous) => ({ ...previous, [role.key]: true }));
+        setTimeout(() => setRoleSaved((previous) => ({ ...previous, [role.key]: false })), SAVE_FEEDBACK_MS);
+      } finally {
+        setSavingRole((previous) => ({ ...previous, [role.key]: false }));
+      }
+    };
+  }
+  function handleSelectRoleTemplate(role, name, template) {
+    setRoleSettings((previous) => {
+      const current = previous[role.key] ?? EMPTY_TEMPLATE_SETTINGS;
+      if (!template) return { ...previous, [role.key]: { ...current, templateName: name } };
+      const shouldSeedVariables = template.variableCount > 0 && current.variables.length === 0;
+      return {
+        ...previous,
+        [role.key]: {
+          templateName: name,
+          templateLanguage: template.language,
+          variables: shouldSeedVariables ? Array.from({ length: template.variableCount }, () => "") : current.variables
+        }
+      };
+    });
+  }
   async function handleCreateTemplate(event) {
     event.preventDefault();
     if (!api.createTemplate) return;
@@ -3671,8 +3714,37 @@ function MessagesWorkspace({
               onSubmit: handleCreateTemplate,
               submitting: creatingTemplate,
               result: createResult,
-              labels: labels.createTemplate
+              labels: labels.createTemplate,
+              ...createTemplatePreviewCompanyName ? { previewCompanyName: createTemplatePreviewCompanyName } : {},
+              ...createTemplateVariableExamples ? { variableExamples: createTemplateVariableExamples } : {}
             }
+          } : {},
+          ...templateRoles.length > 0 ? {
+            extraRoleForms: /* @__PURE__ */ jsx24(Fragment6, { children: templateRoles.map((role) => {
+              const settings = roleSettings[role.key] ?? EMPTY_TEMPLATE_SETTINGS;
+              return /* @__PURE__ */ jsx24(
+                WhatsAppTemplateSettingsForm,
+                {
+                  templates,
+                  loadingTemplates,
+                  templatesError,
+                  selectedTemplateName: settings.templateName,
+                  onSelectTemplate: (name, template) => handleSelectRoleTemplate(role, name, template),
+                  variables: settings.variables,
+                  onVariablesChange: (variables) => setRoleSettings((previous) => ({
+                    ...previous,
+                    [role.key]: { ...previous[role.key] ?? EMPTY_TEMPLATE_SETTINGS, variables }
+                  })),
+                  onSave: handleSaveRole(role),
+                  saving: Boolean(savingRole[role.key]),
+                  saveSuccess: Boolean(roleSaved[role.key]),
+                  labels: { ...labels.templateSettings, ...role.labels },
+                  ...api.listTemplates ? { onRefreshTemplates: () => void reloadTemplates() } : {},
+                  ...availableVariables ? { availableVariables } : {}
+                },
+                role.key
+              );
+            }) })
           } : {}
         }
       )
@@ -4591,7 +4663,7 @@ function useConversationsInbox(params = {}) {
 }
 
 // src/workspace/ConversationsWorkspace.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function ConversationsWorkspace({
   labels: labelsOverride,
   filters,
@@ -4764,7 +4836,7 @@ function ConversationsWorkspace({
     ] }),
     inbox.loadFailure ? /* @__PURE__ */ jsxs26("p", { role: "alert", className: "cv-workspace-failure", children: [
       inbox.loadFailure,
-      signInHref ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
+      signInHref ? /* @__PURE__ */ jsxs26(Fragment7, { children: [
         " ",
         /* @__PURE__ */ jsx28("a", { href: signInHref, className: "cv-workspace-failure__link", children: labels.signIn })
       ] }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.35",
+  "version": "0.1.0-rc.36",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/settings/MessagesWorkspace.tsx

@@ -18,10 +18,11 @@ import {
   WhatsAppTemplatesSettings,
   type WhatsAppTemplatesSettingsLabels,
 } from './WhatsAppTemplatesSettings'
-import type {
-  WhatsAppTemplateSummary,
-  WhatsAppTemplateVariableSuggestion,
-  WhatsAppTemplateSettingsFormLabels,
+import {
+  WhatsAppTemplateSettingsForm,
+  type WhatsAppTemplateSummary,
+  type WhatsAppTemplateVariableSuggestion,
+  type WhatsAppTemplateSettingsFormLabels,
 } from './WhatsAppTemplateSettingsForm'
 import type {
   WhatsAppCreateTemplateFormLabels,
@@ -46,6 +47,20 @@ export interface TemplateSettings {
   variables: string[]
 }
 
+/**
+ * Papel adicional de template (ex.: despedida) além do principal (`getTemplateSettings`/
+ * `saveTemplateSettings`). Cada papel ganha seu próprio formulário empilhado na mesma aba, com
+ * carregamento e salvamento independentes — é o que permite hosts com mais de um papel (o
+ * financiamento tem boas-vindas + despedida) convergirem para este componente em vez de remontar
+ * a tela à parte.
+ */
+export interface MessagesWorkspaceTemplateRole {
+  readonly key: string
+  readonly labels: { sectionTitle: string; sectionDescription: string }
+  getSettings(): Promise<TemplateSettings>
+  saveSettings(settings: TemplateSettings): Promise<void>
+}
+
 export interface TranscriptionSettings {
   enabled: boolean
   mode: TranscriptionMode
@@ -61,6 +76,8 @@ export interface MessagesWorkspaceApi {
   /** Sem este par, a aba de templates não é desenhada. */
   getTemplateSettings?(): Promise<TemplateSettings>
   saveTemplateSettings?(settings: TemplateSettings): Promise<void>
+  /** Papéis adicionais de template (ex.: despedida) além do principal acima. */
+  templateRoles?: MessagesWorkspaceTemplateRole[]
   /**
    * Lista de templates aprovados na Meta. Ausente, a aba ainda existe (dá para salvar o nome
    * escolhido), mas nasce sem opções e sem botão de recarregar.
@@ -150,6 +167,9 @@ export interface MessagesWorkspaceProps {
   readonly availableVariables?: WhatsAppTemplateVariableSuggestion[]
   /** Aviso do produto acima da aba de templates (ex.: rota da Graph API ainda não implementada). */
   readonly renderTemplatesNotice?: () => ReactNode
+  /** Repassados ao formulário de criação — mesma prévia que `WhatsAppCreateTemplateForm` já suporta. */
+  readonly createTemplatePreviewCompanyName?: string
+  readonly createTemplateVariableExamples?: readonly string[]
   readonly className?: string
 }
 
@@ -160,9 +180,12 @@ export function MessagesWorkspace({
   farewellPlaceholders,
   availableVariables,
   renderTemplatesNotice,
+  createTemplatePreviewCompanyName,
+  createTemplateVariableExamples,
   className,
 }: MessagesWorkspaceProps) {
   const labels = { ...DEFAULT_LABELS, ...labelsOverride }
+  const templateRoles = api.templateRoles ?? []
 
   const hasTopics = Boolean(api.getTopics && api.saveTopics)
   const hasTemplates = Boolean(api.getTemplateSettings && api.saveTemplateSettings)
@@ -186,6 +209,10 @@ export function MessagesWorkspace({
   const [savingTemplate, setSavingTemplate] = useState(false)
   const [templateSaved, setTemplateSaved] = useState(false)
 
+  const [roleSettings, setRoleSettings] = useState<Record<string, TemplateSettings>>({})
+  const [savingRole, setSavingRole] = useState<Record<string, boolean>>({})
+  const [roleSaved, setRoleSaved] = useState<Record<string, boolean>>({})
+
   const [createTemplate, setCreateTemplate] = useState<WhatsAppCreateTemplateState>(EMPTY_CREATE_TEMPLATE)
   const [creatingTemplate, setCreatingTemplate] = useState(false)
   const [createResult, setCreateResult] = useState<WhatsAppCreateTemplateResult | null>(null)
@@ -211,17 +238,21 @@ export function MessagesWorkspace({
     let active = true
     async function load(): Promise<void> {
       try {
-        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription] = await Promise.all([
-          api.getMessages(),
-          api.getTopics?.(),
-          api.getTemplateSettings?.(),
-          api.getTranscription?.(),
-        ])
+        const roles = api.templateRoles ?? []
+        const [loadedMessages, loadedTopics, loadedTemplateSettings, loadedTranscription, loadedRoleSettings] =
+          await Promise.all([
+            api.getMessages(),
+            api.getTopics?.(),
+            api.getTemplateSettings?.(),
+            api.getTranscription?.(),
+            Promise.all(roles.map((role) => role.getSettings())),
+          ])
         if (!active) return
         setMessages(loadedMessages)
         if (loadedTopics) setTopics(loadedTopics)
         if (loadedTemplateSettings) setTemplateSettings(loadedTemplateSettings)
         if (loadedTranscription) setTranscription(loadedTranscription)
+        setRoleSettings(Object.fromEntries(roles.map((role, index) => [role.key, loadedRoleSettings[index]])))
         setLoadState('ready')
       } catch {
         if (active) setLoadState('error')
@@ -279,6 +310,42 @@ export function MessagesWorkspace({
     }
   }
 
+  function handleSaveRole(role: MessagesWorkspaceTemplateRole): (event: FormEvent) => Promise<void> {
+    return async (event: FormEvent) => {
+      event.preventDefault()
+      const settings = roleSettings[role.key]
+      if (!settings) return
+      setSavingRole((previous) => ({ ...previous, [role.key]: true }))
+      try {
+        await role.saveSettings(settings)
+        setRoleSaved((previous) => ({ ...previous, [role.key]: true }))
+        setTimeout(() => setRoleSaved((previous) => ({ ...previous, [role.key]: false })), SAVE_FEEDBACK_MS)
+      } finally {
+        setSavingRole((previous) => ({ ...previous, [role.key]: false }))
+      }
+    }
+  }
+
+  function handleSelectRoleTemplate(
+    role: MessagesWorkspaceTemplateRole,
+    name: string,
+    template: WhatsAppTemplateSummary | undefined,
+  ): void {
+    setRoleSettings((previous) => {
+      const current = previous[role.key] ?? EMPTY_TEMPLATE_SETTINGS
+      if (!template) return { ...previous, [role.key]: { ...current, templateName: name } }
+      const shouldSeedVariables = template.variableCount > 0 && current.variables.length === 0
+      return {
+        ...previous,
+        [role.key]: {
+          templateName: name,
+          templateLanguage: template.language,
+          variables: shouldSeedVariables ? Array.from({ length: template.variableCount }, () => '') : current.variables,
+        },
+      }
+    })
+  }
+
   async function handleCreateTemplate(event: FormEvent): Promise<void> {
     event.preventDefault()
     if (!api.createTemplate) return
@@ -443,9 +510,45 @@ export function MessagesWorkspace({
                     submitting: creatingTemplate,
                     result: createResult,
                     labels: labels.createTemplate,
+                    ...(createTemplatePreviewCompanyName ? { previewCompanyName: createTemplatePreviewCompanyName } : {}),
+                    ...(createTemplateVariableExamples ? { variableExamples: createTemplateVariableExamples } : {}),
                   },
                 }
               : {})}
+            {...(templateRoles.length > 0
+              ? {
+                  extraRoleForms: (
+                    <>
+                      {templateRoles.map((role) => {
+                        const settings = roleSettings[role.key] ?? EMPTY_TEMPLATE_SETTINGS
+                        return (
+                          <WhatsAppTemplateSettingsForm
+                            key={role.key}
+                            templates={templates}
+                            loadingTemplates={loadingTemplates}
+                            templatesError={templatesError}
+                            selectedTemplateName={settings.templateName}
+                            onSelectTemplate={(name, template) => handleSelectRoleTemplate(role, name, template)}
+                            variables={settings.variables}
+                            onVariablesChange={(variables) =>
+                              setRoleSettings((previous) => ({
+                                ...previous,
+                                [role.key]: { ...(previous[role.key] ?? EMPTY_TEMPLATE_SETTINGS), variables },
+                              }))
+                            }
+                            onSave={handleSaveRole(role)}
+                            saving={Boolean(savingRole[role.key])}
+                            saveSuccess={Boolean(roleSaved[role.key])}
+                            labels={{ ...labels.templateSettings, ...role.labels }}
+                            {...(api.listTemplates ? { onRefreshTemplates: () => void reloadTemplates() } : {})}
+                            {...(availableVariables ? { availableVariables } : {})}
+                          />
+                        )
+                      })}
+                    </>
+                  ),
+                }
+              : {})}
           />
         </div>
       ) : null}

package/src/settings/WhatsAppTemplatesSettings.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { WhatsAppTemplatesSettings } from './WhatsAppTemplatesSettings'
+import type { WhatsAppTemplatesSettingsProps } from './WhatsAppTemplatesSettings'
+
+function render(overrides: Partial<WhatsAppTemplatesSettingsProps> = {}): string {
+  return renderToStaticMarkup(
+    <WhatsAppTemplatesSettings
+      templates={[]}
+      selectedTemplateName=""
+      onSelectTemplate={() => {}}
+      variables={[]}
+      onVariablesChange={() => {}}
+      onSave={() => {}}
+      {...overrides}
+    />,
+  )
+}
+
+describe('WhatsAppTemplatesSettings', () => {
+  it('renderiza os formulários extras de papel na aba de seleção', () => {
+    const markup = render({ extraRoleForms: <div>MARCADOR_PAPEL_EXTRA</div> })
+
+    expect(markup).toContain('MARCADOR_PAPEL_EXTRA')
+  })
+
+  it('sem extraRoleForms, o comportamento é idêntico ao de antes', () => {
+    const markup = render()
+
+    expect(markup).not.toContain('MARCADOR_PAPEL_EXTRA')
+  })
+
+  it('aceita previewCompanyName e variableExamples em create sem quebrar a tipagem', () => {
+    const markup = render({
+      create: {
+        value: {
+          name: '',
+          category: 'UTILITY',
+          language: 'pt_BR',
+          headerType: 'NONE',
+          headerText: '',
+          bodyText: '',
+          footerText: '',
+        },
+        onChange: () => {},
+        onSubmit: () => {},
+        previewCompanyName: 'Empresa Teste',
+        variableExamples: ['João', '123'],
+      },
+    })
+
+    expect(markup).toContain('Criar template')
+  })
+
+  it('sem create, a aba de criação não aparece', () => {
+    const markup = render()
+
+    expect(markup).not.toContain('Criar template')
+  })
+})

package/src/settings/WhatsAppTemplatesSettings.tsx

@@ -8,7 +8,7 @@
  * Segue presentacional: nenhuma chamada de rede aqui. Templates, estado e handlers vêm por props.
  */
 
-import { useState, type FormEvent } from 'react'
+import { useState, type FormEvent, type ReactNode } from 'react'
 import {
   WhatsAppTemplateSettingsForm,
   type WhatsAppTemplateSummary,
@@ -59,16 +59,25 @@ export interface WhatsAppTemplatesSettingsProps {
     submitting?: boolean
     result?: WhatsAppCreateTemplateResult | null
     labels?: Partial<WhatsAppCreateTemplateFormLabels>
+    /** Nome exibido na prévia do template criado; sem isto o form usa seu próprio fallback. */
+    previewCompanyName?: string
+    variableExamples?: readonly string[]
   }
   labels?: Partial<WhatsAppTemplatesSettingsLabels>
   /** Vocabulário do formulário de seleção — separado de `labels`, que nomeia só as abas daqui. */
   settingsLabels?: Partial<WhatsAppTemplateSettingsFormLabels>
+  /**
+   * Formulários extras de seleção (um por papel adicional de template, ex.: despedida), empilhados
+   * abaixo do principal na mesma sub-aba. Ausente = só o papel principal, comportamento de sempre.
+   */
+  extraRoleForms?: ReactNode
 }
 
 export function WhatsAppTemplatesSettings({
   labels: labelsOverride,
   settingsLabels,
   create,
+  extraRoleForms,
   ...settingsProps
 }: WhatsAppTemplatesSettingsProps) {
   const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride }
@@ -105,7 +114,10 @@ export function WhatsAppTemplatesSettings({
       </nav>
 
       {tab === TEMPLATE_SETTINGS_TAB.SELECT ? (
-        <WhatsAppTemplateSettingsForm {...settingsProps} {...(settingsLabels ? { labels: settingsLabels } : {})} />
+        <div className="space-y-6">
+          <WhatsAppTemplateSettingsForm {...settingsProps} {...(settingsLabels ? { labels: settingsLabels } : {})} />
+          {extraRoleForms}
+        </div>
       ) : create ? (
         <WhatsAppCreateTemplateForm {...create} />
       ) : null}