Modal usług doddatkowych podział na komponenty

src/islands/jambox/JamboxAddonsModal.jsx

@@ -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>
   );
 }