Merge pull request #5879 from mozilla/mntor-4288

Bundle: Landing Page Pricing Grid (MNTOR-4288)

Author: flozia

.env

@@ -122,26 +122,30 @@ E2E_TEST_PAYPAL_PASSWORD=
 # Link to start user on the subscription process. PREMIUM_ENABLED must be set to `true`.
 SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US=13.37
 SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US=42.42
+SUBSCRIPTION_BILLING_AMOUNT_BUNDLE_INDIVIDUAL_MONTHLY_US=424
+SUBSCRIPTION_BILLING_AMOUNT_BUNDLE_MONTHLY_US=42
 
 # SubPlat 2.0 URL, product and plan IDs, used for Plus subscriptions:
 FXA_SUBSCRIPTIONS_URL=https://accounts.stage.mozaws.net/subscriptions
 PREMIUM_PRODUCT_ID=prod_NErZh679W62lai
 PREMIUM_PLAN_ID_MONTHLY_US=price_1MUNq0Kb9q6OnNsL4BoJgepf
 PREMIUM_PLAN_ID_YEARLY_US=price_1NvqawKb9q6OnNsLRTnYrtrV
+PREMIUM_PLAN_ID_BUNDLE_US=price_bundle
 
 # SubPlat 3.0 URL and offering ID, used for Plus subscriptions:
 SUBPLAT_SUBSCRIPTIONS_URL=https://payments-next.stage.fxa.nonprod.webservices.mozgcp.net
 SUBPLAT_MONITOR_OFFERING_ID=monitorplusstage
 
+# Mozilla privacy product URLs
+FIREFOX_RELAY_LANDING_URL=https://monitor-stage.allizom.org
+MOZILLA_VPN_LANDING_URL=https://www-dev.allizom.org/products/vpn
+
 # This date is used to direct users who signed up after data broker scanning
 # was released to the welcome flow. Users who had signed up before and thus
 # have seen data breach results before, will be able to see their known breaches
 # first:
 BROKER_SCAN_RELEASE_DATE=2024-02-06
 
-FIREFOX_RELAY_LANDING_URL=https://monitor-stage.allizom.org
-MOZILLA_VPN_LANDING_URL=https://www-dev.allizom.org/products/vpn
-
 MONTHLY_SUBSCRIBERS_QUOTA=
 MONTHLY_SCANS_QUOTA=
 STATS_TOKEN=

.env.local.example

@@ -50,6 +50,8 @@ EMAIL_FROM="Mozilla Monitor Stage <[email protected]>"
 NEXT_PUBLIC_GA4_DEBUG_MODE=true
 SUBSCRIPTION_BILLING_AMOUNT_YEARLY_US=13.37
 SUBSCRIPTION_BILLING_AMOUNT_MONTHLY_US=42.42
+SUBSCRIPTION_BILLING_AMOUNT_BUNDLE_INDIVIDUAL_MONTHLY_US=424
+SUBSCRIPTION_BILLING_AMOUNT_BUNDLE_MONTHLY_US=42
 
 # HIBP setup
 HIBP_KANON_API_ROOT=https://enterprise.stage-api.haveibeenpwned.com
@@ -63,6 +65,7 @@ FXA_SUBSCRIPTIONS_URL=https://accounts.stage.mozaws.net/subscriptions
 PREMIUM_PRODUCT_ID=prod_NErZh679W62lai
 PREMIUM_PLAN_ID_MONTHLY_US=price_1MUNq0Kb9q6OnNsL4BoJgepf
 PREMIUM_PLAN_ID_YEARLY_US=price_1NvqawKb9q6OnNsLRTnYrtrV
+PREMIUM_PLAN_ID_BUNDLE_US=price_bundle
 
 # SubPlat 3.0 URL and offering ID, used for Plus subscriptions:
 SUBPLAT_SUBSCRIPTIONS_URL=https://payments-next.stage.fxa.nonprod.webservices.mozgcp.net
@@ -78,6 +81,10 @@ OAUTH_PROFILE_URI=https://profile.stage.mozaws.net/v1/profile
 OAUTH_TOKEN_URI=https://oauth.stage.mozaws.net/v1/token
 OAUTH_ACCOUNT_URI=https://oauth.stage.mozaws.net/v1
 
+# Mozilla privacy product URLs
+FIREFOX_RELAY_LANDING_URL=https://monitor-stage.allizom.org
+MOZILLA_VPN_LANDING_URL=https://www-dev.allizom.org/products/vpn
+
 # Which environment to run end-to-end tests against:
 E2E_TEST_ENV=local
 E2E_TEST_BASE_URL=http://localhost:6060
@@ -94,7 +101,3 @@ GCP_PUBSUB_PROJECT_ID=your-project-name
 GCP_PUBSUB_TOPIC_NAME=hibp-breaches
 GCP_PUBSUB_SUBSCRIPTION_NAME=hibp-cron
 PUBSUB_EMULATOR_HOST=localhost:8085
-
-# Mozilla privacy product URLs
-FIREFOX_RELAY_LANDING_URL=https://monitor-stage.allizom.org
-MOZILLA_VPN_LANDING_URL=https://www-dev.allizom.org/products/vpn

