From a0924c519e1335038d015c9f083eaac150ee4de9 Mon Sep 17 00:00:00 2001 From: Rafee Date: Tue, 21 Nov 2023 11:49:11 -0500 Subject: [PATCH 1/4] Holiday promo banner addition --- frontend/pendingTranslations.ftl | 7 ++ frontend/src/components/layout/Layout.tsx | 8 ++ .../holiday-promo-banner-pattern-desktop.svg | 9 ++ .../holiday-promo-banner-pattern-laptop.svg | 9 ++ .../holiday-promo-banner-pattern-mobile.svg | 9 ++ .../holiday-promo-banner-pattern-tablet.svg | 9 ++ .../topmessage/HolidayPromoBanner.module.scss | 105 ++++++++++++++++++ .../layout/topmessage/HolidayPromoBanner.tsx | 62 +++++++++++ frontend/src/hooks/api/runtimeData.ts | 1 + frontend/src/styles/tokens.scss | 1 + 10 files changed, 220 insertions(+) create mode 100644 frontend/src/components/layout/images/holiday-promo-banner-pattern-desktop.svg create mode 100644 frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg create mode 100644 frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg create mode 100644 frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg create mode 100644 frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss create mode 100644 frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx diff --git a/frontend/pendingTranslations.ftl b/frontend/pendingTranslations.ftl index b21c3dbb68..224e1ff833 100644 --- a/frontend/pendingTranslations.ftl +++ b/frontend/pendingTranslations.ftl @@ -91,3 +91,10 @@ profile-free-onboarding--addon-item-headline-1 = They work anywhere you need an profile-free-onboarding--addon-item-description-1 = Anywhere you need to enter an email, you can use a { -brand-name-relay } email mask. You can even generate new masks directly from your { -brand-name-firefox } password manager. profile-free-onboarding--addon-item-headline-2 = The { -brand-name-relay } extension makes it easy profile-free-onboarding--addon-item-description-2 = Whenever you see an email address field, the { -brand-name-firefox-relay } browser extension will autofill any email mask you want to use. No need to remember each mask! + +# 2023 Holiday promo + +holiday-promo-banner-desc = This holiday season take 20% off { -brand-name-relay-premium } +holiday-promo-banner-code-desc = Use code { $coupon_code } at checkout +holiday-promo-banner-cta-button = Get 1 year of { -brand-name-premium } +holiday-promo-banner-promo-expiry = offer ends Dec 18, 2023 diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index c72200bf0b..b634c4fc4e 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -30,6 +30,8 @@ import { RuntimeData } from "../../hooks/api/runtimeData"; import { useRouter } from "next/router"; import { isPhonesAvailableInCountry } from "../../functions/getPlan"; import { useL10n } from "../../hooks/l10n"; +import { HolidayPromoBanner } from "./topmessage/HolidayPromoBanner"; +import { isFlagActive } from "../../functions/waffle"; export type Props = { children: ReactNode; @@ -138,6 +140,11 @@ export const Layout = (props: Props) => { runtimeData={props.runtimeData} />
+ {isFlagActive(props.runtimeData, "holiday_promo_2023") && + (router.pathname === "/" || router.pathname === "/premium") && + !profiles.data?.[0] ? ( + + ) : null} {props.theme === "plain" ? ( PlainPageHeader ) : ( @@ -153,6 +160,7 @@ export const Layout = (props: Props) => { +
+ + + + + + + + diff --git a/frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg b/frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg new file mode 100644 index 0000000000..bc60bd595d --- /dev/null +++ b/frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg b/frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg new file mode 100644 index 0000000000..a829d7365d --- /dev/null +++ b/frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg b/frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg new file mode 100644 index 0000000000..86dcdeed0e --- /dev/null +++ b/frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss new file mode 100644 index 0000000000..b4f610426e --- /dev/null +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -0,0 +1,105 @@ +@import "../../../styles/tokens.scss"; +@import "~@mozilla-protocol/core/protocol/css/includes/lib"; + +$banner-gradient: linear-gradient( + 90.13deg, + $color-purple-90 -2.39%, + $color-purple-100 50.81%, + $color-purple-50 104% +); + +.wrapper { + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-md; + color: $color-white; + position: relative; + background-image: url("../images/holiday-promo-banner-pattern-mobile.svg"), + $banner-gradient; + background-repeat: no-repeat; + background-size: cover; + flex-direction: column; + gap: $spacing-md; + + @media screen and #{$mq-sm} { + flex-direction: row; + gap: $spacing-2xl; + background-image: url("../images/holiday-promo-banner-pattern-tablet.svg"), + $banner-gradient; + } + @media screen and #{$mq-md} { + gap: $layout-xl; + background-image: url("../images/holiday-promo-banner-pattern-laptop.svg"), + $banner-gradient; + } + @media screen and #{$mq-xl} { + background-image: url("../images/holiday-promo-banner-pattern-desktop.svg"), + $banner-gradient; + } + + .left-promo-container { + display: flex; + align-items: center; + flex-direction: column; + gap: $spacing-md; + + @media screen and #{$mq-sm} { + gap: 0; + } + @media screen and #{$mq-lg} { + flex-direction: row; + gap: $layout-xl; + } + } + + .promo-container { + text-align: center; + } + + .cta-button { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + background-color: $color-white; + padding: $spacing-sm $spacing-md; + border-radius: $border-radius-sm; + color: $color-purple-90; + font-weight: 700; + margin-bottom: $spacing-xs; + + &:hover { + cursor: pointer; + } + } + + .promo-code-expiry { + color: rgba($color-white, 0.7); + font-weight: 700; + + @include text-body-xs; + } + + .banner-pattern { + width: 100%; + position: absolute; + } + + .promo-text { + @include text-body-lg; + + font-family: $font-stack-base; + } + + .promo-text-bolded { + @include text-body-xl; + + font-weight: 700; + font-family: $font-stack-firefox; + + &.promo-desc { + display: block; + } + } +} diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx new file mode 100644 index 0000000000..55966cd1f1 --- /dev/null +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx @@ -0,0 +1,62 @@ +import Link from "next/link"; +import { useL10n } from "../../../hooks/l10n"; +import { Localized } from "../../Localized"; +import styles from "./HolidayPromoBanner.module.scss"; +import { RuntimeData } from "../../../hooks/api/runtimeData"; +import { + RuntimeDataWithPeriodicalPremiumAvailable, + getPeriodicalPremiumSubscribeLink, +} from "../../../functions/getPlan"; +type Props = { + runtimeData?: RuntimeData; +}; + +export const HolidayPromoBanner = (props: Props) => { + const l10n = useL10n(); + const coupon = "HOLIDAY2023"; + const subscribeLink = getPeriodicalPremiumSubscribeLink( + props.runtimeData as RuntimeDataWithPeriodicalPremiumAvailable, + "yearly", + ); + const subscriberLinkWithCoupon = `${subscribeLink}&coupon=${coupon}`; + + return ( + + ); +}; diff --git a/frontend/src/hooks/api/runtimeData.ts b/frontend/src/hooks/api/runtimeData.ts index 6b1fc358ff..efd7bd248a 100644 --- a/frontend/src/hooks/api/runtimeData.ts +++ b/frontend/src/hooks/api/runtimeData.ts @@ -15,6 +15,7 @@ export type FlagNames = | "mailing_list_announcement" | "premium_promo_banners" | "mask_redesign" + | "holiday_promo_2023" | "mobile_app"; type WaffleFlag = [FlagNames, boolean]; diff --git a/frontend/src/styles/tokens.scss b/frontend/src/styles/tokens.scss index 3596b26bdc..fa10f96449 100644 --- a/frontend/src/styles/tokens.scss +++ b/frontend/src/styles/tokens.scss @@ -25,6 +25,7 @@ $buttonFocusOutline: // Overwrite the Protocol colours with Nebula colours: // Purple: +$color-purple-100: #5015cd; $color-purple-90: #321c64; $color-purple-80: #45278d; $color-purple-70: #592acb; From b144b02985ec548e612a1e54de286131f93d259e Mon Sep 17 00:00:00 2001 From: Rafee Date: Wed, 22 Nov 2023 09:30:20 -0500 Subject: [PATCH 2/4] Added the final coupon and content updates --- frontend/pendingTranslations.ftl | 10 +++-- frontend/src/components/layout/Layout.tsx | 3 +- .../holiday-promo-banner-pattern-desktop.svg | 2 +- .../holiday-promo-banner-pattern-laptop.svg | 2 +- .../holiday-promo-banner-pattern-mobile.svg | 2 +- .../holiday-promo-banner-pattern-tablet.svg | 2 +- .../topmessage/HolidayPromoBanner.module.scss | 5 +-- .../layout/topmessage/HolidayPromoBanner.tsx | 41 +++++++++---------- 8 files changed, 34 insertions(+), 33 deletions(-) diff --git a/frontend/pendingTranslations.ftl b/frontend/pendingTranslations.ftl index 224e1ff833..5651720bbf 100644 --- a/frontend/pendingTranslations.ftl +++ b/frontend/pendingTranslations.ftl @@ -93,8 +93,12 @@ profile-free-onboarding--addon-item-headline-2 = The { -brand-name-relay } exten profile-free-onboarding--addon-item-description-2 = Whenever you see an email address field, the { -brand-name-firefox-relay } browser extension will autofill any email mask you want to use. No need to remember each mask! # 2023 Holiday promo +# Variables: +# $couponCode (string) - the coupon code. +# $couponExpiryDate (string) - the coupon expiry date, for example, Dec 31, 2023. -holiday-promo-banner-desc = This holiday season take 20% off { -brand-name-relay-premium } -holiday-promo-banner-code-desc = Use code { $coupon_code } at checkout +holiday-promo-banner-protect-inbox = Protect your inbox for less +holiday-promo-banner-code-desc = Take 20% off { -brand-name-relay-premium } +holiday-promo-banner-code-usage = Use code { $couponCode } at checkout holiday-promo-banner-cta-button = Get 1 year of { -brand-name-premium } -holiday-promo-banner-promo-expiry = offer ends Dec 18, 2023 +holiday-promo-banner-promo-expiry = offer ends { $couponExpiryDate } diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index b634c4fc4e..a8e0423e60 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -51,6 +51,7 @@ export const Layout = (props: Props) => { const hasPremium: boolean = profiles.data?.[0].has_premium ?? false; const usersData = useUsers().data?.[0]; const [mobileMenuExpanded, setMobileMenuExpanded] = useState(false); + const profile = profiles.data?.[0]; useEffect(() => { makeToast(l10n, usersData); @@ -142,7 +143,7 @@ export const Layout = (props: Props) => {
{isFlagActive(props.runtimeData, "holiday_promo_2023") && (router.pathname === "/" || router.pathname === "/premium") && - !profiles.data?.[0] ? ( + !profile ? ( ) : null} {props.theme === "plain" ? ( diff --git a/frontend/src/components/layout/images/holiday-promo-banner-pattern-desktop.svg b/frontend/src/components/layout/images/holiday-promo-banner-pattern-desktop.svg index cb73498fc3..f5b4ffbe9d 100644 --- a/frontend/src/components/layout/images/holiday-promo-banner-pattern-desktop.svg +++ b/frontend/src/components/layout/images/holiday-promo-banner-pattern-desktop.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg b/frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg index bc60bd595d..3a3d27964b 100644 --- a/frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg +++ b/frontend/src/components/layout/images/holiday-promo-banner-pattern-laptop.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg b/frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg index a829d7365d..52b17ef1c7 100644 --- a/frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg +++ b/frontend/src/components/layout/images/holiday-promo-banner-pattern-mobile.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg b/frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg index 86dcdeed0e..affff03faf 100644 --- a/frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg +++ b/frontend/src/components/layout/images/holiday-promo-banner-pattern-tablet.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss index b4f610426e..6ed2fedee0 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -71,6 +71,7 @@ $banner-gradient: linear-gradient( &:hover { cursor: pointer; + opacity: 0.9; } } @@ -97,9 +98,5 @@ $banner-gradient: linear-gradient( font-weight: 700; font-family: $font-stack-firefox; - - &.promo-desc { - display: block; - } } } diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx index 55966cd1f1..d45f2eb260 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx @@ -4,8 +4,8 @@ import { Localized } from "../../Localized"; import styles from "./HolidayPromoBanner.module.scss"; import { RuntimeData } from "../../../hooks/api/runtimeData"; import { - RuntimeDataWithPeriodicalPremiumAvailable, getPeriodicalPremiumSubscribeLink, + isPeriodicalPremiumAvailableInCountry, } from "../../../functions/getPlan"; type Props = { runtimeData?: RuntimeData; @@ -13,34 +13,31 @@ type Props = { export const HolidayPromoBanner = (props: Props) => { const l10n = useL10n(); - const coupon = "HOLIDAY2023"; - const subscribeLink = getPeriodicalPremiumSubscribeLink( - props.runtimeData as RuntimeDataWithPeriodicalPremiumAvailable, - "yearly", - ); + const coupon = "HOLIDAY20"; + const couponExpiry = "Dec 31, 2023"; + const subscribeLink = isPeriodicalPremiumAvailableInCountry(props.runtimeData) + ? getPeriodicalPremiumSubscribeLink(props.runtimeData, "yearly") + : null; + if (!subscribeLink) { + return null; + } const subscriberLinkWithCoupon = `${subscribeLink}&coupon=${coupon}`; return (
- - ), - }} - > -

- +

+ {l10n.getString("holiday-promo-banner-protect-inbox")} +

+

+ {l10n.getString("holiday-promo-banner-code-desc")} +

, }} @@ -54,7 +51,9 @@ export const HolidayPromoBanner = (props: Props) => { {l10n.getString("holiday-promo-banner-cta-button")}

- {l10n.getString("holiday-promo-banner-promo-expiry")} + {l10n.getString("holiday-promo-banner-promo-expiry", { + couponExpiryDate: couponExpiry, + })}

From 401d80dc578666ee41daa6881b9cbae34fe3cf3b Mon Sep 17 00:00:00 2001 From: Rafee Date: Wed, 22 Nov 2023 11:01:15 -0500 Subject: [PATCH 3/4] Fixed bug where the banner shows up for a split second for signed in users --- frontend/src/components/layout/Layout.tsx | 9 +++++---- .../layout/topmessage/HolidayPromoBanner.tsx | 13 ++++++++++++- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index a8e0423e60..9fc1ef3a1c 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -51,7 +51,6 @@ export const Layout = (props: Props) => { const hasPremium: boolean = profiles.data?.[0].has_premium ?? false; const usersData = useUsers().data?.[0]; const [mobileMenuExpanded, setMobileMenuExpanded] = useState(false); - const profile = profiles.data?.[0]; useEffect(() => { makeToast(l10n, usersData); @@ -142,9 +141,11 @@ export const Layout = (props: Props) => { />
{isFlagActive(props.runtimeData, "holiday_promo_2023") && - (router.pathname === "/" || router.pathname === "/premium") && - !profile ? ( - + (router.pathname === "/" || router.pathname === "/premium") ? ( + ) : null} {props.theme === "plain" ? ( PlainPageHeader diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx index d45f2eb260..04f7a949dc 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx @@ -7,20 +7,31 @@ import { getPeriodicalPremiumSubscribeLink, isPeriodicalPremiumAvailableInCountry, } from "../../../functions/getPlan"; +import { ProfileData } from "../../../hooks/api/profile"; +import { useEffect, useState } from "react"; + type Props = { + profile?: ProfileData; runtimeData?: RuntimeData; }; export const HolidayPromoBanner = (props: Props) => { const l10n = useL10n(); + const [loadingProfile, setLoadingProfile] = useState(true); const coupon = "HOLIDAY20"; const couponExpiry = "Dec 31, 2023"; const subscribeLink = isPeriodicalPremiumAvailableInCountry(props.runtimeData) ? getPeriodicalPremiumSubscribeLink(props.runtimeData, "yearly") : null; - if (!subscribeLink) { + + useEffect(() => { + setLoadingProfile(false); + }, [props.profile]); + + if (loadingProfile || !subscribeLink || props.profile) { return null; } + const subscriberLinkWithCoupon = `${subscribeLink}&coupon=${coupon}`; return ( From 37688dddbe42c754d842c42198f5b0be4a9840e8 Mon Sep 17 00:00:00 2001 From: Rafee Date: Wed, 22 Nov 2023 12:03:12 -0500 Subject: [PATCH 4/4] Added profile loading check, coupon expiry check, and removed non-nebula token --- frontend/pendingTranslations.ftl | 9 ++++---- frontend/src/components/layout/Layout.tsx | 1 + .../topmessage/HolidayPromoBanner.module.scss | 4 +++- .../layout/topmessage/HolidayPromoBanner.tsx | 21 +++++++------------ frontend/src/styles/tokens.scss | 1 - 5 files changed, 16 insertions(+), 20 deletions(-) diff --git a/frontend/pendingTranslations.ftl b/frontend/pendingTranslations.ftl index 5651720bbf..ea9d208b0d 100644 --- a/frontend/pendingTranslations.ftl +++ b/frontend/pendingTranslations.ftl @@ -92,13 +92,12 @@ profile-free-onboarding--addon-item-description-1 = Anywhere you need to enter a profile-free-onboarding--addon-item-headline-2 = The { -brand-name-relay } extension makes it easy profile-free-onboarding--addon-item-description-2 = Whenever you see an email address field, the { -brand-name-firefox-relay } browser extension will autofill any email mask you want to use. No need to remember each mask! -# 2023 Holiday promo -# Variables: -# $couponCode (string) - the coupon code. -# $couponExpiryDate (string) - the coupon expiry date, for example, Dec 31, 2023. +## 2023 Holiday promo holiday-promo-banner-protect-inbox = Protect your inbox for less holiday-promo-banner-code-desc = Take 20% off { -brand-name-relay-premium } +# Variables: +# $couponCode (string) - the coupon code. holiday-promo-banner-code-usage = Use code { $couponCode } at checkout holiday-promo-banner-cta-button = Get 1 year of { -brand-name-premium } -holiday-promo-banner-promo-expiry = offer ends { $couponExpiryDate } +holiday-promo-banner-promo-expiry = offer ends Dec 31, 2023 diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index 9fc1ef3a1c..d669558461 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -143,6 +143,7 @@ export const Layout = (props: Props) => { {isFlagActive(props.runtimeData, "holiday_promo_2023") && (router.pathname === "/" || router.pathname === "/premium") ? ( diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss index 6ed2fedee0..46583f6953 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -1,10 +1,11 @@ @import "../../../styles/tokens.scss"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +// Hardcoding #5015cd after talking with design, no token for this color exists yet in Nebula. $banner-gradient: linear-gradient( 90.13deg, $color-purple-90 -2.39%, - $color-purple-100 50.81%, + #5015cd 50.81%, $color-purple-50 104% ); @@ -78,6 +79,7 @@ $banner-gradient: linear-gradient( .promo-code-expiry { color: rgba($color-white, 0.7); font-weight: 700; + display: block; @include text-body-xs; } diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx index 04f7a949dc..916aed28cb 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.tsx @@ -8,27 +8,24 @@ import { isPeriodicalPremiumAvailableInCountry, } from "../../../functions/getPlan"; import { ProfileData } from "../../../hooks/api/profile"; -import { useEffect, useState } from "react"; type Props = { + isLoading: boolean; profile?: ProfileData; runtimeData?: RuntimeData; }; export const HolidayPromoBanner = (props: Props) => { const l10n = useL10n(); - const [loadingProfile, setLoadingProfile] = useState(true); const coupon = "HOLIDAY20"; - const couponExpiry = "Dec 31, 2023"; const subscribeLink = isPeriodicalPremiumAvailableInCountry(props.runtimeData) ? getPeriodicalPremiumSubscribeLink(props.runtimeData, "yearly") : null; + const todaysDate = new Date(); + const expiryDate = new Date("December 31, 2023"); + const isPastExpiry = todaysDate > expiryDate; - useEffect(() => { - setLoadingProfile(false); - }, [props.profile]); - - if (loadingProfile || !subscribeLink || props.profile) { + if (props.isLoading || !subscribeLink || props.profile || isPastExpiry) { return null; } @@ -61,11 +58,9 @@ export const HolidayPromoBanner = (props: Props) => { {l10n.getString("holiday-promo-banner-cta-button")} -

- {l10n.getString("holiday-promo-banner-promo-expiry", { - couponExpiryDate: couponExpiry, - })} -

+ + {l10n.getString("holiday-promo-banner-promo-expiry")} +
); diff --git a/frontend/src/styles/tokens.scss b/frontend/src/styles/tokens.scss index fa10f96449..3596b26bdc 100644 --- a/frontend/src/styles/tokens.scss +++ b/frontend/src/styles/tokens.scss @@ -25,7 +25,6 @@ $buttonFocusOutline: // Overwrite the Protocol colours with Nebula colours: // Purple: -$color-purple-100: #5015cd; $color-purple-90: #321c64; $color-purple-80: #45278d; $color-purple-70: #592acb;