Merge pull request #909 from PolicyEngine/codex/california-wealth-tax-app-shell

Add website route for California wealth tax tool

Author: MaxGhenis

website/src/__tests__/components/apps/SyncedAppIframe.test.tsx

@@ -0,0 +1,60 @@
+import { act, render } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+
+import SyncedAppIframe from "@/components/apps/SyncedAppIframe";
+
+describe("SyncedAppIframe", () => {
+  test("forwards parent query params into the iframe URL", () => {
+    window.history.replaceState(
+      null,
+      "",
+      "/us/california-wealth-tax?date=2025-10-17&yield=0.02",
+    );
+
+    const { container } = render(
+      <SyncedAppIframe
+        srcPath="/us/california-wealth-tax/embed"
+        title="California wealth tax"
+        initialQuery="date=2025-10-17&yield=0.02"
+      />,
+    );
+
+    const iframe = container.querySelector("iframe");
+
+    expect(iframe).not.toBeNull();
+    expect(iframe?.getAttribute("src")).toBe(
+      "/us/california-wealth-tax/embed?date=2025-10-17&yield=0.02",
+    );
+    expect(iframe?.getAttribute("allow")).toBe("clipboard-write");
+  });
+
+  test("syncs iframe query param updates back to the parent URL", () => {
+    window.history.replaceState(null, "", "/us/california-wealth-tax");
+    const replaceStateSpy = vi.spyOn(window.history, "replaceState");
+
+    render(
+      <SyncedAppIframe
+        srcPath="/us/california-wealth-tax/embed"
+        title="California wealth tax"
+      />,
+    );
+
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          origin: window.location.origin,
+          data: {
+            type: "urlUpdate",
+            params: "date=2025-10-17&yield=0.02",
+          },
+        }),
+      );
+    });
+
+    expect(replaceStateSpy).toHaveBeenCalledWith(
+      null,
+      "",
+      "/us/california-wealth-tax?date=2025-10-17&yield=0.02",
+    );
+  });
+});

website/src/app/[countryId]/california-wealth-tax/page.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import SyncedAppIframe from "@/components/apps/SyncedAppIframe";
+
+export const metadata: Metadata = {
+  title: "California wealth tax fiscal impact calculator",
+  description:
+    "Estimate how California's proposed billionaire wealth tax changes revenue once avoidance, migration, return flows, and income-tax offsets are taken into account.",
+};
+
+export default async function CaliforniaWealthTaxPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ countryId: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const { countryId } = await params;
+  const resolvedSearchParams = await searchParams;
+
+  if (countryId !== "us") {
+    notFound();
+  }
+
+  const initialQuery = new URLSearchParams();
+  for (const [key, value] of Object.entries(resolvedSearchParams)) {
+    if (Array.isArray(value)) {
+      value.forEach((entry) => initialQuery.append(key, entry));
+    } else if (value !== undefined) {
+      initialQuery.set(key, value);
+    }
+  }
+
+  return (
+    <SyncedAppIframe
+      srcPath={`/${countryId}/california-wealth-tax/embed`}
+      title="California wealth tax fiscal impact calculator | PolicyEngine"
+      initialQuery={initialQuery.toString()}
+    />
+  );
+}

website/src/components/apps/SyncedAppIframe.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+interface SyncedAppIframeProps {
+  srcPath: string;
+  title: string;
+  height?: string;
+  initialQuery?: string;
+}
+
+export default function SyncedAppIframe({
+  srcPath,
+  title,
+  height = "calc(100vh - 58px)",
+  initialQuery = "",
+}: SyncedAppIframeProps) {
+  const [query, setQuery] = useState(initialQuery);
+
+  const iframeUrl = useMemo(() => {
+    return query ? `${srcPath}?${query}` : srcPath;
+  }, [query, srcPath]);
+
+  useEffect(() => {
+    const basePath = srcPath.replace(/\/embed$/, "");
+
+    const syncQueryFromLocation = () => {
+      const currentQuery = window.location.search.replace(/^\?/, "");
+      setQuery(currentQuery);
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      if (
+        event.data?.type === "hashchange" &&
+        typeof event.data.hash === "string"
+      ) {
+        const hash = event.data.hash || "";
+
+        if (hash && !hash.startsWith("#")) {
+          const subPath = hash.startsWith("/") ? hash : `/${hash}`;
+          window.history.replaceState(null, "", `${basePath}${subPath}`);
+        } else {
+          window.history.replaceState(null, "", `${basePath}${hash}`);
+        }
+      }
+
+      if (
+        event.data?.type === "urlUpdate" &&
+        typeof event.data.params === "string"
+      ) {
+        const query = event.data.params ? `?${event.data.params}` : "";
+        window.history.replaceState(null, "", `${basePath}${query}`);
+        setQuery(event.data.params || "");
+      }
+    };
+
+    syncQueryFromLocation();
+    window.addEventListener("message", handleMessage);
+    window.addEventListener("popstate", syncQueryFromLocation);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      window.removeEventListener("popstate", syncQueryFromLocation);
+    };
+  }, [srcPath]);
+
+  return (
+    <iframe
+      src={iframeUrl}
+      title={title}
+      allow="clipboard-write"
+      style={{
+        width: "100%",
+        height,
+        border: "none",
+        display: "block",
+      }}
+    />
+  );
+}