From c92311d08394e9875ad29959c43e451f0daef123 Mon Sep 17 00:00:00 2001 From: lloan alas Date: Mon, 20 Nov 2023 16:12:43 -0800 Subject: [PATCH 1/3] convert two banners to dismissable and remove bottom banner --- .../dashboard/PremiumPromoBanners.tsx | 18 ++++++- .../components/dashboard/ProfileBanners.tsx | 18 ++++++- frontend/src/pages/accounts/profile.page.tsx | 50 +------------------ 3 files changed, 33 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/dashboard/PremiumPromoBanners.tsx b/frontend/src/components/dashboard/PremiumPromoBanners.tsx index b2c57fc2ff..1d4f62defe 100644 --- a/frontend/src/components/dashboard/PremiumPromoBanners.tsx +++ b/frontend/src/components/dashboard/PremiumPromoBanners.tsx @@ -6,9 +6,11 @@ import styles from "./ProfileBanners.module.scss"; import PhoneIllustration from "./images/phone-premium-promo.svg"; import { Banner } from "../Banner"; import { useL10n } from "../../hooks/l10n"; +import { ProfileData } from "../../hooks/api/profile"; export type Props = { showFirstPremiumBanner?: boolean; + profile: ProfileData; }; export const PremiumPromoBanners = (props: Props) => { @@ -17,7 +19,12 @@ export const PremiumPromoBanners = (props: Props) => { // Only show the first banner while waiting for the A/B test architecture to be built out { props.showFirstPremiumBanner - ? banners.push() + ? banners.push( + , + ) : null; } @@ -37,7 +44,11 @@ export const PremiumPromoBanners = (props: Props) => { const phoneImage = ; -const StopSpamBanner = () => { +type StopSpamBannerProps = { + profileData: ProfileData; +}; + +const StopSpamBanner = (props: StopSpamBannerProps) => { const l10n = useL10n(); return ( @@ -64,6 +75,9 @@ const StopSpamBanner = () => { }); }, }} + dismissal={{ + key: `stop-spam-banner-${props.profileData.id}`, + }} >

{l10n.getString("banner-ab-premium-promo-stop-spam-body")}

diff --git a/frontend/src/components/dashboard/ProfileBanners.tsx b/frontend/src/components/dashboard/ProfileBanners.tsx index 32e0aedc32..4c0ad733ff 100644 --- a/frontend/src/components/dashboard/ProfileBanners.tsx +++ b/frontend/src/components/dashboard/ProfileBanners.tsx @@ -108,7 +108,12 @@ export const ProfileBanners = (props: Props) => { // This pushes a banner promoting the add-on - detecting the add-on // and determining whether to show it based on that is a bit slow, // so we'll just let the add-on hide it: - banners.push(); + banners.push( + , + ); } if ( @@ -122,6 +127,7 @@ export const ProfileBanners = (props: Props) => { ? banners.push( , ) @@ -228,7 +234,12 @@ const NoAddonBanner = () => { ); }; -const NoChromeExtensionBanner = () => { +type NoChromeExtensionBannerProps = { + profileData: ProfileData; +}; + +// make dismissble +const NoChromeExtensionBanner = (props: NoChromeExtensionBannerProps) => { const l10n = useL10n(); return ( @@ -258,6 +269,9 @@ const NoChromeExtensionBanner = () => { }, }} hiddenWithAddon={true} + dismissal={{ + key: `no-chrome-extension-banner-${props.profileData.id}`, + }} >

{l10n.getString("banner-download-install-chrome-extension-copy-2")}

diff --git a/frontend/src/pages/accounts/profile.page.tsx b/frontend/src/pages/accounts/profile.page.tsx index 899253b4e9..468309c6bd 100644 --- a/frontend/src/pages/accounts/profile.page.tsx +++ b/frontend/src/pages/accounts/profile.page.tsx @@ -447,59 +447,12 @@ const Profile: NextPage = () => { ); - const bottomPremiumSection = - profile.has_premium || - !isPeriodicalPremiumAvailableInCountry(runtimeData.data) ? null : ( -
-
-
- {isPhonesAvailableInCountry(runtimeData.data) ? ( - <> - , i: }} - > -

- -

{l10n.getString("footer-banner-premium-promo-body")}

- - ) : ( - <> -

- -
-
- ); - const banners = (
{!profile.has_premium && isPeriodicalPremiumAvailableInCountry(runtimeData.data) && isFlagActive(runtimeData.data, "premium_promo_banners") ? ( - + ) : null} {
{bottomBanners} - From 7b75362e5305514e4832188a186205faff5a789d Mon Sep 17 00:00:00 2001 From: lloan alas Date: Mon, 20 Nov 2023 16:39:00 -0800 Subject: [PATCH 2/3] remove unused vars --- frontend/src/pages/accounts/profile.page.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/pages/accounts/profile.page.tsx b/frontend/src/pages/accounts/profile.page.tsx index 468309c6bd..91054257e7 100644 --- a/frontend/src/pages/accounts/profile.page.tsx +++ b/frontend/src/pages/accounts/profile.page.tsx @@ -21,7 +21,6 @@ import { event as gaEvent } from "react-ga"; import { useMenuTriggerState, useTooltipTriggerState } from "react-stately"; import { toast } from "react-toastify"; import styles from "./profile.module.scss"; -import BottomBannerIllustration from "../../../public/images/woman-couch-left.svg"; import UpsellBannerUs from "./images/upsell-banner-us.svg"; import UpsellBannerNonUs from "./images/upsell-banner-nonus.svg"; import { CheckBadgeIcon, LockIcon, PencilIcon } from "../../components/Icons"; @@ -73,10 +72,6 @@ const Profile: NextPage = () => { const freeOnboardingCelebrationStep = // +1 because we want to show the celebration confetti after the last step getRuntimeConfig().maxOnboardingFreeAvailable + 1; - const bottomBannerSubscriptionLinkRef = useGaViewPing({ - category: "Purchase Button", - label: "profile-bottom-promo", - }); const setCustomDomainLinkRef = useGaViewPing({ category: "Purchase Button", label: "profile-set-custom-domain", From 79b8482c8e78ee10025b657c6d04ce084db0f898 Mon Sep 17 00:00:00 2001 From: lloan alas Date: Wed, 22 Nov 2023 09:39:20 -0800 Subject: [PATCH 3/3] remove as we no longer need it --- frontend/public/images/woman-couch-left.svg | 69 --------------------- 1 file changed, 69 deletions(-) delete mode 100644 frontend/public/images/woman-couch-left.svg diff --git a/frontend/public/images/woman-couch-left.svg b/frontend/public/images/woman-couch-left.svg deleted file mode 100644 index 4c690c3adb..0000000000 --- a/frontend/public/images/woman-couch-left.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -