From 6c044ccd20e7e1041445a03b13cb5bc36914653f Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Mon, 6 Nov 2023 10:12:15 +0100 Subject: [PATCH] chore(pong): update mapping (#9884) * chore(pong): update mapping * add TextColor and BackgroundColor * alt field --- client/src/placement-context.tsx | 30 +-------- client/src/ui/organisms/placement/index.tsx | 23 +++---- libs/pong/pong2.js | 70 +++++++++++---------- libs/pong/types.d.ts | 1 + 4 files changed, 52 insertions(+), 72 deletions(-) diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx index ee078b2a59dc..e4eafb266973 100644 --- 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> { diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx index 37487a6ff0d3..9038df03db7c 100644 --- 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({ > @@ -385,6 +384,7 @@ function RenderHpPlacement({ extraClassNames = [], click, image, + alt, imageWidth, imageHeight, copy, @@ -409,7 +409,7 @@ function RenderHpPlacement({ > {copy} @@ -423,6 +423,7 @@ function RenderBottomBanner({ extraClassNames = [], click, image, + alt, imageWidth, imageHeight, copy, @@ -448,7 +449,7 @@ function RenderBottomBanner({ > {copy} diff --git a/libs/pong/pong2.js b/libs/pong/pong2.js index 0435d0801fbe..9ba544d3c9b8 100644 --- 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 index 0117b80fa088..56a4093a75ca 100644 --- 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;