/* global React, Ic */ // Shared functional UI atoms for Flux Discounts const { useState: useS, useEffect: useE, useRef: useR, useCallback } = React; // ---------- toast system ---------- let _toastId = 0; const _toastSubs = new Set(); function toast(message, type = "info") { const t = { id: ++_toastId, message, type }; _toastSubs.forEach((f) => f(t)); } function ToastHost() { const [items, setItems] = useS([]); useE(() => { const f = (t) => { setItems((xs) => [...xs, t]); setTimeout(() => setItems((xs) => xs.filter((x) => x.id !== t.id)), 3000); }; _toastSubs.add(f); return () => _toastSubs.delete(f); }, []); const icon = { success: Ic.check, error: Ic.x, info: Ic.zap }; return (
{items.map((t) => { const I = icon[t.type] || Ic.zap; return (
{t.message}
); })}
); } // ---------- copy button ---------- function Copyable({ text, label, className = "btn ghost sm", iconOnly = false }) { const [done, setDone] = useS(false); const copy = (e) => { e.stopPropagation(); const write = navigator.clipboard ? navigator.clipboard.writeText(text) : Promise.reject(); write.catch(() => { const ta = document.createElement("textarea"); ta.value = text; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); } catch {} ta.remove(); }).finally(() => {}); // optimistic setDone(true); setTimeout(() => setDone(false), 1400); toast("Copied to clipboard", "success"); }; const I = done ? Ic.check : Ic.copy; return ( ); } // ---------- code block with syntax-ish highlight + copy ---------- function CodeBlock({ code, copyText }) { return ( 
{code}
); } // ---------- field ---------- function Field({ label, hint, children, style }) { return (
{label && } {children}
); } // ---------- modal ---------- function Modal({ title, icon, onClose, children, footer, size }) { useE(() => { const k = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, [onClose]); const I = icon; // Portal to so the fixed scrim is positioned against the real viewport, // not a transformed ancestor (.fade-in views create a containing block). return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose(); }}>
e.stopPropagation()}>
{I && }

{title}

{children}
{footer &&
{footer}
}
, document.body ); } // ---------- toggle ---------- function Switch({ on, onChange }) { return
{ e.stopPropagation(); onChange(!on); }} role="switch" aria-checked={on} />; } // ---------- segmented ---------- function Seg({ value, onChange, options }) { return (
{options.map((o) => ( ))}
); } // ---------- discount thumbnail (image or striped placeholder) ---------- function DiscountThumb({ d, className }) { if (d.image) return { e.currentTarget.style.display = "none"; }} />; return
product shot
; } // ---------- status pill for delivery ---------- function DeliveryPill({ status, code }) { if (status === "delivered") return DELIVERED{code ? ` · ${code}` : ""}; if (status === "failed") return FAILED{code ? ` · ${code}` : ""}; if (status === "sending") return SENDING; return {status}; } // ---------- confirm helper (inline two-step button) ---------- function DangerButton({ onConfirm, children, confirmLabel = "Confirm?", className = "btn danger sm" }) { const [armed, setArmed] = useS(false); useE(() => { if (!armed) return; const t = setTimeout(() => setArmed(false), 2600); return () => clearTimeout(t); }, [armed]); return ( ); } Object.assign(window, { toast, ToastHost, Copyable, CodeBlock, Field, Modal, Switch, Seg, DiscountThumb, DeliveryPill, DangerButton, });