/* global React, Icon, ProductVisual, WPC80 */ const { useState, useEffect, useRef, useMemo } = React; // ============ DATA (real production catalog) ============ // Sizes / flavors / variants come from window.WPC80 (built from // data/wpc80-real.json by scripts/build-wpc80-data.mjs). Same shape as // the previous hand-rolled D_SIZES / D_FLAVORS / D_VARIANTS so the rest of // this file (cascading availability, discount countdown, restock CTA, etc.) // is unchanged. if (!window.WPC80) { throw new Error('WPC80 product data not loaded - include prototypes/wpc80-data.jsx before PDPDesktop.jsx'); } const D_PRODUCT = window.WPC80.product; const D_SIZES = window.WPC80.sizes; const D_FLAVORS = window.WPC80.flavors; const D_VARIANTS = window.WPC80.variants; // Mock gift picks for the giftblock thumbnail strip (real Latte: // $activeGifts[$activeVariant->product_id] in _form.latte). Mirrors the // 'Vybrali ste X z Y darčekov' summary row. const D_GIFT_PICKS = [ { id: 'g1', name: 'Shaker 700 ml', icon: 'shaker' }, { id: 'g2', name: 'Vzorka kreatínu 5 g', icon: 'sample' }, ]; const D_GIFT_PICKS_TOTAL = 3; // total gift slots available for this variant (mock) // Quantity discount tiers (Latte: $productQuantityPrices) const D_QTY_TIERS = [ { min: 3, max: 4, perPack: 22.90 }, { min: 5, max: 9, perPack: 21.90 }, { min: 10, max: null, perPack: 20.90 }, ]; // Helpers const variantKey = (sId, fId) => sId + '_' + fId; const getVariant = (sId, fId) => D_VARIANTS[variantKey(sId, fId)] || null; const variantsForSize = (sId) => Object.entries(D_VARIANTS).filter(([k]) => k.startsWith(sId + '_')); const variantsForFlavor = (fId) => Object.entries(D_VARIANTS).filter(([k]) => k.endsWith('_' + fId)); const countActiveForSize = (sId) => variantsForSize(sId).filter(([,v]) => v.stock !== 'out').length; const hasGiftAnywhere = (sId) => variantsForSize(sId).some(([,v]) => v.gift); // Gallery: slide 0 is wired to the active variant image (real CDN). Slides // 1..N-1 stay as design placeholders for now until we wire alt photo / // detail / scoop / video fixtures. const D_GAL_SLIDES = [ { kind: 'variant', label: 'WPC 80', sub: '', color: '#0077BC' }, { kind: 'image', src: '../assets/img/generated/wpc80-lifestyle-gpt-image-2.png', label: 'SHAKE', sub: 'LIFESTYLE', color: '#F0F7FC' }, // v0.7.4: portrait packshot 1122x1402 (0.8:1) does not fill the 1:1 stage, // leaving ~10% white gutters left/right when the canvas is white. Setting // bg to --bg-alt (#F4F4F4) matches the photo's own srgb(243,243,243) studio // backdrop sampled from its corners so the gutter blends invisibly. Other // image slides are 2048x2048 squares - they fill the canvas and need no bg. { kind: 'image', src: '../assets/img/generated/wpc80-lifestyle-03.png', label: 'WPC 80', sub: 'DETAIL', color: '#F0F7FC', bg: 'var(--bg-alt)' }, { kind: 'image', src: '../assets/img/generated/wpc80-powder-detail-gpt-image-2.png', label: 'POWDER', sub: 'DETAIL', color: '#F0F7FC' }, // v0.7.9 #4: legacy 'tub-lg' dummy SVG slides (BACK / DETAIL INFO / // SCOOP 30G) dropped per user feedback 'dummy produktove fotky, tieto // svg.. nechcem'. Only the video placeholder slide remains so the // video CTA chip in the gallery still has a slot to point at; the // ProductVisual fallback in the render branch stays as a defensive // path but no D_GAL_SLIDES row triggers it any more. { kind: 'tub-lg', label: 'VIDEO', sub: 'REVIEW', color: '#F96628', video: true }, ]; const D_MAIN_IMAGE = '../assets/img/products/wpc-80-main.jpg'; const productImage = () => D_MAIN_IMAGE || D_PRODUCT.mainImage; const galleryImage = (slide) => slide?.kind === 'image' ? slide.src : productImage(); // v0.7.7 C-phase: cross-sell + recently-viewed cards now feed off REAL // namaximum.sk DB rows shipped via prototypes/cross-sell-data.jsx // (window.CROSSSELL.products + window.RECENTLY_VIEWED.products). The // adapter normalises DB shape (minPrice / ratingsCount / image) to the // shape these cards already expected (price / reviews / image). function adaptCrossSellRow(r) { return { id: r.id, name: r.name, slug: r.slug ? ('/' + r.slug.replace(/^\//, '')) : '#', image: r.image || null, price: r.minPrice, orig: null, rating: r.rating, reviews: r.ratingsCount, flag: null, // ProductVisual fallback (only used when image is missing): packColor: '#0077BC', packLabel: 'WPC', packSub: '', visual: 'tub', }; } const D_CROSS = (typeof window !== 'undefined' && window.CROSSSELL?.products ? window.CROSSSELL.products : []).map(adaptCrossSellRow); // Per-review fields: // - customerType: 'registered' (real Latte: customer_id != null) | 'guest' // Registered shows BOTH 'Overený zákazník' + 'Overený nákup' badges, // guest shows 'Neregistrovaný zákazník' + 'Overený nákup'. // - lang: ISO-2 review language (used by language filter dropdown). // - reply: optional { text, date } block from the NaMaximum team. const D_REVIEWS = [ { id: 1, name: 'Martin K.', initial: 'M', rating: 5, verified: true, customerType: 'registered', lang: 'sk', date: '18. 4. 2026', title: 'Výborná chuť, super rozpustnosť', body: 'Používam už tretie balenie. Mieša sa bez hrudiek aj v shakeri, chuť čokolády nie je prisladená. Certifikát som si overil na stránke - sedí.', size: '1 kg', flavor: 'Čokoláda', tags: ['chuť', 'rozpustnosť'], helpful: 24, reply: { text: 'Ďakujeme za skvelú spätnú väzbu, Martin! Tešíme sa, že vám WPC 80 chutí. Tím NaMaximum', date: '20. 4. 2026' } }, { id: 2, name: 'Janka P.', initial: 'J', rating: 5, verified: true, customerType: 'registered', lang: 'sk', date: '10. 4. 2026', title: 'Cena/kvalita top', body: 'Skúšala som rôzne značky, za túto cenu je to najlepšie WPC. Vanilka nie je umelá, ani nenadúva. Odporúčam.', size: '2 kg', flavor: 'Vanilka', tags: ['cena', 'trávenie'], helpful: 18 }, { id: 3, name: 'Peter B.', initial: 'P', rating: 4, verified: true, customerType: 'guest', lang: 'cz', date: '5. 4. 2026', title: 'Dobré, ale jahoda trochu sladká', body: 'Kvalita proteínu super, rozpustnosť výborná. Jahodovou příchuť bych pro sebe dal o něco méně sladkou, ale to je subjektivní.', size: '1 kg', flavor: 'Jahoda', tags: ['chuť'], helpful: 9, reply: { text: 'Ďakujeme za upozornenie. Skontrolujeme aktuálne výrobné šarže a v prípade potreby upravíme proces. Tím NaMaximum', date: '8. 4. 2026' } }, { id: 4, name: 'Tomáš V.', initial: 'T', rating: 3, verified: true, customerType: 'guest', lang: 'sk', date: '2. 4. 2026', title: 'OK proteinprice ratio', body: 'Normálny WPC, nič výnimočné, ale za túto cenu nemám čo vyčítať. Banoffee je v poriadku.', size: '1 kg', flavor: 'Banoffee', tags: ['cena'], helpful: 4 }, { id: 5, name: 'Eszter N.', initial: 'E', rating: 5, verified: true, customerType: 'registered', lang: 'hu', date: '28. 3. 2026', title: 'Kiváló oldhatóság', body: 'Egy hete használom, csomómentesen oldódik, a Vanilla & Mango íz természetes. Ajánlom!', size: '2 kg', flavor: 'Vanilla & Mango', tags: ['oldhatóság', 'íz'], helpful: 11 }, { id: 6, name: 'Lukas H.', initial: 'L', rating: 4, verified: true, customerType: 'guest', lang: 'de', date: '24. 3. 2026', title: 'Gutes Preis-Leistungs-Verhältnis', body: 'Sehr gut löslich, der Schokoladengeschmack ist nicht zu süß. Gute Qualität für den Preis.', size: '1 kg', flavor: 'Chocolate', tags: ['chuť'], helpful: 7 }, ]; // Featured "bestRating" review - mirrors {ifset $bestRating} block in real // _reviews.latte. Pinned above the review list as a top-comment block. const D_REV_BEST = { rating: 5, title: 'Najlepší proteín za rozumnú cenu', body: 'Beriem už 3 roky, kvalita konštantná, rozpustnosť výborná. Banana je TOP príchuť, deti milujú. Odporúčam!', author: 'Martin K.', date: '12. mar 2024', verified: true, helpful: 42, variant: '1 kg / Banana', }; // Recently viewed products - mirrors visitorProducts list in real default.latte // (renders only when $visitorProductsCount > 0). v0.7.7 C-phase: backed // by window.RECENTLY_VIEWED.products (real top-8 sellers from OUTSIDE // the WPC 80 default category, so the carousel feels like cross-category // browsing, not 'more of the same'). const D_RECENT_VIEWED = (typeof window !== 'undefined' && window.RECENTLY_VIEWED?.products ? window.RECENTLY_VIEWED.products : []).map(adaptCrossSellRow); const D_FAQ_REGISTER_INDEXES = [0, 1, 2, 3, 4]; const D_REV_FILTERS = [ { id: 'all', label: 'Všetky', n: 1342 }, { id: 'verified', label: 'Overené', n: 1198 }, { id: '5', label: '★ 5', n: 1054 }, { id: '4', label: '★ 4', n: 212 }, { id: '3', label: '★ 3', n: 48 }, { id: '2', label: '★ 2', n: 18 }, { id: '1', label: '★ 1', n: 10 }, { id: 'chuť', label: 'chuť', n: 412 }, { id: 'rozpustnosť', label: 'rozpustnosť', n: 287 }, { id: 'cena', label: 'cena', n: 198 }, ]; const D_REV_DIST = [ { s: 5, pct: 79, n: 1054 }, { s: 4, pct: 16, n: 212 }, { s: 3, pct: 3, n: 48 }, { s: 2, pct: 1, n: 18 }, { s: 1, pct: 1, n: 10 }, ]; // Recommended-by-customer % - mirrors $recommendedByCustomer in _reviews.latte. // Computed as (★★★★ + ★★★★★) / total ratings. const D_REV_RECOMMEND_PCT = (() => { const total = D_REV_DIST.reduce((a, b) => a + b.n, 0); const positive = D_REV_DIST.filter(r => r.s >= 4).reduce((a, b) => a + b.n, 0); return total > 0 ? Math.round((positive / total) * 1000) / 10 : 0; })(); const D_FREE_SHIPPING = 59; // Top-level categories for desktop nav (mirrors live namaximum.sk header 1:1). const D_CATEGORIES_SK = [ { id: 'doplnky', label: 'Doplnky výživy', href: '/najpredavanejsie/' }, { id: 'potraviny',label: 'Zdravé potraviny', href: '/zdrave-potraviny/' }, { id: 'oblec', label: 'Oblečenie a príslušenstvo', href: '/oblecenie-a-prislusenstvo/' }, { id: 'domac', label: 'Domácnosť a drogéria', href: '/domacnost-a-drogeria/' }, { id: 'ciele', label: 'Tvoje ciele', href: '/products/goals' }, { id: 'akcie', label: 'Akcie!', href: '/akcia/', accent: true }, { id: 'novinky', label: 'Novinky', href: '/novinka/' }, ]; const D_CATEGORIES_HU = [ { id: 'doplnky', label: 'Étrend-kiegészítők', href: '/najpredavanejsie/' }, { id: 'potraviny',label: 'Egészséges élelmiszerek', href: '/zdrave-potraviny/' }, { id: 'oblec', label: 'Ruházat és kiegészítők', href: '/oblecenie-a-prislusenstvo/' }, { id: 'domac', label: 'Otthon és háztartás', href: '/domacnost-a-drogeria/' }, { id: 'ciele', label: 'Céljaid', href: '/products/goals' }, { id: 'akcie', label: 'Akciók!', href: '/akcia/', accent: true }, { id: 'novinky', label: 'Újdonságok', href: '/novinka/' }, ]; // Stars helper (same pattern as mobile) const DStars = ({ n = 5, size = 14 }) => { const full = Math.floor(n); const half = n - full >= 0.5; return ( {'★'.repeat(full)}{half ? '⯨' : ''}{'☆'.repeat(5 - full - (half ? 1 : 0))} ); }; // ========== DISCOUNT COUNTDOWN (mirrors Latte header-counter snippet) ========== function DCountdown({ deadline, lang }) { const [now, setNow] = useState(() => Date.now()); useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []); const diff = Math.max(0, deadline.getTime() - now); if (diff <= 0) return null; const totalH = Math.floor(diff / 3600000); if (totalH >= 26) { const days = Math.ceil(totalH / 24); return (
{lang === 'hu' ? ('Még ' + days + ' nap') : ('Zostáva ešte ' + days + ' dní')}
); } const h = String(totalH).padStart(2, '0'); const m = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0'); const s = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0'); return (
{lang === 'hu' ? 'Akció végéig' : 'Do konca akcie'} {h}:{m}:{s}
); } // ========== PER-VARIANT STOCK CHIP (small dot indicator on pills) ========== function DStockChip({ stock, restockDays, lang }) { const titles = lang === 'hu' ? { in: 'Raktáron', low: 'Utolsó darabok', restock: (restockDays || 0) + ' nap múlva', out: 'Elfogyott' } : { in: 'Skladom', low: 'Posledné kusy', restock: 'O ' + (restockDays || 0) + ' dní', out: 'Vypredané' }; if (stock === 'in') return ; if (stock === 'low') return ; if (stock === 'restock') return ; return ; } // ============ FEATURED REVIEW (bestRating top-comment) ============ // Mirrors {ifset $bestRating} block in real _reviews.latte: a single pinned // review rendered above the review controls/list. Read-only visual; no // interaction wired (helpful counter is decorative). function DRevFeatured({ t, review, lang }) { if (!review) return null; return (
★
{t.rev_best_label}

