feat(pong): bottom banner (#9883)

* feat(pong): bottom banner * fix image height * move to own unit * center * fix gap * lint * feedback * Update libs/pong/pong.js Co-authored-by: Claas Augner <[email protected]> * lint --------- Co-authored-by: Claas Augner <[email protected]>
mdn · Oct 27, 2023 · d533e90 · d533e90
1 parent d1f6bf3
commit d533e90
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 15 deletions.
diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx
@@ -264,10 +264,10 @@ export function Document(props /* TODO: define a TS interface for this */) {
             <DocumentSurvey doc={doc} />
             <RenderDocumentBody doc={doc} />
             <Metadata doc={doc} locale={locale} />
-            <BottomBanner />
           </article>
         </MainContentContainer>
       </div>
+      <BottomBanner />
     </>
   );
 }

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

diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
@@ -227,3 +227,70 @@ div.empty-place {
   --place-top-cta-background: var(--place-top-cta-background-dark);
   --place-top-cta-color: var(--place-top-cta-color-dark);
 }
+
+.bottom-banner-container {
+  background-color: var(
+    --place-bottom-banner-background,
+    var(--background-primary)
+  );
+  color: var(--place-bottom-banner-color, var(--text-primary));
+  margin: 0;
+  width: 100%;
+
+  > section.place.bottom-banner {
+    column-gap: 3rem;
+    display: grid;
+    grid-template-areas:
+      "nope pong note"
+      "nope pong no";
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);
+    margin: 0 auto;
+    max-width: var(--max-width);
+    padding: 0 1rem;
+
+    .pong {
+      grid-area: pong;
+      justify-self: center;
+
+      img {
+        height: auto;
+      }
+    }
+
+    .pong-note {
+      color: var(--place-bottom-banner-color, var(--text-primary));
+      font-size: 0.625rem;
+      grid-area: note;
+      margin-top: 0.5rem;
+      text-decoration: underline;
+    }
+
+    .no-pong {
+      color: var(--place-bottom-banner-color, var(--text-primary));
+      font-size: 0.625rem;
+      grid-area: no;
+      margin-top: auto;
+    }
+
+    @media screen and (max-width: $screen-xl) {
+      grid-template-areas:
+        "pong note"
+        "pong no";
+      grid-template-columns: auto max-content;
+      grid-template-rows: auto 2rem;
+    }
+
+    @media screen and (max-width: $screen-lg) {
+      grid-template-areas:
+        "pong pong"
+        "note no";
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 2rem;
+
+      .no-pong {
+        justify-self: end;
+        width: fit-content;
+      }
+    }
+  }
+}
diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -31,6 +31,7 @@ interface PlacementRenderArgs {
   user: User;
   style: object;
   version?: number;
+  typ: string;
 }
 
 const INTERSECTION_OPTIONS = {
@@ -148,6 +149,7 @@ export function HpMainPlacement() {
     placementData: placementData?.hpMain,
     imageWidth: 970,
     imageHeight: 250,
+    typ: "hp-main",
   });
 }
 
