From 574a5c58c29b6cf0ef07045d69e2a3e5666aa9e2 Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Thu, 7 Mar 2024 10:20:29 -0500 Subject: [PATCH] feat: news v2, warning text on notification (#1115) --- .husky/pre-commit | 2 - src/components/Assets/ImagePreview.tsx | 2 + src/components/Creatives/NewsPreview.tsx | 137 +++++++++++++---------- src/locales/en.po | 18 ++- src/locales/es.po | 18 ++- src/locales/pt.po | 18 ++- src/user/ads/NotificationAd.tsx | 12 ++ 7 files changed, 133 insertions(+), 74 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 172000ea..36af2198 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -2,5 +2,3 @@ . "$(dirname "$0")/_/husky.sh" npx lint-staged -npm run extract -git add *.po diff --git a/src/components/Assets/ImagePreview.tsx b/src/components/Assets/ImagePreview.tsx index 2cadc83a..4afa7cb1 100644 --- a/src/components/Assets/ImagePreview.tsx +++ b/src/components/Assets/ImagePreview.tsx @@ -34,6 +34,7 @@ export const ImagePreview = ({ height, width, bgcolor: "#AEB1C2", + borderRadius: "6px", }} > {url?.endsWith(".pad") ? ( @@ -45,6 +46,7 @@ export const ImagePreview = ({ style={{ opacity: selected === false ? 0.3 : 1, filter: selected === false ? "grayscale(20%)" : "none", + borderRadius: "6px", }} /> ) : ( diff --git a/src/components/Creatives/NewsPreview.tsx b/src/components/Creatives/NewsPreview.tsx index 50945b07..9d7d63f4 100644 --- a/src/components/Creatives/NewsPreview.tsx +++ b/src/components/Creatives/NewsPreview.tsx @@ -14,73 +14,96 @@ export function NewsPreview() { return ( - - {value?.imageUrl ? ( - - ) : ( - - )} - + + {value?.imageUrl ? ( + + ) : ( + + )} + + + {" "} + + + + {value?.title || ( + + This is a news display ad, it wll look like part of the news feed. + + )} + - - {value?.title || ( - - This is a news display ad, it wll look like part of the news - feed. - - )} - - - - - {value?.ctaText || Click Here!} - - - + + {value?.ctaText || Click Here!} + - - {value?.description ?? advertiser.name} - ); } + +const OutlinedAd = () => { + return ( + + Ad + + ); +}; + +const AdDescription = (props: { description: string }) => { + return ( + + • {props.description} + + ); +}; diff --git a/src/locales/en.po b/src/locales/en.po index 181daf74..468bfc31 100644 --- a/src/locales/en.po +++ b/src/locales/en.po @@ -81,6 +81,10 @@ msgstr "Account Settings" msgid "Activate" msgstr "Activate" +#: src/components/Creatives/NewsPreview.tsx:90 +msgid "Ad" +msgstr "Ad" + #: src/validation/CreativeSchema.tsx:45 msgid "Ad body is required" msgstr "Ad body is required" @@ -450,7 +454,7 @@ msgstr "City" msgid "City is required" msgstr "City is required" -#: src/components/Creatives/NewsPreview.tsx:75 +#: src/components/Creatives/NewsPreview.tsx:69 msgid "Click Here!" msgstr "Click Here!" @@ -847,7 +851,7 @@ msgstr "Enter Ads Manager" msgid "Enter your email address to get a secure login link. Use this link to access your Brave Ads account." msgstr "Enter your email address to get a secure login link. Use this link to access your Brave Ads account." -#: src/user/ads/NotificationAd.tsx:73 +#: src/user/ads/NotificationAd.tsx:79 msgid "Example - https://brave.com/brave-rewards/" msgstr "Example - https://brave.com/brave-rewards/" @@ -1010,7 +1014,7 @@ msgstr "I would like to receive marketing emails about new features and promotio msgid "Image" msgstr "Image" -#: src/components/Assets/ImagePreview.tsx:56 +#: src/components/Assets/ImagePreview.tsx:58 msgid "Image failed to load" msgstr "Image failed to load" @@ -1174,6 +1178,10 @@ msgstr "Logging in" msgid "Make payment & submit for approval" msgstr "Make payment & submit for approval" +#: src/user/ads/NotificationAd.tsx:68 +msgid "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected." +msgstr "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected." + #: src/auth/registration/AccountChoice.tsx:72 #~ msgid "Managed service" #~ msgstr "Managed service" @@ -1819,7 +1827,7 @@ msgstr "Take our survey!" #~ msgstr "Tap into over <0>9 billion annual Web searches" #: src/user/ads/InlineContentAd.tsx:84 -#: src/user/ads/NotificationAd.tsx:72 +#: src/user/ads/NotificationAd.tsx:78 msgid "Target URL" msgstr "Target URL" @@ -1883,7 +1891,7 @@ msgstr "The username or password did not match our records." #~ msgid "Third party tracking acknowledgement is required" #~ msgstr "Third party tracking acknowledgement is required" -#: src/components/Creatives/NewsPreview.tsx:54 +#: src/components/Creatives/NewsPreview.tsx:52 msgid "This is a news display ad, it wll look like part of the news feed." msgstr "This is a news display ad, it wll look like part of the news feed." diff --git a/src/locales/es.po b/src/locales/es.po index 4df3a497..1cf67bd9 100644 --- a/src/locales/es.po +++ b/src/locales/es.po @@ -85,6 +85,10 @@ msgstr "" msgid "Activate" msgstr "" +#: src/components/Creatives/NewsPreview.tsx:90 +msgid "Ad" +msgstr "" + #: src/validation/CreativeSchema.tsx:45 msgid "Ad body is required" msgstr "" @@ -454,7 +458,7 @@ msgstr "" msgid "City is required" msgstr "" -#: src/components/Creatives/NewsPreview.tsx:75 +#: src/components/Creatives/NewsPreview.tsx:69 msgid "Click Here!" msgstr "" @@ -851,7 +855,7 @@ msgstr "" msgid "Enter your email address to get a secure login link. Use this link to access your Brave Ads account." msgstr "" -#: src/user/ads/NotificationAd.tsx:73 +#: src/user/ads/NotificationAd.tsx:79 msgid "Example - https://brave.com/brave-rewards/" msgstr "" @@ -1018,7 +1022,7 @@ msgstr "" msgid "Image" msgstr "" -#: src/components/Assets/ImagePreview.tsx:56 +#: src/components/Assets/ImagePreview.tsx:58 msgid "Image failed to load" msgstr "" @@ -1182,6 +1186,10 @@ msgstr "" msgid "Make payment & submit for approval" msgstr "" +#: src/user/ads/NotificationAd.tsx:68 +msgid "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected." +msgstr "" + #: src/auth/registration/AccountChoice.tsx:72 #~ msgid "Managed service" #~ msgstr "" @@ -1827,7 +1835,7 @@ msgstr "" #~ msgstr "" #: src/user/ads/InlineContentAd.tsx:84 -#: src/user/ads/NotificationAd.tsx:72 +#: src/user/ads/NotificationAd.tsx:78 msgid "Target URL" msgstr "" @@ -1891,7 +1899,7 @@ msgstr "" #~ msgid "Third party tracking acknowledgement is required" #~ msgstr "" -#: src/components/Creatives/NewsPreview.tsx:54 +#: src/components/Creatives/NewsPreview.tsx:52 msgid "This is a news display ad, it wll look like part of the news feed." msgstr "" diff --git a/src/locales/pt.po b/src/locales/pt.po index 2f89ab15..0d05c9ec 100644 --- a/src/locales/pt.po +++ b/src/locales/pt.po @@ -85,6 +85,10 @@ msgstr "" msgid "Activate" msgstr "" +#: src/components/Creatives/NewsPreview.tsx:90 +msgid "Ad" +msgstr "" + #: src/validation/CreativeSchema.tsx:45 msgid "Ad body is required" msgstr "" @@ -454,7 +458,7 @@ msgstr "" msgid "City is required" msgstr "" -#: src/components/Creatives/NewsPreview.tsx:75 +#: src/components/Creatives/NewsPreview.tsx:69 msgid "Click Here!" msgstr "" @@ -851,7 +855,7 @@ msgstr "" msgid "Enter your email address to get a secure login link. Use this link to access your Brave Ads account." msgstr "" -#: src/user/ads/NotificationAd.tsx:73 +#: src/user/ads/NotificationAd.tsx:79 msgid "Example - https://brave.com/brave-rewards/" msgstr "" @@ -1018,7 +1022,7 @@ msgstr "" msgid "Image" msgstr "" -#: src/components/Assets/ImagePreview.tsx:56 +#: src/components/Assets/ImagePreview.tsx:58 msgid "Image failed to load" msgstr "" @@ -1182,6 +1186,10 @@ msgstr "" msgid "Make payment & submit for approval" msgstr "" +#: src/user/ads/NotificationAd.tsx:68 +msgid "Make sure to include your brand name in the title OR body of the ad. Otherwise, it will be rejected." +msgstr "" + #: src/auth/registration/AccountChoice.tsx:72 #~ msgid "Managed service" #~ msgstr "" @@ -1827,7 +1835,7 @@ msgstr "" #~ msgstr "" #: src/user/ads/InlineContentAd.tsx:84 -#: src/user/ads/NotificationAd.tsx:72 +#: src/user/ads/NotificationAd.tsx:78 msgid "Target URL" msgstr "" @@ -1891,7 +1899,7 @@ msgstr "" #~ msgid "Third party tracking acknowledgement is required" #~ msgstr "" -#: src/components/Creatives/NewsPreview.tsx:54 +#: src/components/Creatives/NewsPreview.tsx:52 msgid "This is a news display ad, it wll look like part of the news feed." msgstr "" diff --git a/src/user/ads/NotificationAd.tsx b/src/user/ads/NotificationAd.tsx index b5d7738a..f5f99106 100644 --- a/src/user/ads/NotificationAd.tsx +++ b/src/user/ads/NotificationAd.tsx @@ -64,6 +64,18 @@ const NotificationAdForm = (props: NotificationAdProps) => { maxLengthInstantFeedback={60} /> + + + Make sure to include your brand name in the title OR body of the ad. + Otherwise, it will be rejected. + + +