{review.title}

{review.body}

{review.author} {review.verified && ( {t.rev_verified} )} · {review.variant} · {review.date}
+1 {t.rev_best_helpful} {review.helpful}
); } // ============ RECENTLY VIEWED CAROUSEL ============ // Mirrors {if $visitorProductsCount > 0} block in real default.latte. Renders // a row of compact product cards (~25% smaller than cross-sell) before the // footer. UI only - no add-to-cart wiring, just a link out to the PDP. function DRecentViewed({ items, t, toEur, lang }) { if (!items || items.length === 0) return null; return (
); } // ============ AI REVIEW SUMMARY (desktop) ============ function DAiReviewSummary({ t, variant, onTopicClick, showBeta = true }) { const [loading, setLoading] = useState(true); useEffect(() => { const to = setTimeout(() => setLoading(false), 950); return () => clearTimeout(to); }, []); const sentiment = { pos: 83, neu: 12, neg: 5 }; return (
{t.ai_badge} {showBeta && BETA}
{loading ? t.ai_thinking : t.ai_title}
{t.ai_tldr}
+ {t.ai_pros_title}
    {t.ai_pros.map(([h, sub], i) => (
  • {h}{sub}
    • ))}
! {t.ai_cons_title}
    {t.ai_cons.map(([h, sub], i) => (
  • {h}{sub}
    • ))}
