chore: Add Monitor Premium yearly plan

.env-dist

@@ -49,7 +49,7 @@ S3_BUCKET=
 # leave FXA_ENABLED empty to disable FXA
 FXA_ENABLED=
 NEXT_PUBLIC_FXA_SETTINGS_URL=https://accounts.stage.mozaws.net/settings
-FXA_SUBSCRIPTIONS_URL=https://accounts.stage.mozaws.net/subscriptions
+NEXT_PUBLIC_FXA_SUBSCRIPTIONS_URL=https://accounts.stage.mozaws.net/subscriptions
 
 OAUTH_CLIENT_ID=edd29a80019d61a1
 OAUTH_CLIENT_SECRET=get-this-from-groovecoder-or-fxmonitor-engineering
@@ -137,8 +137,9 @@ E2E_TEST_ACCOUNT_PASSWORD=
 NEXT_PUBLIC_PREMIUM_ENABLED=
 NEXT_PUBLIC_ONEREP_DATA_BROKER_COUNT=190
 # Link to start user on the subscription process. PREMIUM_ENABLED must be set to `true`.
-PREMIUM_PRODUCT_ID=prod_NErZh679W62lai
-PREMIUM_PLAN_ID_US=price_1MUNq0Kb9q6OnNsL4BoJgepf
+NEXT_PUBLIC_PREMIUM_PRODUCT_ID=prod_NErZh679W62lai
+NEXT_PUBLIC_PREMIUM_PLAN_ID_MONTHLY_US=price_1MUNq0Kb9q6OnNsL4BoJgepf
+NEXT_PUBLIC_PREMIUM_PLAN_ID_YEARLY_US=
 
 MONTHLY_SCANS_QUOTA=
 STATS_TOKEN=

src/app/(nextjs_migration)/(authenticated)/user/breaches/page.tsx

@@ -22,7 +22,6 @@ import ImageIconEmail from "../../../../../client/images/icon-email.svg";
 import { BreachesTable } from "../../../components/server/BreachesTable";
 import { getComponentAsString } from "../../../functions/server/getComponentAsString";
 import { getCountryCode } from "../../../../functions/server/getCountryCode";
-import { isUserSubscribed } from "../../../../functions/server/isUserSubscribed";
 import { getNonce } from "../../../functions/server/getNonce";
 
 export function generateMetadata() {
@@ -82,14 +81,6 @@ export default async function UserBreaches() {
     },
   });
 
