// Price Rules section — exchange-rate triggered pricing (killer feature) // Big hero block because this is the differentiator. const SectionWrap = window.SectionWrap; const SectionHead = window.SectionHead; const GridBG = window.GridBG; const Eyebrow = window.Eyebrow; const { useState, useEffect, useRef } = React; // Format helpers const fmtDecimal = (n) => n.toFixed(2); const fmtInteger = (n) => Math.round(n).toLocaleString('tr-TR').replace(/\./g, '\u202F'); // narrow no-break space // Live ticker chip — USD / EUR / Gold. Simulates a live market feed with // mean-reverting random walk (pulls toward weekAvg so the value stays plausible) // plus a brief up/down flash on the number whenever it ticks. const TickerChip = ({ label, start, weekAvg, color, fmt = 'decimal', jitter = 0.08 }) => { const [current, setCurrent] = useState(start); const [flash, setFlash] = useState(null); // 'up' | 'down' | null const prevRef = useRef(start); useEffect(() => { let flashTimeout; const tick = () => { const prev = prevRef.current; // Mean-reversion: gentle pull toward weekAvg so values stay near real-world range const pull = (weekAvg - prev) * 0.03; // Symmetric random noise const noise = (Math.random() - 0.5) * 2 * jitter; const next = Math.max(0, prev + pull + noise); setCurrent(next); if (Math.abs(next - prev) > jitter * 0.05) { setFlash(next > prev ? 'up' : 'down'); clearTimeout(flashTimeout); flashTimeout = setTimeout(() => setFlash(null), 480); } prevRef.current = next; }; // Stagger so all 3 tickers don't tick in unison const offset = Math.random() * 1500; const startTimer = setTimeout(() => { tick(); const iv = setInterval(tick, 1700 + Math.random() * 1100); startTimer._iv = iv; }, offset); return () => { clearTimeout(startTimer); clearTimeout(flashTimeout); if (startTimer._iv) clearInterval(startTimer._iv); }; }, []); const delta = ((current - weekAvg) / weekAvg) * 100; const up = delta >= 0; const format = fmt === 'integer' ? fmtInteger : fmtDecimal; const valueColor = flash === 'up' ? '#34d399' : flash === 'down' ? '#f87171' : '#e5e1e4'; return (
{label}
{/* Value — full width; Delta below it so it never wraps/overlaps on narrow chips */}
{format(current)}
{up?'▲':'▼'} {Math.abs(delta).toFixed(2)}%
7g ort · {format(weekAvg)}
); }; // A visual rule row: IF ... THEN ... const RuleRow = ({ cond, action, active=true }) => (
{active ? 'aktif' : 'pasif'} IF {cond} → {action}
); // Fallback values if /api/rates fetch fails (realistic 2026-Q2 TR market) const FALLBACK_RATES = { usd: { start: 44.85, avg: 44.70 }, eur: { start: 52.82, avg: 52.50 }, gold: { start: 6966, avg: 6893 }, }; const PriceRulesSection = () => { const [rates, setRates] = useState(FALLBACK_RATES); const [loaded, setLoaded] = useState(false); const [isMobile, setIsMobile] = useState( typeof window !== 'undefined' && window.innerWidth < 768 ); useEffect(() => { const onResize = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); useEffect(() => { // One-shot fetch on landing load — seeds the tickers with real current rates. // After seeding, the random-walk simulation inside TickerChip takes over // (landing page, no polling — see project_claude_design_landing). let cancelled = false; fetch('/api/rates', { cache: 'no-store' }) .then(r => r.ok ? r.json() : Promise.reject(r.status)) .then(data => { if (cancelled) return; const r = data?.rates || {}; const a = data?.avg7 || {}; const next = { usd: { start: r.usd?.sell ?? FALLBACK_RATES.usd.start, avg: a.usd || FALLBACK_RATES.usd.avg }, eur: { start: r.eur?.sell ?? FALLBACK_RATES.eur.start, avg: a.eur || FALLBACK_RATES.eur.avg }, gold: { start: r.gold?.sell ?? FALLBACK_RATES.gold.start, avg: a.gold || FALLBACK_RATES.gold.avg }, }; setRates(next); setLoaded(true); }) .catch(() => { /* keep fallback values */ }); return () => { cancelled = true; }; }, []); // Scale jitter proportionally to each pair so movement feels natural at any price level const jitterUsd = rates.usd.start * 0.0018; // ~0.08 TL on 44.85 const jitterEur = rates.eur.start * 0.0014; // ~0.07 TL on 52.82 const jitterGold = rates.gold.start * 0.0012; // ~8 TL on 6966 // key ensures TickerChip re-mounts with fresh state once real rates land const k = loaded ? 'live' : 'fallback'; return (
{/* LEFT: Live tickers + rule editor */}
Kural Editörü
4 kural · tümü aktif
{/* RIGHT: Telegram trigger flow */}
✈
Telegram · ShopPanel Bot
canlı · az önce
⚠️ USD tetiklendi: 33.82 → 34.28 (+%1.36)
27 ürün etkileniyor. Onaylıyor musun?
✓ 27 ürün güncellendi.
Trendyol · 14 · Shopify · 8 · Hepsiburada · 5
veya tam otomatik
{/* Distribution channels strip */}
Bildirim kanalları
{['Telegram','WhatsApp','Push','E-posta','SMS','Slack'].map(c => (
{c}
))}
); }; window.PriceRulesSection = PriceRulesSection;