# {t.ai_topics_title}
{t.ai_topics.map((tp, i) => ( ))}
{t.ai_sent_pos}{sentiment.pos}% {t.ai_sent_neu}{sentiment.neu}% {t.ai_sent_neg}{sentiment.neg}%
{t.ai_meta(1342, t.ai_meta_date)}
{t.ai_disclaimer}
); } // ============ TWEAK DEFAULTS + STORAGE ============ // All 28 tweak keys with their default values. Used by: // - reset button in // - merging fallback for partial localStorage / window.__TWEAKS payloads // F2 (v0.8.1): default-flip wave - prototype now boots in real-style // state matching namaximum.sk WPC 80 PDP (live DOM probe 2026-05-05). // All 17 'innovation' tweaks (group1) flip to false. All 3 'edge case' // tweaks (group2) flip to false. sticky_tabs flips to false (real PDP // has no sticky tabs nor sticky buy panel). bundle_promo + // recently_viewed flip to false. UX-and-real tweaks stay ON because // the real eshop ships them (discount_timer / gallery_flags / // cross_sell / ship_opts / toasts). // // Per-category breakdown of changes vs v0.8.0: // group1 (17 flips): ai_summary, ai_beta_badge, savings_line, // social_proof, trust_strip, evidence_line, valueprops_strip, // alt_names, price_per_kg, qa_sort, qa_stats, review_topics, // review_reply_cta, sticky_tabs, bundle_promo, recently_viewed, // (promo_bar already false). ai_variant is a segment, untouched. // group2 (3 flips): qty_tiers, gift_bonus to false. expiration_warn // was already false. // demo: no changes. // ux_real: no changes. const D_TWEAK_DEFAULTS = { // Demo & state stock: 'in', discount: true, lang: 'sk', product_state: 'A', // AI features (group1) - real eshop has no AI summary / variant / badge ai_summary: false, ai_variant: 'classic', ai_beta_badge: false, // Urgency & gamification - real has discount_timer (qty_tiers / gift_bonus // are edge case states the customer rarely sees) discount_timer: true, expiration_warn: false, qty_tiers: false, gift_bonus: false, savings_line: false, social_proof: false, // Trust & content - real has gallery_flags (10 flag SVGs); the rest are // group1 features the eshop does not ship trust_strip: false, evidence_line: false, gallery_flags: true, valueprops_strip: false, alt_names: false, price_per_kg: false, // Q&A & reviews (all group1 - real PDP has plain product_questions / // product_reviews modules without sort, stats, topics, reply CTA) qa_sort: false, qa_stats: false, review_topics: false, review_reply_cta: false, // Layout & UX - real has cross_sell (single sibling link), ship_opts // (free-shipping progress + delivery ETA), toasts. promo_bar / // sticky_tabs are group1 features the eshop does not ship. promo_bar: false, sticky_tabs: false, cross_sell: true, ship_opts: true, toasts: true, // bundle_promo + recently_viewed: group1 features (real has neither on // PDP). F1 surfaced them in the panel; F2 flips both off so the // prototype ships clean and users opt in via the tweak panel. bundle_promo: false, recently_viewed: false, // G1 (v0.9.0): flavor selector variant. Default 'dropdown' matches the // real namaximum.sk parameter-box-with-select pattern (with our UX // upgrades: search/filter, keyboard nav, per-row badges, available // count). 'pills' preserves the previous default as alternative // design that fans out all 23 flavors at once. flavor_picker_variant: 'dropdown', }; // Storage key bumped v1 -> v2 (simple migration: every user gets fresh // real-style defaults on first reload after this build, old payload is // garbage-collected on read). const D_TWEAK_STORAGE_KEY = 'pdp-tweaks-v2'; const D_LEGACY_STORAGE_KEYS = ['pdp-tweaks-v1']; function readStoredTweaks() { try { if (typeof localStorage === 'undefined') return {}; // GC any older storage payloads from previous default sets so the // panel does not silently merge stale flags into a real-style boot. D_LEGACY_STORAGE_KEYS.forEach((k) => { try { localStorage.removeItem(k); } catch (_) {} }); const raw = localStorage.getItem(D_TWEAK_STORAGE_KEY); return raw ? (JSON.parse(raw) || {}) : {}; } catch (_) { return {}; } } // ============ FLOATING TWEAK PANEL ============ // Bottom-right floating action button + slide-in panel that exposes all 28 // tweak keys (12 legacy + 16 D2 wave). State lives in ; this // component just renders the surface and bubbles changes via `onChange(k, v)`. // // Keyboard shortcuts: 't' toggles, 'Escape' closes (both ignored when typing // in inputs/textareas/selects/contentEditable). function DTweakPanel({ tweaks, onChange, onReset, t }) { const [open, setOpen] = useState(false); // Per-category collapse state. All open by default; clicking the category // header collapses it inside the panel. const [collapsed, setCollapsed] = useState({}); const toggleCat = (id) => setCollapsed(s => ({ ...s, [id]: !s[id] })); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape' && open) { setOpen(false); return; } if (e.key !== 't' && e.key !== 'T') return; if (e.metaKey || e.ctrlKey || e.altKey) return; const target = e.target; const tag = (target && target.tagName) || ''; if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (target && target.isContentEditable)) return; e.preventDefault(); setOpen(o => !o); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open]); // Renders one boolean toggle row. const renderSwitch = (k, label, desc) => ( ); // Renders one enum row as a segmented control. const renderSegment = (k, label, options) => (
{label}
{options.map(o => ( ))}
); // F1 (v0.8.0): consolidated 6 categories into 4 user-facing sections. // Mapping comes from docs/PHASING-PLAN.md F1 final mapping. // - 'demo' : test scenarios (lang / stock / state / discount toggle) // - 'group1' : novel features beyond real eshop (default OFF after F2) // - 'group2' : edge case states normal customer rarely sees (default OFF) // - 'ux_real' : real eshop has these (default ON, demo can flip OFF) // Each category carries `bool: [keys]` so the bulk-toggle helper knows // which boolean tweaks to flip on "Všetko zapnúť / Všetko vypnúť". // Ai variant + lang + stock + product_state are segments and excluded. const categories = [ { id: 'demo', title: t.tweak_cat_demo, desc: t.tweak_cat_demo_desc, bool: ['discount'], render: () => [ renderSegment('lang', t.tweak_lang_label, [ { v: 'sk', l: 'SK' }, { v: 'hu', l: 'HU' }, ]), renderSegment('stock', t.tweak_stock_label, [ { v: 'in', l: t.tweak_stock_in }, { v: 'low', l: t.tweak_stock_low }, { v: 'out', l: t.tweak_stock_out }, ]), renderSwitch('discount', t.tweak_discount_label, t.tweak_discount_desc), renderSegment('product_state', t.tweak_product_state_label, [ { v: 'A', l: t.tweak_product_state_a }, { v: 'P', l: t.tweak_product_state_p }, ]), ], }, { id: 'group1', title: t.tweak_cat_group1, desc: t.tweak_cat_group1_desc, bool: [ 'ai_summary', 'ai_beta_badge', 'savings_line', 'social_proof', 'trust_strip', 'evidence_line', 'valueprops_strip', 'alt_names', 'price_per_kg', 'qa_sort', 'qa_stats', 'review_topics', 'review_reply_cta', 'promo_bar', 'sticky_tabs', 'bundle_promo', 'recently_viewed', ], render: () => [ renderSwitch('ai_summary', t.tweak_ai_summary_label, t.tweak_ai_summary_desc), renderSegment('ai_variant', t.tweak_ai_variant_label, [ { v: 'classic', l: t.tweak_ai_variant_classic }, { v: 'minimal', l: t.tweak_ai_variant_minimal }, ]), renderSwitch('ai_beta_badge', t.tweak_ai_beta_badge_label, t.tweak_ai_beta_badge_desc), renderSwitch('savings_line', t.tweak_savings_line_label, t.tweak_savings_line_desc), renderSwitch('social_proof', t.tweak_social_proof_label, t.tweak_social_proof_desc), renderSwitch('trust_strip', t.tweak_trust_strip_label, t.tweak_trust_strip_desc), renderSwitch('evidence_line', t.tweak_evidence_line_label, t.tweak_evidence_line_desc), renderSwitch('valueprops_strip', t.tweak_valueprops_strip_label, t.tweak_valueprops_strip_desc), renderSwitch('alt_names', t.tweak_alt_names_label, t.tweak_alt_names_desc), renderSwitch('price_per_kg', t.tweak_price_per_kg_label, t.tweak_price_per_kg_desc), renderSwitch('qa_sort', t.tweak_qa_sort_label, t.tweak_qa_sort_desc), renderSwitch('qa_stats', t.tweak_qa_stats_label, t.tweak_qa_stats_desc), renderSwitch('review_topics', t.tweak_review_topics_label, t.tweak_review_topics_desc), renderSwitch('review_reply_cta', t.tweak_review_reply_cta_label, t.tweak_review_reply_cta_desc), renderSwitch('promo_bar', t.tweak_promo_bar_label, t.tweak_promo_bar_desc), renderSwitch('sticky_tabs', t.tweak_sticky_tabs_label, t.tweak_sticky_tabs_desc), renderSwitch('bundle_promo', t.tweak_bundle_promo_label, t.tweak_bundle_promo_desc), renderSwitch('recently_viewed', t.tweak_recently_viewed_label, t.tweak_recently_viewed_desc), ], }, { id: 'group2', title: t.tweak_cat_group2, desc: t.tweak_cat_group2_desc, bool: ['expiration_warn', 'qty_tiers', 'gift_bonus'], render: () => [ renderSwitch('expiration_warn', t.tweak_expiration_warn_label, t.tweak_expiration_warn_desc), renderSwitch('qty_tiers', t.tweak_qty_tiers_label, t.tweak_qty_tiers_desc), renderSwitch('gift_bonus', t.tweak_gift_bonus_label, t.tweak_gift_bonus_desc), ], }, { id: 'ux_real', title: t.tweak_cat_ux_real, desc: t.tweak_cat_ux_real_desc, bool: ['discount_timer', 'gallery_flags', 'cross_sell', 'ship_opts', 'toasts'], render: () => [ renderSegment('flavor_picker_variant', t.tweak_flavor_picker_label, [ { v: 'dropdown', l: t.tweak_flavor_picker_dropdown }, { v: 'pills', l: t.tweak_flavor_picker_pills }, ]), renderSwitch('discount_timer', t.tweak_discount_timer_label, t.tweak_discount_timer_desc), renderSwitch('gallery_flags', t.tweak_gallery_flags_label, t.tweak_gallery_flags_desc), renderSwitch('cross_sell', t.tweak_cross_sell_label, t.tweak_cross_sell_desc), renderSwitch('ship_opts', t.tweak_ship_opts_label, t.tweak_ship_opts_desc), renderSwitch('toasts', t.tweak_toasts_label, t.tweak_toasts_desc), ], }, ]; // Bulk toggle: flip all boolean keys in a category to ON or OFF in one // call. Skips segments (lang / stock / product_state / ai_variant) since // they have no obvious 'on' state. Uses cat.bool list defined above. const bulkToggle = (cat, value) => { (cat.bool || []).forEach(k => onChange(k, value)); }; return ( <> ); } // --------------------------------------------------------------------------- // G1 (v0.9.0): DFlavorPicker - dropdown variant of the flavor selector, // matching real namaximum.sk's parameter-box-with-select pattern but with // UX upgrades the real eshop does not have: // - search/filter input (instant filter as you type) // - keyboard navigation (↑ / ↓ / Enter / Esc, mouse hover updates active) // - per-row badges (gift / discount / low stock / unavailable / out) // - available count in header ("12 z 23 dostupných v 1 kg") // - smooth open animation, click-outside / Esc to close // - selected row highlighted with primary accent rail + checkmark // - 26px swatch dot per row (same DS swatch as pills variant) // Pills variant is preserved as alternative design via tweak // `flavor_picker_variant: 'pills'` (see ux_real category in DTweakPanel). // --------------------------------------------------------------------------- function DFlavorPicker({ flavors, currentSize, sizeLabel, current, getVariant, t, lang, onPick }) { const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); const [active, setActive] = useState(0); const ref = useRef(null); const inputRef = useRef(null); const listRef = useRef(null); const rows = flavors.map((f) => { const variant = getVariant(currentSize, f.id); const exists = !!variant; const isOut = exists && variant.stock === 'out'; const isLow = exists && variant.stock === 'low'; const isRestk = exists && variant.stock === 'restock'; const hasDisc = exists && variant.orig && variant.orig > variant.price; const discPct = hasDisc ? Math.round((1 - variant.price / variant.orig) * 100) : 0; const label = (t.flavors && t.flavors[f.id]) || f.label; return { ...f, variant, exists, isOut, isLow, isRestk, hasDisc, discPct, label }; }); const q = query.trim().toLowerCase(); const visible = rows.filter(r => !q || r.label.toLowerCase().includes(q)); const availCount = rows.filter(r => r.exists && !r.isOut).length; const totalCount = rows.length; const selected = rows.find(r => r.id === current) || rows[0]; // Close on outside click useEffect(() => { if (!open) return; const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [open]); // Reset query + focus search input on open. Highlight active = current. useEffect(() => { if (open) { setQuery(''); const idx = rows.findIndex(r => r.id === current); setActive(idx >= 0 ? idx : 0); const tmr = setTimeout(() => { if (inputRef.current) inputRef.current.focus(); }, 60); return () => clearTimeout(tmr); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); // Scroll active row into view as user navigates useEffect(() => { if (!open || !listRef.current) return; const el = listRef.current.querySelector('.is-active'); if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' }); }, [active, open]); const selectFlavor = (id) => { onPick(id); setOpen(false); }; const onKeyDown = (e) => { if (e.key === 'Escape') { e.preventDefault(); setOpen(false); return; } if (e.key === 'ArrowDown') { e.preventDefault(); setActive(a => Math.min(visible.length - 1, a + 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setActive(a => Math.max(0, a - 1)); } else if (e.key === 'Enter') { e.preventDefault(); const r = visible[active]; if (r && r.exists && !r.isOut) selectFlavor(r.id); } }; const fmt = (n) => n.toFixed(2).replace('.', ',') + ' €'; const giftLabel = t.flavor_gift_short || (lang === 'hu' ? '+ ajándék' : '+ darček'); const lowLabel = t.flavor_stock_low || (lang === 'hu' ? 'kevés' : 'málo'); const restkLabel = t.flavor_stock_restock || (lang === 'hu' ? 'úton' : 'na ceste'); const outLabel = t.flavor_stock_out || (lang === 'hu' ? 'kifogyott' : 'vypredané'); const noneLabel = t.flavor_unavail || (lang === 'hu' ? 'nem elérhető' : 'nedostupné'); const placeholder = t.flavor_search_placeholder || (lang === 'hu' ? 'Íz keresése...' : 'Hľadať príchuť...'); const noResults = t.flavor_no_results || (lang === 'hu' ? 'Nincs találat' : 'Žiadne výsledky'); const countLabel = (lang === 'hu') ? (availCount + ' / ' + totalCount + (sizeLabel ? (' (' + sizeLabel + ')') : '')) : (availCount + ' z ' + totalCount + (sizeLabel ? (' v ' + sizeLabel) : '')); return (
{open && (
{t.flavor} {countLabel}
{ setQuery(e.target.value); setActive(0); }} onKeyDown={onKeyDown} autoComplete="off" spellCheck={false} /> {query && ( )}
{visible.length === 0 && (
{noResults}
)} {visible.map((r, i) => { const dis = !r.exists || r.isOut; const isCur = r.id === current; return ( ); })}
)}
); } // ============ MAIN COMPONENT ============ function DesktopPDP() { // Resolve the initial tweak snapshot once per mount: defaults <- window.__TWEAKS // <- localStorage. The panel writes to localStorage, so user edits survive a // reload while the showcase shell can still seed via window.__TWEAKS. const initialTweaks = (() => { const base = (typeof window !== 'undefined' && window.__TWEAKS) || {}; const stored = readStoredTweaks(); return { ...D_TWEAK_DEFAULTS, ...base, ...stored }; })(); const [stock, setStock] = useState(initialTweaks.stock); const [discount, setDiscount] = useState(initialTweaks.discount !== false); const [lang, setLang] = useState(initialTweaks.lang); const [galIdx, setGalIdx] = useState(0); // v0.7.1 polish: gallery image lightbox. null = closed, number = active // slide index. Opened by clicking the hero stage; closed via X, backdrop // click, or ESC. Prev/next arrows + ArrowLeft/ArrowRight wrap GAL_SLIDES. const [lightbox, setLightbox] = useState(null); const [size, setSize] = useState('1kg'); // Default flavor = highest-stock 1kg variant in the real catalog. const [flavor, setFlavor] = useState('chocolate-deluxe'); const [qty, setQty] = useState(1); const [fav, setFav] = useState(false); const [added, setAdded] = useState(false); const [filter, setFilter] = useState('all'); const [sort, setSort] = useState('recent'); // Customer Q&A state (replaces the old static FAQ). const [qaSort, setQaSort] = useState('helpful'); // 'helpful' | 'recent' | 'unanswered' const [qaVisible, setQaVisible] = useState(5); // "show more" pagination const [qaLiked, setQaLiked] = useState(new Set()); // qids the user upvoted in this session const [qaFormOpen, setQaFormOpen] = useState(false); const [qaForm, setQaForm] = useState({ name: '', email: '', variantId: '', question: '', consent: false }); const [qaSubmitting, setQaSubmitting] = useState(false); const [toasts, setToasts] = useState([]); const [addedCross, setAddedCross] = useState(new Set()); const [showSticky, setShowSticky] = useState(false); const [cartCount, setCartCount] = useState(3); const [helpful, setHelpful] = useState(new Set()); // Review enhancements (P2) const [langFilter, setLangFilter] = useState('all'); // 'all' | 'sk' | 'cz' | 'hu' | 'de' const [langDropOpen, setLangDropOpen] = useState(false); // dropdown open/close const [addRatingOpen, setAddRatingOpen] = useState(false); // Mock logged-in customer state (real Latte: $isCustomerLoggedIn). When true, // the add-rating form omits the name field; when false, the form is replaced // by a login hint, mirroring the real eshop. const [loggedIn, setLoggedIn] = useState(true); const [revFormRating, setRevFormRating] = useState(5); const [revFormForm, setRevFormForm] = useState({ name: '', variantId: '', short: '', summary: '' }); const [aiEnabled, setAiEnabled] = useState(initialTweaks.ai_summary !== false); const [aiVariant, setAiVariant] = useState(initialTweaks.ai_variant || 'classic'); const [promoBar, setPromoBar] = useState(!!initialTweaks.promo_bar); const [qtyTiers, setQtyTiers] = useState(initialTweaks.qty_tiers !== false); const [giftBonus, setGiftBonus] = useState(initialTweaks.gift_bonus !== false); const [discountTimer, setDiscountTimer] = useState(initialTweaks.discount_timer !== false); const [expirationWarn, setExpirationWarn] = useState(!!initialTweaks.expiration_warn); // Cross-sell + bundle row above the tab nav. Default ON; tweak panel UI for // the `cross_sell` key is owned by another agent, but the state and listener // are wired here so flipping the tweak takes effect live. const [showCrossSell, setShowCrossSell] = useState(initialTweaks.cross_sell !== false); // ----- D2 wave: 16 additional proto-extra tweak gates ----- // All default ON (match current hardcoded behaviour). Each is gated below in // the JSX with `{ && (...)}` so flipping the tweak hides the feature. const [socialProof, setSocialProof] = useState(initialTweaks.social_proof !== false); const [galleryFlags, setGalleryFlags] = useState(initialTweaks.gallery_flags !== false); const [evidenceLine, setEvidenceLine] = useState(initialTweaks.evidence_line !== false); const [altNames, setAltNames] = useState(initialTweaks.alt_names !== false); const [pricePerKgOn, setPricePerKgOn] = useState(initialTweaks.price_per_kg !== false); const [savingsLine, setSavingsLine] = useState(initialTweaks.savings_line !== false); const [trustStrip, setTrustStrip] = useState(initialTweaks.trust_strip !== false); const [shipOptsOn, setShipOptsOn] = useState(initialTweaks.ship_opts !== false); const [qaSortShow, setQaSortShow] = useState(initialTweaks.qa_sort !== false); const [qaStatsShow, setQaStatsShow] = useState(initialTweaks.qa_stats !== false); const [reviewTopics, setReviewTopics] = useState(initialTweaks.review_topics !== false); const [reviewReplyCta, setReviewReplyCta] = useState(initialTweaks.review_reply_cta !== false); const [stickyTabsMini, setStickyTabsMini] = useState(initialTweaks.sticky_tabs !== false); const [valuepropsStrip, setValuepropsStrip] = useState(initialTweaks.valueprops_strip !== false); const [aiBetaBadge, setAiBetaBadge] = useState(initialTweaks.ai_beta_badge !== false); const [toastsOn, setToastsOn] = useState(initialTweaks.toasts !== false); // F2 (v0.8.1): bundle_promo + recently_viewed promoted to real React // state so the panel can flip them and the render can guard on the // current value. Both default false in D_TWEAK_DEFAULTS - ?? false // ensures legacy storage payloads without these keys still resolve // to the new real-style default. const [bundlePromo, setBundlePromo] = useState(initialTweaks.bundle_promo === true); const [recentlyViewed, setRecentlyViewed] = useState(initialTweaks.recently_viewed === true); // G1 (v0.9.0): flavor picker variant - 'dropdown' (default, real namaximum // pattern) | 'pills' (alternative design, all 23 flavors as pills). const [flavorPickerVariant, setFlavorPickerVariant] = useState(initialTweaks.flavor_picker_variant || 'dropdown'); const [restockOpen, setRestockOpen] = useState(false); const [shipOpen, setShipOpen] = useState(false); const [activeTab, setActiveTab] = useState('descr'); const [tabsStuck, setTabsStuck] = useState(false); const [descExpanded, setDescExpanded] = useState(false); // Share dropdown (real Latte: .toggle-share-box mobile, hoisted to desktop hero column) const [shareOpen, setShareOpen] = useState(false); // Sale-terminated state (real Latte: $product->state == 'P'). Default 'A' // (active). When 'P', the buy panel is replaced by a soldout overlay and the // cross-sell section gets the 'Alternatívy' header. Tweak panel UI for the // `product_state` key is owned by Agent 4; we just wire the state + listener. const [productState, setProductState] = useState(initialTweaks.product_state || 'A'); const heroRef = useRef(null); const tabsAnchorRef = useRef(null); const langDropRef = useRef(null); const shareRef = useRef(null); const sectionRefs = { descr: useRef(null), certs: useRef(null), variants: useRef(null), reviews: useRef(null), qa: useRef(null), files: useRef(null), video: useRef(null), }; // Tweaks listener (mirrors mobile). Accepts both legacy showcase-shell // payloads (subset of keys) and the full 28-key snapshot dispatched by // below. useEffect(() => { const handler = (e) => { const t = e.detail || window.__TWEAKS || {}; if (t.stock) setStock(t.stock); if (typeof t.discount === 'boolean') setDiscount(t.discount); if (t.lang) setLang(t.lang); if (typeof t.ai_summary === 'boolean') setAiEnabled(t.ai_summary); if (t.ai_variant) setAiVariant(t.ai_variant); if (typeof t.promo_bar === 'boolean') setPromoBar(t.promo_bar); if (typeof t.qty_tiers === 'boolean') setQtyTiers(t.qty_tiers); if (typeof t.gift_bonus === 'boolean') setGiftBonus(t.gift_bonus); if (typeof t.discount_timer === 'boolean') setDiscountTimer(t.discount_timer); if (typeof t.expiration_warn === 'boolean') setExpirationWarn(t.expiration_warn); if (typeof t.cross_sell === 'boolean') setShowCrossSell(t.cross_sell); if (t.product_state) setProductState(t.product_state); // D2 wave if (typeof t.social_proof === 'boolean') setSocialProof(t.social_proof); if (typeof t.gallery_flags === 'boolean') setGalleryFlags(t.gallery_flags); if (typeof t.evidence_line === 'boolean') setEvidenceLine(t.evidence_line); if (typeof t.alt_names === 'boolean') setAltNames(t.alt_names); if (typeof t.price_per_kg === 'boolean') setPricePerKgOn(t.price_per_kg); if (typeof t.savings_line === 'boolean') setSavingsLine(t.savings_line); if (typeof t.trust_strip === 'boolean') setTrustStrip(t.trust_strip); if (typeof t.ship_opts === 'boolean') setShipOptsOn(t.ship_opts); if (typeof t.qa_sort === 'boolean') setQaSortShow(t.qa_sort); if (typeof t.qa_stats === 'boolean') setQaStatsShow(t.qa_stats); if (typeof t.review_topics === 'boolean') setReviewTopics(t.review_topics); if (typeof t.review_reply_cta === 'boolean') setReviewReplyCta(t.review_reply_cta); if (typeof t.sticky_tabs === 'boolean') setStickyTabsMini(t.sticky_tabs); if (typeof t.valueprops_strip === 'boolean') setValuepropsStrip(t.valueprops_strip); if (typeof t.ai_beta_badge === 'boolean') setAiBetaBadge(t.ai_beta_badge); if (typeof t.toasts === 'boolean') setToastsOn(t.toasts); if (t.flavor_picker_variant) setFlavorPickerVariant(t.flavor_picker_variant); }; window.addEventListener('tweakschange', handler); return () => window.removeEventListener('tweakschange', handler); }, []); const t = (window.PDP_I18N && window.PDP_I18N[lang]) || window.PDP_I18N.sk; // ---- Tweak panel plumbing ------------------------------------------------ // Snapshot of all 28 tweak values (keys mirror D_TWEAK_DEFAULTS). Recomputed // every render but cheap; passed to as `tweaks`. const tweaks = { stock, discount, lang, product_state: productState, ai_summary: aiEnabled, ai_variant: aiVariant, ai_beta_badge: aiBetaBadge, discount_timer: discountTimer, expiration_warn: expirationWarn, qty_tiers: qtyTiers, gift_bonus: giftBonus, savings_line: savingsLine, social_proof: socialProof, trust_strip: trustStrip, evidence_line: evidenceLine, gallery_flags: galleryFlags, valueprops_strip: valuepropsStrip, alt_names: altNames, price_per_kg: pricePerKgOn, qa_sort: qaSortShow, qa_stats: qaStatsShow, review_topics: reviewTopics, review_reply_cta: reviewReplyCta, promo_bar: promoBar, sticky_tabs: stickyTabsMini, cross_sell: showCrossSell, ship_opts: shipOptsOn, toasts: toastsOn, // F2: gating new tweaks (bundle_promo banner, recently_viewed widget) bundle_promo: bundlePromo, recently_viewed: recentlyViewed, // G1 (v0.9.0): flavor picker variant flavor_picker_variant: flavorPickerVariant, }; // Stable map of tweak key -> setter. setState references are stable across // renders, so the empty-deps useMemo is safe. const TWEAK_SETTERS = useMemo(() => ({ stock: setStock, discount: setDiscount, lang: setLang, product_state: setProductState, ai_summary: setAiEnabled, ai_variant: setAiVariant, ai_beta_badge: setAiBetaBadge, discount_timer: setDiscountTimer, expiration_warn: setExpirationWarn, qty_tiers: setQtyTiers, gift_bonus: setGiftBonus, savings_line: setSavingsLine, social_proof: setSocialProof, trust_strip: setTrustStrip, evidence_line: setEvidenceLine, gallery_flags: setGalleryFlags, valueprops_strip: setValuepropsStrip, alt_names: setAltNames, price_per_kg: setPricePerKgOn, qa_sort: setQaSortShow, qa_stats: setQaStatsShow, review_topics: setReviewTopics, review_reply_cta: setReviewReplyCta, promo_bar: setPromoBar, sticky_tabs: setStickyTabsMini, cross_sell: setShowCrossSell, ship_opts: setShipOptsOn, toasts: setToastsOn, // F2 (v0.8.1): NEW tweak setters bundle_promo: setBundlePromo, recently_viewed: setRecentlyViewed, // G1 (v0.9.0): NEW tweak setter flavor_picker_variant: setFlavorPickerVariant, // eslint-disable-next-line react-hooks/exhaustive-deps }), []); // Debounced localStorage write (300ms) so a rapid string of toggles only // results in one persistence call. const persistTimerRef = useRef(null); const schedulePersist = (snapshot) => { if (persistTimerRef.current) clearTimeout(persistTimerRef.current); persistTimerRef.current = setTimeout(() => { try { localStorage.setItem(D_TWEAK_STORAGE_KEY, JSON.stringify(snapshot)); } catch (_) {} }, 300); }; const handleTweakChange = (key, value) => { const setter = TWEAK_SETTERS[key]; if (setter) setter(value); if (typeof window !== 'undefined') { window.__TWEAKS = { ...(window.__TWEAKS || {}), [key]: value }; } schedulePersist({ ...tweaks, [key]: value }); }; const handleTweakReset = () => { Object.entries(D_TWEAK_DEFAULTS).forEach(([k, v]) => { const setter = TWEAK_SETTERS[k]; if (setter) setter(v); }); if (typeof window !== 'undefined') window.__TWEAKS = { ...D_TWEAK_DEFAULTS }; try { localStorage.removeItem(D_TWEAK_STORAGE_KEY); } catch (_) {} }; // Close the language filter dropdown when the user clicks outside it. useEffect(() => { if (!langDropOpen) return; const onDoc = (e) => { const root = langDropRef.current; if (!root) return; if (!root.contains(e.target)) setLangDropOpen(false); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [langDropOpen]); // Close the share dropdown on outside click (mirrors language dropdown pattern). useEffect(() => { if (!shareOpen) return; const onDoc = (e) => { const root = shareRef.current; if (!root) return; if (!root.contains(e.target)) setShareOpen(false); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [shareOpen]); // Sticky tab bar + active tab tracking on scroll useEffect(() => { const onTabsScroll = () => { const anchor = tabsAnchorRef.current; if (anchor) { const top = anchor.getBoundingClientRect().top; setTabsStuck(top <= 0); } // active tab via section visibility const sects = Object.entries(sectionRefs); const viewportMid = window.innerHeight * 0.35; let bestId = activeTab; let bestDist = Infinity; for (const [id, ref] of sects) { const el = ref.current; if (!el) continue; const r = el.getBoundingClientRect(); if (r.bottom < 0 || r.top > window.innerHeight) continue; const dist = Math.abs(r.top - viewportMid); if (dist < bestDist) { bestDist = dist; bestId = id; } } if (bestId !== activeTab) setActiveTab(bestId); }; window.addEventListener('scroll', onTabsScroll, { passive: true }); onTabsScroll(); return () => window.removeEventListener('scroll', onTabsScroll); // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeTab]); // Sticky mini bar - appears when hero scrolls fully out of view useEffect(() => { const onScroll = () => { const hero = heroRef.current; if (!hero) return; const heroBottom = hero.getBoundingClientRect().bottom; // show mini bar when hero bottom passes top of viewport setShowSticky(heroBottom < 140); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); // v0.7.1 polish: lightbox keyboard shortcuts. ESC closes; arrows step // through slides while open. Listener only attaches when the lightbox // is mounted to keep idle pages free of global handlers. useEffect(() => { if (lightbox === null) return; const total = D_GAL_SLIDES.length; const onKey = (e) => { if (e.key === 'Escape') { setLightbox(null); return; } if (e.key === 'ArrowLeft') { setLightbox(i => (i - 1 + total) % total); return; } if (e.key === 'ArrowRight') { setLightbox(i => (i + 1) % total); return; } }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [lightbox]); const selSize = D_SIZES.find(s => s.id === size) || D_SIZES[1]; const selFlavor = D_FLAVORS.find(f => f.id === flavor) || D_FLAVORS[0]; // Active variant resolved from the (size, flavor) matrix - mirrors backend $activeVariant. const activeVariant = getVariant(size, flavor) || { price: 0, orig: null, stock: 'out', gift: false }; const rawPrice = activeVariant.price; const origPrice = discount ? (activeVariant.orig || null) : null; const pricePerKg = selSize.kg ? rawPrice / selSize.kg : 0; const unitPrice = rawPrice; const totalPrice = unitPrice * qty; const savings = origPrice ? (origPrice - unitPrice) * qty : 0; // Active discount countdown (per variant). null when no discount. const discountTo = activeVariant.discountTo ? new Date(activeVariant.discountTo) : null; const toEur = (n) => { if (t.currency === 'HUF') { const huf = Math.round(n * t.rate); return huf.toLocaleString(t.locale) + ' Ft'; } return n.toLocaleString(t.locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €'; }; const push = (msg, kind = 'ok') => { // Tweak gate: when `toasts` is disabled, swallow the dispatch entirely so // listeners (cart adds, language switches, etc.) never see a notification. if (!toastsOn) return; const id = Math.random().toString(36).slice(2); setToasts(t => [...t, { id, msg, kind }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2200); }; const addToCart = () => { if (stock === 'out') { push(t.toast_out, 'err'); return; } setAdded(true); setCartCount(c => c + qty); push(t.toast_added); setTimeout(() => setAdded(false), 1400); }; const addCross = (p) => { setAddedCross(s => { const n = new Set(s); n.add(p.id); return n; }); setCartCount(c => c + 1); push(t.toast_added_short); setTimeout(() => setAddedCross(s => { const n = new Set(s); n.delete(p.id); return n; }), 1200); }; // Share helpers ------------------------------------------------------ // shareUrl is computed lazily so SSR / non-browser contexts stay safe even // though this prototype always runs in the browser. const getShareUrl = () => { if (typeof window !== 'undefined' && window.location && window.location.href) { return window.location.href; } return ''; }; const copyShareLink = async () => { const url = getShareUrl(); try { if (navigator && navigator.clipboard && navigator.clipboard.writeText) { await navigator.clipboard.writeText(url); } else { // Fallback path for older browsers / restricted contexts. const ta = document.createElement('textarea'); ta.value = url; ta.setAttribute('readonly', ''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } push(t.share_copied); } catch (_) { push(t.share_copied); } setShareOpen(false); }; // --------------------------------------------------------------------- // Q&A helpers ---------------------------------------------------------- const QA_ALL = (window.WPC80 && window.WPC80.questions) || []; const QA_META = (window.WPC80 && window.WPC80.questionsMeta) || { total: QA_ALL.length, withReply: 0, verifiedBuyers: 0, guests: 0 }; const qaSorted = useMemo(() => { const arr = [...QA_ALL]; if (qaSort === 'recent') { arr.sort((a, b) => (a.createdISO < b.createdISO ? 1 : -1)); } else if (qaSort === 'unanswered') { // unanswered first (stable: newest among the group goes up) arr.sort((a, b) => { const aw = a.hasReply ? 1 : 0; const bw = b.hasReply ? 1 : 0; if (aw !== bw) return aw - bw; return a.createdISO < b.createdISO ? 1 : -1; }); } else { // helpful (default) - highest valuation first arr.sort((a, b) => (b.valuation - a.valuation) || (a.createdISO < b.createdISO ? 1 : -1)); } return arr; }, [QA_ALL, qaSort]); // Reset "show more" cursor when the user changes sort. useEffect(() => { setQaVisible(5); }, [qaSort]); const fmtDate = (iso) => { if (!iso) return ''; const d = new Date(iso); if (isNaN(d.getTime())) return ''; const day = d.getDate(); const month = d.getMonth() + 1; const year = d.getFullYear(); return lang === 'hu' ? `${year}. ${month}. ${day}.` : `${day}. ${month}. ${year}`; }; const initials = (full) => { const parts = (full || '').trim().split(/\s+/).filter(Boolean); if (parts.length === 0) return '?'; if (parts.length === 1) return parts[0].charAt(0).toUpperCase(); return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase(); }; const fmtValuation = (n) => (n || 0).toLocaleString(lang === 'hu' ? 'hu-HU' : 'sk-SK'); const toggleQaLike = (qid) => { setQaLiked(s => { const n = new Set(s); n.has(qid) ? n.delete(qid) : n.add(qid); return n; }); }; const submitQuestion = (e) => { e.preventDefault(); if (qaSubmitting) return; if (!qaForm.question.trim()) { push(t.qa_err_empty || 'Prosím vyplnte otázku.', 'err'); return; } setQaSubmitting(true); setTimeout(() => { setQaSubmitting(false); setQaFormOpen(false); setQaForm({ name: '', email: '', variantId: '', question: '', consent: false }); push(t.qa_toast_sent || 'Otazka odoslaná. Odpovieme čo najskôr.'); }, 600); }; // ---------------------------------------------------------------------- const toggleHelpful = (id) => { setHelpful(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }; // ---- Review enhancements helpers -------------------------------------- // Language filter options (real Latte: $availableLanguageRating loop). // Order mirrors the live eshop language dropdown. const REV_LANGS = [ { id: 'sk', code: 'SK', src: '../assets/flags/sk.svg', tKey: 'rev_lang_sk' }, { id: 'cz', code: 'CZ', src: '../assets/flags/cz.svg', tKey: 'rev_lang_cz' }, { id: 'hu', code: 'HU', src: '../assets/flags/hu.svg', tKey: 'rev_lang_hu' }, { id: 'de', code: 'DE', src: '../assets/flags/de.svg', tKey: 'rev_lang_de' }, ]; // Visible reviews after applying the language filter. const visibleReviews = langFilter === 'all' ? D_REVIEWS : D_REVIEWS.filter(r => r.lang === langFilter); // Add-rating form submit (mock). Resets form, closes panel, fires toast. const submitRevForm = (e) => { e.preventDefault(); setRevFormForm({ name: '', variantId: '', short: '', summary: '' }); setRevFormRating(5); setAddRatingOpen(false); push(t.rev_form_thanks); }; const freePct = Math.min(100, (totalPrice / D_FREE_SHIPPING) * 100); const freeRemain = Math.max(0, D_FREE_SHIPPING - totalPrice); // Effective stock for the active variant. Tweak `stock` (when set to low/out) overrides; otherwise variant value. const effectiveStock = (stock && stock !== 'in') ? stock : (activeVariant.stock || 'in'); const stockLabel = effectiveStock === 'restock' && activeVariant.restockDays ? (lang === 'hu' ? `Elérhető ${activeVariant.restockDays} nap múlva` : `Dostupné o ${activeVariant.restockDays} dní`) : effectiveStock === 'in' ? t.stock_in : effectiveStock === 'low' ? t.stock_low : t.stock_out; const stockCls = effectiveStock === 'in' ? '' : effectiveStock === 'low' ? 'low' : effectiveStock === 'restock' ? 'restock' : 'out'; const activeSlide = D_GAL_SLIDES[galIdx] || D_GAL_SLIDES[0]; const D_CATEGORIES = lang === 'hu' ? D_CATEGORIES_HU : D_CATEGORIES_SK; return (
{/* TOP ANNOUNCEMENT BAR - optional (tweak: promo_bar) */} {promoBar && (
{lang === 'hu' ? 'Ingyenes szállítás' : 'Doprava zadarmo'} {lang === 'hu' ? '15 000 Ft felett' : 'nad 59 €'} · {lang === 'hu' ? 'Kiszállítás 24 óra alatt' : 'Doručenie do 24 hodín'}
)} {/* HEADER - mirrors live namaximum.sk: logo · search · heureka · account/wishlist/cart */}
NaMaximum
⌘ K
Heuréka.sk - overené zákazníkmi
{D_CATEGORIES.map(c => ( {c.label} ))}
{/* STICKY MINI BAR */}
{D_PRODUCT.mainImage ? ( {t.product_title} ) : ( )}
{t.product_title}
★{D_PRODUCT.averageRating.toFixed(2).replace('.', ',')} · {selSize.label} · {t.flavors[selFlavor.id] || selFlavor.label}
{toEur(totalPrice)}
{/* CONTENT */}
{/* VALUE-PROPS STRIP - mirrors live namaximum.sk under-header strip */} {valuepropsStrip && (
    {(t.valueprops || []).map((vp, i) => (
  • {vp.t}
    • ))}
)} {/* Breadcrumbs */}
{/* HERO */}
{/* GALLERY */}
{galleryFlags && (
GMO-free Lacto-free
)} {origPrice && (
-{Math.round((1 - rawPrice / origPrice) * 100)} %
)} {/* Gift ribbon overlay (real Latte: ). Slightly offset down when a discount badge already occupies the top-right slot. */} {activeVariant?.gift && (
)} {/* Social-proof ribbon - "O tento produkt sa práve zaujíma X ľudí" */} {socialProof && (
{typeof t.social_proof === 'function' ? t.social_proof(3910) : t.social_proof}
)}
setLightbox(galIdx)} style={{ cursor: 'zoom-in' }} role="button" aria-label={t.lightbox_close /* opens viewer */} > {(activeSlide.kind === 'variant' && D_PRODUCT.mainImage) || activeSlide.kind === 'image' ? ( {t.product_title ) : ( )}
{D_GAL_SLIDES.map((s, i) => ( ))}
{/* Trust strip below gallery */} {trustStrip && (
{lang === 'hu' ? 'Szállítás 24 óra' : 'Doručenie 24 h'}
{lang === 'hu' ? '14:00-ig rendelés esetén' : 'Pri objednávke do 14:00'}
{lang === 'hu' ? '30 napos visszaküldés' : '30 dní na vrátenie'}
{lang === 'hu' ? 'Bontatlan árura' : 'Bez udania dôvodu'}
{lang === 'hu' ? 'Labor tesztelt' : 'Lab testované'}
{lang === 'hu' ? 'Független tanúsítvány' : 'Nezávislý certifikát'}
{lang === 'hu' ? 'SK gyártás' : 'Výroba v SR'}
{lang === 'hu' ? 'Spišská Nová Ves' : 'Spišská Nová Ves'}
)}
{/* BUY PANEL (sticky) */}
{/* CROSS-SELL + BUNDLE: "Skvele dopĺňajú" / "Často kupované spolu". Real default.latte renders this row BEFORE the tab nav. Default ON, tweakable via cross_sell key (panel UI lives in another agent). When productState === 'P' the section is forced visible and the header is re-labelled to 'Alternatívy k tomuto produktu'. */} {(showCrossSell || productState === 'P') && (

{productState === 'P' ? t.soldout_alts : t.cross_title}

{/* F3 (v0.8.2): only render the subtitle when t.cross_sub has content. Real eshop has no subtitle on the detailCombination heading; we emptied cross_sub in pdp-i18n.jsx so this becomes a no-op for SK + HU. */} {productState !== 'P' && t.cross_sub && ( {t.cross_sub} )}
{/* Bundle banner. v0.7.11: items render real CDN photos from window.BUNDLE.items (sourced from production MySQL via data/wpc80-bundle.json - see scripts/build-cross-sell-data.mjs). Was 2 hardcoded ProductVisual paint mocks ('WPC 80 / 1 KG' blue tub + 'CREATINE / 500 G' dark-blue tub). The mobile twin in PDPMobile.jsx received the same swap. Falls back to ProductVisual if window.BUNDLE is unavailable so the prototype still renders without the data file. F2 (v0.8.1): now gated behind tweaks.bundle_promo (default false). Real eshop has no banner; only the sibling product-detail__detailCombination link list (cross_sell). F3 will render that link list as the default and keep this banner as opt-in. */} {tweaks.bundle_promo && (
{t.bundle_tag}

{t.bundle_name}

{((typeof window !== 'undefined' && window.BUNDLE && window.BUNDLE.items) || []).map((it, idx, arr) => (
{it.fullName {it.size}
{idx < arr.length - 1 && +} ))} {!(typeof window !== 'undefined' && window.BUNDLE) && ( <>
+
)}
{toEur(37.80)} {toEur(41.80)} {t.bundle_vs}
{t.bundle_save_pre} {toEur(4.00)} {t.bundle_save_post}
)} {/* F3 (v0.8.2): cross-sell renders the real combinations.latte card grid. (Linklist variant explored briefly and removed - real eshop only ever ships cards.) */}
{D_CROSS.slice(0, 4).map(p => { // F3: derive a sale-flag percentage when the row carries // a higher 'orig' price than 'price'. Live data does not // ship orig today so most cards skip this overlay; the // hook is here for parity with combinations.latte // -X%. const pct = (p.orig && p.orig > p.price) ? Math.round((1 - p.price / p.orig) * 100) : null; return (
{p.flag &&
{p.flag}
} {/* F3: -X% sale flag overlay (top-right) when discount is present. Mirrors real .sale-flag--new c-variant. */} {pct &&
-{pct}%
} {/* v0.7.7 C-phase: real photo when DB row carries one (greenmedical.bwcdn.net CDN); ProductVisual stays as the no-image fallback. */} {p.image ? {p.name} : } {p.name}
★ {p.rating.toLocaleString(lang === 'hu' ? 'hu-HU' : 'sk-SK', { minimumFractionDigits: 1 })} ({p.reviews})
{/* F3: 'od X,XX €' prefix on variant products (real eshop renders {_"od"} for variant_product type cross-sell rows). */} {t.cross_price_from} {' '} {toEur(p.price)} {p.orig && {toEur(p.orig)}}
{/* F3: replaced inline ATC "+" with a Detail pseudo-link to mirror real combinations.latte Detail. The whole card already links via the wrapping anchor; the button here is decorative + accessible. */} {t.cross_detail}
); })}
)} {/* STICKY TAB ANCHOR NAV - mirrors live PDP tab bar (Popis, Certifikáty, Varianty, Recenzie, Otázky, Prílohy, Video) */}
{/* PRODUCT INFO - long description + side boxes (mirrors namaximum #info Latte tab) */}

{t.desc_section_title}

{t.desc_section_sub}
{/* LEFT: full long description (collapsible) */}

{t.desc_main_title}

{/* RIGHT: stacked side boxes (use & dosing, storage & alerts) */}
{/* CERTIFICATIONS BAND */}

{t.certs_title}

{t.certs_sub}
HACCP GMP Lab tested EU Organic
{t.certs_note} {t.certs_more}
{/* REVIEWS */}

{t.rev_title}

{t.rev_sub}
{/* Summary card */}
4,89
{t.reviews_count(1342)}
{D_REV_DIST.map(d => (
★ {d.s}
{d.n}
))}
{D_REV_RECOMMEND_PCT.toLocaleString(lang === 'hu' ? 'hu-HU' : 'sk-SK', { minimumFractionDigits: 1 })} %
{t.rev_recommend_msg}
{/* AI summary card */} {aiEnabled && setFilter('all')} showBeta={aiBetaBadge} />} {/* Featured top-comment (real _reviews.latte $bestRating block) */} {/* Write-review CTA + add-rating form (real Latte: addRatingForm) */}
{t.rev_cta_q}
{addRatingOpen && ( loggedIn ? (

{t.rev_form_title}

{t.rev_form_lead}

{/* Name field shown only when not logged in (mirrors Latte). */} {!loggedIn && ( )}