Merge branch 'bottom-banner' into next

mdn · Oct 25, 2023 · 2db263e · 2db263e
2 parents ef2eb5f + d3b00a9
commit 2db263e
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 13 deletions.
diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx
@@ -267,11 +267,11 @@ 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>
         <PlayQueue standalone={true} />
       </div>
+      <BottomBanner />
     </>
   );
 }

diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx
@@ -52,7 +52,7 @@ const PLACEMENT_MAP: Record<PlacementType, RegExp> = {
   side: /\/[^/]+\/(play|docs\/|blog\/|search$)/i,
   top: /\/[^/]+\/(?!$|_homepage$).*/i,
   hpMain: /\/[^/]+\/($|_homepage$)/i,
-  hpFooter: /\/[^/]+\/($|_homepage$)/i,
+  hpFooter: /\/[^/]+\/($|_homepage$|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,65 @@ 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 {
+    display: grid;
+    grid-template-areas:
+      "pong note"
+      "pong no";
+    grid-template-columns: auto minmax(0, 15rem);
+    margin: 0 auto;
+    max-width: var(--max-width);
+    padding: 0 1rem;
+
+    .pong {
+      grid-area: pong;
+      justify-self: center;
+
+      a {
+        display: flex;
+
+        img {
+          height: auto;
+        }
+      }
+    }
+
+    .pong-note {
+      color: var(--place-bottom-banner-color);
+      font-size: 0.625rem;
+      grid-area: note;
+      margin-top: 0.5rem;
+      text-decoration: underline;
+    }
+
+    .no-pong {
+      color: var(--place-bottom-banner-color);
+      font-size: 0.625rem;
+      grid-area: no;
+      margin-top: auto;
+    }
+
+    @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,18 +190,31 @@ function HpPlacement({
       imageHeight={imageHeight}
       style={css}
       renderer={RenderHpPlacement}
-      typ="hp-main"
+      typ={typ}
     ></PlacementInner>
   );
 }
 
 export function BottomBanner() {
-  return (
+  const placementData = usePlacement()?.hpFooter;
+  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 ? (
+    <section className="place bottom-banner"></section>
+  ) : (
     <PlacementInner
-      pong={{ status: Status.empty }}
+      pong={placementData}
+      imageWidth={728}
+      imageHeight={90}
+      style={css}
       renderer={RenderBottomBanner}
       typ="bottom-banner"
-    />
+    ></PlacementInner>
   );
 }
 
@@ -278,6 +296,7 @@ export function PlacementInner({
           user,
           style,
           version,
+          typ,
         })}
     </>
   );
@@ -295,6 +314,7 @@ function RenderSideOrTopBanner({
   user,
   style,
   version = 1,
+  typ,
 }: PlacementRenderArgs) {
   return (
     <section
@@ -305,7 +325,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 +344,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 +391,8 @@ function RenderHpPlacement({
   imageHeight,
   copy,
   style,
+  version = 1,
+  typ,
 }: PlacementRenderArgs) {
   return (
     <section
@@ -378,8 +402,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 +420,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>
+  );
 }