@@ -157,17 +159,20 @@ export function HpFooterPlacement() {
     placementData: placementData?.hpFooter,
     imageWidth: 728,
     imageHeight: 90,
+    typ: "hp-footer",
   });
 }
 
 function HpPlacement({
   placementData,
   imageWidth,
   imageHeight,
+  typ,
 }: {
   placementData?: PlacementData;
   imageWidth: number;
   imageHeight: number;
+  typ: string;
 }) {
   const { backgroundColor } = placementData?.colors || {};
   const css = Object.fromEntries(
@@ -185,19 +190,30 @@ function HpPlacement({
       imageHeight={imageHeight}
       style={css}
       renderer={RenderHpPlacement}
-      typ="hp-main"
+      typ={typ}
     ></PlacementInner>
   );
 }
 
 export function BottomBanner() {
-  return (
+  const placementData = usePlacement()?.bottom;
+  const { backgroundColor, textColor } = placementData?.colors || {};
+  const css = Object.fromEntries(
+    [
+      ["--place-bottom-banner-background", backgroundColor],
+      ["--place-bottom-banner-color", textColor],
+    ].filter(([_, v]) => Boolean(v))
+  );
+  return placementData ? (
     <PlacementInner
-      pong={{ status: Status.empty }}
+      pong={placementData}
+      imageWidth={728}
+      imageHeight={90}
+      style={css}
       renderer={RenderBottomBanner}
       typ="bottom-banner"
-    />
-  );
+    ></PlacementInner>
+  ) : null;
 }
 
 export function PlacementInner({
@@ -278,6 +294,7 @@ export function PlacementInner({
           user,
           style,
           version,
+          typ,
         })}
     </>
   );
@@ -295,6 +312,7 @@ function RenderSideOrTopBanner({
   user,
   style,
   version = 1,
+  typ,
 }: PlacementRenderArgs) {
   return (
     <section
@@ -305,7 +323,7 @@ function RenderSideOrTopBanner({
       <p className="pong-box">
         <a
           className="pong"
-          data-glean="pong: pong->click"
+          data-glean={`pong: pong->click ${typ}`}
           href={`/pong/click?code=${encodeURIComponent(
             click
           )}&version=${version}`}
@@ -324,8 +342,10 @@ function RenderSideOrTopBanner({
         {cta && (
           <a
             className="pong-cta"
-            data-glean="pong: pong->click"
-            href={`/pong/click?code=${encodeURIComponent(click)}`}
+            data-glean={`pong: pong->click ${typ}`}
+            href={`/pong/click?code=${encodeURIComponent(
+              click
+            )}&version=${version}`}
             target="_blank"
             rel="noreferrer"
           >
@@ -369,6 +389,8 @@ function RenderHpPlacement({
   imageHeight,
   copy,
   style,
+  version = 1,
+  typ,
 }: PlacementRenderArgs) {
   return (
     <section
@@ -378,8 +400,10 @@ function RenderHpPlacement({
     >
       <a
         className="pong"
-        data-glean="pong: pong->click"
-        href={`/pong/click?code=${encodeURIComponent(click)}`}
+        data-glean={`pong: pong->click ${typ}`}
+        href={`/pong/click?code=${encodeURIComponent(
+          click
+        )}&version=${version}`}
         target="_blank"
         rel="noreferrer"
       >
@@ -394,6 +418,64 @@ function RenderHpPlacement({
   );
 }
 
-function RenderBottomBanner({ place }: PlacementRenderArgs) {
-  return <div ref={place} className="empty-place bottom-banner"></div>;
+function RenderBottomBanner({
+  place,
+  extraClassNames = [],
+  click,
+  image,
+  imageWidth,
+  imageHeight,
+  copy,
+  user,
+  style,
+  version = 1,
+  typ,
+}: PlacementRenderArgs) {
+  return (
+    <div className="bottom-banner-container" style={style}>
+      <section
+        ref={place}
+        className={["place", "bottom-banner", ...extraClassNames].join(" ")}
+      >
+        <a
+          className="pong"
+          data-glean={`pong: pong->click ${typ}`}
+          href={`/pong/click?code=${encodeURIComponent(
+            click
+          )}&version=${version}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={`/pimg/${encodeURIComponent(image || "")}`}
+            alt={copy}
+            width={imageWidth}
+            height={imageHeight}
+          ></img>
+        </a>
+        <a
+          href="/en-US/advertising"
+          className="pong-note"
+          data-glean="pong: pong->about"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Mozilla ads
+        </a>
+        <a
+          className="no-pong"
+          data-glean={
+            "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>
+    </div>
+  );
 }
diff --git a/libs/pong/pong.js b/libs/pong/pong.js
@@ -7,6 +7,7 @@ const PLACEMENTS = {
   top: 585,
   hpMain: 3214,
   hpFooter: 2327,
+  bottom: 7748,
 };
 
 // Allow list for client sent keywords.
@@ -45,7 +46,12 @@ export function createPongGetHandler(client, coder) {
           if (v === null || v?.[0] === null) {
             return [p, null];
           }
-          if ((p === "side") | (p === "hpMain") | (p === "hpFooter")) {
+          if (
+            p === "side" ||
+            p === "hpMain" ||
+            p === "hpFooter" ||
+            p === "bottom"
+          ) {
             const [{ contents, clickUrl, impressionUrl }] = v;
             const { colors } = contents?.[0]?.data?.customData || {};
             return [