feat(placement): hp takeover (#9022)

* feat(placement): hp takeover * feedback * make a 100%
mdn · Jun 5, 2023 · 2ff4a7b · 2ff4a7b
1 parent f26497c
commit 2ff4a7b
Show file tree

Hide file tree

Showing 6 changed files with 284 additions and 193 deletions.
diff --git a/client/src/homepage/index.scss b/client/src/homepage/index.scss
@@ -4,10 +4,17 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
   overflow-x: clip;
   overflow-y: visible;
   position: relative;
 
   width: 100%;
+
+  > * {
+    margin-top: 2rem;
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
 }
diff --git a/client/src/homepage/index.tsx b/client/src/homepage/index.tsx
@@ -4,16 +4,19 @@ import FeaturedArticles from "./featured-articles";
 import { LatestNews } from "./latest-news";
 import RecentContributions from "./recent-contributions";
 import { ContributorSpotlight } from "./contributor-spotlight";
+import { HpFooterPlacement, HpMainPlacement } from "../ui/organisms/placement";
 
 export function Homepage(props) {
   return (
     <main id="content" role="main">
       <div className="homepage mdn-ui-body-m">
         <HomepageHero />
+        <HpMainPlacement />
         <FeaturedArticles {...props} />
         <LatestNews {...props} />
         <RecentContributions {...props} />
         <ContributorSpotlight {...props} />
+        <HpFooterPlacement />
       </div>
     </main>
   );

diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx
@@ -40,15 +40,17 @@ export interface PlacementData {
   };
 }
 
-type PlacementType = "side" | "top";
+type PlacementType = "side" | "top" | "hpMain" | "hpFooter";
 export interface PlacementContextData
   extends Partial<Record<PlacementType, PlacementData>> {
   status: Status;
 }
 
 const PLACEMENT_MAP: Record<PlacementType, RegExp> = {
-  side: /\/[^/]+\/(docs\/|blog\/|search$|_homepage)/i,
-  top: /.*/i,
+  side: /\/[^/]+\/(docs\/|blog\/|search$)/i,
+  top: /\/[^/]+\/(?!$|_homepage$).*/i,
+  hpMain: /\/[^/]+\/($|_homepage$)/i,
+  hpFooter: /\/[^/]+\/($|_homepage$)/i,
 };
 
 function placementTypes(pathname: string): string[] {

diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
@@ -144,6 +144,22 @@ section.place {
   }
 }
 
+section.place.hp-main {
+  background-color: var(--place-hp-main-background);
+  margin: 0;
+  width: 100%;
+
+  a {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    img {
+      height: auto;
+    }
+  }
+}
+
 .top-banner {
   --place-top-background-light: var(--background-secondary);
   --place-top-color-light: var(--text-primary);

diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useIsServer, usePageVisibility } from "../../../hooks";
-import { useUserData } from "../../../user-context";
+import { User, useUserData } from "../../../user-context";
 
 import "./index.scss";
 import { useGleanClick } from "../../../telemetry/glean-context";
@@ -17,6 +17,19 @@ interface Timer {
   notVisible?: boolean;
 }
 
+interface PlacementRenderArgs {
+  place: any;
+  extraClassNames?: string[];
+  click: string;
+  image: string;
+  imageWidth: number;
+  imageHeight: number;
+  copy?: string;
+  cta?: string;
+  user: User;
+  style: object;
+}
+
 function viewed(
   pong: PlacementData,
   observer: IntersectionObserver | null = null
@@ -42,6 +55,7 @@ export function SidePlacement() {
       extraClassNames={["side"]}
       imageWidth={130}
       imageHeight={100}
+      renderer={RenderSideOrTopBanner}
     ></PlacementInner>
   );
 }
@@ -114,24 +128,76 @@ export function TopPlacement() {
           extraClassNames={["top", "container"]}
           cta={placementData.top?.cta}
           imageHeight={50}
+          renderer={RenderSideOrTopBanner}
         ></PlacementInner>
       )}
     </div>
   );
 }
 
