Bug 1882830 - Home and newtab adding message variants for sponsored content. r=nbarrett

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

Author: ScottDowne

browser/app/profile/firefox.js

@@ -1763,6 +1763,7 @@ pref("browser.newtabpage.activity-stream.discoverystream.spocTopsitesPlacement.e
 pref("browser.newtabpage.activity-stream.discoverystream.spocSiteId", "");
 pref("browser.newtabpage.activity-stream.discoverystream.ctaButtonSponsors", "");
 pref("browser.newtabpage.activity-stream.discoverystream.ctaButtonVariant", "");
+pref("browser.newtabpage.activity-stream.discoverystream.spocMessageVariant", "");
 
 pref("browser.newtabpage.activity-stream.discoverystream.sendToPocket.enabled", true);
 

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

@@ -165,13 +165,22 @@ export class BaseContent extends React.PureComponent {
     const { App } = props;
     const { initialized, customizeMenuVisible } = App;
     const prefs = props.Prefs.values;
+    const { pocketConfig } = prefs;
 
     const isDiscoveryStream =
       props.DiscoveryStream.config && props.DiscoveryStream.config.enabled;
     let filteredSections = props.Sections.filter(
       section => section.id !== "topstories"
     );
 
+    let spocMessageVariant = "";
+    if (
+      props.App.locale?.startsWith("en-") &&
+      pocketConfig?.spocMessageVariant === "variant-c"
+    ) {
+      spocMessageVariant = pocketConfig.spocMessageVariant;
+    }
+
     const pocketEnabled =
       prefs["feeds.section.topstories"] && prefs["feeds.system.topstories"];
     const noSectionsEnabled =
@@ -218,6 +227,7 @@ export class BaseContent extends React.PureComponent {
           pocketRegion={pocketRegion}
           mayHaveSponsoredTopSites={mayHaveSponsoredTopSites}
           mayHaveSponsoredStories={mayHaveSponsoredStories}
+          spocMessageVariant={spocMessageVariant}
           showing={customizeMenuVisible}
         />
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions*/}
@@ -239,7 +249,10 @@ export class BaseContent extends React.PureComponent {
             <div className={`body-wrapper${initialized ? " on" : ""}`}>
               {isDiscoveryStream ? (
                 <ErrorBoundary className="borderless-error">
-                  <DiscoveryStreamBase locale={props.App.locale} />
+                  <DiscoveryStreamBase
+                    locale={props.App.locale}
+                    mayHaveSponsoredStories={mayHaveSponsoredStories}
+                  />
                 </ErrorBoundary>
               ) : (
                 <Sections />

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

@@ -4,6 +4,7 @@
 
 import { ErrorBoundary } from "content-src/components/ErrorBoundary/ErrorBoundary";
 import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
+import { SponsoredContentHighlight } from "../DiscoveryStreamComponents/FeatureHighlight/SponsoredContentHighlight";
 import React from "react";
 import { connect } from "react-redux";
 
@@ -48,7 +49,14 @@ export class _CollapsibleSection extends React.PureComponent {
   render() {
     const { isAnimating, maxHeight, menuButtonHover, showContextMenu } =
       this.state;
-    const { id, collapsed, learnMore, title, subTitle } = this.props;
+    const {
+      id,
+      collapsed,
+      learnMore,
+      title,
+      subTitle,
+      mayHaveSponsoredStories,
+    } = this.props;
     const active = menuButtonHover || showContextMenu;
     let bodyStyle;
     if (isAnimating && !collapsed) {
@@ -91,6 +99,13 @@ export class _CollapsibleSection extends React.PureComponent {
                 <FluentOrText message={subTitle} />
               </span>
             )}
+            {mayHaveSponsoredStories &&
+              this.props.spocMessageVariant === "variant-a" && (
+                <SponsoredContentHighlight
+                  position="inset-block-start inset-inline-start"
+                  dispatch={this.props.dispatch}
+                />
+              )}
           </h3>
         </div>
         <ErrorBoundary className="section-body-fallback">

browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx

@@ -4,6 +4,7 @@
 
 import React from "react";
 import { actionCreators as ac } from "common/Actions.sys.mjs";
+import { SafeAnchor } from "../../DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
 
 export class ContentSection extends React.PureComponent {
   constructor(props) {
@@ -96,6 +97,7 @@ export class ContentSection extends React.PureComponent {
       mayHaveSponsoredStories,
       mayHaveRecentSaves,
       openPreferences,
+      spocMessageVariant,
     } = this.props;
     const {
       topSitesEnabled,
@@ -254,6 +256,23 @@ export class ContentSection extends React.PureComponent {
           </label>
         </div>
 
+        {pocketRegion &&
+          mayHaveSponsoredStories &&
+          spocMessageVariant === "variant-c" && (
+            <div className="sponsored-content-info">
+              <div className="icon icon-help"></div>
+              <div>
+                Sponsored content supports our mission to build a better web.{" "}
+                <SafeAnchor
+                  dispatch={this.props.dispatch}
+                  url="https://support.mozilla.org/kb/pocket-sponsored-stories-new-tabs"
+                >
+                  Find out how
+                </SafeAnchor>
+              </div>
+            </div>
+          )}
+
         <span className="divider" role="separator"></span>
 
         <div>

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

@@ -71,6 +71,7 @@ export class _CustomizeMenu extends React.PureComponent {
               mayHaveSponsoredTopSites={this.props.mayHaveSponsoredTopSites}
               mayHaveSponsoredStories={this.props.mayHaveSponsoredStories}
               mayHaveRecentSaves={this.props.DiscoveryStream.recentSavesEnabled}
+              spocMessageVariant={this.props.spocMessageVariant}
               dispatch={this.props.dispatch}
             />
           </div>

browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss

@@ -217,6 +217,25 @@
     }
   }
 
+  .sponsored-content-info {
+    display: flex;
+    gap: var(--space-small);
+    font-size: var(--font-size-small);
+    border-radius: var(--border-radius-medium);
+    background-color: var(--newtab-element-secondary-color);
+    padding: var(--space-small) var(--space-large);
+
+    .icon-help {
+      flex-shrink: 0;
+      color: var(--color-accent-primary);
+      height: 20px;
+    }
+
+    a {
+      color: var(--newtab-primary-action-background);
+    }
+  }
+
   .divider {
     border-top: 1px var(--newtab-border-color) solid;
     margin: 0 -16px;

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

@@ -196,6 +196,7 @@ export class _DiscoveryStreamBase extends React.PureComponent {
             onboardingExperience={component.properties.onboardingExperience}
             ctaButtonSponsors={component.properties.ctaButtonSponsors}
             ctaButtonVariant={component.properties.ctaButtonVariant}
+            spocMessageVariant={component.properties.spocMessageVariant}
             editorsPicksHeader={component.properties.editorsPicksHeader}
             recentSavesEnabled={this.props.DiscoveryStream.recentSavesEnabled}
             hideDescriptions={this.props.DiscoveryStream.hideDescriptions}
@@ -218,7 +219,7 @@ export class _DiscoveryStreamBase extends React.PureComponent {
   }
 
   render() {
-    const { locale } = this.props;
+    const { locale, mayHaveSponsoredStories } = this.props;
     // Select layout render data by adding spocs and position to recommendations
     const { layoutRender } = selectLayoutRender({
       state: this.props.DiscoveryStream,
@@ -322,6 +323,8 @@ export class _DiscoveryStreamBase extends React.PureComponent {
             showPrefName={topStories.pref.feed}
             title={sectionTitle}
             subTitle={subTitle}
+            mayHaveSponsoredStories={mayHaveSponsoredStories}
+            spocMessageVariant={message?.properties?.spocMessageVariant}
             eventSource="CARDGRID"
           >
             {this.renderLayout(layoutRender)}

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

@@ -326,6 +326,7 @@ export class _CardGrid extends React.PureComponent {
       onboardingExperience,
       ctaButtonSponsors,
       ctaButtonVariant,
+      spocMessageVariant,
       widgets,
       recentSavesEnabled,
       hideDescriptions,
@@ -374,6 +375,7 @@ export class _CardGrid extends React.PureComponent {
             saveToPocketCard={saveToPocketCard}
             ctaButtonSponsors={ctaButtonSponsors}
             ctaButtonVariant={ctaButtonVariant}
+            spocMessageVariant={spocMessageVariant}
             recommendation_id={rec.recommendation_id}
           />
         )

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

@@ -86,6 +86,8 @@ export const DefaultMeta = ({
   sponsored_by_override,
   saveToPocketCard,
   ctaButtonVariant,
+  dispatch,
+  spocMessageVariant,
 }) => (
   <div className="meta">
     <div className="info-wrap">
@@ -112,6 +114,8 @@ export const DefaultMeta = ({
         sponsored_by_override={sponsored_by_override}
         cta_button_variant={ctaButtonVariant}
         source={source}
+        dispatch={dispatch}
+        spocMessageVariant={spocMessageVariant}
       />
     )}
     {/* Sponsored label is normally in the way of any message.
@@ -411,39 +415,23 @@ export class _DSCard extends React.PureComponent {
         className={`ds-card ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName}`}
         ref={this.setContextMenuButtonHostRef}
       >
+        <div className="img-wrapper">
+          <DSImage
+            extraClassNames="img"
+            source={this.props.image_src}
+            rawSource={this.props.raw_image_src}
+            sizes={this.dsImageSizes}
+            url={this.props.url}
+            title={this.props.title}
+            isRecentSave={isRecentSave}
+          />
+        </div>
         <SafeAnchor
           className="ds-card-link"
           dispatch={this.props.dispatch}
           onLinkClick={!this.props.placeholder ? this.onLinkClick : undefined}
           url={this.props.url}
         >
-          <div className="img-wrapper">
-            <DSImage
-              extraClassNames="img"
-              source={this.props.image_src}
-              rawSource={this.props.raw_image_src}
-              sizes={this.dsImageSizes}
-              url={this.props.url}
-              title={this.props.title}
-              isRecentSave={isRecentSave}
-            />
-          </div>
-          {ctaButtonVariant === "variant-b" && (
-            <div className="cta-header">Shop Now</div>
-          )}
-          <DefaultMeta
-            source={source}
-            title={this.props.title}
-            excerpt={excerpt}
-            newSponsoredLabel={newSponsoredLabel}
-            timeToRead={timeToRead}
-            context={this.props.context}
-            context_type={this.props.context_type}
-            sponsor={this.props.sponsor}
-            sponsored_by_override={this.props.sponsored_by_override}
-            saveToPocketCard={saveToPocketCard}
-            ctaButtonVariant={ctaButtonVariant}
-          />
           <ImpressionStats
             flightId={this.props.flightId}
             rows={[
@@ -460,6 +448,24 @@ export class _DSCard extends React.PureComponent {
             source={this.props.type}
           />
         </SafeAnchor>
+        {ctaButtonVariant === "variant-b" && (
+          <div className="cta-header">Shop Now</div>
+        )}
+        <DefaultMeta
+          source={source}
+          title={this.props.title}
+          excerpt={excerpt}
+          newSponsoredLabel={newSponsoredLabel}
+          timeToRead={timeToRead}
+          context={this.props.context}
+          context_type={this.props.context_type}
+          sponsor={this.props.sponsor}
+          sponsored_by_override={this.props.sponsored_by_override}
+          saveToPocketCard={saveToPocketCard}
+          ctaButtonVariant={ctaButtonVariant}
+          dispatch={this.props.dispatch}
+          spocMessageVariant={this.props.spocMessageVariant}
+        />
         {saveToPocketCard && (
           <div className="card-stp-button-hover-background">
             <div className="card-stp-button-position-wrapper">

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -131,9 +131,9 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
   }
 
   .ds-card-link {
+    position: absolute;
     height: 100%;
-    display: flex;
-    flex-direction: column;
+    width: 100%;
     text-decoration: none;
 
     &:hover {
@@ -255,7 +255,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
-      column-gap: var(--space-small);
+      gap: 0 var(--space-small);
       margin-top: 0;
     }
 

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

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { cardContextTypes } from "../../Card/types.js";
+import { SponsoredContentHighlight } from "../FeatureHighlight/SponsoredContentHighlight";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { FluentOrText } from "../../FluentOrText/FluentOrText.jsx";
 import React from "react";
@@ -82,6 +83,8 @@ export class DSContextFooter extends React.PureComponent {
       sponsored_by_override,
       cta_button_variant,
       source,
+      spocMessageVariant,
+      dispatch,
     } = this.props;
 
     const sponsorLabel = SponsorLabel({
@@ -119,6 +122,12 @@ export class DSContextFooter extends React.PureComponent {
       return (
         <div className="story-footer">
           {sponsorLabel}
+          {sponsorLabel && spocMessageVariant === "variant-b" && (
+            <SponsoredContentHighlight
+              dispatch={dispatch}
+              position="inset-block-end inset-inline-start"
+            />
+          )}
           {dsMessageLabel}
         </div>
       );

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSContextFooter/_DSContextFooter.scss

@@ -2,7 +2,10 @@
   color: var(--newtab-text-secondary-color);
   inset-inline-start: 0;
   margin-top: 12px;
+  display: flex;
+  gap: var(--space-large);
   position: relative;
+  pointer-events: none;
 
   .story-sponsored-label span {
     display: inline-block;