From 5499fd136584739620a07cd3f0a540ac8ded83eb Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Thu, 1 Aug 2024 11:52:41 -0400 Subject: [PATCH] fix(creatives): make sure selected creatives are correct for the ad set (#1287) During testing for another PR, I noticed that when adding or creating a new creative, it adds to all ad sets. We should only add it to the one we are editing. --- https://github.com/user-attachments/assets/77bbb89a-036d-41d4-abec-ad6321dbd8f7 --- .../Creatives/CreateCreativeButton.tsx | 12 +++++++++-- src/components/Creatives/CreativeForm.tsx | 5 ++--- src/components/Creatives/CreativeSelect.tsx | 8 +++++--- src/locales/en.po | 7 +++++-- src/locales/es.po | 8 +++++--- src/locales/pt.po | 8 +++++--- src/locales/test.po | 5 ++++- src/user/ads/AdsExistingAd.tsx | 14 +++++++++---- src/user/ads/InlineContentAd.tsx | 6 +++--- src/user/ads/NotificationAd.tsx | 6 +++--- .../components/adSet/fields/AdSetAds.tsx | 20 ++++++++++++++----- 11 files changed, 67 insertions(+), 32 deletions(-) diff --git a/src/components/Creatives/CreateCreativeButton.tsx b/src/components/Creatives/CreateCreativeButton.tsx index d84cbfbb..7aff3559 100644 --- a/src/components/Creatives/CreateCreativeButton.tsx +++ b/src/components/Creatives/CreateCreativeButton.tsx @@ -16,7 +16,11 @@ import { CreateCreativeDocument, } from "@/graphql-client/graphql"; -export function CreateCreativeButton() { +interface Props { + index: number; +} + +export function CreateCreativeButton({ index }: Props) { const { values, setFieldValue } = useFormikContext(); const [, , isCreating] = useField("isCreating"); const [, newMeta, newHelper] = useField("newCreative"); @@ -29,7 +33,11 @@ export function CreateCreativeButton() { values.adSets.forEach((adSet, idx) => { void setFieldValue(`adSets.${idx}.creatives`, [ ...adSet.creatives, - validCreativeFields(data.createCreative, advertiser.id, true), + validCreativeFields( + data.createCreative, + advertiser.id, + idx === index, + ), ]); }); isCreating.setValue(false); diff --git a/src/components/Creatives/CreativeForm.tsx b/src/components/Creatives/CreativeForm.tsx index f32a7731..94fb26f8 100644 --- a/src/components/Creatives/CreativeForm.tsx +++ b/src/components/Creatives/CreativeForm.tsx @@ -120,10 +120,9 @@ const CreativeTypeSpecificFields = ({ }: { creativeType?: string; }) => { - if (creativeType === "notification_all_v1") - return ; + if (creativeType === "notification_all_v1") return ; if (creativeType === "inline_content_all_v1") - return ; + return ; return null; }; diff --git a/src/components/Creatives/CreativeSelect.tsx b/src/components/Creatives/CreativeSelect.tsx index 9c59db59..44e53b34 100644 --- a/src/components/Creatives/CreativeSelect.tsx +++ b/src/components/Creatives/CreativeSelect.tsx @@ -17,7 +17,7 @@ export function CreativeSelect( options: Creative[]; useSelectedAdStyle?: boolean; showState?: boolean; - index?: number; + index: number; hideCreated?: boolean; useButtonSelection?: boolean; } & PropsWithChildren, @@ -99,9 +99,11 @@ export function CreativeSelect( sx={{ maxWidth: "200px", alignSelf: "end", marginTop: 2 }} onClick={(e) => { e.preventDefault(); - - const mapped = curr.map((c) => ({ ...c, included: true })); values.adSets.forEach((adSet, idx) => { + const mapped = curr.map((c) => ({ + ...c, + included: idx === index, + })); void setFieldValue( `adSets.${idx}.creatives`, _.uniqBy([...adSet.creatives, ...mapped], "id"), diff --git a/src/locales/en.po b/src/locales/en.po index 0a29356c..3808009c 100644 --- a/src/locales/en.po +++ b/src/locales/en.po @@ -127,8 +127,11 @@ msgstr "Additional Details" msgid "Ads" msgstr "Ads" -msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." -msgstr "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +#~ msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +#~ msgstr "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." + +msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously created ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +msgstr "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously created ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." msgid "Ads Help Center" msgstr "Ads Help Center" diff --git a/src/locales/es.po b/src/locales/es.po index 137a4a1d..cea3d469 100644 --- a/src/locales/es.po +++ b/src/locales/es.po @@ -132,8 +132,11 @@ msgstr "Detalles adicionales" msgid "Ads" msgstr "Anuncios" -msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." -msgstr "Los anuncios son bloques de construcción modulares que se pueden combinar con conjuntos de anuncios para crear combinaciones únicas. Los anuncios aprobados anteriormente se mostrarán aquí. Seleccione la casilla situada junto al nombre. Utilice el botón “Completar selección” para finalizar." +#~ msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +#~ msgstr "Los anuncios son bloques de construcción modulares que se pueden combinar con conjuntos de anuncios para crear combinaciones únicas. Los anuncios aprobados anteriormente se mostrarán aquí. Seleccione la casilla situada junto al nombre. Utilice el botón “Completar selección” para finalizar." + +msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously created ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +msgstr "Los anuncios son bloques de construcción modulares que se pueden combinar con conjuntos de anuncios para crear combinaciones únicas. Los anuncios creados anteriormente se mostrarán aquí. Seleccione la casilla situada junto al nombre. Utilice el botón “Completar selección” para finalizar." msgid "Ads Help Center" msgstr "Centro de ayuda de anuncios" @@ -1481,4 +1484,3 @@ msgstr "Su campaña de prueba será revisada por un Gerente de Cuenta. Agregue c msgid "Zip / Postal Code" msgstr "Código postal" - diff --git a/src/locales/pt.po b/src/locales/pt.po index c3d528c4..38d43c8f 100644 --- a/src/locales/pt.po +++ b/src/locales/pt.po @@ -132,8 +132,11 @@ msgstr "Detalhes Adicionais" msgid "Ads" msgstr "Anúncios" -msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." -msgstr "Anúncios são blocos de construção modulares que podem ser combinados com conjuntos de anúncios para criar combinações únicas. Seus anúncios previamente aprovados serão exibidos aqui. Selecione usando a caixa ao lado do nome. Use o botão \"Seleção Completa\" para concluir." +#~ msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +#~ msgstr "Anúncios são blocos de construção modulares que podem ser combinados com conjuntos de anúncios para criar combinações únicas. Seus anúncios previamente aprovados serão exibidos aqui. Selecione usando a caixa ao lado do nome. Use o botão \"Seleção Completa\" para concluir." + +msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously created ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +msgstr "Anúncios são blocos de construção modulares que podem ser combinados com conjuntos de anúncios para criar combinações únicas. Seus anúncios previamente criados serão exibidos aqui. Selecione usando a caixa ao lado do nome. Use o botão \"Seleção Completa\" para concluir." msgid "Ads Help Center" msgstr "Central de Ajuda de Anúncios" @@ -1481,4 +1484,3 @@ msgstr "Sua campanha de teste será revisada por um Gerente de Conta. Adicione a msgid "Zip / Postal Code" msgstr "CEP" - diff --git a/src/locales/test.po b/src/locales/test.po index deb6c5e2..1fedc69b 100644 --- a/src/locales/test.po +++ b/src/locales/test.po @@ -127,7 +127,10 @@ msgstr "" msgid "Ads" msgstr "" -msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +#~ msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously approved ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." +#~ msgstr "" + +msgid "Ads are modular building blocks that can be paired with ad sets to build unique combinations. Your previously created ads will show here. Select by using the box next to the name. Use the \"Complete selection\" button to finish." msgstr "" msgid "Ads Help Center" diff --git a/src/user/ads/AdsExistingAd.tsx b/src/user/ads/AdsExistingAd.tsx index 3da813dc..d0611160 100644 --- a/src/user/ads/AdsExistingAd.tsx +++ b/src/user/ads/AdsExistingAd.tsx @@ -27,7 +27,11 @@ import { useLingui } from "@lingui/react"; import { useQuery } from "@apollo/client"; import { filterCreativesByCampaignFormat } from "@/user/ads/filterCreativesByCampaignFormat"; -export function AdsExistingAd() { +interface Props { + index: number; +} + +export function AdsExistingAd({ index }: Props) { const { _: lingui } = useLingui(); const { isShowingAds, setIsShowingAds } = useContext(FormContext); const { creatives } = useAdvertiserCreatives(); @@ -47,7 +51,9 @@ export function AdsExistingAd() { ["asc", "desc"], ) as CreativeFragment[]; - const filtered = creativeOptionList.filter((c) => c.state === "active"); + const filtered = creativeOptionList.filter( + (c) => c.state === "active" || c.state === "draft", + ); const excludeExisting = filtered.filter((e) => { const associatedOptions = creatives ?? []; return associatedOptions.find((ao) => ao.id === e.id) === undefined; @@ -79,7 +85,7 @@ export function AdsExistingAd() { Ads are modular building blocks that can be paired with ad sets to - build unique combinations. Your previously approved ads will show + build unique combinations. Your previously created ads will show here. Select by using the box next to the name. Use the "Complete selection" button to finish. @@ -123,8 +129,8 @@ export function AdsExistingAd() { advertiserId: advertiser.id, included: false, }))} + index={index} useSelectedAdStyle={false} - showState={false} useButtonSelection /> )} diff --git a/src/user/ads/InlineContentAd.tsx b/src/user/ads/InlineContentAd.tsx index e0886a90..cafe779f 100644 --- a/src/user/ads/InlineContentAd.tsx +++ b/src/user/ads/InlineContentAd.tsx @@ -13,9 +13,9 @@ import { msg, Trans } from "@lingui/macro"; interface InlineAdProps { name?: string; - useCustomButton?: boolean; useContainer?: boolean; alignPreview?: "column" | "row"; + index?: number; } export function InlineContentAd(props: InlineAdProps) { @@ -91,10 +91,10 @@ const InlineAdForm = (props: InlineAdProps) => { /> )} - {props.useCustomButton !== true && ( + {props.index !== undefined && (
- + )} diff --git a/src/user/ads/NotificationAd.tsx b/src/user/ads/NotificationAd.tsx index 0bc1c54c..82a7fa74 100644 --- a/src/user/ads/NotificationAd.tsx +++ b/src/user/ads/NotificationAd.tsx @@ -11,8 +11,8 @@ import { useLingui } from "@lingui/react"; interface NotificationAdProps { name?: string; - useCustomButton?: boolean; useContainer?: boolean; + index?: number; } export function NotificationAd(props: NotificationAdProps) { @@ -85,10 +85,10 @@ const NotificationAdForm = (props: NotificationAdProps) => { helperText={_(msg`Example - https://brave.com/brave-rewards/`)} /> - {props.useCustomButton !== true && ( + {props.index !== undefined && (
- + )} diff --git a/src/user/views/adsManager/views/advanced/components/adSet/fields/AdSetAds.tsx b/src/user/views/adsManager/views/advanced/components/adSet/fields/AdSetAds.tsx index 1e6ee07f..82ec3934 100644 --- a/src/user/views/adsManager/views/advanced/components/adSet/fields/AdSetAds.tsx +++ b/src/user/views/adsManager/views/advanced/components/adSet/fields/AdSetAds.tsx @@ -43,22 +43,32 @@ export function AdSetAds({ index }: Props) { - - + + ); } -function CampaignFormatSpecificModal(props: { format: CampaignFormat }) { +function CampaignFormatSpecificModal(props: { + format: CampaignFormat; + index: number; +}) { const [, meta, helper] = useField("isCreating"); const name = "newCreative"; let adComponent; if (props.format === CampaignFormat.PushNotification) - adComponent = ; + adComponent = ( + + ); else if (props.format === CampaignFormat.NewsDisplayAd) adComponent = ( - + ); return (