-  type FxaSubscriptionResponse = {
-    subscriptions: Array<{
-      product_id: string;
-      plan_id: string;
-      status: "active";
-    }>;
-  };
-
   return (
     <>
       {/* These scripts predate the use of React and thus shouldn’t wait for
@@ -124,21 +115,6 @@ export default async function UserBreaches() {
       />
 
       <main data-partial="breaches">
-        {process.env.NEXT_PUBLIC_PREMIUM_ENABLED === "true" &&
-        !(await isUserSubscribed()) ? (
-          <section>
-            <a
-              className="button primary"
-              href={`${process.env.FXA_SUBSCRIPTIONS_URL!}/products/${process
-                .env.PREMIUM_PRODUCT_ID!}?plan=${process.env
-                .PREMIUM_PLAN_ID_US!}`}
-            >
-              Subscribe to Premium
-            </a>
-          </section>
-        ) : (
-          ""
-        )}
         <section>
           <header className="breaches-header">
             <h1

src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/automatic-remove/page.tsx

@@ -8,6 +8,7 @@ import React, { useState } from "react";
 import styles from "../dataBrokerProfiles.module.scss";
 import { Button } from "../../../../../../../../components/server/Button";
 import { useL10n } from "../../../../../../../../hooks/l10n";
+import getPremiumSubscriptionUrl from "../../../../../../../../functions/universal/getPremiumSubscriptionUrl";
 
 export default function AutomaticRemove() {
   const l10n = useL10n();
@@ -132,7 +133,9 @@ export default function AutomaticRemove() {
             </span>
             <Button
               variant="primary"
-              onClick={() => (window.location.href = "../../subscribed")} // TODO replace with final UI
+              href={getPremiumSubscriptionUrl({
+                type: selectedPlanIsYearly ? "yearly" : "monthly",
+              })}
             >
               {selectedPlanIsYearly
                 ? l10n.getString(

src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/manual-remove/ManualRemoveView.tsx

@@ -2,13 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { useL10n } from "../../../../../../../../hooks/l10n";
 import styles from "../dataBrokerProfiles.module.scss";
 import buttonStyles from "../../../../../../../../components/server/button.module.scss";
 import Link from "next/link";
+import { getL10n } from "../../../../../../../../functions/server/l10n";
 
 export const ManualRemoveView = () => {
-  const l10n = useL10n();
+  const l10n = getL10n();
 
   return (
     <div className={styles.main}>

src/app/components/client/PremiumUpsellDialog.tsx

@@ -14,6 +14,7 @@ import { Button } from "../server/Button";
 import { useL10n } from "../../hooks/l10n";
 import ModalImage from "../client/assets/premium-upsell-dialog-icon.svg";
 import styles from "./PremiumUpsellDialog.module.scss";
+import getPremiumSubscriptionUrl from "../../functions/universal/getPremiumSubscriptionUrl";
 
 export interface PremiumUpsellDialogProps {
   state: OverlayTriggerState;
@@ -80,11 +81,9 @@ function PremiumUpsellDialogContent() {
     },
   ];
 
-  const premiumSubscriptionUrl =
-    process.env.FXA_SUBSCRIPTIONS_URL &&
-    process.env.PREMIUM_PRODUCT_ID &&
-    process.env.PREMIUM_PLAN_ID_US &&
-    `${process.env.FXA_SUBSCRIPTIONS_URL}/products/${process.env.PREMIUM_PRODUCT_ID}?plan=${process.env.PREMIUM_PLAN_ID_US}`;
+  const premiumSubscriptionUrl = getPremiumSubscriptionUrl({
+    type: isMonthly ? "monthly" : "yearly",
+  });
 
   return (
     <div className={styles.modalContent}>

src/app/functions/server/isUserSubscribed.ts

@@ -37,8 +37,12 @@ export const isUserSubscribed = async () => {
       subscriptions = await result.json();
       for (const subscription of subscriptions.subscriptions) {
         if (
-          subscription.product_id === process.env.PREMIUM_PRODUCT_ID &&
-          subscription.plan_id === process.env.PREMIUM_PLAN_ID_US &&
+          subscription.product_id ===
+            process.env.NEXT_PUBLIC_PREMIUM_PRODUCT_ID &&
+          (subscription.plan_id ===
+            process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID_MONTHLY_US ||
+            subscription.plan_id ===
+              process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID_YEARLY_US) &&
           subscription.status === "active"
         ) {
           return true;

src/app/functions/universal/getPremiumSubscriptionUrl.ts

@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+interface GetPremiumSubscriptionUrlParams {
+  type: "monthly" | "yearly";
+}
+
+function getPremiumSubscriptionUrl({
+  type,
+}: GetPremiumSubscriptionUrlParams): string {
+  const subscriptionUrl = process.env.NEXT_PUBLIC_FXA_SUBSCRIPTIONS_URL;
+  const productId = process.env.NEXT_PUBLIC_PREMIUM_PRODUCT_ID;
+  const planId =
+    type === "monthly"
+      ? process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID_MONTHLY_US
+      : process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID_YEARLY_US;
+
+  if (!subscriptionUrl || !productId || !planId) {
+    return "";
+  }
+
+  return `${subscriptionUrl}/products/${productId}?plan=${planId}`;
+}
+
+export default getPremiumSubscriptionUrl;