73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
// Seeded provider for design-sync preview cards. Mirrors the repo's own offline
|
|
// preview client (tradein-mvp/frontend/src/app/ui-preview/estimate/page.tsx):
|
|
// a QueryClient pre-filled with the FIXTURE_* data + a fake authorized user, so
|
|
// fetch-coupled cards (HouseAnalyticsSection, PlacementHistoryCard, StreetDealsCard)
|
|
// and auth-gated ones (RouteGuard, UserMenu) render offline. Bundled into
|
|
// window.<GLOBAL> via cfg.extraEntries → shares the SAME react-query instance as
|
|
// the components (context identity), which a second copy in a preview would break.
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { useState } from "react";
|
|
|
|
import {
|
|
FIXTURE_ANALYTICS,
|
|
FIXTURE_ESTIMATE,
|
|
FIXTURE_PLACEMENT,
|
|
FIXTURE_SALES,
|
|
FIXTURE_SELLTIME,
|
|
} from "../tradein-mvp/frontend/src/app/ui-preview/estimate/fixture";
|
|
|
|
// Inlined to avoid importing @/lib/useMe → @/lib/api, which reads process.env
|
|
// at module top-level; in an extraEntries module that evaluates before the
|
|
// synth-entry process shim and aborts the whole bundle. Key must match
|
|
// useMe.ts's ME_QUERY_KEY exactly.
|
|
const ME_QUERY_KEY = ["auth", "me"] as const;
|
|
const PREVIEW_ID = FIXTURE_ESTIMATE.estimate_id;
|
|
|
|
const PREVIEW_USER = {
|
|
username: "preview",
|
|
role: "admin",
|
|
allowed_paths: ["/**"],
|
|
deny_paths: [],
|
|
brand: null,
|
|
};
|
|
|
|
export function PreviewProvider({ children }: { children: React.ReactNode }) {
|
|
const [client] = useState(() => {
|
|
const qc = new QueryClient({
|
|
defaultOptions: {
|
|
queries: { retry: false, staleTime: Infinity, refetchOnWindowFocus: false },
|
|
},
|
|
});
|
|
qc.setQueryData(ME_QUERY_KEY, PREVIEW_USER);
|
|
qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "placement-history"], FIXTURE_PLACEMENT);
|
|
qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "house-analytics"], FIXTURE_ANALYTICS);
|
|
qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "sell-time-sensitivity"], FIXTURE_SELLTIME);
|
|
qc.setQueryData(["trade-in", "estimate", PREVIEW_ID, "cian-price-changes"], []);
|
|
qc.setQueryData(
|
|
[
|
|
"trade-in",
|
|
"sales-vs-listings",
|
|
FIXTURE_ESTIMATE.target_address,
|
|
FIXTURE_ESTIMATE.area_m2,
|
|
FIXTURE_ESTIMATE.rooms,
|
|
],
|
|
FIXTURE_SALES,
|
|
);
|
|
return qc;
|
|
});
|
|
return (
|
|
<QueryClientProvider client={client}>
|
|
{/* v2 HUD font vars. The app defines --font-manrope/--font-plex-mono via
|
|
next/font in app/v2/layout.tsx, which is excluded from the synth
|
|
bundle (next/font loader crash) — so the vars never exist in capture
|
|
and tokens.font.* fell back. The @font-face for both families ships
|
|
in .design-sync/fonts/brand-fonts.css (cfg.extraFonts), but that
|
|
pipeline extracts @font-face blocks ONLY (a :root{} there is
|
|
dropped) — map the vars here instead. */}
|
|
<style>{":root{--font-manrope:'Manrope';--font-plex-mono:'IBM Plex Mono'}"}</style>
|
|
{children}
|
|
</QueryClientProvider>
|
|
);
|
|
}
|