Compare commits
No commits in common. "a88e96adf5afedd706cd0f5553b8a4b6dd44e1f3" and "b4ad2e05855b389c914153714ef4721ccfbe499e" have entirely different histories.
a88e96adf5
...
b4ad2e0585
3 changed files with 25 additions and 174 deletions
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Wand2, Upload, CheckCircle2 } from 'lucide-react';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Spinner } from '@/components/ui/Spinner';
|
||||
|
|
@ -8,12 +8,6 @@ import { ErrorBlock } from '@/components/ui/ErrorBlock';
|
|||
import { parseApiError, type FriendlyError } from '@/lib/errors';
|
||||
import type { AdCopyVariation } from '@/lib/ai/copywriter';
|
||||
|
||||
type MetaPage = {
|
||||
id: string;
|
||||
name: string;
|
||||
instagram_account: { id: string; username: string; profile_picture_url?: string } | null;
|
||||
};
|
||||
|
||||
interface AddAdModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
|
|
@ -51,23 +45,6 @@ export function AddAdModal({
|
|||
const [defaults, setDefaults] = useState<CreativeDefaults | null>(null);
|
||||
const [defaultsLoading, setDefaultsLoading] = useState(false);
|
||||
|
||||
const [pages, setPages] = useState<MetaPage[]>([]);
|
||||
const [pagesLoading, setPagesLoading] = useState(false);
|
||||
const [selectedPageId, setSelectedPageId] = useState('');
|
||||
|
||||
// Página detectada automaticamente a partir do anúncio existente no ad set
|
||||
// (ou a primeira da lista, se não houver match) — usada como valor inicial
|
||||
// do seletor até o usuário escolher outra explicitamente.
|
||||
const autoSelectedPageId = useMemo(() => {
|
||||
if (pages.length === 0) return '';
|
||||
const preferred = defaults?.page_id ? pages.find((p) => p.id === defaults.page_id) : undefined;
|
||||
return preferred?.id || pages[0].id;
|
||||
}, [pages, defaults]);
|
||||
|
||||
const effectivePageId = selectedPageId || autoSelectedPageId;
|
||||
const selectedPage = pages.find((p) => p.id === effectivePageId) || null;
|
||||
const selectedInstagramAccount = selectedPage?.instagram_account || null;
|
||||
|
||||
const [copyLoading, setCopyLoading] = useState(false);
|
||||
const [copyVariations, setCopyVariations] = useState<AdCopyVariation[]>([]);
|
||||
const [selectedCopy, setSelectedCopy] = useState<number | null>(null);
|
||||
|
|
@ -80,7 +57,6 @@ export function AddAdModal({
|
|||
const [publishing, setPublishing] = useState(false);
|
||||
const [error, setError] = useState<FriendlyError | string | null>(null);
|
||||
const [done, setDone] = useState(false);
|
||||
const [instagramDropped, setInstagramDropped] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
|
@ -114,32 +90,6 @@ export function AddAdModal({
|
|||
};
|
||||
}, [adsetId, campaignName, adsetName]);
|
||||
|
||||
// Carrega as páginas/Instagram conectados para o usuário poder escolher
|
||||
// explicitamente — em vez de depender só da detecção automática, que pode
|
||||
// trazer uma combinação não autorizada para esta conta de anúncios.
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
(async () => {
|
||||
setPagesLoading(true);
|
||||
try {
|
||||
const res = await fetch('/api/meta/pages');
|
||||
const data = await res.json();
|
||||
if (!cancelled && data.success) {
|
||||
setPages(data.data || []);
|
||||
}
|
||||
} catch {
|
||||
// Segue sem a lista — o usuário ainda pode publicar com os defaults detectados.
|
||||
} finally {
|
||||
if (!cancelled) setPagesLoading(false);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const generateCopy = async () => {
|
||||
if (!context.trim()) {
|
||||
setError('Descreva sobre o que é esse anúncio antes de gerar as copies.');
|
||||
|
|
@ -231,12 +181,11 @@ export function AddAdModal({
|
|||
const canPublish =
|
||||
!!selectedCopyData &&
|
||||
!!selectedImage &&
|
||||
!!effectivePageId &&
|
||||
(!!link.trim() || !!defaults?.whatsapp_link || !!defaults?.whatsapp_phone_number);
|
||||
|
||||
const publish = async () => {
|
||||
if (!canPublish || !selectedCopyData || !selectedImage) {
|
||||
setError('Selecione uma página, uma copy e uma imagem antes de publicar.');
|
||||
setError('Selecione uma copy e uma imagem antes de publicar.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -251,8 +200,8 @@ export function AddAdModal({
|
|||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
campaign_name: campaignName,
|
||||
page_id: effectivePageId || defaults?.page_id,
|
||||
instagram_actor_id: selectedInstagramAccount?.id || undefined,
|
||||
page_id: defaults?.page_id,
|
||||
instagram_actor_id: defaults?.instagram_actor_id,
|
||||
link: link.trim() || undefined,
|
||||
headline: selectedCopyData.headline,
|
||||
primary_text: selectedCopyData.primary_text,
|
||||
|
|
@ -272,7 +221,6 @@ export function AddAdModal({
|
|||
return;
|
||||
}
|
||||
|
||||
setInstagramDropped(Boolean(data.data?.instagram_dropped));
|
||||
setDone(true);
|
||||
onCreated();
|
||||
} catch (err) {
|
||||
|
|
@ -303,62 +251,10 @@ export function AddAdModal({
|
|||
<p className="text-xs" style={{ color: 'var(--muted-fg)' }}>
|
||||
Ele foi criado como Pausado — ative-o no Ads Manager (ou na tabela) quando estiver pronto.
|
||||
</p>
|
||||
{instagramDropped && (
|
||||
<div className="text-[11px] mt-1 px-3 py-2 rounded-lg text-left" style={{ background: 'rgba(234,179,8,0.08)', border: '1px solid rgba(234,179,8,0.2)', color: '#fcd34d' }}>
|
||||
⚠️ Publicamos <strong>só no Facebook</strong>: a conta de anúncios ainda não tem permissão pra usar
|
||||
{selectedInstagramAccount ? <> a conta <strong>@{selectedInstagramAccount.username}</strong></> : ' a conta do Instagram'} desta página.
|
||||
Para ativar o Instagram, vincule a conta no Business Manager (Configurações do Negócio → Contas do Instagram → Atribuir conta de anúncios) e republique.
|
||||
</div>
|
||||
)}
|
||||
<button onClick={onClose} className="btn-primary mt-2">Fechar</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-wider font-medium mb-2" style={{ color: 'var(--muted-fg)' }}>
|
||||
Página do Facebook que vai promover *
|
||||
</label>
|
||||
|
||||
{pagesLoading ? (
|
||||
<div className="flex items-center gap-2 text-xs py-2" style={{ color: 'var(--muted-fg)' }}>
|
||||
<Spinner size="sm" /> Carregando páginas conectadas...
|
||||
</div>
|
||||
) : pages.length === 0 ? (
|
||||
<p className="text-xs" style={{ color: 'var(--muted-fg)' }}>
|
||||
Nenhuma página encontrada na sua conta do Facebook. A Meta vai usar a página padrão deste ad set.
|
||||
</p>
|
||||
) : (
|
||||
<div className="relative">
|
||||
<select
|
||||
value={effectivePageId}
|
||||
onChange={(e) => setSelectedPageId(e.target.value)}
|
||||
className="input-field appearance-none w-full cursor-pointer pr-10"
|
||||
>
|
||||
{pages.map((page) => (
|
||||
<option key={page.id} value={page.id}>
|
||||
{page.name}
|
||||
{page.instagram_account ? ` · Instagram: @${page.instagram_account.username}` : ' · sem Instagram vinculado'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3" style={{ color: 'var(--muted-fg)' }}>
|
||||
<svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-[11px] mt-1.5" style={{ color: 'var(--muted-fg)' }}>
|
||||
{selectedInstagramAccount ? (
|
||||
<>O anúncio também vai rodar no Instagram conectado a essa página: <strong>@{selectedInstagramAccount.username}</strong>.</>
|
||||
) : (
|
||||
'Esta página não tem uma conta do Instagram vinculada — o anúncio roda só no Facebook.'
|
||||
)}
|
||||
{' '}Se a Meta recusar por falta de permissão entre a conta de anúncios e o Instagram, escolha outra página aqui ou autorize o vínculo no Business Manager.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-wider font-medium mb-2" style={{ color: 'var(--muted-fg)' }}>
|
||||
Sobre o que é esse anúncio?
|
||||
|
|
@ -366,15 +262,10 @@ export function AddAdModal({
|
|||
<textarea
|
||||
value={context}
|
||||
onChange={(e) => setContext(e.target.value)}
|
||||
placeholder="Ex: Topo de bolo personalizado para festa infantil, com balões e confete coloridos, convite digital de aniversário..."
|
||||
placeholder="Ex: Promoção de fim de ano, novo recurso do produto, depoimento de cliente..."
|
||||
rows={3}
|
||||
className="input-field text-sm"
|
||||
/>
|
||||
<p className="text-[11px] mt-1.5" style={{ color: 'var(--muted-fg)' }}>
|
||||
💡 Para gerar fotos relevantes, descreva o <strong>produto/cena</strong> que a imagem deve mostrar
|
||||
(não só o texto de venda) — ex.: "topo de bolo com nome da criança, decoração de festa de aniversário".
|
||||
Pré-preenchemos com a copy do anúncio atual; edite à vontade antes de gerar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Copy */}
|
||||
|
|
|
|||
|
|
@ -27,24 +27,6 @@ async function fetchGraphGet(path: string, token: string, params: Record<string,
|
|||
return data;
|
||||
}
|
||||
|
||||
// Helper para requests GET que percorre todas as páginas (paging.next) —
|
||||
// necessário pra endpoints como /me/accounts, que retornam só um lote por vez.
|
||||
async function fetchGraphGetAll(path: string, token: string, params: Record<string, string | number> = {}) {
|
||||
const first = await fetchGraphGet(path, token, { limit: 100, ...params });
|
||||
const results: unknown[] = [...(first.data || [])];
|
||||
|
||||
let nextUrl: string | undefined = first.paging?.next;
|
||||
while (nextUrl) {
|
||||
const res = await fetch(nextUrl);
|
||||
const data = await res.json();
|
||||
if (data.error) throwMetaError(data.error);
|
||||
results.push(...(data.data || []));
|
||||
nextUrl = data.paging?.next;
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
// Helper para requests POST com JSON body
|
||||
async function fetchGraphPostJson(path: string, token: string, body: any = {}) {
|
||||
const url = new URL(`https://graph.facebook.com/v20.0${path}`);
|
||||
|
|
@ -136,10 +118,10 @@ export async function callMetaTool(
|
|||
}
|
||||
|
||||
case 'list_pages': {
|
||||
const allPages = await fetchGraphGetAll('/me/accounts', token, {
|
||||
resultData = await fetchGraphGet('/me/accounts', token, {
|
||||
fields: 'id,name,access_token,instagram_business_account{id,username,profile_picture_url}',
|
||||
});
|
||||
return { content: [{ type: 'text', text: JSON.stringify(allPages) }] };
|
||||
return { content: [{ type: 'text', text: JSON.stringify(resultData.data || []) }] };
|
||||
}
|
||||
|
||||
case 'get_insights_for_account':
|
||||
|
|
|
|||
|
|
@ -608,30 +608,26 @@ export async function addAdToAdSet(client: Client, params: AddAdToAdSetParams) {
|
|||
// the most broadly compatible across placements.
|
||||
const primaryImageHash = imageHashes[0];
|
||||
|
||||
// Monta o criativo com (ou sem) o Instagram. Quando a conta de anúncios não
|
||||
// tem permissão pra usar a conta de IG vinculada à página, a Meta recusa o
|
||||
// criativo inteiro (erro 200 / subcode 1815199). Nesse caso refazemos o
|
||||
// criativo só com o Facebook, em vez de barrar a publicação.
|
||||
const buildCreative = (instagramActorId?: string) => {
|
||||
if (params.is_whatsapp) {
|
||||
return createWhatsappAdCreative(client, {
|
||||
name: creativeName,
|
||||
page_id: params.page_id,
|
||||
instagram_actor_id: instagramActorId,
|
||||
image_hash: primaryImageHash,
|
||||
message: params.primary_text,
|
||||
headline: params.headline,
|
||||
description: params.description,
|
||||
link: params.link,
|
||||
whatsapp_link: params.whatsapp_link,
|
||||
whatsapp_phone_number: params.whatsapp_phone_number,
|
||||
ad_account_id: params.ad_account_id,
|
||||
});
|
||||
}
|
||||
return createAdCreative(client, {
|
||||
let creative;
|
||||
if (params.is_whatsapp) {
|
||||
creative = await createWhatsappAdCreative(client, {
|
||||
name: creativeName,
|
||||
page_id: params.page_id,
|
||||
instagram_actor_id: instagramActorId,
|
||||
instagram_actor_id: params.instagram_actor_id,
|
||||
image_hash: primaryImageHash,
|
||||
message: params.primary_text,
|
||||
headline: params.headline,
|
||||
description: params.description,
|
||||
link: params.link,
|
||||
whatsapp_link: params.whatsapp_link,
|
||||
whatsapp_phone_number: params.whatsapp_phone_number,
|
||||
ad_account_id: params.ad_account_id,
|
||||
});
|
||||
} else {
|
||||
creative = await createAdCreative(client, {
|
||||
name: creativeName,
|
||||
page_id: params.page_id,
|
||||
instagram_actor_id: params.instagram_actor_id,
|
||||
image_hash: primaryImageHash,
|
||||
link: params.link,
|
||||
message: params.primary_text,
|
||||
|
|
@ -640,23 +636,6 @@ export async function addAdToAdSet(client: Client, params: AddAdToAdSetParams) {
|
|||
call_to_action_type: params.cta,
|
||||
ad_account_id: params.ad_account_id,
|
||||
});
|
||||
};
|
||||
|
||||
// 1815199: "A conta de anúncios não tem acesso a esta conta do Instagram".
|
||||
const isInstagramPermissionError = (err: unknown) =>
|
||||
err instanceof Error && /1815199/.test(err.message);
|
||||
|
||||
let creative;
|
||||
let instagramDropped = false;
|
||||
try {
|
||||
creative = await buildCreative(params.instagram_actor_id);
|
||||
} catch (err) {
|
||||
if (params.instagram_actor_id && isInstagramPermissionError(err)) {
|
||||
creative = await buildCreative(undefined);
|
||||
instagramDropped = true;
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
const creativeId = (creative as any)?.id;
|
||||
|
|
@ -680,7 +659,6 @@ export async function addAdToAdSet(client: Client, params: AddAdToAdSetParams) {
|
|||
adset_id: params.adset_id,
|
||||
creative_id: creativeId,
|
||||
ad_id: adId,
|
||||
instagram_dropped: instagramDropped,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue