Ramp loading for NextJS

RAMP.tsx

"use client";

import { usePathname } from "next/navigation";
import Script from "next/script";
import { useEffect, useState } from "react";

type RampWindow = Window & {
  ramp?: {
    que: Array<() => void>;
    spaNewPage: (pathname: string) => void;
    passiveMode?: boolean;
  };
};

declare const window: RampWindow;

export function PlaywireAds({
  PUB_ID,
  WEBSITE_ID,
}: {
  PUB_ID: string;
  WEBSITE_ID: string;
}) {
  const [scriptLoaded, setScriptLoaded] = useState(false);
  const pathname = usePathname();

  // Initialize ramp on mount
  useEffect(() => {
    if (!(PUB_ID && WEBSITE_ID)) {
      // biome-ignore lint/suspicious/noConsole: Error logging for missing configuration
      console.error("PUB_ID or WEBSITE_ID is not set");
      return;
    }

    if (!scriptLoaded) {
      if (!window.ramp) {
        window.ramp = {
          que: [],
          spaNewPage: (_pathname: string) => {
            // Placeholder until Playwire script initializes
          },
        };
      }

      window.ramp.que = window.ramp.que || [];
      window.ramp.passiveMode = true;
    }
  }, [PUB_ID, WEBSITE_ID, scriptLoaded]);

  // Handle SPA navigation on pathname change
  useEffect(() => {
    // Only fire if script is loaded
    if (!(scriptLoaded && window.ramp?.spaNewPage)) {
      return;
    }

    // Fire spaNewPage when pathname changes to update ads for the new page
    window.ramp.que.push(() => {
      window.ramp?.spaNewPage(pathname);
    });
  }, [pathname, scriptLoaded]);

  const handleScriptLoad = () => {
    setScriptLoaded(true);
  };

  if (!(PUB_ID && WEBSITE_ID)) {
    return null;
  }

  return (
    <Script
      onLoad={handleScriptLoad}
      src={`//cdn.intergient.com/${PUB_ID}/${WEBSITE_ID}/ramp.js`}
      strategy="afterInteractive"
    />
  );
}