From e0367698f6d8d790c9d75c7336d6b5f9e9dff3e8 Mon Sep 17 00:00:00 2001
From: Jason Prickett <jprickett@mozilla.com>
Date: Tue, 30 Aug 2022 03:25:34 +0000
Subject: [PATCH] Bug 1779514 - Add privacy segmentation screen for existing
 users in MR Onboarding r=pdahiya

Differential Revision: https://phabricator.services.mozilla.com/D155287
---
 .../content/aboutwelcome.bundle.js            |  2 +-
 .../aboutwelcome/content/aboutwelcome.css     | 13 +++++
 .../aboutwelcome/aboutwelcome.scss            | 19 +++++++
 .../components/MultiStageProtonScreen.jsx     |  6 ++-
 .../newtab/lib/OnboardingMessageProvider.jsm  | 54 +++++++++++++++++++
 .../aboutwelcome/MultiStageAWProton.test.jsx  | 19 +++++++
 6 files changed, 111 insertions(+), 2 deletions(-)

diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
index 7c1055d8cac4..6b413f9a0ae0 100644
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
@@ -683,7 +683,7 @@ const ProtonScreenActionButtons = props => {
   }
 
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "action-buttons"
+    className: `action-buttons ${content.dual_action_buttons ? "dual-action-buttons" : ""}`
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
     text: (_content$primary_butt = content.primary_button) === null || _content$primary_butt === void 0 ? void 0 : _content$primary_butt.label
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
index f911e8625aaf..dfd2cecf1308 100644
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
@@ -415,6 +415,19 @@ body[lwt-newtab-brighttext] {
 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label {
   vertical-align: middle;
 }
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons button {
+  padding: 8px 16px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons .secondary-cta {
+  display: block;
+  position: relative;
+  bottom: unset;
+  margin-block: 5px 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons .secondary-cta .secondary {
+  margin-inline: 0;
+  font-size: 13px;
+}
 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
   position: absolute;
   bottom: -30px;
diff --git a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
index 5c13f5a74733..f3d3a9404581 100644
--- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
+++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
@@ -321,6 +321,25 @@ body {
               }
             }
 
+            &.dual-action-buttons {
+
+              button {
+                padding: 8px 16px;
+              }
+
+              .secondary-cta {
+                display: block;
+                position: relative;
+                bottom: unset;
+                margin-block: 5px 0;
+
+                .secondary {
+                  margin-inline: 0;
+                  font-size: 13px;
+                }
+              }
+            }
+
             .secondary-cta {
               position: absolute;
               bottom: -30px;
diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
index da34ce81cb3e..9d8fc697bc3c 100644
--- a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
+++ b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
@@ -62,7 +62,11 @@ export const ProtonScreenActionButtons = props => {
   }
 
   return (
-    <div className="action-buttons">
+    <div
+      className={`action-buttons ${
+        content.dual_action_buttons ? "dual-action-buttons" : ""
+      }`}
+    >
       <Localized text={content.primary_button?.label}>
         <button
           className="primary"
diff --git a/browser/components/newtab/lib/OnboardingMessageProvider.jsm b/browser/components/newtab/lib/OnboardingMessageProvider.jsm
index bdc5bf73f974..473327690bf7 100644
--- a/browser/components/newtab/lib/OnboardingMessageProvider.jsm
+++ b/browser/components/newtab/lib/OnboardingMessageProvider.jsm
@@ -411,6 +411,60 @@ const ONBOARDING_MESSAGES = () => [
             },
           },
         },
+        {
+          id: "UPGRADE_PRIVACY_SEGMENTATION",
+          content: {
+            position: "split",
+            progress_bar: "true",
+            dual_action_buttons: true,
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-pintaskbar.svg') var(--mr-secondary-position) no-repeat, var(--in-content-page-background) radial-gradient(83.12% 83.12% at 80.59% 16.88%, rgba(103, 51, 205, 0.75) 0%, rgba(0, 108, 207, 0.75) 54.51%, rgba(128, 199, 247, 0.75) 100%)",
+            logo: {},
+            title: {
+              string_id: "mr2022-onboarding-privacy-segmentation-title",
+            },
+            subtitle: {
+              string_id: "mr2022-onboarding-privacy-segmentation-subtitle",
+            },
+            cta_paragraph: {
+              text: {
+                string_id: "mr2022-onboarding-privacy-segmentation-text-cta",
+              },
+            },
+            primary_button: {
+              label: {
+                string_id:
+                  "mr2022-onboarding-privacy-segmentation-button-primary-label",
+              },
+              action: {
+                type: "SET_PREF",
+                data: {
+                  pref: {
+                    name: "browser.privacySegmentation.enabled",
+                    value: true,
+                  },
+                },
+                navigate: true,
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id:
+                  "mr2022-onboarding-privacy-segmentation-button-secondary-label",
+              },
+              action: {
+                type: "SET_PREF",
+                data: {
+                  pref: {
+                    name: "browser.privacySegmentation.enabled",
+                    value: false,
+                  },
+                },
+                navigate: true,
+              },
+            },
+          },
+        },
         {
           id: "UPGRADE_GRATITUDE",
           content: {
diff --git a/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx b/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx
index 71abbeaefb5f..fad7e36cb7e1 100644
--- a/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx
+++ b/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx
@@ -103,6 +103,25 @@ describe("MultiStageAboutWelcomeProton module", () => {
       assert.equal(wrapper.find(".welcome-text h1").text(), "test title");
       assert.equal(wrapper.find("main").prop("pos"), "center");
     });
+
+    it("should render action buttons container with dual-action-buttons class", () => {
+      const SCREEN_PROPS = {
+        content: {
+          position: "split",
+          title: "test title",
+          dual_action_buttons: true,
+          primary_button: {
+            label: "test primary button",
+          },
+          secondary_button: {
+            label: "test secondary button",
+          },
+        },
+      };
+      const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
+      assert.ok(wrapper.exists());
+      assert.ok(wrapper.find(".dual-action-buttons").text());
+    });
   });
 
   describe("AboutWelcomeDefaults for proton", () => {