.github/workflows/e2e_pr_full.yml

@@ -89,6 +89,7 @@ jobs:
           PREMIUM_PRODUCT_ID: ${{ secrets.STAGE_PREMIUM_PRODUCT_ID }}
           PREMIUM_PLAN_ID_MONTHLY_US: ${{ secrets.STAGE_PREMIUM_PLAN_ID_MONTHLY_US }}
           PREMIUM_PLAN_ID_YEARLY_US: ${{ secrets.STAGE_PREMIUM_PLAN_ID_YEARLY_US }}
+          PREMIUM_PLAN_ID_BUNDLE_US: ${{ secrets.STAGE_PREMIUM_PLAN_ID_BUNDLE_US }}
           REDIS_URL: "redis://redis.mock"
       - uses: actions/upload-artifact@v4
         if: always()

locales-pending/bundle.ftl

@@ -5,6 +5,7 @@
 -brand-vpn = VPN
 -brand-relay-new = Relay
 -brand-relay-premium = Relay Premium
+-product-name-privacy-products-bundle = Privacy Protection Plan
 
 bundle-onboarding-title = You’re ready to <gradient>protect your privacy.</gradient>
 bundle-onboarding-subtitle = Go to each tool to get started.

locales-pending/landing-redesign-experiment.ftl

@@ -53,12 +53,73 @@ landing-redesign-info-block-cta-label = Get your free scan
 
 landing-redesign-pricing-plans-section-title = Choose your level of protection
 landing-redesign-pricing-plans-section-description = Your privacy is our priority, so data breach monitoring is always free. For more robust protection, { -brand-monitor-plus } includes continuous automatic removal of your personal information.
+landing-redesign-pricing-plans-bundle-section-description = 30-day money-back guarantee (first-time customers only)
 landing-redesign-pricing-plans-cards-title = Pricing plans
 
+landing-redesign-pricing-plans-card-cta-monthly-billing-label = Billed monthly
+# Variables:
+#   $yearlyPrice (string) - annual plan’s price in total, including currency, e.g. "$13.37"
+landing-redesign-pricing-plans-card-cta-yearly-billing-label = { $yearlyPrice } billed yearly
+# There is not much room in the UI for this string:
+# Abbreviating “month” with “mo”.
+# Variables:
+#   $monthlyPrice (string) - monthly plan’s price, including currency, e.g. "$13.37"
+landing-redesign-pricing-plans-card-cta-monthly = { $monthlyPrice }/mo
+landing-redesign-pricing-plans-card-cta-label = Get started
+
+# Variables:
+# $discountPercentage is the percentage you can save subscribing to the bundle plan
+landing-redesign-pricing-plans-card-bundle-label = Best value, save { $discountPercentage }%
+landing-redesign-pricing-plans-card-bundle-title = { -product-name-privacy-products-bundle }
+landing-redesign-pricing-plans-card-bundle-subtitle = 3 privacy tools, 1 price
+landing-redesign-pricing-plans-bundle-item-mozilla-vpn-title = { -brand-mozilla-vpn }
+landing-redesign-pricing-plans-bundle-item-mozilla-vpn-description = Online activity protection
+landing-redesign-pricing-plans-bundle-item-monitor-plus-title = { -brand-monitor-plus }
+landing-redesign-pricing-plans-bundle-item-monitor-plus-description = Data broker protection
+landing-redesign-pricing-plans-bundle-item-relay-premium-title = { -brand-relay-premium }
+landing-redesign-pricing-plans-bundle-item-relay-premium-description = Unlimited email masks for spam protection
+
 landing-redesign-pricing-plans-card-plus-label = Recommended
 landing-redesign-pricing-plans-card-plus-title = { -brand-monitor-plus }
 landing-redesign-pricing-plans-card-plus-subtitle = Automatic data removal requests
 landing-redesign-pricing-plans-card-plus-cta-label = Get { -brand-monitor-plus }
