Merge pull request #4144 from mozilla/MPP-3589

MPP-3589 - Show news item for the holiday discount promo

frontend/pendingTranslations.ftl

@@ -94,6 +94,11 @@ profile-free-onboarding--addon-item-description-2 = Whenever you see an email ad
 
 ## 2023 Holiday promo
 
+whatsnew-holiday-promo-2023-news-snippet = This holiday season, get 20% off the price of 1 year of { -brand-name-relay-premium }. 
+whatsnew-holiday-promo-2023-news-heading = Get 20% off { -brand-name-relay-premium }
+whatsnew-holiday-promo-2023-news-content-description = This holiday season, get 20% off the price of 1 year of { -brand-name-relay-premium }. Just enter the promo code “HOLIDAY20” at checkout. Offer ends Dec 31, 2023.
+whatsnew-holiday-promo-2023-cta = Get 1 year of { -brand-name-relay-premium }
+
 holiday-promo-banner-protect-inbox = Protect your inbox for less 
 holiday-promo-banner-code-desc = Take 20% off { -brand-name-relay-premium }
 # Variables:

frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss

@@ -12,7 +12,7 @@
   }
 
   .content {
-    padding: $spacing-lg;
+    padding: $spacing-lg 0;
 
     h2 {
       @include text-title-2xs;

frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss

@@ -48,6 +48,12 @@
       padding: $spacing-xs 0;
       cursor: pointer;
 
+      // Forces news icon to be the same size regardless of image size
+      img {
+        max-width: 50px;
+        max-height: 50px;
+      }
+
       h3 {
         @include text-body-sm;
         font-weight: 500;

frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.tsx

@@ -39,6 +39,8 @@ import PremiumFinlandHero from "./images/premium-expansion-finland-hero.svg";
 import PremiumFinlandIcon from "./images/premium-expansion-finland-icon.svg";
 import PhoneMaskingHero from "./images/phone-masking-hero.svg";
 import PhoneMaskingIcon from "./images/phone-masking-icon.svg";
+import HolidayPromo2023Icon from "./images/holiday-promo-2023-news-icon.svg";
+import HolidayPromo2023Hero from "./images/holiday-promo-2023-news-hero.svg";
 import BundleHero from "./images/bundle-promo-hero.svg";
 import BundleIcon from "./images/bundle-promo-icon.svg";
 import OfferCountdownIcon from "./images/offer-countdown-icon.svg";
@@ -60,6 +62,7 @@ import { RuntimeData } from "../../../../hooks/api/runtimeData";
 import { isFlagActive } from "../../../../functions/waffle";
 import {
   getBundlePrice,
+  getPeriodicalPremiumSubscribeLink,
   isBundleAvailableInCountry,
   isPeriodicalPremiumAvailableInCountry,
   isPhonesAvailableInCountry,
@@ -334,6 +337,53 @@ export const WhatsNewMenu = (props: Props) => {
     entries.push(premiumInFinland);
   }
 
+  // Check if yearlyPlanLink should be generated based on runtimeData and availability
+  const yearlyPlanLink =
+    props.runtimeData &&
+    isPeriodicalPremiumAvailableInCountry(props.runtimeData)
+      ? getPeriodicalPremiumSubscribeLink(props.runtimeData, "yearly")
+      : undefined;
+
+  const yearlyPlanRefWithCoupon = `${yearlyPlanLink}&coupon=HOLIDAY20`;
+
+  const holidayPromo2023: WhatsNewEntry = {
+    title: l10n.getString("whatsnew-holiday-promo-2023-news-heading"),
+    snippet: l10n.getString("whatsnew-holiday-promo-2023-news-snippet"),
+    content: (
+      <WhatsNewContent
+        description={l10n.getString(
+          "whatsnew-holiday-promo-2023-news-content-description",
+        )}
+        heading={l10n.getString("whatsnew-holiday-promo-2023-news-heading")}
+        image={HolidayPromo2023Hero}
+        cta={
+          <Link href={yearlyPlanRefWithCoupon} legacyBehavior>
+            <span className={styles.cta}>
+              {l10n.getString("whatsnew-holiday-promo-2023-cta")}
+            </span>
+          </Link>
+        }
+      />
+    ),
+    icon: HolidayPromo2023Icon,
+    dismissal: useLocalDismissal(
+      `whatsnew-holiday_promo_2023_${props.profile.id}`,
+    ),
+    announcementDate: {
+      year: 2023,
+      month: 11,
+      day: 29,
+    },
+  };
+
+  // Check if the holiday promotion entry should be added to the entries array
+  if (
+    isFlagActive(props.runtimeData, "holiday_promo_2023") &&
+    isPeriodicalPremiumAvailableInCountry(props.runtimeData)
+  ) {
+    entries.push(holidayPromo2023);
+  }
+
   const premiumEuExpansion: WhatsNewEntry = {
     title: l10n.getString("whatsnew-feature-premium-expansion-eu-heading"),
     snippet: l10n.getString("whatsnew-feature-premium-expansion-eu-snippet"),