chore(placement): add hpTop (#12228)

Author: fiji-flo

Diff for: client/src/placement-context.tsx

@@ -14,7 +14,13 @@ export enum Status {
   empty = "empty",
 }
 
-type PlacementType = "side" | "top" | "hpMain" | "hpFooter" | "bottom";
+type PlacementType =
+  | "side"
+  | "top"
+  | "hpTop"
+  | "hpMain"
+  | "hpFooter"
+  | "bottom";
 export interface PlacementContextData
   extends Partial<Record<PlacementType, PlacementData>> {
   plusAvailable?: boolean;
@@ -31,6 +37,10 @@ const PLACEMENT_MAP: Record<PlacementType, { typ: string; pattern: RegExp }> = {
     typ: "top-banner",
     pattern: /\/[^/]+\/(?!$|_homepage$).*/i,
   },
+  hpTop: {
+    typ: "top-banner",
+    pattern: /\/[^/]+\/($|_homepage$)/i,
+  },
   hpMain: {
     typ: "hp-main",
     pattern: /\/[^/]+\/($|_homepage$)/i,

Diff for: client/src/ui/organisms/placement/index.tsx

@@ -127,6 +127,7 @@ function TopPlacementFallbackContent() {
 export function TopPlacement() {
   const isServer = useIsServer();
   const placementData = usePlacement();
+  const data = placementData?.hpTop || placementData?.top;
   const {
     textColor,
     backgroundColor,
@@ -136,7 +137,7 @@ export function TopPlacement() {
     backgroundColorDark,
     ctaTextColorDark,
     ctaBackgroundColorDark,
-  } = placementData?.top?.colors || {};
+  } = data?.colors || {};
   const css = Object.fromEntries(
     [
       ["--place-top-background-light", backgroundColor],
@@ -156,23 +157,23 @@ export function TopPlacement() {
   const status =
     isServer || placementData?.status === Status.loading
       ? "loading"
-      : placementData?.top
+      : data
         ? "visible"
         : "fallback";
 
   return (
     <div className={`top-banner ${status}`} style={css}>
-      {isServer || !placementData?.top ? (
+      {isServer || !data ? (
         <section className="place top container">
           {!isServer && placementData?.status !== Status.loading && (
             <TopPlacementFallbackContent />
           )}
         </section>
       ) : (
         <PlacementInner
-          pong={placementData.top}
+          pong={data}
           extraClassNames={["top", "container"]}
-          cta={placementData.top?.cta}
+          cta={data?.cta}
           imageHeight={50}
           renderer={RenderSideOrTopBanner}
           typ="top-banner"