+landing-redesign-pricing-plans-card-plus-with-bundle-included-features-label = Everything in { -brand-monitor }
+
+landing-redesign-pricing-plans-card-plus-with-bundle-subtitle = Automatic personal info removal
+landing-redesign-pricing-plans-card-plus-with-bundle-feature-item-alt-label = Includes
+# Variables:
+# $data_broker_sites_total_num is the total number of data broker sites available to scan. It will always be more than 1.
+landing-redesign-pricing-plans-card-plus-with-bundle-feature-item-one = {
+  $data_broker_sites_total_num ->
+    *[other] <b>Monthly scans</b> of { $data_broker_sites_total_num }+ data brokers that may be selling your personal info
+}
+landing-redesign-pricing-plans-card-plus-with-bundle-feature-item-two = <b>Automatic removal</b> of personal info from data broker sites
+landing-redesign-pricing-plans-card-plus-with-bundle-feature-item-three = Receive <b>data broker exposure alerts</b>
+# Variables:
+# $max_email_addresses is the max number of email addresses that can be monitored for breaches. It will always be more than 1.
+landing-redesign-pricing-plans-card-plus-with-bundle-feature-item-four = {
+  $max_email_addresses ->
+    *[other] Breach alert monitoring for <b>{ $max_email_addresses } email addresses</b>
+}
+
+landing-redesign-pricing-plans-card-free-with-bundle-subtitle = Free data breach alerts
+# Variables:
+# $data_broker_sites_total_num is the total number of data broker sites available to scan. It will always be more than 1.
+landing-redesign-pricing-plans-card-free-with-bundle-feature-item-one = {
+  $data_broker_sites_total_num ->
+    *[other] <b>One-time scan</b> of { $data_broker_sites_total_num }+ data brokers that may be selling your personal info
+}
+landing-redesign-pricing-plans-card-free-with-bundle-feature-item-two = <b>Guided manual removal</b> of personal info from data broker sites
+landing-redesign-pricing-plans-card-free-with-bundle-feature-item-three = <b>Continuous monitoring</b> for data broker exposures and data breaches
+landing-redesign-pricing-plans-card-free-with-bundle-feature-item-four = Receive <b>data breach exposure alerts</b>
+# Variables:
+# $max_email_addresses is the max number of email addresses that can be monitored for breaches. It will always be more than 1.
+landing-redesign-pricing-plans-card-free-with-bundle-feature-item-five = {
+  $max_email_addresses ->
+    *[other] Breach alert monitoring for <b>{ $max_email_addresses } email addresses</b>
+}
+landing-redesign-pricing-plans-card-free-with-bundle-price-label = Free
+
 # Variables:
 # $data_broker_sites_total_num is the total number of data broker sites available to scan. It will always be more than 1.
 landing-redesign-pricing-plans-card-plus-feature-item-one = {

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.tsx

@@ -104,7 +104,7 @@ function MonitoredEmail(props: {
           >
             {l10n.getString("settings-resend-email-verification-link")}
             {isVerificationEmailResent && (
-              <CheckIcon alt="" width={14} height={14} />
+              <CheckIcon alt="" width={24} height={24} />
             )}
           </Button>
         </div>

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfoRedesign.tsx

@@ -92,7 +92,7 @@ function MonitoredEmail(props: {
             }}
           >
             {isVerificationEmailResent ? (
-              <CheckIcon alt="" width={14} height={14} />
+              <CheckIcon alt="" width={24} height={24} />
             ) : (
               <LinkIcon alt="" />
             )}

src/app/(proper_react)/(redesign)/(public)/FreeScanCta.tsx

@@ -16,11 +16,17 @@ import { AccountsMetricsFlowContext } from "../../../../contextProviders/account
 import { getFreeScanSearchParams } from "../../../functions/universal/getFreeScanSearchParams";
 import { CONST_URL_MONITOR_LANDING_PAGE_ID } from "../../../../constants";
 import { useViewTelemetry } from "../../../hooks/useViewTelemetry";
+import {
+  ButtonColorThemes,
+  ButtonVariants,
+} from "../../../components/client/Button";
 
 export const FreeScanCta = (
   props: Props & {
     experimentData: ExperimentData["Features"];
     showCtaOnly?: boolean;
+    ctaButtonVariant?: ButtonVariants;
+    ctaButtonTheme?: ButtonColorThemes;
   },
 ) => {
   const l10n = useL10n();
@@ -63,7 +69,8 @@ export const FreeScanCta = (
     <div>
       <TelemetryButton
         buttonRef={refViewTelemetry as RefObject<HTMLButtonElement | null>}
-        variant="primary"
+        variant={props.ctaButtonVariant ?? "primary"}
+        theme={props.ctaButtonTheme}
         event={{
           module: "ctaButton",
           name: "click",

src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/LandingViewRedesign.stories.tsx

@@ -80,3 +80,31 @@ export const LandingRedesignUsScanLimit: Story = {
     scanLimitReached: true,
   },
 };
+
+export const LandingRedesignUsWithPrivacyProductBundle: Story = {
+  name: "US visitors - With Privacy Product Bundle",
+  args: {
+    eligibleForPremium: true,
+    countryCode: "us",
+    scanLimitReached: false,
+    enabledFeatureFlags: ["LandingPageRedesign", "PrivacyProductsBundle"],
+    bundleProductUrl: {
+      relay: process.env.FIREFOX_RELAY_LANDING_URL ?? "",
+      vpn: process.env.MOZILLA_VPN_LANDING_URL ?? "",
+    },
+  },
+};
+
+export const LandingRedesignUsScanLimitWithPrivacyProductBundle: Story = {
+  name: "US visitors - Scan limit reached and with Privacy Product Bundle",
+  args: {
+    eligibleForPremium: true,
+    countryCode: "us",
+    scanLimitReached: true,
+    enabledFeatureFlags: ["LandingPageRedesign", "PrivacyProductsBundle"],
+    bundleProductUrl: {
+      relay: process.env.FIREFOX_RELAY_LANDING_URL ?? "",
+      vpn: process.env.MOZILLA_VPN_LANDING_URL ?? "",
+    },
+  },
+};