+export function HpMainPlacement() {
+  const placementData = usePlacement();
+  return HpPlacement({
+    placementData: placementData?.hpMain,
+    imageWidth: 970,
+    imageHeight: 250,
+  });
+}
+
+export function HpFooterPlacement() {
+  const placementData = usePlacement();
+  return HpPlacement({
+    placementData: placementData?.hpFooter,
+    imageWidth: 728,
+    imageHeight: 90,
+  });
+}
+
+function HpPlacement({
+  placementData,
+  imageWidth,
+  imageHeight,
+}: {
+  placementData?: PlacementData;
+  imageWidth: number;
+  imageHeight: number;
+}) {
+  const { backgroundColor } = placementData?.colors || {};
+  const css = Object.fromEntries(
+    [["--place-hp-main-background", backgroundColor]].filter(([_, v]) =>
+      Boolean(v)
+    )
+  );
+  return !placementData ? (
+    <section className="place hp-main"></section>
+  ) : (
+    <PlacementInner
+      pong={placementData}
+      extraClassNames={["hp-main"]}
+      imageWidth={imageWidth}
+      imageHeight={imageHeight}
+      style={css}
+      renderer={RenderHpPlacement}
+    ></PlacementInner>
+  );
+}
+
 export function PlacementInner({
   pong,
   extraClassNames = [],
   cta,
   imageWidth,
   imageHeight,
+  style,
+  renderer,
 }: {
   pong: PlacementData;
   extraClassNames?: string[];
   cta?: string;
   imageWidth?: number;
   imageHeight?: number;
+  style?: object;
+  renderer: (PlacementRenderArgs) => JSX.Element;
 }) {
   const isServer = useIsServer();
   const user = useUserData();
@@ -209,73 +275,127 @@ export function PlacementInner({
 
   return (
     <>
-      {!isServer && click && image && (
-        <>
-          <section
-            ref={place}
-            className={["place", ...extraClassNames].join(" ")}
+      {!isServer &&
+        click &&
+        image &&
+        renderer({
+          place,
+          extraClassNames,
+          click,
+          image,
+          imageWidth,
+          imageHeight,
+          copy,
+          cta,
+          user,
+          style,
+        })}
+    </>
+  );
+}
+
+function RenderSideOrTopBanner({
+  place,
+  extraClassNames = [],
+  click,
+  image,
+  imageWidth,
+  imageHeight,
+  copy,
+  cta,
+  user,
+  style,
+}: PlacementRenderArgs) {
+  return (
+    <section
+      ref={place}
+      className={["place", ...extraClassNames].join(" ")}
+      style={style}
+    >
+      <p className="pong-box">
+        <a
+          className="pong"
+          data-pong="pong->click"
+          href={`/pong/click?code=${encodeURIComponent(click)}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={`/pimg/${encodeURIComponent(image || "")}`}
+            aria-hidden="true"
+            alt=""
+            width={imageWidth}
+            height={imageHeight}
+          ></img>
+          <span>{copy}</span>
+        </a>
+        {cta && (
+          <a
+            className="pong-cta"
+            data-pong="pong->click"
+            href={`/pong/click?code=${encodeURIComponent(click)}`}
+            target="_blank"
+            rel="noreferrer"
           >
-            <p className="pong-box">
-              <a
-                className="pong"
-                data-pong="pong->click"
-                href={`/pong/click?code=${encodeURIComponent(click)}${
-                  pong?.fallback
-                    ? `&fallback=${encodeURIComponent(pong?.fallback?.view)}`
-                    : ""
-                }`}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <img
-                  src={`/pimg/${encodeURIComponent(image || "")}`}
-                  aria-hidden="true"
-                  alt=""
-                  width={imageWidth}
-                  height={imageHeight}
-                ></img>
-                <span>{copy}</span>
-              </a>
-              {cta && (
-                <a
-                  className="pong-cta"
-                  data-pong="pong->click"
-                  href={`/pong/click?code=${encodeURIComponent(click)}${
-                    pong?.fallback
-                      ? `&fallback=${encodeURIComponent(pong?.fallback?.view)}`
-                      : ""
-                  }`}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {cta}
-                </a>
-              )}
-              <a
-                href={pong?.fallback?.by || "/en-US/advertising"}
-                className="pong-note"
-                data-pong="pong->about"
-                target="_blank"
-                rel="noreferrer"
-              >
-                {pong?.fallback?.by ? "Ads by Carbon" : "Mozilla ads"}
-              </a>
-            </p>
+            {cta}
+          </a>
+        )}
+        <a
+          href="/en-US/advertising"
+          className="pong-note"
+          data-pong="pong->about"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Mozilla ads
+        </a>
+      </p>
 
-            <a
-              className="no-pong"
-              data-pong={user?.isSubscriber ? "pong->settings" : "pong->plus"}
-              href={
-                user?.isSubscriber
-                  ? "/en-US/plus/settings?ref=nope"
-                  : "/en-US/plus?ref=nope#subscribe"
-              }
-            >
-              Don't want to see ads?
-            </a>
-          </section>
-        </>
-      )}
-    </>
+      <a
+        className="no-pong"
+        data-pong={user?.isSubscriber ? "pong->settings" : "pong->plus"}
+        href={
+          user?.isSubscriber
+            ? "/en-US/plus/settings?ref=nope"
+            : "/en-US/plus?ref=nope#subscribe"
+        }
+      >
+        Don't want to see ads?
+      </a>
+    </section>
+  );
+}
+
+function RenderHpPlacement({
+  place,
+  extraClassNames = [],
+  click,
+  image,
+  imageWidth,
+  imageHeight,
+  copy,
+  style,
+}: PlacementRenderArgs) {
+  return (
+    <section
+      ref={place}
+      className={["place", ...extraClassNames].join(" ")}
+      style={style}
+    >
+      <a
+        className="pong"
+        data-pong="pong->click"
+        href={`/pong/click?code=${encodeURIComponent(click)}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <img
+          src={`/pimg/${encodeURIComponent(image || "")}`}
+          alt={copy}
+          width={imageWidth}
+          height={imageHeight}
+        ></img>
+      </a>
+    </section>
   );
 }