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

Modal usług doddatkowych podział na komponenty

Browse Source
This commit is contained in:
dm
2025-12-17 10:23:09 +01:00
parent 5c2f329174
commit 345fa23f84
16 changed files with 1266 additions and 1524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
src/islands/Internet/InternetAddonsModal.jsx
View File

@@ -1,85 +1,31 @@
import { useEffect, useMemo, useState } from "preact/hooks";
import useDraggableFloating from "../hooks/useDraggableFloating.js";
import OfferModalShell from "../modals/OfferModalShell.jsx";
import PlanSection from "../modals/sections/PlanSection.jsx";
import PhoneSection from "../modals/sections/PhoneSection.jsx";
import AddonsSection from "../modals/sections/AddonsSection.jsx";
import SummarySection from "../modals/sections/SummarySection.jsx";
import FloatingTotal from "../modals/sections/FloatingTotal.jsx";
import { mapPhoneYamlToPlans, normalizeAddons } from "../../lib/offer-normalize.js";
import { saveOfferToLocalStorage } from "../../lib/offer-payload.js";
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(".", ",");
}
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,
})),
}));
}
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: Number(a.cena ?? 0),
}));
}
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 InternetAddonsModal({
isOpen,
onClose,
plan,
phoneCards = [],
addons = [],
cenaOpis = "zł / mies.",
}) {
const floating = useDraggableFloating("fuz_floating_total_pos_internet_v1");
const phonePlans = useMemo(() => mapPhoneYamlToPlans(phoneCards), [phoneCards]);
const addonsList = useMemo(() => normalizeAddons(addons), [addons]);
const [error, setError] = useState("");
const [selectedPhoneId, setSelectedPhoneId] = useState(null);
const [selectedQty, setSelectedQty] = useState({});
@@ -93,19 +39,12 @@ export default function InternetAddonsModal({
const toggleSection = (key) => {
setOpenSections((prev) => {
const nextOpen = !prev[key];
return {
internet: false,
phone: false,
addons: false,
summary: false,
[key]: nextOpen,
};
return { internet: false, phone: false, addons: false, summary: false, [key]: nextOpen };
});
};
useEffect(() => {
if (!isOpen) return;
setError("");
setSelectedPhoneId(null);
setSelectedQty({});
setOpenSections({ internet: true, phone: false, addons: false, summary: false });
@@ -124,36 +63,13 @@ export default function InternetAddonsModal({
const addonsPrice = useMemo(() => {
return addonsList.reduce((sum, a) => {
const qty = Number(selectedQty[a.id] || 0);
return sum + qty * Number(a.cena || 0);
const unit = Number(a.cena || 0);
return sum + qty * unit;
}, 0);
}, [selectedQty, addonsList]);
const totalMonthly = basePrice + phonePrice + addonsPrice;
const handlePhoneSelect = (id) => {
if (id === null) {
setSelectedPhoneId(null);
return;
}
setSelectedPhoneId(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 }));
};
// Zapis do localStorage wyborów
const LS_KEY = "fuz_offer_config_v1";
function buildOfferPayload() {
const phone = selectedPhoneId
? phonePlans.find((p) => String(p.id) === String(selectedPhoneId))
@@ -170,11 +86,8 @@ export default function InternetAddonsModal({
return {
createdAt: new Date().toISOString(),
pkg: { id: plan?.id ?? null, name: plan?.name ?? "", price: basePrice },
phone: phone ? { id: phone.id, name: phone.name, price: phone.price_monthly } : null,
addons: addonsChosen,
totals: {
base: basePrice,
phone: phonePrice,
@@ -185,322 +98,62 @@ export default function InternetAddonsModal({
};
}
function moneyWithLabel(v) {
return `${money(v)} ${cenaOpis}`;
}
function buildOfferMessage(payload) {
const lines = [];
lines.push(`Internet światłowodowy ${payload?.pkg?.name}: ${moneyWithLabel(payload?.totals?.base ?? 0)}`);
lines.push(`Usługa Telefon: ${payload?.phone ? moneyWithLabel(payload.totals.phone) : "—"}`);
lines.push(`Dodatkowe usługi: ${payload?.addons?.length ? moneyWithLabel(payload.totals.addons) : "—"}`);
lines.push(`Łącznie: ${moneyWithLabel(payload?.totals?.total ?? 0)}`);
if (payload?.phone) {
lines.push("");
lines.push(`Telefon: ${payload.phone.name} (${moneyWithLabel(payload.phone.price)})`);
}
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);
localStorage.setItem(LS_KEY, JSON.stringify(payload));
} catch { }
}
const onSend = () => {
const payload = buildOfferPayload();
saveOfferToLocalStorage(payload, cenaOpis);
};
return (
<div class="f-modal-overlay" onClick={onClose}>
<button
class="f-modal-close"
type="button"
aria-label="Zamknij"
onClick={(e) => {
e.stopPropagation();
onClose();
}}
>
✕
</button>
<OfferModalShell isOpen={isOpen} onClose={onClose} title={`${plan.name} — konfiguracja usług`}>
<PlanSection
title={plan.name}
open={openSections.internet}
onToggle={() => toggleSection("internet")}
price={basePrice}
cenaOpis={cenaOpis}
features={plan.features || []}
/>
<div class="f-modal-panel f-modal-panel--compact" onClick={(e) => e.stopPropagation()}>
<div class="f-modal-inner">
<h2 class="f-modal-title">{plan.name} — konfiguracja usług</h2>
<PhoneSection
open={openSections.phone}
onToggle={() => toggleSection("phone")}
cenaOpis={cenaOpis}
phonePlans={phonePlans}
selectedPhoneId={selectedPhoneId}
setSelectedPhoneId={setSelectedPhoneId}
phonePrice={phonePrice}
/>
{error && <p class="text-red-600">{error}</p>}
<AddonsSection
open={openSections.addons}
onToggle={() => toggleSection("addons")}
cenaOpis={cenaOpis}
addonsList={addonsList}
selectedQty={selectedQty}
setSelectedQty={setSelectedQty}
addonsPrice={addonsPrice}
getUnitPrice={(a) => Number(a.cena || 0)}
/>
{/* INTERNET */}
<div class="f-modal-section">
<SectionAccordion
title={plan.name}
right={<span class="f-modal-phone-price">{money(basePrice)} {cenaOpis}</span>}
open={openSections.internet}
onToggle={() => toggleSection("internet")}
>
{plan.features?.length ? (
<ul class="f-card-features">
{plan.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.</p>
)}
</SectionAccordion>
</div>
<SummarySection
open={openSections.summary}
onToggle={() => toggleSection("summary")}
cenaOpis={cenaOpis}
totalMonthly={totalMonthly}
ctaHref="/kontakt#form"
onSend={onSend}
rows={[
{ label: "Pakiet", value: basePrice, showDashIfZero: false },
{ label: "Telefon", value: phonePrice, showDashIfZero: true },
{ label: "Dodatkowe usługi", value: addonsPrice, showDashIfZero: true },
]}
/>
{/* TELEFON */}
<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">
<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>
{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>
{/* Szczegóły telefony rozwinięte */}
{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>
{/* USLUGI DODATKOWE */}
<div class="f-modal-section">
<SectionAccordion
title="Dodatkowe usługi"
right={
<span class="f-modal-phone-price">
{addonsPrice ? `${money(addonsPrice)} ${cenaOpis}` : "—"}
</span>
}
open={openSections.addons}
onToggle={() => toggleSection("addons")}
>
{addonsList.length === 0 ? (
<p>Brak dodatkowych usług.</p>
) : (
<div class="f-addon-list">
{addonsList.map((a) => {
const qty = Number(selectedQty[a.id] || 0);
const isQty = a.typ === "quantity" || a.ilosc === true;
if (!isQty) {
const checked = qty > 0;
return (
<label class="f-addon-item" key={a.id}>
<div class="f-addon-checkbox">
<input
type="checkbox"
checked={checked}
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>}
</div>
<div class="f-addon-price">
{money(a.cena)} {cenaOpis}
</div>
</label>
);
}
// Usługa z ilośćią
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 * Number(a.cena || 0);
return (
<div class="f-addon-item f-addon-item--qty" key={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(a.cena)} {cenaOpis}
</div>
<div class="f-addon-price-total">
{qty > 0 ? `${money(lineTotal)} ${cenaOpis}` : "—"}
</div>
</div>
</div>
);
})}
</div>
)}
</SectionAccordion>
</div>
{/* PODSUMOWANIE */}
<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>Dodatkowe usługi</span>
<span>{addonsPrice ? `${money(addonsPrice)} ${cenaOpis}` : "—"}</span>
</div>
<div class="f-summary-total">
<span>Łącznie</span>
<span>{money(totalMonthly)} {cenaOpis}</span>
</div>
<a
href="/kontakt#form"
class="btn btn-primary w-full mt-4"
onClick={() => saveOfferToLocalStorage()}
>
Wyślij zapytanie z tym wyborem
</a>
</div>
</div>
</SectionAccordion>
</div>
<div
ref={floating.ref}
class="f-floating-total"
style={floating.style}
{...floating.handlers}
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>
<FloatingTotal
storageKey="fuz_floating_total_pos_internet_v1"
totalMonthly={totalMonthly}
cenaOpis={cenaOpis}
/>
</OfferModalShell>
);
}

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

@@ -1,171 +1,21 @@
import { useEffect, useMemo, useState } from "preact/hooks";
import useDraggableFloating from "../hooks/useDraggableFloating.js";
import OfferModalShell from "../modals/OfferModalShell.jsx";
import PlanSection from "../modals/sections/PlanSection.jsx";
import DecoderSection from "../modals/sections/DecoderSection.jsx";
import TvAddonsSection from "../modals/sections/TvAddonsSection.jsx";
import PhoneSection from "../modals/sections/PhoneSection.jsx";
import AddonsSection from "../modals/sections/AddonsSection.jsx";
import SummarySection from "../modals/sections/SummarySection.jsx";
import FloatingTotal from "../modals/sections/FloatingTotal.jsx";
import { mapPhoneYamlToPlans, normalizeAddons, normalizeDecoders } from "../../lib/offer-normalize.js";
import { isTvAddonAvailableForPkg, hasTvTermPricing, getAddonUnitPrice } from "../../lib/offer-pricing.js";
import { saveOfferToLocalStorage } from "../../lib/offer-payload.js";
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,
tid: String(a.tid),
}));
}
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,
@@ -179,29 +29,20 @@ export default function JamboxAddonsModal({
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 floating = useDraggableFloating("fuz_floating_total_pos_tv_v1");
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,
@@ -226,16 +67,18 @@ export default function JamboxAddonsModal({
});
};
// reset po otwarciu / zmianie pakietu
useEffect(() => {
if (!isOpen) return;
setSelectedPhoneId(null);
setOpenPhoneId(null);
setSelectedDecoderId(null);
setSelectedQty({});
setTvTerm({});
const d0 =
(Array.isArray(decodersList) && decodersList.find((d) => Number(d.cena) === 0)) ||
(Array.isArray(decodersList) ? decodersList[0] : null);
setSelectedDecoderId(d0 ? String(d0.id) : null);
setOpenSections({
base: true,
decoder: false,
@@ -244,12 +87,6 @@ export default function JamboxAddonsModal({
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;
@@ -289,150 +126,7 @@ export default function JamboxAddonsModal({
}, 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>
{isTv && a.tid ? (
<a
class="f-addon-more"
href={`/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(a.tid)}`}
target="_blank"
rel="noopener noreferrer"
aria-label={`Więcej informacji o pakiecie ${a.nazwa ?? ""} (otwiera się w nowej karcie)`}
title={`Więcej o pakiecie ${a.nazwa ?? ""}`}
onClick={(e) => e.stopPropagation()}
>
Przejdź do szczegółowych informacji pakietu {a.nazwa ?? ""}
</a>
) : (
a.opis ? <div class="f-addon-desc">{a.opis}</div> : null
)}
{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";
const totalMonthly = basePrice + phonePrice + decoderPrice + tvAddonsPrice + addonsOnlyPrice;
function buildOfferPayload() {
const phone = selectedPhoneId
@@ -491,371 +185,87 @@ export default function JamboxAddonsModal({
};
}
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 { }
}
// ---------
const onSend = () => {
const payload = buildOfferPayload();
saveOfferToLocalStorage(payload, cenaOpis);
};
return (
<div class="f-modal-overlay" onClick={onClose}>
<button
class="f-modal-close"
type="button"
aria-label="Zamknij"
onClick={(e) => {
e.stopPropagation();
onClose();
}}
>
✕
</button>
<OfferModalShell isOpen={isOpen} onClose={onClose} title={`${pkg.name} — konfiguracja usług`}>
<PlanSection
title={pkg.name}
open={openSections.base}
onToggle={() => toggleSection("base")}
price={basePrice}
cenaOpis={cenaOpis}
features={pkg.features || []}
/>
<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>
<DecoderSection
open={openSections.decoder}
onToggle={() => toggleSection("decoder")}
cenaOpis={cenaOpis}
decoders={decodersList}
selectedDecoderId={selectedDecoderId}
setSelectedDecoderId={setSelectedDecoderId}
decoderPrice={decoderPrice}
/>
{/* ✅ 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>
<TvAddonsSection
open={openSections.tv}
onToggle={() => toggleSection("tv")}
cenaOpis={cenaOpis}
pkg={pkg}
tvAddonsVisible={tvAddonsVisible}
selectedQty={selectedQty}
setSelectedQty={setSelectedQty}
tvTerm={tvTerm}
setTvTerm={setTvTerm}
tvAddonsPrice={tvAddonsPrice}
/>
{/* DEKODER */}
<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")}
>
<PhoneSection
open={openSections.phone}
onToggle={() => toggleSection("phone")}
cenaOpis={cenaOpis}
phonePlans={phonePlans}
selectedPhoneId={selectedPhoneId}
setSelectedPhoneId={setSelectedPhoneId}
phonePrice={phonePrice}
/>
{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);
<AddonsSection
open={openSections.addons}
onToggle={() => toggleSection("addons")}
cenaOpis={cenaOpis}
addonsList={addonsList}
selectedQty={selectedQty}
setSelectedQty={setSelectedQty}
addonsPrice={addonsOnlyPrice}
getUnitPrice={(a) => getAddonUnitPrice(a, pkg, null)}
/>
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>
<SummarySection
open={openSections.summary}
onToggle={() => toggleSection("summary")}
cenaOpis={cenaOpis}
totalMonthly={totalMonthly}
ctaHref="/kontakt"
onSend={onSend}
rows={[
{ label: "Pakiet", value: basePrice, showDashIfZero: false },
{ label: "Telefon", value: phonePrice, showDashIfZero: true },
{ label: "Dekoder", value: decoderPrice, showDashIfZero: true },
{ label: "Dodatki TV", value: tvAddonsPrice, showDashIfZero: true },
{ label: "Dodatkowe usługi", value: addonsOnlyPrice, showDashIfZero: true },
]}
/>
<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 */}
<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 */}
<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 */}
<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 */}
<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>
<div
ref={floating.ref}
class="f-floating-total"
style={floating.style}
{...floating.handlers}
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>
<FloatingTotal
storageKey="fuz_floating_total_pos_tv_v1"
totalMonthly={totalMonthly}
cenaOpis={cenaOpis}
/>
</OfferModalShell>
);
}

26
src/islands/modals/OfferModalShell.jsx Normal file
View File

@@ -0,0 +1,26 @@
export default function OfferModalShell({ isOpen, onClose, title, children }) {
if (!isOpen) return null;
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">{title}</h2>
{children}
</div>
</div>
</div>
);
}

123
src/islands/modals/sections/AddonsSection.jsx Normal file
View File

@@ -0,0 +1,123 @@
import SectionAccordion from "./SectionAccordion.jsx";
import { money } from "../../../lib/money.js";
export default function AddonsSection({
open,
onToggle,
title = "Dodatkowe usługi",
cenaOpis,
addonsList = [],
selectedQty,
setSelectedQty,
addonsPrice,
// pricing:
getUnitPrice, // (addon) => number
}) {
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 renderRow = (a) => {
const qty = Number(selectedQty[a.id] || 0);
const isQty = a.typ === "quantity" || a.ilosc === true;
const unit = Number(getUnitPrice?.(a) ?? 0);
if (!isQty) {
return (
<label class="f-addon-item" key={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>
</div>
<div class="f-addon-price">{money(unit)} {cenaOpis}</div>
{/* ✅ opis jako osobny wiersz na pełną szerokość */}
{a.opis ? (
<div class="f-addon-below" onClick={(e) => e.stopPropagation()}>
<div class="f-addon-desc">{a.opis}</div>
</div>
) : null}
</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={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>
);
};
return (
<div class="f-modal-section">
<SectionAccordion
title={title}
right={<span class="f-modal-phone-price">{addonsPrice ? `${money(addonsPrice)} ${cenaOpis}` : "—"}</span>}
open={open}
onToggle={onToggle}
>
{addonsList.length === 0 ? (
<p>Brak usług dodatkowych.</p>
) : (
<div class="f-addon-list">{addonsList.map(renderRow)}</div>
)}
</SectionAccordion>
</div>
);
}

59
src/islands/modals/sections/DecoderSection.jsx Normal file
View File

@@ -0,0 +1,59 @@
import SectionAccordion from "./SectionAccordion.jsx";
import { money } from "../../../lib/money.js";
export default function DecoderSection({
open,
onToggle,
cenaOpis,
decoders = [],
selectedDecoderId,
setSelectedDecoderId,
decoderPrice,
}) {
return (
<div class="f-modal-section">
<SectionAccordion
title="Wybór dekodera"
right={<span class="f-modal-phone-price">{decoderPrice ? `${money(decoderPrice)} ${cenaOpis}` : "—"}</span>}
open={open}
onToggle={onToggle}
>
{decoders.length === 0 ? (
<p>Brak dostępnych dekoderów.</p>
) : (
<div class="f-radio-list">
{decoders.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>
</div>
<div class="f-radio-price">{money(d.cena)} {cenaOpis}</div>
{d.opis ? (
<div class="f-radio-below">
<div class="f-addon-desc">{d.opis}</div>
</div>
) : null}
</label>
);
})}
</div>
)}
</SectionAccordion>
</div>
);
}

22
src/islands/modals/sections/FloatingTotal.jsx Normal file
View File

@@ -0,0 +1,22 @@
import useDraggableFloating from "../../hooks/useDraggableFloating.js";
import { money } from "../../../lib/money.js";
export default function FloatingTotal({ storageKey, totalMonthly, cenaOpis }) {
const floating = useDraggableFloating(storageKey);
return (
<div
ref={floating.ref}
class="f-floating-total"
style={floating.style}
{...floating.handlers}
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>
);
}

100
src/islands/modals/sections/PhoneSection.jsx Normal file
View File

@@ -0,0 +1,100 @@
import SectionAccordion from "./SectionAccordion.jsx";
import { money } from "../../../lib/money.js";
function formatFeatureValue(val) {
if (val === true || val === "true") return "✓";
if (val === false || val === "false" || val == null) return "✕";
return val;
}
export default function PhoneSection({
open,
onToggle,
cenaOpis,
phonePlans = [],
selectedPhoneId,
setSelectedPhoneId,
phonePrice,
}) {
const handlePhoneSelect = (id) => {
if (id === null) {
setSelectedPhoneId(null);
return;
}
setSelectedPhoneId(id);
};
return (
<div class="f-modal-section">
<SectionAccordion
title="Usługa telefoniczna"
right={<span class="f-modal-phone-price">{phonePrice ? `${money(phonePrice)} ${cenaOpis}` : "—"}</span>}
open={open}
onToggle={onToggle}
>
{phonePlans.length === 0 ? (
<p>Brak dostępnych pakietów telefonicznych.</p>
) : (
<div class="f-radio-list">
<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>
{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>
{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>
);
}

34
src/islands/modals/sections/PlanSection.jsx Normal file
View File

@@ -0,0 +1,34 @@
import SectionAccordion from "./SectionAccordion.jsx";
import { money } from "../../../lib/money.js";
function formatFeatureValue(val) {
if (val === true || val === "true") return "✓";
if (val === false || val === "false" || val == null) return "✕";
return val;
}
export default function PlanSection({ title, open, onToggle, price, cenaOpis, features = [] }) {
return (
<div class="f-modal-section">
<SectionAccordion
title={title}
right={<span class="f-modal-phone-price">{money(price)} {cenaOpis}</span>}
open={open}
onToggle={onToggle}
>
{features?.length ? (
<ul class="f-card-features">
{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.</p>
)}
</SectionAccordion>
</div>
);
}

19
src/islands/modals/sections/SectionAccordion.jsx Normal file
View File

@@ -0,0 +1,19 @@
export default 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>
);
}

52
src/islands/modals/sections/SummarySection.jsx Normal file
View File

@@ -0,0 +1,52 @@
import SectionAccordion from "./SectionAccordion.jsx";
import { money } from "../../../lib/money.js";
export default function SummarySection({
open,
onToggle,
cenaOpis,
rows = [], // [{label, valueNumberOrNull, showDashIfZero?}]
totalMonthly,
ctaHref = "/kontakt#form",
onSend,
ctaLabel = "Wyślij zapytanie z tym wyborem",
}) {
return (
<div class="f-modal-section">
<SectionAccordion
title="Podsumowanie miesięczne"
right={<span class="f-modal-phone-price">{money(totalMonthly)} {cenaOpis}</span>}
open={open}
onToggle={onToggle}
>
<div class="f-summary">
<div class="f-summary-list">
{rows.map((r) => {
const v = Number(r.value ?? 0);
const showDash = r.showDashIfZero !== false; // domyślnie true
return (
<div class="f-summary-row" key={r.label}>
<span>{r.label}</span>
<span>{(v > 0 || !showDash) ? `${money(v)} ${cenaOpis}` : "—"}</span>
</div>
);
})}
<div class="f-summary-total">
<span>Łącznie</span>
<span>{money(totalMonthly)} {cenaOpis}</span>
</div>
<a
href={ctaHref}
class="btn btn-primary w-full mt-4"
onClick={() => onSend?.()}
>
{ctaLabel}
</a>
</div>
</div>
</SectionAccordion>
</div>
);
}

163
src/islands/modals/sections/TvAddonsSection.jsx Normal file
View File

@@ -0,0 +1,163 @@
import SectionAccordion from "./SectionAccordion.jsx";
import { money } from "../../../lib/money.js";
import { hasTvTermPricing, getAddonUnitPrice } from "../../../lib/offer-pricing.js";
export default function TvAddonsSection({
open,
onToggle,
cenaOpis,
pkg,
tvAddonsVisible = [],
selectedQty,
setSelectedQty,
tvTerm,
setTvTerm,
tvAddonsPrice,
}) {
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 renderRow = (a) => {
const qty = Number(selectedQty[a.id] || 0);
const isQty = a.typ === "quantity" || a.ilosc === true;
const termPricing = 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 f-addon-item--tv" key={"tv-" + 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>
{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>
{/* ✅ osobny wiersz na pełną szerokość */}
{(a.tid || a.opis) && (
<div class="f-addon-below" onClick={(e) => e.stopPropagation()}>
{a.tid ? (
<a
class="f-addon-more"
href={`/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(a.tid)}`}
target="_blank"
rel="noopener noreferrer"
aria-label={`Więcej informacji o pakiecie ${a.nazwa ?? ""} (otwiera się w nowej karcie)`}
title={`Więcej o pakiecie ${a.nazwa ?? ""}`}
>
Przejdź do szczegółowych informacji pakietu {a.nazwa ?? ""}
</a>
) : (
a.opis ? <div class="f-addon-desc">{a.opis}</div> : null
)}
</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 f-addon-item--tv" key={"tvq-" + 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>
);
};
return (
<div class="f-modal-section">
<SectionAccordion
title="Pakiety dodatkowe TV"
right={<span class="f-modal-phone-price">{tvAddonsPrice ? `${money(tvAddonsPrice)} ${cenaOpis}` : "—"}</span>}
open={open}
onToggle={onToggle}
>
{tvAddonsVisible.length === 0 ? (
<p>Brak pakietów dodatkowych TV.</p>
) : (
<div class="f-addon-list">{tvAddonsVisible.map(renderRow)}</div>
)}
</SectionAccordion>
</div>
);
}