fix: Do not show the estimated removal times label and CSAT banner to…

… free users
mozilla · Oct 30, 2024 · 7800c01 · 7800c01
1 parent 916a3c9
commit 7800c01
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 22 deletions.
diff --git a/...p/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx b/...p/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx
@@ -3645,7 +3645,7 @@ describe("CSAT survey banner", () => {
     expect(answerButton).not.toBeInTheDocument();
   });
 
-  it("displays the removal time estimates CSAT survey on the “fixed” tab for users on the treatment branch", () => {
+  it("displays the removal time estimates CSAT survey on the “fixed” tab to Plus users on the treatment branch", () => {
     const ComposedDashboard = composeStory(
       DashboardUsPremiumResolvedScanNoBreaches,
       Meta,
@@ -3669,7 +3669,7 @@ describe("CSAT survey banner", () => {
     expect(answerButton).toBeInTheDocument();
   });
 
-  it("displays the removal time estimates CSAT survey on the “fixed” tab for users on the control branch", () => {
+  it("displays the removal time estimates CSAT survey on the “fixed” tab to Plus users on the control branch", () => {
     const ComposedDashboard = composeStory(
       DashboardUsPremiumResolvedScanNoBreaches,
       Meta,
@@ -3693,7 +3693,7 @@ describe("CSAT survey banner", () => {
     expect(answerButton).toBeInTheDocument();
   });
 
-  it("does not display the removal time estimates CSAT survey on the ”action needed” tab for users on the treatment branch", () => {
+  it("does not display the removal time estimates CSAT survey on the “action needed” tab to Plus users on the treatment branch", () => {
     const ComposedDashboard = composeStory(
       DashboardUsPremiumResolvedScanNoBreaches,
       Meta,
@@ -3705,7 +3705,31 @@ describe("CSAT survey banner", () => {
         experimentData={{
           ...defaultExperimentData,
           "data-broker-removal-time-estimates": {
-            enabled: false,
+            enabled: true,
+          },
+        }}
+      />,
+    );
+
+    const answerButton = screen.queryByRole("button", {
+      name: "Neutral",
+    });
+    expect(answerButton).not.toBeInTheDocument();
+  });
+
+  it("does not display the removal time estimates CSAT survey on the “fixed” tab to free users on the treatment branch", () => {
+    const ComposedDashboard = composeStory(
+      DashboardUsNoPremiumUnresolvedScanNoBreaches,
+      Meta,
+    );
+    render(
+      <ComposedDashboard
+        activeTab="fixed"
+        enabledFeatureFlags={["DataBrokerRemovalTimeEstimateCsat"]}
+        experimentData={{
+          ...defaultExperimentData,
+          "data-broker-removal-time-estimates": {
+            enabled: true,
           },
         }}
       />,

diff --git a/src/app/components/client/ExposuresFilter.test.tsx b/src/app/components/client/ExposuresFilter.test.tsx
@@ -45,11 +45,12 @@ it("shows and hides the exposure type explainer", async () => {
   expect(explainerDialog).not.toBeInTheDocument();
 });
 
-it("shows and hides the removal time explainer dialog by clicking the “Got it” button", async () => {
+it("shows and hides the removal time explainer dialog by clicking the “Got it” button to Plus subscribers", async () => {
   const user = userEvent.setup();
   const ExposuresFilter = composeStory(ExposuresFilterDefault, Meta);
   render(
     <ExposuresFilter
+      isPlusSubscriber
       enabledFeatureFlags={["DataBrokerRemovalTimeEstimateLabel"]}
       experimentData={{
         ...defaultExperimentData,
@@ -75,11 +76,12 @@ it("shows and hides the removal time explainer dialog by clicking the “Got it
   expect(explainerDialog).not.toBeInTheDocument();
 });
 
-it("shows and hides the removal time explainer dialog by clicking the close button", async () => {
+it("shows and hides the removal time explainer dialog by clicking the close button to Plus subscribers", async () => {
   const user = userEvent.setup();
   const ExposuresFilter = composeStory(ExposuresFilterDefault, Meta);
   render(
     <ExposuresFilter
+      isPlusSubscriber
       enabledFeatureFlags={["DataBrokerRemovalTimeEstimateLabel"]}
       experimentData={{
         ...defaultExperimentData,

diff --git a/src/app/components/client/ExposuresFilter.tsx b/src/app/components/client/ExposuresFilter.tsx
@@ -302,7 +302,10 @@ export const ExposuresFilter = ({
           <li className={styles.hideOnMobile}>
             {l10n.getString("dashboard-exposures-filter-date-found")}
           </li>
-          {enabledFeatureFlags.includes("DataBrokerRemovalTimeEstimateLabel") &&
+          {isPlusSubscriber &&
+            enabledFeatureFlags.includes(
+              "DataBrokerRemovalTimeEstimateLabel",
+            ) &&
             experimentData["data-broker-removal-time-estimates"].enabled && (
               <li className={styles.hideOnMobile}>
                 {l10n.getString(

diff --git a/src/app/components/client/csat_survey/surveys/removalTimeEstimates.ts b/src/app/components/client/csat_survey/surveys/removalTimeEstimates.ts
@@ -18,11 +18,6 @@ const surveyData: SurveyData = {
     },
   ],
   variations: [
-    {
-      id: "free-user",
-      showForUser: ["free-user"],
-      showOnTab: ["fixed"],
-    },
     {
       id: "plus-user",
       showForUser: ["plus-user"],

diff --git a/src/app/components/client/exposure_card/ExposureCard.test.tsx b/src/app/components/client/exposure_card/ExposureCard.test.tsx
@@ -148,7 +148,19 @@ describe("DataBreachCard", () => {
 
   it("does not show the estimated removal time if the feature flag `DataBrokerRemovalTimeEstimates` is disabled", () => {
     const ComposedExposureCard = composeStory(DataBrokerActionNeeded, Meta);
-    render(<ComposedExposureCard />);
+    render(<ComposedExposureCard isPremiumUser />);
+
+    const removalTimeTitle = screen.queryByText("Removal time");
+    expect(removalTimeTitle).not.toBeInTheDocument();
+  });
+
+  it("does not show the estimated removal time for free users", () => {
+    const ComposedExposureCard = composeStory(DataBrokerActionNeeded, Meta);
+    render(
+      <ComposedExposureCard
+        enabledFeatureFlags={["DataBrokerRemovalTimeEstimateLabel"]}
+      />,
+    );
 
     const removalTimeTitle = screen.queryByText("Removal time");
     expect(removalTimeTitle).not.toBeInTheDocument();
@@ -168,11 +180,12 @@ describe("DataBreachCard", () => {
       label: "181+ days",
     },
   ])(
-    "shows a label with the estimated removal time if available: %s",
+    "shows a label with the estimated removal time if available to Plus subscribers: %s",
     ({ removalTime, label }) => {
       const ComposedExposureCard = composeStory(DataBrokerActionNeeded, Meta);
       render(
         <ComposedExposureCard
+          isPremiumUser
           enabledFeatureFlags={["DataBrokerRemovalTimeEstimateLabel"]}
           removalTimeEstimate={removalTime}
         />,
@@ -185,10 +198,11 @@ describe("DataBreachCard", () => {
     },
   );
 
-  it("shows a label displaying “unknown” if the removal time is not available", () => {
+  it("shows a label displaying “unknown” if the removal time is not available to Plus subscribers", () => {
     const ComposedExposureCard = composeStory(DataBrokerActionNeeded, Meta);
     render(
       <ComposedExposureCard
+        isPremiumUser
         enabledFeatureFlags={["DataBrokerRemovalTimeEstimateLabel"]}
       />,
     );
@@ -199,10 +213,11 @@ describe("DataBreachCard", () => {
     expect(removalTimeLabel).toBeInTheDocument();
   });
 
-  it("shows a label displaying “N/A” on data breach cards", () => {
+  it("shows a label displaying “N/A” on data breach cards to Plus subscribers", () => {
     const ComposedExposureCard = composeStory(DataBreachActionNeeded, Meta);
     render(
       <ComposedExposureCard
+        isPremiumUser
         enabledFeatureFlags={["DataBrokerRemovalTimeEstimateLabel"]}
       />,
     );

diff --git a/src/app/components/client/exposure_card/ScanResultCard.tsx b/src/app/components/client/exposure_card/ScanResultCard.tsx
@@ -266,9 +266,10 @@ export const ScanResultCard = (props: ScanResultCardProps) => {
             <dd className={styles.hideOnMobile}>
               {dateFormatter.format(scanResult.created_at)}
             </dd>
-            {props.enabledFeatureFlags?.includes(
-              "DataBrokerRemovalTimeEstimateLabel",
-            ) &&
+            {props.isPremiumUser &&
+              props.enabledFeatureFlags?.includes(
+                "DataBrokerRemovalTimeEstimateLabel",
+              ) &&
               props.experimentData?.["data-broker-removal-time-estimates"]
                 .enabled && (
                 <>

diff --git a/src/app/components/client/exposure_card/SubscriberBreachCard.tsx b/src/app/components/client/exposure_card/SubscriberBreachCard.tsx
@@ -34,6 +34,7 @@ export type SubscriberBreachCardProps = {
   locale: string;
   resolutionCta: ReactNode;
   isEligibleForPremium: boolean;
+  isPremiumUser: boolean;
   isExpanded: boolean;
   enabledFeatureFlags: FeatureFlagName[];
   experimentData: ExperimentData;
@@ -211,9 +212,10 @@ export const SubscriberBreachCard = (props: SubscriberBreachCardProps) => {
             <dd className={styles.hideOnMobile}>
               {dateFormatter.format(subscriberBreach.addedDate)}
             </dd>
-            {props.enabledFeatureFlags.includes(
-              "DataBrokerRemovalTimeEstimateLabel",
-            ) &&
+            {props.isPremiumUser &&
+              props.enabledFeatureFlags.includes(
+                "DataBrokerRemovalTimeEstimateLabel",
+              ) &&
               props.experimentData["data-broker-removal-time-estimates"]
                 .enabled && (
                 <>