Wix Manage Banner

1// Dev-only banner linking the running app to its Wix Business Manager (the back office).
2// Renders ONLY in a dev build (never in production) and is dismissible (persisted per site).
3// Mount it at the top of your Layout's fixed region, ABOVE <Header/> (see INSTRUCTIONS STEP 4) —
4// banner + header ride together as one fixed block, so nothing drifts or gaps on scroll.
5import { useState } from "react";
6import { WIX_METASITE_ID } from "@/rest/wix-config";
7
8const DASHBOARD_URL = `https://manage.wix.com/dashboard/${WIX_METASITE_ID}`;
9const DISMISS_KEY = `wix-manage-banner-dismissed-${WIX_METASITE_ID}`;
10const IS_DEV = (() => { try { return Boolean(import.meta.env?.DEV); } catch { return false; } })();
11
12export default function WixManageBanner() {
13  const [dismissed, setDismissed] = useState(() => {
14    try { return Boolean(window.localStorage.getItem(DISMISS_KEY)); } catch { return false; }
15  });
16  // No flag → no banner. Never renders in prod, once dismissed, or before the id is filled in.
17  if (!IS_DEV || dismissed || WIX_METASITE_ID.startsWith("<")) return null;
18
19  const dismiss = () => {
20    setDismissed(true);
21    try { window.localStorage.setItem(DISMISS_KEY, "1"); } catch { /* ignore disabled storage */ }
22  };
23
24  return (
25    <div style={{
26      position: "relative", display: "flex", alignItems: "center", justifyContent: "center", gap: 14,
27      width: "100%", padding: "12px 48px", boxSizing: "border-box",
28      background: "#fff", color: "#131720", fontSize: 15,
29      fontFamily: "system-ui,-apple-system,sans-serif", borderBottom: "1px solid #e2e2ea",
30    }}>
31      <span>
32        Manage your business behind this site in Wix{" "}
33        <a href={DASHBOARD_URL} target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "underline" }}>business manager</a>
34      </span>
35      <a href={DASHBOARD_URL} target="_blank" rel="noopener" style={{
36        background: "#131720", color: "#fff", borderRadius: 999, padding: "8px 18px", fontSize: 14, textDecoration: "none",
37      }}>Open</a>
38      <button type="button" aria-label="Dismiss banner" onClick={dismiss} style={{
39        position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)",
40        background: "none", border: "none", color: "#868aa5", fontSize: 16, lineHeight: 1, cursor: "pointer", padding: 6,
41      }}>✕</button>
42    </div>
43  );
44}