chore(pong): update mapping (#9884)

* chore(pong): update mapping * add TextColor and BackgroundColor * alt field
mdn · Nov 6, 2023 · 6c044cc · 6c044cc
1 parent 423c86e
commit 6c044cc
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 72 deletions.
diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx
@@ -4,6 +4,7 @@ import useSWR from "swr";
 import { PLACEMENT_ENABLED } from "./env";
 import { useUserData } from "./user-context";
 import { useLocation } from "react-router";
+import { Payload as PlacementData } from "../../libs/pong/types";
 
 export enum Status {
   success = "success",
@@ -13,35 +14,6 @@ export enum Status {
   empty = "empty",
 }
 
-export interface Fallback {
-  click: string;
-  view: string;
-  copy: string;
-  image: string;
-  by: string;
-}
-
-export interface PlacementData {
-  status: Status;
-  click?: string;
-  view?: string;
-  copy?: string;
-  image?: string;
-  fallback?: Fallback;
-  cta?: string;
-  colors?: {
-    textColor?: string;
-    backgroundColor?: string;
-    ctaTextColor?: string;
-    ctaBackgroundColor?: string;
-    textColorDark?: string;
-    backgroundColorDark?: string;
-    ctaTextColorDark?: string;
-    ctaBackgroundColorDark?: string;
-  };
-  version?: number;
-}
-
 type PlacementType = "side" | "top" | "hpMain" | "hpFooter" | "bottom";
 export interface PlacementContextData
   extends Partial<Record<PlacementType, PlacementData>> {

diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -8,11 +8,8 @@ import { User, useUserData } from "../../../user-context";
 
 import "./index.scss";
 import { useGleanClick } from "../../../telemetry/glean-context";
-import {
-  PlacementData,
-  Status,
-  usePlacement,
-} from "../../../placement-context";
+import { Status, usePlacement } from "../../../placement-context";
+import { Payload as PlacementData } from "../../../../../libs/pong/types";
 import { BANNER_AI_HELP_CLICK } from "../../../telemetry/constants";
 
 interface Timer {
@@ -24,6 +21,7 @@ interface PlacementRenderArgs {
   extraClassNames?: string[];
   click: string;
   image: string;
+  alt?: string;
   imageWidth: number;
   imageHeight: number;
   copy?: string;
@@ -276,8 +274,7 @@ export function PlacementInner({
     };
   }, [isVisible, isIntersecting, sendViewed]);
 
-  const { image, copy } = pong?.fallback || pong || {};
-  const { click, version } = pong || {};
+  const { image, copy, alt, click, version } = pong || {};
   return (
     <>
       {!isServer &&
@@ -287,6 +284,7 @@ export function PlacementInner({
           extraClassNames,
           click,
           image,
+          alt,
           imageWidth,
           imageHeight,
           copy,
@@ -305,6 +303,7 @@ function RenderSideOrTopBanner({
   extraClassNames = [],
   click,
   image,
+  alt,
   imageWidth,
   imageHeight,
   copy,
@@ -332,8 +331,8 @@ function RenderSideOrTopBanner({
         >
           <img
             src={`/pimg/${encodeURIComponent(image || "")}`}
-            aria-hidden="true"
-            alt=""
+            aria-hidden={!Boolean(alt)}
+            alt={alt || ""}
             width={imageWidth}
             height={imageHeight}
           ></img>
@@ -385,6 +384,7 @@ function RenderHpPlacement({
   extraClassNames = [],
   click,
   image,
+  alt,
   imageWidth,
   imageHeight,
   copy,
@@ -409,7 +409,7 @@ function RenderHpPlacement({
       >
         <img
           src={`/pimg/${encodeURIComponent(image || "")}`}
-          alt={copy}
+          alt={alt || copy}
           width={imageWidth}
           height={imageHeight}
         ></img>
@@ -423,6 +423,7 @@ function RenderBottomBanner({
   extraClassNames = [],
   click,
   image,
+  alt,
   imageWidth,
   imageHeight,
   copy,
@@ -448,7 +449,7 @@ function RenderBottomBanner({
         >
           <img
             src={`/pimg/${encodeURIComponent(image || "")}`}
-            alt={copy}
+            alt={alt || copy}
             width={imageWidth}
             height={imageHeight}
           ></img>

diff --git a/libs/pong/pong2.js b/libs/pong/pong2.js
@@ -14,51 +14,56 @@ export function createPong2GetHandler(zoneKeys, coder) {
       });
 
     const requests = placements.map(async ({ name, zoneKey }) => {
-      const {
-        ads: [
-          {
-            description = null,
-            statlink,
-            statimp,
-            smallImage,
-            backgroundColor,
-            backgroundHoverColor,
-            callToAction,
-            ctaBackgroundColor,
-            ctaBackgroundHoverColor,
-            ctaTextColor,
-            ctaTextColorHover,
-            textColor,
-            textColorHover,
-          },
-        ] = [],
-      } = await (
+      const res = await (
         await fetch(
           `https://srv.buysellads.com/ads/${zoneKey}.json?forwardedip=${encodeURIComponent(
             anonymousIp
           )}${userAgent ? `&useragent=${encodeURIComponent(userAgent)}` : ""}`
         )
       ).json();
+      const {
+        ads: [
+          {
+            statlink = null,
+            statimp,
+            Description,
+            Image,
+            ImageTitle,
+            BackgroundColor,
+            BackgroundColorLight,
+            BackgroundColorDark,
+            CallToAction,
+            CtaBackgroundColorLight,
+            CtaBackgroundColorDark,
+            CtaTextColorLight,
+            CtaTextColorDark,
+            TextColor,
+            TextColorLight,
+            TextColorDark,
+          },
+        ] = [],
+      } = res;
       return {
         name,
         p:
-          description === null
+          statlink === null
             ? null
             : {
                 click: coder.encodeAndSign(statlink),
                 view: coder.encodeAndSign(statimp),
-                image: coder.encodeAndSign(smallImage),
-                copy: description && he.decode(description),
-                cta: callToAction && he.decode(callToAction),
+                image: coder.encodeAndSign(Image),
+                alt: ImageTitle && he.decode(ImageTitle),
+                copy: Description && he.decode(Description),
+                cta: CallToAction && he.decode(CallToAction),
                 colors: {
-                  textColor,
-                  backgroundColor,
-                  ctaTextColor,
-                  ctaBackgroundColor,
-                  textColorDark: textColorHover,
-                  backgroundColorDark: backgroundHoverColor,
-                  ctaTextColorDark: ctaTextColorHover,
-                  ctaBackgroundColorDark: ctaBackgroundHoverColor,
+                  textColor: TextColor || TextColorLight,
+                  backgroundColor: BackgroundColor || BackgroundColorLight,
+                  ctaTextColor: CtaTextColorLight,
+                  ctaBackgroundColor: CtaBackgroundColorLight,
+                  textColorDark: TextColorDark,
+                  backgroundColorDark: BackgroundColorDark,
+                  ctaTextColorDark: CtaTextColorDark,
+                  ctaBackgroundColorDark: CtaBackgroundColorDark,
                 },
               },
       };
@@ -86,13 +91,14 @@ export function createPong2GetHandler(zoneKeys, coder) {
           if (v === null) {
             return null;
           }
-          const { copy, image, click, view, cta, colors = {} } = v;
+          const { copy, image, alt, click, view, cta, colors = {} } = v;
           return [
             p,
             {
               status: "success",
               copy,
               image,
+              alt,
               cta,
               colors,
               click,

diff --git a/libs/pong/types.d.ts b/libs/pong/types.d.ts
@@ -15,6 +15,7 @@ export type Payload = {
   view: string;
   copy?: string;
   image?: string;
+  alt?: string;
   cta?: string;
   colors?: Colors;
   version: number;