feat: support new promptBreakageForm screen

duckduckgo · May 7, 2024 · 9f0a882 · 9f0a882
1 parent 782d32a
commit 9f0a882
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 19 deletions.
diff --git a/build/app/public/js/base.js b/build/app/public/js/base.js
@@ -11050,7 +11050,7 @@
       ruleExceptionReasonSchema = z.literal("ruleException");
       adClickAttributionReasonSchema = z.literal("adClickAttribution");
       otherThirdPartyRequestReasonSchema = z.literal("otherThirdPartyRequest");
-      screenKindSchema = z.union([z.literal("primaryScreen"), z.literal("breakageForm"), z.literal("toggleReport")]);
+      screenKindSchema = z.union([z.literal("primaryScreen"), z.literal("breakageForm"), z.literal("toggleReport"), z.literal("promptBreakageForm")]);
       wvVersionTitleSchema = z.literal("wvVersion");
       requestsTitleSchema = z.literal("requests");
       featuresTitleSchema = z.literal("features");
@@ -22678,6 +22678,7 @@
   // shared/js/ui/platform-features.mjs
   function createPlatformFeatures(platform2) {
     const desktop = ["windows", "macos", "browser"];
+    let includeToggleOnBreakageForm = true;
     let screen = "primaryScreen";
     const url = new URL(window.location.href);
     if (url.searchParams.get("screen") === "breakageForm") {
@@ -22686,11 +22687,16 @@
     if (url.searchParams.get("screen") === "toggleReport") {
       screen = "toggleReport";
     }
+    if (url.searchParams.get("screen") === "promptBreakageForm") {
+      screen = "promptBreakageForm";
+      includeToggleOnBreakageForm = false;
+    }
     return new PlatformFeatures({
       spinnerFollowingProtectionsToggle: platform2.name !== "android" && platform2.name !== "windows",
       supportsHover: desktop.includes(platform2.name),
       initialScreen: screen,
-      supportsInvalidCerts: platform2.name !== "browser" && platform2.name !== "windows"
+      supportsInvalidCerts: platform2.name !== "browser" && platform2.name !== "windows",
+      includeToggleOnBreakageForm
     });
   }
   var PlatformFeatures, FeatureSettings;
@@ -22704,12 +22710,14 @@
          * @param {boolean} params.supportsHover
          * @param {InitialScreen} params.initialScreen
          * @param {boolean} params.supportsInvalidCerts
+         * @param {boolean} params.includeToggleOnBreakageForm
          */
         constructor(params) {
           this.spinnerFollowingProtectionsToggle = params.spinnerFollowingProtectionsToggle;
           this.supportsHover = params.supportsHover;
           this.supportsInvalidCerts = params.supportsInvalidCerts;
           this.initialScreen = params.initialScreen;
+          this.includeToggleOnBreakageForm = params.includeToggleOnBreakageForm;
         }
       };
       FeatureSettings = class _FeatureSettings {
@@ -23159,6 +23167,7 @@
     this.mainModel = ops.mainModel;
     this.template = ops.template;
     this.immediate = ops.immediate;
+    this.includeToggle = ops.includeToggle;
     sliding_subview_default.call(this, ops);
     this._setup();
   }
@@ -24182,15 +24191,19 @@
     });
     let bullet = "\n \u2022 ";
     let placeholder = ns.report("tellUsMoreDesc.title", { bullet });
-    return import_nanohtml13.default`<section class="sliding-subview">
+    let headerText = this.includeToggle ? ns.report("selectTheOptionDesc.title") : ns.report("selectTheOptionDescV2.title");
+    return import_nanohtml13.default` <section class="sliding-subview">
         <div class="breakage-form">
-            ${topNav({ view: "secondary", immediate: this.immediate })}
+            ${topNav({
+      view: "secondary",
+      immediate: this.immediate
+    })}
             <div class="breakage-form__inner js-breakage-form-element" data-state="idle">
