Merge branch 'main' into dependabot/npm_and_yarn/stylelint-7e83b71fdd

mansaj · web-flow · commit b47a34d6b97a · 2025-10-14T10:21:23.000-07:00
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx
@@ -372,6 +372,37 @@ it("shows chart tooltip on the action needed tab, non-US user", async () => {
   expect(dialogContentPart).toBeInTheDocument();
 });
 
+it("shows chart tooltip on the action needed tab, non-US user (feature flag IncreasedFreeMaxBreachEmails)", async () => {
+  const user = userEvent.setup();
+  const ComposedDashboard = composeStory(DashboardNonUsNoBreaches, Meta);
+  render(
+    <ComposedDashboard
+      enabledFeatureFlags={["IncreasedFreeMaxBreachEmails"]}
+    />,
+  );
+
+  const chartCaption = screen.getByText(
+    "This chart shows how many times your info is actively exposed.",
+  );
+  expect(chartCaption).toBeInTheDocument();
+  const chartTooltip = within(chartCaption).getByRole("button", {
+    name: "Open modal",
+  });
+  expect(chartTooltip).toBeInTheDocument();
+  await user.click(chartTooltip);
+
+  expect(
+    screen.getByRole("dialog", {
+      name: "About your number of active exposures",
+    }),
+  ).toBeInTheDocument();
+
+  const dialogContentPart = screen.getByText(
+    "This chart includes the total number of times we found each type of data exposed across all data breaches for up to ⁨20⁩ email addresses that you are currently monitoring.",
+  );
+  expect(dialogContentPart).toBeInTheDocument();
+});
+
 it("shows chart tooltip on the fixed tab, non-US user", async () => {
   const user = userEvent.setup();
   const ComposedDashboard = composeStory(DashboardNonUsNoBreaches, Meta);
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx
@@ -21,11 +21,16 @@ import { useL10n } from "../../../../../../hooks/l10n";
 import { ModalOverlay } from "../../../../../../components/client/dialog/ModalOverlay";
 import { Dialog } from "../../../../../../components/client/dialog/Dialog";
 import { type onAddEmail } from "./actions";
-import { CONST_MAX_NUM_ADDRESSES } from "../../../../../../../constants";
+import {
+  CONST_MAX_NUM_ADDRESSES,
+  CONST_MAX_NUM_ADDRESSES_PLUS,
+} from "../../../../../../../constants";
 import { useTelemetry } from "../../../../../../hooks/useTelemetry";
+import { FeatureFlagName } from "../../../../../../../db/tables/featureFlags";
 
 export type Props = {
   onAddEmail: typeof onAddEmail;
+  enabledFeatureFlags: FeatureFlagName[];
 };
 
 export const EmailAddressAdder = (props: Props) => {
@@ -124,7 +129,11 @@ const EmailAddressAddForm = (props: Props) => {
     <>
       <p>
         {l10n.getString("add-email-your-account-includes", {
-          total: CONST_MAX_NUM_ADDRESSES,
+          total: props.enabledFeatureFlags.includes(
+            "IncreasedFreeMaxBreachEmails",
+          )
+            ? CONST_MAX_NUM_ADDRESSES_PLUS
+            : CONST_MAX_NUM_ADDRESSES,
         })}
       </p>
       <form
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsPageRedesign.test.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsPageRedesign.test.tsx
@@ -25,6 +25,7 @@ import {
   SettingsEditYourInfo,
   SettingsEditYourInfoAdditionalMonitoredEmails,
   SettingsEditYourInfoMaxMonitoredEmails,
+  SettingsEditYourInfoMaxMonitoredEmailsIncreased,
 } from "./stories/SettingsEditInfoNonUsUsers.stories";
 import { mockedActions } from "./stories/SettingsStoryWrapper";
 
@@ -70,6 +71,25 @@ describe("Settings page redesign", () => {
       expect(maxEmailsIndicator).toBeInTheDocument();
     });
 
+    it("shows the max increased number of emails that can be added to the list of addresses to monitor for breaches", () => {
+      const ComposedStory = composeStory(
+        SettingsEditYourInfo,
+        SettingsEditYourInfoMeta,
+      );
+      render(
+        <ComposedStory
+          enabledFeatureFlags={[
+            "SidebarNavigationRedesign",
+            "EditScanProfileDetails",
+            "IncreasedFreeMaxBreachEmails",
+          ]}
+        />,
+      );
+
+      const maxEmailsIndicator = screen.getByText("Add up to ⁨20⁩");
+      expect(maxEmailsIndicator).toBeInTheDocument();
+    });
+
     it("adds an email to the list of addresses to monitor for breaches", async () => {
       mockedActions.onAddEmail.mockResolvedValue({
         success: true,
@@ -244,6 +264,19 @@ describe("Settings page redesign", () => {
       });
       expect(addEmailButton).not.toBeInTheDocument();
     });
+
+    it("does not show the option to add email addresses when the max increased number of email addresses have been added", () => {
+      const ComposedStory = composeStory(
+        SettingsEditYourInfoMaxMonitoredEmailsIncreased,
+        SettingsEditYourInfoMeta,
+      );
+      render(<ComposedStory />);
+
+      const addEmailButton = screen.queryByRole("button", {
+        name: "Add email address",
+      });
+      expect(addEmailButton).not.toBeInTheDocument();
+    });
   });
 
   describe("Edit your info (US users)", () => {
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/actions.ts b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/actions.ts
@@ -35,6 +35,7 @@ import { updateOnerepDataBrokerScanProfile } from "../../../../../../functions/s
 import { hasPremium } from "../../../../../../functions/universal/user";
 import { type NormalizedProfileData } from "./panels/SettingsPanelEditProfile/EditProfileForm";
 import { OnerepUsPhoneNumber } from "../../../../../../functions/server/onerep";
+import { getEnabledFeatureFlags } from "../../../../../../../db/tables/featureFlags";
 
 export type AddEmailFormState =
   | { success?: never }
@@ -90,9 +91,16 @@ export async function onAddEmail(
     };
   }
 
-  const maxNumEmailAddresses = hasPremium(subscriber)
+  const enabledFeatureFlags = await getEnabledFeatureFlags({
+    email: subscriber.primary_email,
+  });
+  const maxNumEmailAddresses = enabledFeatureFlags.includes(
+    "IncreasedFreeMaxBreachEmails",
+  )
     ? CONST_MAX_NUM_ADDRESSES_PLUS
-    : CONST_MAX_NUM_ADDRESSES;
+    : hasPremium(subscriber)
+      ? CONST_MAX_NUM_ADDRESSES_PLUS
+      : CONST_MAX_NUM_ADDRESSES;
   const existingAddresses = [session.user.email]
     .concat(subscriber.email_addresses.map((emailRow) => emailRow.email))
     .map((address) => address.toLowerCase());
@@ -116,6 +124,7 @@ export async function onAddEmail(
     const unverifiedSubscriber = await addSubscriberUnverifiedEmailHash(
       subscriber,
       validatedEmailAddress.email,
+      enabledFeatureFlags,
     );
 
     await initEmail();
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfo.tsx
@@ -20,6 +20,7 @@ import { useTelemetry } from "../../../../../../../hooks/useTelemetry";
 import { Button } from "../../../../../../../components/client/Button";
 import styles from "./SettingsPanelEditInfo.module.scss";
 import { type onRemoveEmail, type onAddEmail } from "../actions";
+import { FeatureFlagName } from "../../../../../../../../db/tables/featureFlags";
 
 export type SettingsPanelEditInfoProps = {
   breachCountByEmailAddress: Record<string, number>;
@@ -32,6 +33,7 @@ export type SettingsPanelEditInfoProps = {
     onAddEmail: typeof onAddEmail;
     onRemoveEmail: typeof onRemoveEmail;
   };
+  enabledFeatureFlags: FeatureFlagName[];
 };
 
 function MonitoredEmail(props: {
@@ -156,7 +158,10 @@ function SettingsPanelEditInfo(props: SettingsPanelEditInfoProps) {
       </ul>
       <span className={styles.addEmailButton}>
         {hasMaxEmailAddresses && (
-          <EmailAddressAdder onAddEmail={props.actions.onAddEmail} />
+          <EmailAddressAdder
+            onAddEmail={props.actions.onAddEmail}
+            enabledFeatureFlags={props.enabledFeatureFlags}
+          />
         )}
       </span>
     </>
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfoRedesign.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditInfoRedesign.tsx
@@ -227,9 +227,13 @@ function MonitoredEmailAddressesSection(
   props: SettingsPanelEditInfoRedesignProps,
 ) {
   const l10n = useL10n();
-  const maxNumEmailAddresses = hasPremium(props.user)
+  const maxNumEmailAddresses = props.enabledFeatureFlags.includes(
+    "IncreasedFreeMaxBreachEmails",
+  )
     ? CONST_MAX_NUM_ADDRESSES_PLUS
-    : CONST_MAX_NUM_ADDRESSES;
+    : hasPremium(props.user)
+      ? CONST_MAX_NUM_ADDRESSES_PLUS
+      : CONST_MAX_NUM_ADDRESSES;
   const hasMaxEmailAddresses =
     props.emailAddresses.length < maxNumEmailAddresses - 1;
 
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/stories/SettingsEditInfoNonUsUsers.stories.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/stories/SettingsEditInfoNonUsUsers.stories.tsx
@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import type { Meta, StoryObj } from "@storybook/nextjs";
+import { faker } from "@faker-js/faker";
 
 import { SettingsWrapper } from "./SettingsStoryWrapper";
 import { CONST_SETTINGS_TAB_SLUGS } from "../../../../../../../../constants";
@@ -68,3 +69,20 @@ export const SettingsEditYourInfoMaxMonitoredEmails: Story = {
     ],
   },
 };
+
+export const SettingsEditYourInfoMaxMonitoredEmailsIncreased: Story = {
+  name: "Max monitored emails increased",
+  args: {
+    countryCode: "nl",
+    activeTab: "edit-info",
+    enabledFeatureFlags: [
+      "SidebarNavigationRedesign",
+      "EditScanProfileDetails",
+      "IncreasedFreeMaxBreachEmails",
+    ],
+    emailAddresses: [...Array(19)].map(() => ({
+      ...mockedVerifiedEmailSecond,
+      email: faker.internet.email(),
+    })),
+  },
+};
diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/PricingPlanList.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/PricingPlanList.tsx
@@ -331,7 +331,12 @@ export const PricingPlanList = (props: Props & ScanLimitProp) => {
               {
                 elems: { b: <b /> },
                 vars: {
-                  max_email_addresses: CONST_MAX_NUM_ADDRESSES,
+                  /* c8 ignore next 5 */
+                  max_email_addresses: props.enabledFeatureFlags.includes(
+                    "IncreasedFreeMaxBreachEmails",
+                  )
+                    ? CONST_MAX_NUM_ADDRESSES_PLUS
+                    : CONST_MAX_NUM_ADDRESSES,
                 },
               },
             )}
diff --git a/src/app/api/v1/user/email/route.ts b/src/app/api/v1/user/email/route.ts
@@ -21,6 +21,7 @@ import {
 } from "../../../../../constants";
 import { validateEmailAddress } from "../../../../../utils/emailAddress";
 import { hasPremium } from "../../../../functions/universal/user";
+import { getEnabledFeatureFlags } from "../../../../../db/tables/featureFlags";
 
 interface EmailAddRequest {
   email: string;
@@ -50,9 +51,16 @@ export async function POST(req: NextRequest) {
         );
       }
 
-      const maxNumEmailAddresses = hasPremium(subscriber)
+      const enabledFeatureFlags = await getEnabledFeatureFlags({
+        email: subscriber.primary_email,
+      });
+      const maxNumEmailAddresses = enabledFeatureFlags.includes(
+        "IncreasedFreeMaxBreachEmails",
+      )
         ? CONST_MAX_NUM_ADDRESSES_PLUS
-        : CONST_MAX_NUM_ADDRESSES;
+        : hasPremium(subscriber)
+          ? CONST_MAX_NUM_ADDRESSES_PLUS
+          : CONST_MAX_NUM_ADDRESSES;
       if (emailCount >= maxNumEmailAddresses) {
         return NextResponse.json(
           {
@@ -90,6 +98,7 @@ export async function POST(req: NextRequest) {
       const unverifiedSubscriber = await addSubscriberUnverifiedEmailHash(
         subscriber,
         validatedEmail.email,
+        enabledFeatureFlags,
       );
 
       await initEmail();
diff --git a/src/app/components/client/Chart.tsx b/src/app/components/client/Chart.tsx
@@ -111,9 +111,13 @@ export const DoughnutChart = (props: Props) => {
             ? "modal-active-number-of-exposures-part-one-premium"
             : "modal-active-number-of-exposures-part-one-all",
           {
-            limit: props.isPremiumUser
+            limit: props.enabledFeatureFlags.includes(
+              "IncreasedFreeMaxBreachEmails",
+            )
               ? CONST_MAX_NUM_ADDRESSES_PLUS
-              : CONST_MAX_NUM_ADDRESSES,
+              : props.isPremiumUser
+                ? CONST_MAX_NUM_ADDRESSES_PLUS
+                : CONST_MAX_NUM_ADDRESSES,
           },
         )}
       </p>
diff --git a/src/db/tables/emailAddresses.ts b/src/db/tables/emailAddresses.ts
@@ -16,6 +16,7 @@ import {
   CONST_MAX_NUM_ADDRESSES_PLUS,
 } from "../../constants";
 import { hasPremium } from "../../app/functions/universal/user";
+import { FeatureFlagName } from "./featureFlags";
 
 const knex = createDbConnection();
 
@@ -46,11 +47,16 @@ async function getEmailById(emailAddressId: number) {
 async function addSubscriberUnverifiedEmailHash(
   user: SubscriberRow,
   email: string,
+  enabledFeatureFlags: FeatureFlagName[],
 ) {
   const lowerCaseEmail = email.toLowerCase();
-  const maxNumEmailAddresses = hasPremium(user)
+  const maxNumEmailAddresses = enabledFeatureFlags.includes(
+    "IncreasedFreeMaxBreachEmails",
+  )
     ? CONST_MAX_NUM_ADDRESSES_PLUS
-    : CONST_MAX_NUM_ADDRESSES;
+    : hasPremium(user)
+      ? CONST_MAX_NUM_ADDRESSES_PLUS
+      : CONST_MAX_NUM_ADDRESSES;
 
   const res = await knex.transaction(async (trx) => {
     await trx.raw("SET TRANSACTION ISOLATION LEVEL SERIALIZABLE");
diff --git a/src/db/tables/featureFlags.ts b/src/db/tables/featureFlags.ts
@@ -75,6 +75,7 @@ export const featureFlagNames = [
   "DisableOneRepScans",
   "DisableLandingToDashboardRedirect",
   "MaskDataBrokerCount",
+  "IncreasedFreeMaxBreachEmails",
 ] as const;
 
 export const adminOnlyFlags: FeatureFlagName[] = [
