dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JamboxModal- usuniecie starego i zmiana nazwy Compact

Browse Source
This commit is contained in:
dm
2025-12-16 12:03:40 +01:00
parent 31ebf5c90f
commit 91b0518a63
3 changed files with 435 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
src/islands/jambox/JamboxAddonsModal.jsx
View File

@@ -37,6 +37,7 @@ function normalizeDecoders(list) {
.map((d) => ({
id: String(d.id),
nazwa: String(d.nazwa),
opis: d.opis ? String(d.opis) : "",
cena: Number(d.cena ?? 0),
}));
}
@@ -55,17 +56,12 @@ function normalizeAddons(addons) {
max: a.max != null ? Number(a.max) : 10,
krok: a.krok != null ? Number(a.krok) : 1,
opis: a.opis ? String(a.opis) : "",
// addons.yaml -> number albo {default, by_name}
// tv-addons.yaml -> [{pakiety, 12m, bezterminowo}]
cena: a.cena ?? 0,
}));
}
function normKey(s) {
return String(s || "")
.trim()
.toLowerCase()
.replace(/\s+/g, " ");
return String(s || "").trim().toLowerCase().replace(/\s+/g, " ");
}
/** TV: wybór wariantu ceny po pkg.name, albo fallback "*" */
@@ -75,14 +71,12 @@ function pickTvVariant(addon, pkgName) {
const wanted = normKey(pkgName);
// 1) po nazwie pakietu
for (const row of c) {
const pk = row?.pakiety;
if (!Array.isArray(pk)) continue;
if (pk.some((p) => normKey(p) === wanted)) return row;
}
// 2) fallback "*"
for (const row of c) {
const pk = row?.pakiety;
if (!Array.isArray(pk)) continue;
@@ -92,27 +86,22 @@ function pickTvVariant(addon, pkgName) {
return null;
}
/** TV: czy addon w ogóle dostępny dla pakietu */
function isTvAddonAvailableForPkg(addon, pkg) {
if (!pkg) return false;
const v = pickTvVariant(addon, String(pkg?.name ?? ""));
return !!v;
}
/** TV: czy ma dwie ceny (12m/bezterminowo) */
function hasTvTermPricing(addon, pkg) {
const c = addon?.cena;
if (!Array.isArray(c)) return false;
// sprawdzamy wariant dla konkretnego pakietu (bo może się różnić)
const v = pickTvVariant(addon, String(pkg?.name ?? ""));
if (!v || typeof v !== "object") return false;
// ✅ radio tylko jeśli są OBIE ceny
return v["12m"] != null && v.bezterminowo != null;
}
/**
* ✅ cena jednostkowa:
* - addons.yaml: number / string / legacy {default, by_name}
@@ -121,11 +110,9 @@ function hasTvTermPricing(addon, pkg) {
function getAddonUnitPrice(addon, pkg, term /* "12m"|"bezterminowo"|null */) {
const c = addon?.cena;
// addons.yaml: liczba / liczba jako string
if (typeof c === "number") return c;
if (typeof c === "string" && c.trim() !== "" && !Number.isNaN(Number(c))) return Number(c);
// tv-addons.yaml: tablica wariantów [{pakiety, 12m, bezterminowo}]
if (Array.isArray(c)) {
const v = pickTvVariant(addon, String(pkg?.name ?? ""));
if (!v) return 0;
@@ -133,14 +120,11 @@ function getAddonUnitPrice(addon, pkg, term /* "12m"|"bezterminowo"|null */) {
const t = term || "12m";
if (v[t] != null) return Number(v[t]) || 0;
// fallback
if (v.bezterminowo != null) return Number(v.bezterminowo) || 0;
if (v["12m"] != null) return Number(v["12m"]) || 0;
return 0;
}
// ✅ LEGACY: addons.yaml może mieć cenę zależną od pakietu:
// cena: { default: 19.9, by_name: { "Smart": 15.0, ... } }
if (c && typeof c === "object") {
const name = String(pkg?.name ?? "");
const wanted = normKey(name);
@@ -158,12 +142,32 @@ function getAddonUnitPrice(addon, pkg, term /* "12m"|"bezterminowo"|null */) {
return 0;
}
/** ✅ Sekcja-akordeon (jak w internet modal) */
function SectionAccordion({ title, right, open, onToggle, children }) {
return (
<div class={`f-accordion-item f-section-acc ${open ? "is-open" : ""}`}>
<button type="button" class="f-accordion-header" onClick={onToggle}>
<span class="f-accordion-header-left">
<span class="f-modal-phone-name">{title}</span>
</span>
<span class="f-accordion-header-right">
{right}
<span class="f-acc-chevron" aria-hidden="true">
{open ? "▲" : "▼"}
</span>
</span>
</button>
{open && <div class="f-accordion-body">{children}</div>}
</div>
);
}
export default function JamboxAddonsModal({
isOpen,
onClose,
pkg,
// ✅ YAML
phoneCards = [],
tvAddons = [],
addons = [],
@@ -178,7 +182,6 @@ export default function JamboxAddonsModal({
const decodersList = useMemo(() => normalizeDecoders(decoders), [decoders]);
// ✅ TV: pokazujemy tylko dostępne dla pkg.name
const tvAddonsVisible = useMemo(() => {
if (!pkg) return [];
return tvAddonsList.filter((a) => isTvAddonAvailableForPkg(a, pkg));
@@ -188,27 +191,55 @@ export default function JamboxAddonsModal({
const [selectedPhoneId, setSelectedPhoneId] = useState(null);
const [openPhoneId, setOpenPhoneId] = useState(null);
// dekoder (radio)
const [selectedDecoderId, setSelectedDecoderId] = useState(null);
// checkbox/quantity: { [id]: qty }
const [selectedQty, setSelectedQty] = useState({});
// ✅ TV: term per dodatek (12m / bezterminowo)
const [tvTerm, setTvTerm] = useState({}); // { [id]: "12m" | "bezterminowo" }
// akordeon pakietu bazowego
const [baseOpen, setBaseOpen] = useState(true);
// ✅ sekcje (jedna otwarta naraz)
const [openSections, setOpenSections] = useState({
base: true,
decoder: false,
tv: false,
phone: false,
addons: false,
summary: false,
});
const toggleSection = (key) => {
setOpenSections((prev) => {
const nextOpen = !prev[key];
return {
base: false,
decoder: false,
tv: false,
phone: false,
addons: false,
summary: false,
[key]: nextOpen,
};
});
};
// reset po otwarciu / zmianie pakietu
useEffect(() => {
if (!isOpen) return;
setSelectedPhoneId(null);
setOpenPhoneId(null);
setSelectedDecoderId(null);
setSelectedQty({});
setTvTerm({});
setBaseOpen(true);
setOpenSections({
base: true,
decoder: false,
tv: false,
phone: false,
addons: false,
summary: false,
});
const d0 =
(Array.isArray(decodersList) && decodersList.find((d) => Number(d.cena) === 0)) ||
@@ -216,6 +247,7 @@ export default function JamboxAddonsModal({
setSelectedDecoderId(d0 ? String(d0.id) : null);
}, [isOpen, pkg?.id, decodersList]);
if (!isOpen || !pkg) return null;
const basePrice = Number(pkg.price_monthly || 0);
@@ -232,7 +264,6 @@ export default function JamboxAddonsModal({
return Number(d?.cena || 0);
}, [selectedDecoderId, decodersList]);
// ✅ TV: suma liczona tylko po widocznych (czyli dostępnych)
const tvAddonsPrice = useMemo(() => {
return tvAddonsVisible.reduce((sum, a) => {
const qty = Number(selectedQty[a.id] || 0);
@@ -246,7 +277,6 @@ export default function JamboxAddonsModal({
}, 0);
}, [selectedQty, tvAddonsVisible, tvTerm, pkg]);
// zwykłe dodatki (addons.yaml) – stara logika (multiroom itp.)
const addonsOnlyPrice = useMemo(() => {
return addonsList.reduce((sum, a) => {
const qty = Number(selectedQty[a.id] || 0);
@@ -285,7 +315,6 @@ export default function JamboxAddonsModal({
const qty = Number(selectedQty[a.id] || 0);
const isQty = a.typ === "quantity" || a.ilosc === true;
// TV: term i cena
const termPricing = isTv && hasTvTermPricing(a, pkg);
const term = tvTerm[a.id] || "12m";
const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
@@ -383,6 +412,137 @@ const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
);
};
// ---------
const LS_KEY = "fuz_offer_config_v1";
function buildOfferPayload() {
const phone = selectedPhoneId
? phonePlans.find((p) => String(p.id) === String(selectedPhoneId))
: null;
const decoder = selectedDecoderId
? decodersList.find((d) => String(d.id) === String(selectedDecoderId))
: null;
const tvChosen = tvAddonsVisible
.map((a) => {
const qty = Number(selectedQty[a.id] || 0);
if (qty <= 0) return null;
const termPricing = hasTvTermPricing(a, pkg);
const term = tvTerm[a.id] || "12m";
const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
return {
id: a.id,
nazwa: a.nazwa,
qty,
term: termPricing ? term : null,
unit,
};
})
.filter(Boolean);
const addonsChosen = addonsList
.map((a) => {
const qty = Number(selectedQty[a.id] || 0);
if (qty <= 0) return null;
const unit = getAddonUnitPrice(a, pkg, null);
return { id: a.id, nazwa: a.nazwa, qty, unit };
})
.filter(Boolean);
return {
createdAt: new Date().toISOString(),
pkg: { id: pkg?.id ?? null, name: pkg?.name ?? "", price: basePrice },
phone: phone ? { id: phone.id, name: phone.name, price: phone.price_monthly } : null,
decoder: decoder ? { id: decoder.id, name: decoder.nazwa, price: decoder.cena } : null,
tvAddons: tvChosen,
addons: addonsChosen,
totals: {
base: basePrice,
phone: phonePrice,
decoder: decoderPrice,
tv: tvAddonsPrice,
addons: addonsOnlyPrice,
total: totalMonthly,
currencyLabel: cenaOpis,
},
};
}
function saveOfferToLocalStorage() {
try {
const payload = buildOfferPayload();
localStorage.setItem(LS_KEY, JSON.stringify(payload));
} catch {}
}
//-- dopisane
function moneyWithLabel(v) {
return `${money(v)} ${cenaOpis}`;
}
function buildOfferMessage(payload) {
const lines = [];
// nagłówek
lines.push(`Wybrana oferta: ${payload?.pkg?.name || "—"}`);
lines.push("");
// ✅ WSZYSTKIE linie jak w podsumowaniu
lines.push(`Pakiet: ${moneyWithLabel(payload?.totals?.base ?? 0)}`);
lines.push(`Telefon: ${payload?.phone ? moneyWithLabel(payload.totals.phone) : "—"}`);
lines.push(`Dekoder: ${payload?.decoder ? moneyWithLabel(payload.totals.decoder) : "—"}`);
lines.push(`Dodatki TV: ${payload?.tvAddons?.length ? moneyWithLabel(payload.totals.tv) : "—"}`);
lines.push(`Dodatkowe usługi: ${payload?.addons?.length ? moneyWithLabel(payload.totals.addons) : "—"}`);
lines.push(`Łącznie: ${moneyWithLabel(payload?.totals?.total ?? 0)}`);
// szczegóły (pozycje)
if (payload?.phone) {
lines.push("");
lines.push(`Telefon: ${payload.phone.name} (${moneyWithLabel(payload.phone.price)})`);
}
if (payload?.decoder) {
lines.push("");
lines.push(`Dekoder: ${payload.decoder.name} (${moneyWithLabel(payload.decoder.price)})`);
}
if (Array.isArray(payload?.tvAddons) && payload.tvAddons.length) {
lines.push("");
lines.push("Pakiety dodatkowe TV:");
for (const it of payload.tvAddons) {
const termTxt = it.term ? `, ${it.term}` : "";
lines.push(
`- ${it.nazwa} x${it.qty}${termTxt} @ ${moneyWithLabel(it.unit)}`
);
}
}
if (Array.isArray(payload?.addons) && payload.addons.length) {
lines.push("");
lines.push("Dodatkowe usługi:");
for (const it of payload.addons) {
lines.push(`- ${it.nazwa} x${it.qty} @ ${moneyWithLabel(it.unit)}`);
}
}
return lines.join("\n");
}
function saveOfferToLocalStorage() {
try {
const payload = buildOfferPayload();
payload.message = buildOfferMessage(payload); // ✅ gotowy tekst
localStorage.setItem(LS_KEY, JSON.stringify(payload));
} catch {}
}
// ---------
return (
<div class="f-modal-overlay" onClick={onClose}>
<button
@@ -399,24 +559,17 @@ const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
<div class="f-modal-panel f-modal-panel--compact" onClick={(e) => e.stopPropagation()}>
<div class="f-modal-inner">
<h2 class="f-modal-title">Konfiguracja usług dodatkowych</h2>
<h2 class="f-modal-title">{pkg.name} — konfiguracja usług</h2>
{/* PAKIET jako akordeon */}
{/* ✅ PAKIET (sekcja) */}
<div class="f-modal-section">
<div class={`f-accordion-item ${baseOpen ? "is-open" : ""}`}>
<button
type="button"
class="f-accordion-header"
onClick={() => setBaseOpen((prev) => !prev)}
<SectionAccordion
title={pkg.name}
right={<span class="f-modal-phone-price">{money(basePrice)} {cenaOpis}</span>}
open={openSections.base}
onToggle={() => toggleSection("base")}
>
<span class="f-modal-phone-name">{pkg.name}</span>
<span class="f-modal-phone-price">
{money(basePrice)} {cenaOpis}
</span>
</button>
{baseOpen && pkg.features && pkg.features.length > 0 && (
<div class="f-accordion-body">
{pkg.features?.length ? (
<ul class="f-card-features">
{pkg.features.map((f, idx) => (
<li class="f-card-row" key={idx}>
@@ -425,133 +578,149 @@ const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
</li>
))}
</ul>
</div>
) : (
<p class="opacity-80">Brak szczegółów pakietu.</p>
)}
</div>
</SectionAccordion>
</div>
{/* ✅ DEKODER (radio) — NAD TV ADDONS */}
{/* ✅ DEKODER (sekcja) */}
<div class="f-modal-section">
<h3>Wybór dekodera</h3>
<SectionAccordion
title="Wybór dekodera"
right={
<span class="f-modal-phone-price">
{decoderPrice ? `${money(decoderPrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.decoder}
onToggle={() => toggleSection("decoder")}
>
{decodersList.length === 0 ? (
<p>Brak dostępnych dekoderów.</p>
) : (
<div class="f-modal-phone-list f-accordion">
<div class="f-radio-list">
{decodersList.map((d) => {
const isSelected = String(selectedDecoderId) === String(d.id);
return (
<div class={`f-accordion-item ${isSelected ? "is-open" : ""}`} key={d.id}>
<button
type="button"
class="f-accordion-header"
onClick={() => setSelectedDecoderId(String(d.id))}
>
<span class="f-accordion-header-left">
<label class={`f-radio-item ${isSelected ? "is-selected" : ""}`} key={d.id}>
<div class="f-radio-check">
<input
type="radio"
name="decoder"
checked={isSelected}
onChange={(e) => {
e.stopPropagation();
setSelectedDecoderId(String(d.id));
}}
onClick={(e) => e.stopPropagation()}
onChange={() => setSelectedDecoderId(String(d.id))}
/>
<span class="f-modal-phone-name">{d.nazwa}</span>
</span>
<span class="f-modal-phone-price">
{money(d.cena)} {cenaOpis}
</span>
</button>
</div>
<div class="f-radio-main">
<div class="f-radio-name">{d.nazwa}</div>
{d.opis && <div class="f-addon-desc">{d.opis}</div>}
</div>
<div class="f-radio-price">
{money(d.cena)} {cenaOpis}
</div>
</label>
);
})}
</div>
)}
</SectionAccordion>
</div>
{/* TV ADDONS */}
{/* ✅ TV ADDONS (sekcja) */}
<div class="f-modal-section">
<h3>Pakiety dodatkowe TV</h3>
<SectionAccordion
title="Pakiety dodatkowe TV"
right={
<span class="f-modal-phone-price">
{tvAddonsPrice ? `${money(tvAddonsPrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.tv}
onToggle={() => toggleSection("tv")}
>
{tvAddonsVisible.length === 0 ? (
<p>Brak pakietów dodatkowych TV.</p>
) : (
<div class="f-addon-list">{tvAddonsVisible.map((a) => renderAddonRow(a, true))}</div>
)}
</SectionAccordion>
</div>
{/* TELEFON */}
{/* ✅ TELEFON (sekcja) */}
<div class="f-modal-section">
<h3>Usługa telefoniczna</h3>
<SectionAccordion
title="Usługa telefoniczna"
right={
<span class="f-modal-phone-price">
{phonePrice ? `${money(phonePrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.phone}
onToggle={() => toggleSection("phone")}
>
{phonePlans.length === 0 ? (
<p>Brak dostępnych pakietów telefonicznych.</p>
) : (
<div class="f-modal-phone-list f-accordion">
<div class="f-accordion-item f-accordion-item--no-phone">
<button
type="button"
class="f-accordion-header"
onClick={() => handlePhoneSelect(null)}
>
<span class="f-accordion-header-left">
<div class="f-radio-list">
{/* brak telefonu */}
<label class={`f-radio-item ${selectedPhoneId === null ? "is-selected" : ""}`}>
<div class="f-radio-check">
<input
type="radio"
name="phone-plan"
checked={selectedPhoneId === null}
onChange={(e) => {
e.stopPropagation();
handlePhoneSelect(null);
}}
onClick={(e) => e.stopPropagation()}
onChange={() => handlePhoneSelect(null)}
/>
<span class="f-modal-phone-name">Nie potrzebuję telefonu</span>
</span>
<span class="f-modal-phone-price">0,00 {cenaOpis}</span>
</button>
</div>
<div class="f-radio-main">
<div class="f-radio-name">Nie potrzebuję telefonu</div>
</div>
<div class="f-radio-price">0,00 {cenaOpis}</div>
</label>
{/* pakiety */}
{phonePlans.map((p) => {
const isSelected = String(selectedPhoneId) === String(p.id);
const isOpen = String(openPhoneId) === String(p.id);
return (
<div class={`f-accordion-item ${isOpen ? "is-open" : ""}`} key={p.id}>
<button
type="button"
class="f-accordion-header"
onClick={() => handlePhoneSelect(p.id)}
>
<span class="f-accordion-header-left">
<div class="f-radio-block" key={p.id}>
<label class={`f-radio-item ${isSelected ? "is-selected" : ""}`}>
<div class="f-radio-check">
<input
type="radio"
name="phone-plan"
checked={isSelected}
onChange={(e) => {
e.stopPropagation();
handlePhoneSelect(p.id);
}}
onClick={(e) => e.stopPropagation()}
onChange={() => handlePhoneSelect(p.id)}
/>
<span class="f-modal-phone-name">{p.name}</span>
</span>
</div>
<span class="f-modal-phone-price">
<div class="f-radio-main">
<div class="f-radio-name">{p.name}</div>
</div>
<div class="f-radio-price">
{money(p.price_monthly)} {cenaOpis}
</span>
</button>
</div>
</label>
{isOpen && (
<div class="f-accordion-body">
{/* ✅ detale ZAWSZE widoczne */}
{p.features?.length > 0 && (
<div class="f-radio-details">
<ul class="f-card-features">
{p.features
.filter(
(f) => !String(f.label || "").toLowerCase().includes("aktyw"),
(f) =>
!String(f.label || "").toLowerCase().includes("aktyw"),
)
.map((f, idx) => (
<li class="f-card-row" key={idx}>
@@ -560,37 +729,51 @@ const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
</li>
))}
</ul>
)}
</div>
)}
</div>
);
})}
</div>
)}
</SectionAccordion>
</div>
{/* DODATKI (addons.yaml) */}
{/* ✅ DODATKI (sekcja) */}
<div class="f-modal-section">
<h3>Dodatkowe usługi</h3>
<SectionAccordion
title="Dodatkowe usługi"
right={
<span class="f-modal-phone-price">
{addonsOnlyPrice ? `${money(addonsOnlyPrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.addons}
onToggle={() => toggleSection("addons")}
>
{addonsList.length === 0 ? (
<p>Brak usług dodatkowych.</p>
) : (
<div class="f-addon-list">{addonsList.map((a) => renderAddonRow(a, false))}</div>
)}
</SectionAccordion>
</div>
{/* PODSUMOWANIE */}
<div class="f-modal-section f-summary">
<h3>Podsumowanie miesięczne</h3>
{/* ✅ PODSUMOWANIE (sekcja) */}
<div class="f-modal-section">
<SectionAccordion
title="Podsumowanie miesięczne"
right={<span class="f-modal-phone-price">{money(totalMonthly)} {cenaOpis}</span>}
open={openSections.summary}
onToggle={() => toggleSection("summary")}
>
<div class="f-summary">
<div class="f-summary-list">
<div class="f-summary-row">
<span>Pakiet</span>
<span>
{money(basePrice)} {cenaOpis}
</span>
<span>{money(basePrice)} {cenaOpis}</span>
</div>
<div class="f-summary-row">
@@ -609,27 +792,52 @@ const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
</div>
<div class="f-summary-row">
<span>Dodatki</span>
<span>Dodatkowe usługi</span>
<span>{addonsOnlyPrice ? `${money(addonsOnlyPrice)} ${cenaOpis}` : "—"}</span>
</div>
<div class="f-summary-total">
<span>Łącznie</span>
<span>
{money(totalMonthly)} {cenaOpis}
</span>
</div>
</div>
<span>{money(totalMonthly)} {cenaOpis}</span>
</div>
<div class="f-floating-total" onClick={(e) => e.stopPropagation()}>
<a
href="/kontakt"
class="btn btn-primary w-full mt-4"
onClick={() => saveOfferToLocalStorage()}
>
Wyślij zapytanie z tym wyborem
</a>
</div>
</div>
</SectionAccordion>
</div>
{/* ✅ pływająca suma jak w internecie */}
{/* <div class="f-floating-total" onClick={(e) => e.stopPropagation()}>
<div class="f-floating-total-inner">
<span class="f-floating-total-label">Suma</span>
<span class="f-floating-total-value">
{money(totalMonthly)} {cenaOpis}
</span>
</div>
</div> */}
<div class="f-floating-total" onClick={(e) => e.stopPropagation()}>
<div class="f-floating-total-circle" role="status" aria-label="Cena miesięczna">
<span class="f-floating-total-unit">
Razem
</span>
<span class="f-floating-total-amount">
{money(totalMonthly)}
</span>
<span class="f-floating-total-unit">
{cenaOpis}
</span>
</div>
</div>
</div>
</div>
</div>

845
src/islands/jambox/JamboxAddonsModalCompact.jsx
View File

@@ -1,845 +0,0 @@
import { useEffect, useMemo, useState } from "preact/hooks";
import "../../styles/modal.css";
import "../../styles/addons.css";
function formatFeatureValue(val) {
if (val === true || val === "true") return "✓";
if (val === false || val === "false" || val == null) return "✕";
return val;
}
function money(amount) {
const n = Number(amount || 0);
return n.toFixed(2).replace(".", ",");
}
/** telefon z YAML (phone/cards.yaml -> cards[]) => { id, name, price_monthly, features[] } */
function mapPhoneYamlToPlans(phoneCards) {
const list = Array.isArray(phoneCards) ? phoneCards : [];
return list
.filter((c) => c?.widoczny !== false)
.map((c, idx) => ({
id: String(c?.id ?? c?.nazwa ?? idx),
name: c?.nazwa ?? "—",
price_monthly: Number(c?.cena?.wartosc ?? 0),
features: (Array.isArray(c?.parametry) ? c.parametry : []).map((p) => ({
label: p.label,
value: p.value,
})),
}));
}
/** dekodery z YAML */
function normalizeDecoders(list) {
const arr = Array.isArray(list) ? list : [];
return arr
.filter((d) => d?.id && d?.nazwa)
.map((d) => ({
id: String(d.id),
nazwa: String(d.nazwa),
opis: d.opis ? String(d.opis) : "",
cena: Number(d.cena ?? 0),
}));
}
/** dodatki z YAML (tv-addons.yaml / addons.yaml) */
function normalizeAddons(addons) {
const list = Array.isArray(addons) ? addons : [];
return list
.filter((a) => a?.id && a?.nazwa)
.map((a) => ({
id: String(a.id),
nazwa: String(a.nazwa),
typ: String(a.typ ?? a.type ?? "checkbox"),
ilosc: !!a.ilosc,
min: a.min != null ? Number(a.min) : 0,
max: a.max != null ? Number(a.max) : 10,
krok: a.krok != null ? Number(a.krok) : 1,
opis: a.opis ? String(a.opis) : "",
cena: a.cena ?? 0,
}));
}
function normKey(s) {
return String(s || "").trim().toLowerCase().replace(/\s+/g, " ");
}
/** TV: wybór wariantu ceny po pkg.name, albo fallback "*" */
function pickTvVariant(addon, pkgName) {
const c = addon?.cena;
if (!Array.isArray(c)) return null;
const wanted = normKey(pkgName);
for (const row of c) {
const pk = row?.pakiety;
if (!Array.isArray(pk)) continue;
if (pk.some((p) => normKey(p) === wanted)) return row;
}
for (const row of c) {
const pk = row?.pakiety;
if (!Array.isArray(pk)) continue;
if (pk.some((p) => String(p).trim() === "*")) return row;
}
return null;
}
function isTvAddonAvailableForPkg(addon, pkg) {
if (!pkg) return false;
const v = pickTvVariant(addon, String(pkg?.name ?? ""));
return !!v;
}
function hasTvTermPricing(addon, pkg) {
const c = addon?.cena;
if (!Array.isArray(c)) return false;
const v = pickTvVariant(addon, String(pkg?.name ?? ""));
if (!v || typeof v !== "object") return false;
return v["12m"] != null && v.bezterminowo != null;
}
/**
* ✅ cena jednostkowa:
* - addons.yaml: number / string / legacy {default, by_name}
* - tv-addons.yaml: tablica wariantów
*/
function getAddonUnitPrice(addon, pkg, term /* "12m"|"bezterminowo"|null */) {
const c = addon?.cena;
if (typeof c === "number") return c;
if (typeof c === "string" && c.trim() !== "" && !Number.isNaN(Number(c))) return Number(c);
if (Array.isArray(c)) {
const v = pickTvVariant(addon, String(pkg?.name ?? ""));
if (!v) return 0;
const t = term || "12m";
if (v[t] != null) return Number(v[t]) || 0;
if (v.bezterminowo != null) return Number(v.bezterminowo) || 0;
if (v["12m"] != null) return Number(v["12m"]) || 0;
return 0;
}
if (c && typeof c === "object") {
const name = String(pkg?.name ?? "");
const wanted = normKey(name);
const byName = c.by_name || c.byName || c.by_nazwa || c.byNazwa;
if (byName && typeof byName === "object" && name) {
for (const k of Object.keys(byName)) {
if (normKey(k) === wanted) return Number(byName[k]) || 0;
}
}
if (c.default != null) return Number(c.default) || 0;
}
return 0;
}
/** ✅ Sekcja-akordeon (jak w internet modal) */
function SectionAccordion({ title, right, open, onToggle, children }) {
return (
<div class={`f-accordion-item f-section-acc ${open ? "is-open" : ""}`}>
<button type="button" class="f-accordion-header" onClick={onToggle}>
<span class="f-accordion-header-left">
<span class="f-modal-phone-name">{title}</span>
</span>
<span class="f-accordion-header-right">
{right}
<span class="f-acc-chevron" aria-hidden="true">
{open ? "▲" : "▼"}
</span>
</span>
</button>
{open && <div class="f-accordion-body">{children}</div>}
</div>
);
}
export default function JamboxAddonsModal({
isOpen,
onClose,
pkg,
phoneCards = [],
tvAddons = [],
addons = [],
decoders = [],
cenaOpis = "zł/mies.",
}) {
const phonePlans = useMemo(() => mapPhoneYamlToPlans(phoneCards), [phoneCards]);
const tvAddonsList = useMemo(() => normalizeAddons(tvAddons), [tvAddons]);
const addonsList = useMemo(() => normalizeAddons(addons), [addons]);
const decodersList = useMemo(() => normalizeDecoders(decoders), [decoders]);
const tvAddonsVisible = useMemo(() => {
if (!pkg) return [];
return tvAddonsList.filter((a) => isTvAddonAvailableForPkg(a, pkg));
}, [tvAddonsList, pkg]);
// wybory
const [selectedPhoneId, setSelectedPhoneId] = useState(null);
const [openPhoneId, setOpenPhoneId] = useState(null);
const [selectedDecoderId, setSelectedDecoderId] = useState(null);
const [selectedQty, setSelectedQty] = useState({});
const [tvTerm, setTvTerm] = useState({}); // { [id]: "12m" | "bezterminowo" }
// ✅ sekcje (jedna otwarta naraz)
const [openSections, setOpenSections] = useState({
base: true,
decoder: false,
tv: false,
phone: false,
addons: false,
summary: false,
});
const toggleSection = (key) => {
setOpenSections((prev) => {
const nextOpen = !prev[key];
return {
base: false,
decoder: false,
tv: false,
phone: false,
addons: false,
summary: false,
[key]: nextOpen,
};
});
};
// reset po otwarciu / zmianie pakietu
useEffect(() => {
if (!isOpen) return;
setSelectedPhoneId(null);
setOpenPhoneId(null);
setSelectedDecoderId(null);
setSelectedQty({});
setTvTerm({});
setOpenSections({
base: true,
decoder: false,
tv: false,
phone: false,
addons: false,
summary: false,
});
const d0 =
(Array.isArray(decodersList) && decodersList.find((d) => Number(d.cena) === 0)) ||
(Array.isArray(decodersList) ? decodersList[0] : null);
setSelectedDecoderId(d0 ? String(d0.id) : null);
}, [isOpen, pkg?.id, decodersList]);
if (!isOpen || !pkg) return null;
const basePrice = Number(pkg.price_monthly || 0);
const phonePrice = useMemo(() => {
if (!selectedPhoneId) return 0;
const p = phonePlans.find((x) => String(x.id) === String(selectedPhoneId));
return Number(p?.price_monthly || 0);
}, [selectedPhoneId, phonePlans]);
const decoderPrice = useMemo(() => {
if (!selectedDecoderId) return 0;
const d = decodersList.find((x) => String(x.id) === String(selectedDecoderId));
return Number(d?.cena || 0);
}, [selectedDecoderId, decodersList]);
const tvAddonsPrice = useMemo(() => {
return tvAddonsVisible.reduce((sum, a) => {
const qty = Number(selectedQty[a.id] || 0);
if (qty <= 0) return sum;
const termPricing = hasTvTermPricing(a, pkg);
const term = tvTerm[a.id] || "12m";
const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
return sum + qty * unit;
}, 0);
}, [selectedQty, tvAddonsVisible, tvTerm, pkg]);
const addonsOnlyPrice = useMemo(() => {
return addonsList.reduce((sum, a) => {
const qty = Number(selectedQty[a.id] || 0);
const unit = getAddonUnitPrice(a, pkg, null);
return sum + qty * unit;
}, 0);
}, [selectedQty, addonsList, pkg]);
const addonsPrice = tvAddonsPrice + addonsOnlyPrice;
const totalMonthly = basePrice + phonePrice + decoderPrice + addonsPrice;
const handlePhoneSelect = (id) => {
if (id === null) {
setSelectedPhoneId(null);
setOpenPhoneId(null);
return;
}
setSelectedPhoneId(id);
setOpenPhoneId((prev) => (String(prev) === String(id) ? null : id));
};
const toggleCheckboxAddon = (id) => {
setSelectedQty((prev) => {
const next = { ...prev };
next[id] = (next[id] || 0) > 0 ? 0 : 1;
return next;
});
};
const setQtyAddon = (id, qty, min, max) => {
const safe = Math.max(min, Math.min(max, qty));
setSelectedQty((prev) => ({ ...prev, [id]: safe }));
};
const renderAddonRow = (a, isTv = false) => {
const qty = Number(selectedQty[a.id] || 0);
const isQty = a.typ === "quantity" || a.ilosc === true;
const termPricing = isTv && hasTvTermPricing(a, pkg);
const term = tvTerm[a.id] || "12m";
const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
if (!isQty) {
return (
<label class="f-addon-item" key={(isTv ? "tv-" : "a-") + a.id}>
<div class="f-addon-checkbox">
<input
type="checkbox"
checked={qty > 0}
onChange={() => toggleCheckboxAddon(a.id)}
/>
</div>
<div class="f-addon-main">
<div class="f-addon-name">{a.nazwa}</div>
{a.opis && <div class="f-addon-desc">{a.opis}</div>}
{termPricing && (
<div class="mt-2 flex flex-wrap gap-3 text-sm" onClick={(e) => e.stopPropagation()}>
<label class="inline-flex items-center gap-2">
<input
type="radio"
name={`term-${a.id}`}
checked={(tvTerm[a.id] || "12m") === "12m"}
onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "12m" }))}
/>
<span>12 miesięcy</span>
</label>
<label class="inline-flex items-center gap-2">
<input
type="radio"
name={`term-${a.id}`}
checked={(tvTerm[a.id] || "12m") === "bezterminowo"}
onChange={() => setTvTerm((p) => ({ ...p, [a.id]: "bezterminowo" }))}
/>
<span>Bezterminowo</span>
</label>
</div>
)}
</div>
<div class="f-addon-price">
{money(unit)} {cenaOpis}
</div>
</label>
);
}
const min = Number.isFinite(a.min) ? a.min : 0;
const max = Number.isFinite(a.max) ? a.max : 10;
const step = Number.isFinite(a.krok) ? a.krok : 1;
const lineTotal = qty * unit;
return (
<div class="f-addon-item f-addon-item--qty" key={(isTv ? "tvq-" : "aq-") + a.id}>
<div class="f-addon-checkbox" aria-hidden="true"></div>
<div class="f-addon-main">
<div class="f-addon-name">{a.nazwa}</div>
{a.opis && <div class="f-addon-desc">{a.opis}</div>}
</div>
<div class="f-addon-qty" onClick={(e) => e.stopPropagation()}>
<button
type="button"
class="btn btn-outline"
onClick={() => setQtyAddon(a.id, qty - step, min, max)}
disabled={qty <= min}
>
−
</button>
<span class="f-addon-qty-value">{qty}</span>
<button
type="button"
class="btn btn-outline"
onClick={() => setQtyAddon(a.id, qty + step, min, max)}
disabled={qty >= max}
>
+
</button>
</div>
<div class="f-addon-price">
<div>
{money(unit)} {cenaOpis}
</div>
<div class="f-addon-price-total">{qty > 0 ? `${money(lineTotal)} ${cenaOpis}` : "—"}</div>
</div>
</div>
);
};
// ---------
const LS_KEY = "fuz_offer_config_v1";
function buildOfferPayload() {
const phone = selectedPhoneId
? phonePlans.find((p) => String(p.id) === String(selectedPhoneId))
: null;
const decoder = selectedDecoderId
? decodersList.find((d) => String(d.id) === String(selectedDecoderId))
: null;
const tvChosen = tvAddonsVisible
.map((a) => {
const qty = Number(selectedQty[a.id] || 0);
if (qty <= 0) return null;
const termPricing = hasTvTermPricing(a, pkg);
const term = tvTerm[a.id] || "12m";
const unit = getAddonUnitPrice(a, pkg, termPricing ? term : null);
return {
id: a.id,
nazwa: a.nazwa,
qty,
term: termPricing ? term : null,
unit,
};
})
.filter(Boolean);
const addonsChosen = addonsList
.map((a) => {
const qty = Number(selectedQty[a.id] || 0);
if (qty <= 0) return null;
const unit = getAddonUnitPrice(a, pkg, null);
return { id: a.id, nazwa: a.nazwa, qty, unit };
})
.filter(Boolean);
return {
createdAt: new Date().toISOString(),
pkg: { id: pkg?.id ?? null, name: pkg?.name ?? "", price: basePrice },
phone: phone ? { id: phone.id, name: phone.name, price: phone.price_monthly } : null,
decoder: decoder ? { id: decoder.id, name: decoder.nazwa, price: decoder.cena } : null,
tvAddons: tvChosen,
addons: addonsChosen,
totals: {
base: basePrice,
phone: phonePrice,
decoder: decoderPrice,
tv: tvAddonsPrice,
addons: addonsOnlyPrice,
total: totalMonthly,
currencyLabel: cenaOpis,
},
};
}
function saveOfferToLocalStorage() {
try {
const payload = buildOfferPayload();
localStorage.setItem(LS_KEY, JSON.stringify(payload));
} catch {}
}
//-- dopisane
function moneyWithLabel(v) {
return `${money(v)} ${cenaOpis}`;
}
function buildOfferMessage(payload) {
const lines = [];
// nagłówek
lines.push(`Wybrana oferta: ${payload?.pkg?.name || "—"}`);
lines.push("");
// ✅ WSZYSTKIE linie jak w podsumowaniu
lines.push(`Pakiet: ${moneyWithLabel(payload?.totals?.base ?? 0)}`);
lines.push(`Telefon: ${payload?.phone ? moneyWithLabel(payload.totals.phone) : "—"}`);
lines.push(`Dekoder: ${payload?.decoder ? moneyWithLabel(payload.totals.decoder) : "—"}`);
lines.push(`Dodatki TV: ${payload?.tvAddons?.length ? moneyWithLabel(payload.totals.tv) : "—"}`);
lines.push(`Dodatkowe usługi: ${payload?.addons?.length ? moneyWithLabel(payload.totals.addons) : "—"}`);
lines.push(`Łącznie: ${moneyWithLabel(payload?.totals?.total ?? 0)}`);
// szczegóły (pozycje)
if (payload?.phone) {
lines.push("");
lines.push(`Telefon: ${payload.phone.name} (${moneyWithLabel(payload.phone.price)})`);
}
if (payload?.decoder) {
lines.push("");
lines.push(`Dekoder: ${payload.decoder.name} (${moneyWithLabel(payload.decoder.price)})`);
}
if (Array.isArray(payload?.tvAddons) && payload.tvAddons.length) {
lines.push("");
lines.push("Pakiety dodatkowe TV:");
for (const it of payload.tvAddons) {
const termTxt = it.term ? `, ${it.term}` : "";
lines.push(
`- ${it.nazwa} x${it.qty}${termTxt} @ ${moneyWithLabel(it.unit)}`
);
}
}
if (Array.isArray(payload?.addons) && payload.addons.length) {
lines.push("");
lines.push("Dodatkowe usługi:");
for (const it of payload.addons) {
lines.push(`- ${it.nazwa} x${it.qty} @ ${moneyWithLabel(it.unit)}`);
}
}
return lines.join("\n");
}
function saveOfferToLocalStorage() {
try {
const payload = buildOfferPayload();
payload.message = buildOfferMessage(payload); // ✅ gotowy tekst
localStorage.setItem(LS_KEY, JSON.stringify(payload));
} catch {}
}
// ---------
return (
<div class="f-modal-overlay" onClick={onClose}>
<button
class="f-modal-close"
type="button"
aria-label="Zamknij"
onClick={(e) => {
e.stopPropagation();
onClose();
}}
>
✕
</button>
<div class="f-modal-panel f-modal-panel--compact" onClick={(e) => e.stopPropagation()}>
<div class="f-modal-inner">
<h2 class="f-modal-title">{pkg.name} — konfiguracja usług</h2>
{/* ✅ PAKIET (sekcja) */}
<div class="f-modal-section">
<SectionAccordion
title={pkg.name}
right={<span class="f-modal-phone-price">{money(basePrice)} {cenaOpis}</span>}
open={openSections.base}
onToggle={() => toggleSection("base")}
>
{pkg.features?.length ? (
<ul class="f-card-features">
{pkg.features.map((f, idx) => (
<li class="f-card-row" key={idx}>
<span class="f-card-label">{f.label}</span>
<span class="f-card-value">{formatFeatureValue(f.value)}</span>
</li>
))}
</ul>
) : (
<p class="opacity-80">Brak szczegółów pakietu.</p>
)}
</SectionAccordion>
</div>
{/* ✅ DEKODER (sekcja) */}
<div class="f-modal-section">
<SectionAccordion
title="Wybór dekodera"
right={
<span class="f-modal-phone-price">
{decoderPrice ? `${money(decoderPrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.decoder}
onToggle={() => toggleSection("decoder")}
>
{decodersList.length === 0 ? (
<p>Brak dostępnych dekoderów.</p>
) : (
<div class="f-radio-list">
{decodersList.map((d) => {
const isSelected = String(selectedDecoderId) === String(d.id);
return (
<label class={`f-radio-item ${isSelected ? "is-selected" : ""}`} key={d.id}>
<div class="f-radio-check">
<input
type="radio"
name="decoder"
checked={isSelected}
onChange={() => setSelectedDecoderId(String(d.id))}
/>
</div>
<div class="f-radio-main">
<div class="f-radio-name">{d.nazwa}</div>
{d.opis && <div class="f-addon-desc">{d.opis}</div>}
</div>
<div class="f-radio-price">
{money(d.cena)} {cenaOpis}
</div>
</label>
);
})}
</div>
)}
</SectionAccordion>
</div>
{/* ✅ TV ADDONS (sekcja) */}
<div class="f-modal-section">
<SectionAccordion
title="Pakiety dodatkowe TV"
right={
<span class="f-modal-phone-price">
{tvAddonsPrice ? `${money(tvAddonsPrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.tv}
onToggle={() => toggleSection("tv")}
>
{tvAddonsVisible.length === 0 ? (
<p>Brak pakietów dodatkowych TV.</p>
) : (
<div class="f-addon-list">{tvAddonsVisible.map((a) => renderAddonRow(a, true))}</div>
)}
</SectionAccordion>
</div>
{/* ✅ TELEFON (sekcja) */}
<div class="f-modal-section">
<SectionAccordion
title="Usługa telefoniczna"
right={
<span class="f-modal-phone-price">
{phonePrice ? `${money(phonePrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.phone}
onToggle={() => toggleSection("phone")}
>
{phonePlans.length === 0 ? (
<p>Brak dostępnych pakietów telefonicznych.</p>
) : (
<div class="f-radio-list">
{/* brak telefonu */}
<label class={`f-radio-item ${selectedPhoneId === null ? "is-selected" : ""}`}>
<div class="f-radio-check">
<input
type="radio"
name="phone-plan"
checked={selectedPhoneId === null}
onChange={() => handlePhoneSelect(null)}
/>
</div>
<div class="f-radio-main">
<div class="f-radio-name">Nie potrzebuję telefonu</div>
</div>
<div class="f-radio-price">0,00 {cenaOpis}</div>
</label>
{/* pakiety */}
{phonePlans.map((p) => {
const isSelected = String(selectedPhoneId) === String(p.id);
return (
<div class="f-radio-block" key={p.id}>
<label class={`f-radio-item ${isSelected ? "is-selected" : ""}`}>
<div class="f-radio-check">
<input
type="radio"
name="phone-plan"
checked={isSelected}
onChange={() => handlePhoneSelect(p.id)}
/>
</div>
<div class="f-radio-main">
<div class="f-radio-name">{p.name}</div>
</div>
<div class="f-radio-price">
{money(p.price_monthly)} {cenaOpis}
</div>
</label>
{/* ✅ detale ZAWSZE widoczne */}
{p.features?.length > 0 && (
<div class="f-radio-details">
<ul class="f-card-features">
{p.features
.filter(
(f) =>
!String(f.label || "").toLowerCase().includes("aktyw"),
)
.map((f, idx) => (
<li class="f-card-row" key={idx}>
<span class="f-card-label">{f.label}</span>
<span class="f-card-value">{formatFeatureValue(f.value)}</span>
</li>
))}
</ul>
</div>
)}
</div>
);
})}
</div>
)}
</SectionAccordion>
</div>
{/* ✅ DODATKI (sekcja) */}
<div class="f-modal-section">
<SectionAccordion
title="Dodatkowe usługi"
right={
<span class="f-modal-phone-price">
{addonsOnlyPrice ? `${money(addonsOnlyPrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.addons}
onToggle={() => toggleSection("addons")}
>
{addonsList.length === 0 ? (
<p>Brak usług dodatkowych.</p>
) : (
<div class="f-addon-list">{addonsList.map((a) => renderAddonRow(a, false))}</div>
)}
</SectionAccordion>
</div>
{/* ✅ PODSUMOWANIE (sekcja) */}
<div class="f-modal-section">
<SectionAccordion
title="Podsumowanie miesięczne"
right={<span class="f-modal-phone-price">{money(totalMonthly)} {cenaOpis}</span>}
open={openSections.summary}
onToggle={() => toggleSection("summary")}
>
<div class="f-summary">
<div class="f-summary-list">
<div class="f-summary-row">
<span>Pakiet</span>
<span>{money(basePrice)} {cenaOpis}</span>
</div>
<div class="f-summary-row">
<span>Telefon</span>
<span>{phonePrice ? `${money(phonePrice)} ${cenaOpis}` : "—"}</span>
</div>
<div class="f-summary-row">
<span>Dekoder</span>
<span>{decoderPrice ? `${money(decoderPrice)} ${cenaOpis}` : "—"}</span>
</div>
<div class="f-summary-row">
<span>Dodatki TV</span>
<span>{tvAddonsPrice ? `${money(tvAddonsPrice)} ${cenaOpis}` : "—"}</span>
</div>
<div class="f-summary-row">
<span>Dodatkowe usługi</span>
<span>{addonsOnlyPrice ? `${money(addonsOnlyPrice)} ${cenaOpis}` : "—"}</span>
</div>
<div class="f-summary-total">
<span>Łącznie</span>
<span>{money(totalMonthly)} {cenaOpis}</span>
</div>
<a
href="/kontakt"
class="btn btn-primary w-full mt-4"
onClick={() => saveOfferToLocalStorage()}
>
Wyślij zapytanie z tym wyborem
</a>
</div>
</div>
</SectionAccordion>
</div>
{/* ✅ pływająca suma jak w internecie */}
{/* <div class="f-floating-total" onClick={(e) => e.stopPropagation()}>
<div class="f-floating-total-inner">
<span class="f-floating-total-label">Suma</span>
<span class="f-floating-total-value">
{money(totalMonthly)} {cenaOpis}
</span>
</div>
</div> */}
<div class="f-floating-total" onClick={(e) => e.stopPropagation()}>
<div class="f-floating-total-circle" role="status" aria-label="Cena miesięczna">
<span class="f-floating-total-unit">
Razem
</span>
<span class="f-floating-total-amount">
{money(totalMonthly)}
</span>
<span class="f-floating-total-unit">
{cenaOpis}
</span>
</div>
</div>
</div>
</div>
</div>
);
}

2
src/islands/jambox/JamboxCards.jsx
View File

@@ -3,7 +3,7 @@ import "../../styles/addons.css";
import OffersSwitches from "../Switches.jsx";
import JamboxChannelsModal from "./JamboxChannelsModal.jsx";
import JamboxAddonsModal from "./JamboxAddonsModalCompact.jsx";
import JamboxAddonsModal from "./JamboxAddonsModal.jsx";
import Markdown from "../Markdown.jsx";
function formatMoney(amount, currency = "PLN") {