-                <div class="header header--breakage">${wrap(this.mainModel, this)}</div>
+                ${this.includeToggle ? import_nanohtml13.default`<div class="header header--breakage">${wrap(this.mainModel, this)}</div>` : null}
                 <div class="key-insight key-insight--breakage padding-x-double">
                     ${icon}
                     <div class="breakage-form__advise">
-                        <p class="token-title-3">${i18n.t("report:selectTheOptionDesc.title")}</p>
+                        <p class="token-title-3">${headerText}</p>
                     </div>
                     <div class="thanks">
                         <p class="thanks__primary">${i18n.t("report:thankYou.title")}</p>
@@ -24204,7 +24217,7 @@
                                 <select class="js-breakage-form-dropdown">
                                     <option value="">${i18n.t("report:pickYourIssueFromTheList.title")}</option>
                                     ${categories.map(function(item) {
-      return import_nanohtml13.default`<option value=${item.value}>${item.category}</option>`;
+      return import_nanohtml13.default` <option value="${item.value}">${item.category}</option>`;
     })}
                                 </select>
                             </div>
@@ -25638,6 +25651,9 @@
           if (this.features.initialScreen === "breakageForm") {
             this.showBreakageForm({ immediate: true });
           }
+          if (this.features.initialScreen === "promptBreakageForm") {
+            this.showBreakageForm({ immediate: true, includeToggle: false });
+          }
           if (this.features.initialScreen === "toggleReport") {
             const opener = url.searchParams.get("opener") || "menu";
             this.showToggleReport({ immediate: true, opener });
@@ -25684,17 +25700,19 @@
         /**
          * @param {object} opts
          * @param {boolean} opts.immediate
+         * @param {boolean} [opts.includeToggle=true] - default is true
          * @param {HTMLElement} [opts.eventTarget]
          */
-        showBreakageForm: function({ immediate, eventTarget }) {
+        showBreakageForm: function({ immediate, includeToggle = true, eventTarget }) {
           if (eventTarget) {
             blur(eventTarget);
           }
           this.views.slidingSubview = new BreakageFormView({
             template: breakage_form_default,
             model: new BreakageFormModel({ site: this.model, opener: "dashboard" }),
             mainModel: this.model,
-            immediate
+            immediate,
+            includeToggle
           });
         },
         /**

diff --git a/integration-tests/DashboardPage.js b/integration-tests/DashboardPage.js
@@ -304,6 +304,14 @@ export class DashboardPage {
         await this.page.getByRole('heading', { name: 'Site not working? Let us know.' }).waitFor()
     }
 
+    async promptBreakageFormIsVisible() {
+        await this.page.getByText('Select the option that best describes the problem you experienced.').waitFor()
+    }
+
+    async toggleIsAbsent() {
+        expect(await this.page.getByTestId('breakage-form-protection-header').count()).toBe(0)
+    }
+
     async showsInformation() {
         const { page } = this
         await page.getByRole('link', { name: 'See what’s sent' }).click()

diff --git a/integration-tests/ios.spec-int.js b/integration-tests/ios.spec-int.js
@@ -138,6 +138,14 @@ test.describe('opening breakage form', () => {
         await dash.screenshot('screen-breakage-form.png')
         await dash.showsOnlyDoneButton()
     })
+    test('shows breakage form without toggle (promptBreakageForm)', async ({ page }) => {
+        /** @type {DashboardPage} */
+        const dash = await DashboardPage.webkit(page, { screen: 'promptBreakageForm', platform: 'ios' })
+        await dash.addState([testDataStates.google])
+        await dash.promptBreakageFormIsVisible()
+        await dash.toggleIsAbsent()
+        await dash.screenshot('breakage-form-prompt.png')
+    })
     test('sends toggle report', async ({ page }) => {
         /** @type {DashboardPage} */
         const dash = await DashboardPage.webkit(page, { screen: 'toggleReport', platform: 'ios', opener: 'dashboard' })

diff --git a/integration-tests/ios.spec-int.js-snapshots/breakage-form-prompt-ios-darwin.png b/integration-tests/ios.spec-int.js-snapshots/breakage-form-prompt-ios-darwin.png
diff --git a/schema/__generated__/schema.parsers.mjs b/schema/__generated__/schema.parsers.mjs
diff --git a/schema/__generated__/schema.types.ts b/schema/__generated__/schema.types.ts
diff --git a/schema/event-origin.json b/schema/event-origin.json
@@ -8,7 +8,7 @@
         "screen": {
             "title": "ScreenKind",
             "type": "string",
-            "enum": ["primaryScreen", "breakageForm", "toggleReport"]
+            "enum": ["primaryScreen", "breakageForm", "toggleReport", "promptBreakageForm"]
         }
     }
 }
diff --git a/shared/js/ui/platform-features.mjs b/shared/js/ui/platform-features.mjs
@@ -19,6 +19,8 @@ export function createPlatformFeatures(platform) {
     /** @type {Platform["name"][]} */
     const desktop = ['windows', 'macos', 'browser']
 
+    let includeToggleOnBreakageForm = true
+
     /** @type {InitialScreen} */
     let screen = 'primaryScreen'
     const url = new URL(window.location.href)
@@ -28,12 +30,17 @@ export function createPlatformFeatures(platform) {
     if (url.searchParams.get('screen') === 'toggleReport') {
         screen = 'toggleReport'
     }
+    if (url.searchParams.get('screen') === 'promptBreakageForm') {
+        screen = 'promptBreakageForm'
+        includeToggleOnBreakageForm = false
+    }
 
     return new PlatformFeatures({
         spinnerFollowingProtectionsToggle: platform.name !== 'android' && platform.name !== 'windows',
         supportsHover: desktop.includes(platform.name),
         initialScreen: screen,
         supportsInvalidCerts: platform.name !== 'browser' && platform.name !== 'windows',
+        includeToggleOnBreakageForm,
     })
 }
 
@@ -48,6 +55,7 @@ export class PlatformFeatures {
      * @param {boolean} params.supportsHover
      * @param {InitialScreen} params.initialScreen
      * @param {boolean} params.supportsInvalidCerts
+     * @param {boolean} params.includeToggleOnBreakageForm
      */
     constructor(params) {
         /**
@@ -70,6 +78,11 @@ export class PlatformFeatures {
          * @type {InitialScreen}
          */
         this.initialScreen = params.initialScreen
+        /**
+         * Should the toggle functionality be included on the breakage form?
+         * @type {boolean}
+         */
+        this.includeToggleOnBreakageForm = params.includeToggleOnBreakageForm
     }
 }
 

diff --git a/shared/js/ui/templates/breakage-form.js b/shared/js/ui/templates/breakage-form.js
@@ -10,7 +10,8 @@ import { ProtectionHeader } from './protection-header'
  * @this {{
  *     mainModel: import('../models/site.js').PublicSiteModel,
  *     roots: Map<HTMLElement, boolean>,
- *     immediate: boolean
+ *     immediate: boolean,
+ *     includeToggle: boolean
  * }}
  */
 export default function () {
@@ -32,15 +33,24 @@ export default function () {
     let bullet = '\u000A • '
     let placeholder = ns.report('tellUsMoreDesc.title', { bullet })
 
-    return html`<section class="sliding-subview">
+    /**
+     * Currently using the visibility of the toggle to determine which title
+     * to use. This might be too simplistic and need updating later.
+     */
+    let headerText = this.includeToggle ? ns.report('selectTheOptionDesc.title') : ns.report('selectTheOptionDescV2.title')
+
+    return html` <section class="sliding-subview">
         <div class="breakage-form">
-            ${topNav({ view: 'secondary', immediate: this.immediate })}
+            ${topNav({
+                view: 'secondary',
+                immediate: this.immediate,
+            })}
             <div class="breakage-form__inner js-breakage-form-element" data-state="idle">
-                <div class="header header--breakage">${wrap(this.mainModel, this)}</div>
+                ${this.includeToggle ? html`<div class="header header--breakage">${wrap(this.mainModel, this)}</div>` : null}
                 <div class="key-insight key-insight--breakage padding-x-double">
                     ${icon}
                     <div class="breakage-form__advise">
-                        <p class="token-title-3">${i18n.t('report:selectTheOptionDesc.title')}</p>
+                        <p class="token-title-3">${headerText}</p>
                     </div>
                     <div class="thanks">
                         <p class="thanks__primary">${i18n.t('report:thankYou.title')}</p>
@@ -54,7 +64,7 @@ export default function () {
                                 <select class="js-breakage-form-dropdown">
                                     <option value="">${i18n.t('report:pickYourIssueFromTheList.title')}</option>
                                     ${categories.map(function (item) {
-                                        return html`<option value=${item.value}>${item.category}</option>`
+                                        return html` <option value="${item.value}">${item.category}</option>`
                                     })}
                                 </select>
                             </div>

diff --git a/shared/js/ui/views/breakage-form.js b/shared/js/ui/views/breakage-form.js
@@ -7,13 +7,15 @@ import ParentSlidingSubview from './sliding-subview.js'
  * @param {import("../models/breakage-form.js").BreakageFormModel} ops.model
  * @param {import('../models/site.js').PublicSiteModel} ops.mainModel
  * @param {boolean} ops.immediate
+ * @param {boolean} ops.includeToggle
  * @constructor
  */
 function BreakageFormView(ops) {
     this.model = ops.model
     this.mainModel = ops.mainModel
     this.template = ops.template
     this.immediate = ops.immediate
+    this.includeToggle = ops.includeToggle
     // this.$root = $('.js-breakage-form')
     // @ts-ignore
     ParentSlidingSubview.call(this, ops)

diff --git a/shared/js/ui/views/site.js b/shared/js/ui/views/site.js
@@ -81,6 +81,10 @@ Site.prototype = $.extend({}, Parent.prototype, {
             this.showBreakageForm({ immediate: true })
         }
 
+        if (this.features.initialScreen === 'promptBreakageForm') {
+            this.showBreakageForm({ immediate: true, includeToggle: false })
+        }
+
         if (this.features.initialScreen === 'toggleReport') {
             const opener = url.searchParams.get('opener') || 'menu'
             this.showToggleReport({ immediate: true, opener })
@@ -135,9 +139,10 @@ Site.prototype = $.extend({}, Parent.prototype, {
     /**
      * @param {object} opts
      * @param {boolean} opts.immediate
+     * @param {boolean} [opts.includeToggle=true] - default is true
      * @param {HTMLElement} [opts.eventTarget]
      */
-    showBreakageForm: function ({ immediate, eventTarget }) {
+    showBreakageForm: function ({ immediate, includeToggle = true, eventTarget }) {
         if (eventTarget) {
             blur(eventTarget)
         }
@@ -146,6 +151,7 @@ Site.prototype = $.extend({}, Parent.prototype, {
             model: new BreakageFormModel({ site: this.model, opener: 'dashboard' }),
             mainModel: this.model,
             immediate,
+            includeToggle,
         })
     },
 

diff --git a/shared/js/ui/views/tests/generate-data.mjs b/shared/js/ui/views/tests/generate-data.mjs
@@ -723,5 +723,12 @@ export const createDataStates = (google, cnn) => {
                 screen: 'toggleReport',
             },
         }),
+        'screen-promptBreakageForm': new MockData({
+            url: 'https://example.com',
+            requests: [],
+            urlParams: {
+                screen: 'promptBreakageForm',
+            },
+        }),
     }
 }