Add confirmation screen behind a flag in the cancellation flow (#4445)

* MNTOR-2751 - Add alt to logos

* Only put the confirmation screen behind a flag

* add feature flag to entire cancel flow

* fix test

* fix test

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

@@ -19,13 +19,15 @@ import { TelemetryButton } from "../../../../../../components/client/TelemetryBu
 
 export type Props = {
   fxaSubscriptionsUrl: string;
+  confirmationFlagEnabled: boolean;
 };
 
 export const CancelFlow = (props: Props) => {
   const l10n = useL10n();
   const recordTelemetry = useTelemetry();
+  const currentStep = props.confirmationFlagEnabled ? "confirm" : "survey";
   const [step, setCurrentStep] = useState<"confirm" | "survey" | "redirecting">(
-    "confirm",
+    currentStep,
   );
 
   const dialogState = useOverlayTriggerState({

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsPage.test.tsx

@@ -472,7 +472,11 @@ it("takes you through the cancellation dialog flow all the way to subplat", asyn
         yearlySubscriptionUrl=""
         monthlySubscriptionUrl=""
         subscriptionBillingAmount={mockedSubscriptionBillingAmount}
-        enabledFeatureFlags={["MonitorAccountDeletion", "CancellationSurvey"]}
+        enabledFeatureFlags={[
+          "MonitorAccountDeletion",
+          "ConfirmCancellation",
+          "CancellationFlow",
+        ]}
       />
     </TestComponentWrapper>,
   );
@@ -543,7 +547,11 @@ it("closes the cancellation survey if the user selects nevermind, take me back",
         yearlySubscriptionUrl=""
         monthlySubscriptionUrl=""
         subscriptionBillingAmount={mockedSubscriptionBillingAmount}
-        enabledFeatureFlags={["MonitorAccountDeletion", "CancellationSurvey"]}
+        enabledFeatureFlags={[
+          "MonitorAccountDeletion",
+          "ConfirmCancellation",
+          "CancellationFlow",
+        ]}
       />
     </TestComponentWrapper>,
   );
@@ -594,7 +602,7 @@ it("closes the cancellation dialog", async () => {
         yearlySubscriptionUrl=""
         monthlySubscriptionUrl=""
         subscriptionBillingAmount={mockedSubscriptionBillingAmount}
-        enabledFeatureFlags={["MonitorAccountDeletion", "CancellationSurvey"]}
+        enabledFeatureFlags={["MonitorAccountDeletion", "CancellationFlow"]}
       />
     </TestComponentWrapper>,
   );
@@ -931,43 +939,6 @@ describe("to learn about usage", () => {
     );
   });
 
-  it("counts how often people go to SubPlat to cancel their Plus subscription", async () => {
-    const user = userEvent.setup();
-    render(
-      <TestComponentWrapper>
-        <SettingsView
-          l10n={getSpecificL10nSync()}
-          user={mockedUser}
-          breachCountByEmailAddress={{
-            [mockedUser.email]: 42,
-            [mockedSecondaryVerifiedEmail.email]: 42,
-          }}
-          emailAddresses={[mockedSecondaryVerifiedEmail]}
-          fxaSettingsUrl=""
-          fxaSubscriptionsUrl=""
-          yearlySubscriptionUrl=""
-          monthlySubscriptionUrl=""
-          subscriptionBillingAmount={mockedSubscriptionBillingAmount}
-          enabledFeatureFlags={["MonitorAccountDeletion"]}
-        />
-      </TestComponentWrapper>,
-    );
-
-    const cancelPlusLink = screen.getByRole("link", {
-      name: "Cancel from your ⁨Mozilla account⁩ Open link in a new tab",
-    });
-
-    await user.click(cancelPlusLink);
-
-    expect(mockedRecordTelemetry).toHaveBeenCalledWith(
-      "link",
-      "click",
-      expect.objectContaining({
-        link_id: "cancel_plus",
-      }),
-    );
-  });
-
   it("counts how often people go to Mozilla Accounts to delete their account", async () => {
     const user = userEvent.setup();
     render(

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

@@ -98,8 +98,13 @@ export const SettingsView = (props: Props) => {
               <div className={styles.cancelSection}>
                 <h3>{l10n.getString("settings-cancel-plus-title")}</h3>
                 <p>{l10n.getString("settings-cancel-plus-details")}</p>
-                {props.enabledFeatureFlags.includes("CancellationSurvey") ? (
-                  <CancelFlow fxaSubscriptionsUrl={props.fxaSubscriptionsUrl} />
+                {props.enabledFeatureFlags.includes("CancellationFlow") ? (
+                  <CancelFlow
+                    confirmationFlagEnabled={props.enabledFeatureFlags.includes(
+                      "ConfirmCancellation",
+                    )}
+                    fxaSubscriptionsUrl={props.fxaSubscriptionsUrl}
+                  />
                 ) : (
                   <TelemetryLink
                     href={props.fxaSubscriptionsUrl}

src/db/tables/featureFlags.ts

@@ -37,7 +37,8 @@ export type FeatureFlagName =
   | "RebrandAnnouncement"
   | "MonitorAccountDeletion"
   | "RedesignedEmails"
-  | "CancellationSurvey";
+  | "CancellationFlow"
+  | "ConfirmCancellation";
 
 export async function getEnabledFeatureFlags(
   options: