Bug 1812690 - Pocket newtab enabling onboarding experience for new users seeing the Pocket section for the first time. r=gvn,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D174710

UltraBlame original commit: f1313331d9d9d87f0b181ad305906249dfe53a4a

Author: marco-c

browser/app/profile/firefox.js

@@ -1635,6 +1635,10 @@ pref("browser.newtabpage.activity-stream.discoverystream.recs.personalized", fal
 pref("browser.newtabpage.activity-stream.discoverystream.spocs.personalized", true);
 
 
+pref("browser.newtabpage.activity-stream.discoverystream.onboardingExperience.dismissed", false);
+pref("browser.newtabpage.activity-stream.discoverystream.onboardingExperience.enabled", false);
+
+
 pref("browser.newtabpage.activity-stream.feeds.section.topstories", true);
 
 

browser/components/newtab/common/Actions.sys.mjs

@@ -79,6 +79,7 @@ for (const type of [
   "FAKE_FOCUS_SEARCH",
   "FILL_SEARCH_TERM",
   "HANDOFF_SEARCH_TO_AWESOMEBAR",
+  "HIDE_PERSONALIZE",
   "HIDE_PRIVACY_INFO",
   "INIT",
   "NEW_TAB_INIT",
@@ -127,6 +128,7 @@ for (const type of [
   "SET_PREF",
   "SHOW_DOWNLOAD_FILE",
   "SHOW_FIREFOX_ACCOUNTS",
+  "SHOW_PERSONALIZE",
   "SHOW_PRIVACY_INFO",
   "SHOW_SEARCH",
   "SKIPPED_SIGNIN",

browser/components/newtab/common/Reducers.sys.mjs

@@ -17,6 +17,7 @@ export const INITIAL_STATE = {
     initialized: false,
     locale: "",
     isForStartupCache: false,
+    customizeMenuVisible: false,
   },
   ASRouter: { initialized: false },
   Snippets: { initialized: false },
@@ -108,6 +109,14 @@ function App(prevState = INITIAL_STATE.App, action) {
       return Object.assign({}, prevState, action.data || {}, {
         isForStartupCache: false,
       });
+    case at.SHOW_PERSONALIZE:
+      return Object.assign({}, prevState, {
+        customizeMenuVisible: true,
+      });
+    case at.HIDE_PERSONALIZE:
+      return Object.assign({}, prevState, {
+        customizeMenuVisible: false,
+      });
     default:
       return prevState;
   }

browser/components/newtab/content-src/components/Base/Base.jsx

@@ -111,7 +111,7 @@ export class BaseContent extends React.PureComponent {
     this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
     this.onWindowScroll = debounce(this.onWindowScroll.bind(this), 5);
     this.setPref = this.setPref.bind(this);
-    this.state = { fixedSearch: false, customizeMenuVisible: false };
+    this.state = { fixedSearch: false };
   }
 
   componentDidMount() {
@@ -140,13 +140,13 @@ export class BaseContent extends React.PureComponent {
   }
 
   openCustomizationMenu() {
-    this.setState({ customizeMenuVisible: true });
+    this.props.dispatch({ type: at.SHOW_PERSONALIZE });
     this.props.dispatch(ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
   }
 
   closeCustomizationMenu() {
-    if (this.state.customizeMenuVisible) {
-      this.setState({ customizeMenuVisible: false });
+    if (this.props.App.customizeMenuVisible) {
+      this.props.dispatch({ type: at.HIDE_PERSONALIZE });
       this.props.dispatch(ac.UserEvent({ event: "HIDE_PERSONALIZE" }));
     }
   }
@@ -164,7 +164,7 @@ export class BaseContent extends React.PureComponent {
   render() {
     const { props } = this;
     const { App } = props;
-    const { initialized } = App;
+    const { initialized, customizeMenuVisible } = App;
     const prefs = props.Prefs.values;
 
     const isDiscoveryStream =
@@ -180,7 +180,6 @@ export class BaseContent extends React.PureComponent {
       !pocketEnabled &&
       filteredSections.filter(section => section.enabled).length === 0;
     const searchHandoffEnabled = prefs["improvesearch.handoffToAwesomebar"];
-    const showCustomizationMenu = this.state.customizeMenuVisible;
     const enabledSections = {
       topSitesEnabled: prefs["feeds.topsites"],
       pocketEnabled: prefs["feeds.section.topstories"],
@@ -224,7 +223,7 @@ export class BaseContent extends React.PureComponent {
           enabledSections={enabledSections}
           pocketRegion={pocketRegion}
           mayHaveSponsoredTopSites={mayHaveSponsoredTopSites}
-          showing={showCustomizationMenu}
+          showing={customizeMenuVisible}
         />
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions*/}
         <div className={outerClassName} onClick={this.closeCustomizationMenu}>

browser/components/newtab/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -192,6 +192,7 @@ export class _DiscoveryStreamBase extends React.PureComponent {
             fourCardLayout={component.properties.fourCardLayout}
             compactGrid={component.properties.compactGrid}
             essentialReadsHeader={component.properties.essentialReadsHeader}
+            onboardingExperience={component.properties.onboardingExperience}
             editorsPicksHeader={component.properties.editorsPicksHeader}
             recentSavesEnabled={this.props.DiscoveryStream.recentSavesEnabled}
             hideDescriptions={this.props.DiscoveryStream.hideDescriptions}

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -4,6 +4,7 @@
 
 import { DSCard, PlaceholderDSCard } from "../DSCard/DSCard.jsx";
 import { DSEmptyState } from "../DSEmptyState/DSEmptyState.jsx";
+import { DSDismiss } from "content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss";
 import { TopicsWidget } from "../TopicsWidget/TopicsWidget.jsx";
 import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
 import { FluentOrText } from "../../FluentOrText/FluentOrText.jsx";
@@ -13,6 +14,9 @@ import {
 } from "common/Actions.sys.mjs";
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import { connect, useSelector } from "react-redux";
+const PREF_ONBOARDING_EXPERIENCE_DISMISSED =
+  "discoverystream.onboardingExperience.dismissed";
+const INTERSECTION_RATIO = 0.5;
 const WIDGET_IDS = {
   TOPICS: 1,
 };
@@ -25,6 +29,99 @@ export function DSSubHeader({ children }) {
   );
 }
 
+export function OnboardingExperience({
+  children,
+  dispatch,
+  windowObj = global,
+}) {
+  const [dismissed, setDismissed] = useState(false);
+  const [maxHeight, setMaxHeight] = useState(null);
+  const heightElement = useRef(null);
+
+  const onDismissClick = useCallback(() => {
+    // We update this as state and redux.
+    // The state update is for this newtab,
+    // and the redux update is for other tabs, offscreen tabs, and future tabs.
+    // We need the state update for this tab to support the transition.
+    setDismissed(true);
+    dispatch(ac.SetPref(PREF_ONBOARDING_EXPERIENCE_DISMISSED, true));
+    dispatch(
+      ac.DiscoveryStreamUserEvent({
+        event: "BLOCK",
+        source: "POCKET_ONBOARDING",
+      })
+    );
+  }, [dispatch]);
+
+  useEffect(() => {
+    const resizeObserver = new windowObj.ResizeObserver(() => {
+      if (heightElement.current) {
+        setMaxHeight(heightElement.current.offsetHeight);
+      }
+    });
+
+    const options = { threshold: INTERSECTION_RATIO };
+    const intersectionObserver = new windowObj.IntersectionObserver(entries => {
+      if (
+        entries.some(
+          entry =>
+            entry.isIntersecting &&
+            entry.intersectionRatio >= INTERSECTION_RATIO
+        )
+      ) {
+        dispatch(
+          ac.DiscoveryStreamUserEvent({
+            event: "IMPRESSION",
+            source: "POCKET_ONBOARDING",
+          })
+        );
+        // Once we have observed an impression, we can stop for this instance of newtab.
+        intersectionObserver.unobserve(heightElement.current);
+      }
+    }, options);
+    if (heightElement.current) {
+      resizeObserver.observe(heightElement.current);
+      intersectionObserver.observe(heightElement.current);
+      setMaxHeight(heightElement.current.offsetHeight);
+    }
+
+    // Return unmount callback to clean up observers.
+    return () => {
+      resizeObserver?.disconnect();
+      intersectionObserver?.disconnect();
+    };
+  }, [dispatch, windowObj]);
+
+  const style = {};
+  if (dismissed) {
+    style.maxHeight = "0";
+    style.opacity = "0";
+    style.transition = "max-height 0.26s ease, opacity 0.26s ease";
+  } else if (maxHeight) {
+    style.maxHeight = `${maxHeight}px`;
+  }
+
+  return (
+    <div style={style}>
+      <div className="ds-onboarding-ref" ref={heightElement}>
+        <div className="ds-onboarding">
+          <DSDismiss
+            onDismissClick={onDismissClick}
+            extraClasses={`ds-onboarding-dismiss`}
+          >
+            <div className="ds-onboarding-graphic" />
+            <header>
+              <span className="icon icon-pocket" />
+              <span data-l10n-id="newtab-pocket-onboarding-discover" />
+            </header>
+            <p data-l10n-id="newtab-pocket-onboarding-cta" />
+          </DSDismiss>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function IntersectionObserver({
   children,
   windowObj = window,
@@ -204,13 +301,16 @@ export class _CardGrid extends React.PureComponent {
       compactGrid,
       essentialReadsHeader,
       editorsPicksHeader,
+      onboardingExperience,
       widgets,
       recentSavesEnabled,
       hideDescriptions,
       DiscoveryStream,
     } = this.props;
     const { saveToPocketCard } = DiscoveryStream;
     const showRecentSaves = prefs.showRecentSaves && recentSavesEnabled;
+    const isOnboardingExperienceDismissed =
+      prefs[PREF_ONBOARDING_EXPERIENCE_DISMISSED];
 
     const recs = this.props.data.recommendations.slice(0, items);
     const cards = [];
@@ -319,10 +419,13 @@ export class _CardGrid extends React.PureComponent {
       ? `ds-card-grid-hybrid-layout`
       : ``;
 
-    const gridClassName = `ds-card-grid ds-card-grid-border ${hybridLayoutClassName} ${hideCardBackgroundClass} ${fourCardLayoutClass} ${hideDescriptionsClassName} ${compactGridClassName}`;
+    const gridClassName = `ds-card-grid ${hybridLayoutClassName} ${hideCardBackgroundClass} ${fourCardLayoutClass} ${hideDescriptionsClassName} ${compactGridClassName}`;
 
     return (
       <>
+        {!isOnboardingExperienceDismissed && onboardingExperience && (
+          <OnboardingExperience dispatch={this.props.dispatch} />
+        )}
         {essentialReadsCards?.length > 0 && (
           <div className={gridClassName}>{essentialReadsCards}</div>
         )}