Zmiany w modalach
This commit is contained in:
dm
@@ -124,14 +124,12 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
||||
});
|
||||
};
|
||||
|
||||
const togglePhoneOpen = (id) => {
|
||||
setOpenPhoneId((prev) => (prev === id ? null : id));
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="fuz-modal-overlay" onClick={onClose}>
|
||||
<div class="f-modal-overlay" onClick={onClose}>
|
||||
<button
|
||||
class="fuz-modal-close"
|
||||
class="f-modal-close"
|
||||
type="button"
|
||||
aria-label="Zamknij"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
@@ -141,33 +139,35 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="fuz-modal-panel fuz-modal-panel--compact"
|
||||
class="f-modal-panel f-modal-panel--compact"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="fuz-modal-inner">
|
||||
<h2 class="fuz-modal-title">Konfiguracja usług dodatkowych</h2>
|
||||
<div class="f-modal-inner">
|
||||
<h2 class="f-modal-title">Konfiguracja usług dodatkowych</h2>
|
||||
|
||||
{/* INTERNET (fiber) jako akordeon */}
|
||||
<div class="fuz-modal-section">
|
||||
<div class={`fuz-accordion-item ${baseOpen ? "is-open" : ""}`}>
|
||||
<div class="f-modal-section">
|
||||
<div class={`f-accordion-item ${baseOpen ? "is-open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
class="fuz-accordion-header"
|
||||
class="f-accordion-header"
|
||||
onClick={() => setBaseOpen((prev) => !prev)}
|
||||
>
|
||||
<span class="fuz-modal-phone-name">{plan.name}</span>
|
||||
<span class="fuz-modal-phone-price">
|
||||
<span class="f-modal-phone-name">{plan.name}</span>
|
||||
<span class="f-modal-phone-price">
|
||||
{basePrice.toFixed(2)} zł/mies.
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{baseOpen && plan.features && plan.features.length > 0 && (
|
||||
<div class="fuz-accordion-body">
|
||||
<div class="f-accordion-body">
|
||||
<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>
|
||||
<span class="f-card-value">
|
||||
{formatFeatureValue(f.value)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -181,21 +181,22 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
{/* Sekcja: wybór telefonu (akordeon + opcja bez telefonu) */}
|
||||
<div class="fuz-modal-section">
|
||||
{/* Telefon */}
|
||||
<div class="f-modal-section">
|
||||
<h3>Usługa telefoniczna</h3>
|
||||
|
||||
{phonePlans.length === 0 ? (
|
||||
<p>Brak dostępnych pakietów telefonicznych.</p>
|
||||
) : (
|
||||
<div class="fuz-modal-phone-list fuz-accordion">
|
||||
{/* OPCJA: brak telefonu */}
|
||||
<div class="fuz-accordion-item fuz-accordion-item--no-phone">
|
||||
<div class="f-modal-phone-list f-accordion">
|
||||
{/* brak telefonu */}
|
||||
<div class="f-accordion-item f-accordion-item--no-phone">
|
||||
<button
|
||||
type="button"
|
||||
class="fuz-accordion-header"
|
||||
class="f-accordion-header"
|
||||
onClick={() => handlePhoneSelect(null)}
|
||||
>
|
||||
<span class="fuz-accordion-header-left">
|
||||
<span class="f-accordion-header-left">
|
||||
<input
|
||||
type="radio"
|
||||
name="phone-plan"
|
||||
@@ -206,32 +207,30 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span class="fuz-modal-phone-name">
|
||||
<span class="f-modal-phone-name">
|
||||
Nie potrzebuję telefonu
|
||||
</span>
|
||||
</span>
|
||||
<span class="fuz-modal-phone-price">0,00 zł/mies.</span>
|
||||
<span class="f-modal-phone-price">0,00 zł/mies.</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
{/* LISTA PAKIETÓW TELEFONICZNYCH */}
|
||||
{/* lista pakietów telefonu */}
|
||||
{phonePlans.map((p) => {
|
||||
const isSelected = selectedPhoneId === p.id;
|
||||
const isOpen = openPhoneId === p.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`fuz-accordion-item ${isOpen ? "is-open" : ""
|
||||
}`}
|
||||
class={`f-accordion-item ${isOpen ? "is-open" : ""}`}
|
||||
key={p.id}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="fuz-accordion-header"
|
||||
class="f-accordion-header"
|
||||
onClick={() => handlePhoneSelect(p.id)}
|
||||
>
|
||||
<span class="fuz-accordion-header-left">
|
||||
<span class="f-accordion-header-left">
|
||||
<input
|
||||
type="radio"
|
||||
name="phone-plan"
|
||||
@@ -242,36 +241,29 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span class="fuz-modal-phone-name">
|
||||
{p.name}
|
||||
</span>
|
||||
<span class="f-modal-phone-name">{p.name}</span>
|
||||
</span>
|
||||
<span class="fuz-modal-phone-price">
|
||||
|
||||
<span class="f-modal-phone-price">
|
||||
{p.price_monthly.toFixed(2)} zł/mies.
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div class="fuz-accordion-body">
|
||||
<div class="f-accordion-body">
|
||||
{p.features && p.features.length > 0 && (
|
||||
<ul class="f-card-features">
|
||||
{p.features
|
||||
.filter(
|
||||
(f) =>
|
||||
!String(
|
||||
f.label || ""
|
||||
)
|
||||
!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">
|
||||
{f.value}
|
||||
</span>
|
||||
<span class="f-card-label">{f.label}</span>
|
||||
<span class="f-card-value">{f.value}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -285,47 +277,39 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sekcja: dodatki internetowe */}
|
||||
<div class="fuz-modal-section">
|
||||
{/* Dodatki internetowe */}
|
||||
<div class="f-modal-section">
|
||||
<h3>Dodatkowe usługi</h3>
|
||||
|
||||
{addons.length === 0 ? (
|
||||
<p>Brak dodatkowych usług.</p>
|
||||
) : (
|
||||
<div class="fuz-addon-list">
|
||||
<div class="f-addon-list">
|
||||
{addons.map((addon) =>
|
||||
addon.options.map((opt) => {
|
||||
const checked = selectedAddons.some(
|
||||
(x) =>
|
||||
x.addonId === addon.id &&
|
||||
x.optionId === opt.id
|
||||
(x) => x.addonId === addon.id && x.optionId === opt.id
|
||||
);
|
||||
|
||||
return (
|
||||
<label
|
||||
class="fuz-addon-item"
|
||||
key={`${addon.id}-${opt.id}`}
|
||||
>
|
||||
<div class="fuz-addon-checkbox">
|
||||
<label class="f-addon-item" key={`${addon.id}-${opt.id}`}>
|
||||
<div class="f-addon-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() =>
|
||||
handleAddonToggle(addon.id, opt.id)
|
||||
}
|
||||
onChange={() => handleAddonToggle(addon.id, opt.id)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="fuz-addon-main">
|
||||
<div class="fuz-addon-name">{addon.name}</div>
|
||||
<div class="f-addon-main">
|
||||
<div class="f-addon-name">{addon.name}</div>
|
||||
{addon.description && (
|
||||
<div class="fuz-addon-desc">
|
||||
{addon.description}
|
||||
</div>
|
||||
<div class="f-addon-desc">{addon.description}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="fuz-addon-price">
|
||||
{opt.price.toFixed(2)} zł/mies.
|
||||
<div class="f-addon-price">
|
||||
{opt.price.toFixed(2)} {opt.currency}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
@@ -336,34 +320,30 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
||||
</div>
|
||||
|
||||
{/* Podsumowanie */}
|
||||
<div class="fuz-modal-section fuz-summary">
|
||||
<div class="f-modal-section f-summary">
|
||||
<h3>Podsumowanie miesięczne</h3>
|
||||
|
||||
<div class="fuz-summary-list">
|
||||
<div class="fuz-summary-row">
|
||||
<div class="f-summary-list">
|
||||
<div class="f-summary-row">
|
||||
<span>Internet</span>
|
||||
<span>{basePrice.toFixed(2)} zł/mies.</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-summary-row">
|
||||
<div class="f-summary-row">
|
||||
<span>Telefon</span>
|
||||
<span>
|
||||
{phonePrice
|
||||
? `${phonePrice.toFixed(2)} zł/mies.`
|
||||
: "—"}
|
||||
{phonePrice ? `${phonePrice.toFixed(2)} zł/mies.` : "—"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-summary-row">
|
||||
<div class="f-summary-row">
|
||||
<span>Dodatki</span>
|
||||
<span>
|
||||
{addonsPrice
|
||||
? `${addonsPrice.toFixed(2)} zł/mies.`
|
||||
: "—"}
|
||||
{addonsPrice ? `${addonsPrice.toFixed(2)} zł/mies.` : "—"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-summary-total">
|
||||
<div class="f-summary-total">
|
||||
<span>Łącznie</span>
|
||||
<span>{totalMonthly.toFixed(2)} zł/mies.</span>
|
||||
</div>
|
||||
|
||||
@@ -3,408 +3,386 @@ import "../../styles/modal.css";
|
||||
import "../../styles/offers/offers-table.css";
|
||||
|
||||
export default function JamboxAddonsModal({ isOpen, onClose, pkg }) {
|
||||
const [phonePlans, setPhonePlans] = useState([]);
|
||||
const [addons, setAddons] = useState([]);
|
||||
const [phonePlans, setPhonePlans] = useState([]);
|
||||
const [addons, setAddons] = useState([]);
|
||||
|
||||
const [tvAddons, setTvAddons] = useState([]);
|
||||
const [selectedTvAddonTids, setSelectedTvAddonTids] = useState([]);
|
||||
const [tvAddons, setTvAddons] = useState([]);
|
||||
const [selectedTvAddonTids, setSelectedTvAddonTids] = useState([]);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [selectedPhoneId, setSelectedPhoneId] = useState(null);
|
||||
const [selectedAddonIds, setSelectedAddonIds] = useState([]);
|
||||
const [selectedPhoneId, setSelectedPhoneId] = useState(null);
|
||||
const [selectedAddonIds, setSelectedAddonIds] = useState([]);
|
||||
|
||||
// akordeony
|
||||
const [openPhoneId, setOpenPhoneId] = useState(null);
|
||||
const [baseOpen, setBaseOpen] = useState(true);
|
||||
// akordeony
|
||||
const [openPhoneId, setOpenPhoneId] = useState(null);
|
||||
const [baseOpen, setBaseOpen] = useState(true);
|
||||
|
||||
const formatFeatureValue = (val) => {
|
||||
if (val === true || val === "true") return "✓";
|
||||
if (val === false || val === "false" || val == null) return "✕";
|
||||
return val;
|
||||
};
|
||||
const formatFeatureValue = (val) => {
|
||||
if (val === true || val === "true") return "✓";
|
||||
if (val === false || val === "false" || val == null) return "✕";
|
||||
return val;
|
||||
};
|
||||
|
||||
const handlePhoneSelect = (id) => {
|
||||
if (id === null) {
|
||||
setSelectedPhoneId(null);
|
||||
setOpenPhoneId(null);
|
||||
return;
|
||||
const handlePhoneSelect = (id) => {
|
||||
if (id === null) {
|
||||
setSelectedPhoneId(null);
|
||||
setOpenPhoneId(null);
|
||||
return;
|
||||
}
|
||||
setSelectedPhoneId(id);
|
||||
setOpenPhoneId((prev) => (prev === id ? null : id));
|
||||
};
|
||||
|
||||
const toggleAddon = (addonId) => {
|
||||
setSelectedAddonIds((prev) =>
|
||||
prev.includes(addonId) ? prev.filter((x) => x !== addonId) : [...prev, addonId]
|
||||
);
|
||||
};
|
||||
|
||||
// reset po otwarciu / zmianie pakietu
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
setSelectedPhoneId(null);
|
||||
setSelectedAddonIds([]);
|
||||
setOpenPhoneId(null);
|
||||
setBaseOpen(true);
|
||||
setError("");
|
||||
setSelectedTvAddonTids([]);
|
||||
}, [isOpen, pkg?.id]);
|
||||
|
||||
// load danych
|
||||
useEffect(() => {
|
||||
if (!isOpen || !pkg?.id) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
// telefon
|
||||
const phoneRes = await fetch("/api/phone/plans");
|
||||
if (!phoneRes.ok) throw new Error(`HTTP ${phoneRes.status} (phone)`);
|
||||
const phoneJson = await phoneRes.json();
|
||||
const phoneData = Array.isArray(phoneJson.data) ? phoneJson.data : [];
|
||||
|
||||
// dodatki JAMBOX (dla pakietu)
|
||||
const addonsRes = await fetch(`/api/jambox/addons?packageId=${pkg.id}`);
|
||||
if (!addonsRes.ok) throw new Error(`HTTP ${addonsRes.status} (addons)`);
|
||||
const addonsJson = await addonsRes.json();
|
||||
const addonsData = Array.isArray(addonsJson.data) ? addonsJson.data : [];
|
||||
|
||||
// pakiety TV
|
||||
const tvRes = await fetch(`/api/jambox/tv-addons?packageId=${pkg.id}`);
|
||||
if (!tvRes.ok) throw new Error(`HTTP ${tvRes.status} (tv-addons)`);
|
||||
const tvJson = await tvRes.json();
|
||||
const tvData = Array.isArray(tvJson.data) ? tvJson.data : [];
|
||||
|
||||
if (!cancelled) {
|
||||
setPhonePlans(phoneData);
|
||||
setAddons(addonsData);
|
||||
setTvAddons(tvData);
|
||||
}
|
||||
setSelectedPhoneId(id);
|
||||
setOpenPhoneId((prev) => (prev === id ? null : id));
|
||||
} catch (err) {
|
||||
console.error("❌ Błąd ładowania danych do JamboxAddonsModal:", err);
|
||||
if (!cancelled) setError("Nie udało się załadować danych dodatkowych usług.");
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
loadData();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isOpen, pkg?.id]);
|
||||
|
||||
const toggleAddon = (addonId) => {
|
||||
setSelectedAddonIds((prev) =>
|
||||
prev.includes(addonId)
|
||||
? prev.filter((x) => x !== addonId)
|
||||
: [...prev, addonId]
|
||||
);
|
||||
};
|
||||
if (!isOpen || !pkg) return null;
|
||||
|
||||
// reset po otwarciu / zmianie pakietu
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
setSelectedPhoneId(null);
|
||||
setSelectedAddonIds([]);
|
||||
setOpenPhoneId(null);
|
||||
setBaseOpen(true);
|
||||
setError("");
|
||||
setSelectedTvAddonTids([]);
|
||||
}, [isOpen, pkg?.id]);
|
||||
const basePrice = Number(pkg.price_monthly || 0);
|
||||
|
||||
// load danych
|
||||
useEffect(() => {
|
||||
if (!isOpen || !pkg?.id) return;
|
||||
const phonePrice = useMemo(() => {
|
||||
if (!selectedPhoneId) return 0;
|
||||
const p = phonePlans.find((x) => x.id === selectedPhoneId);
|
||||
return Number(p?.price_monthly || 0);
|
||||
}, [selectedPhoneId, phonePlans]);
|
||||
|
||||
let cancelled = false;
|
||||
// backend może zwrócić { id, price } albo { addon_id, price }
|
||||
const addonsPrice = useMemo(() => {
|
||||
return selectedAddonIds.reduce((sum, addonId) => {
|
||||
const a = addons.find((x) => (x.id ?? x.addon_id) === addonId);
|
||||
return sum + Number(a?.price || 0);
|
||||
}, 0);
|
||||
}, [selectedAddonIds, addons]);
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const tvAddonsPrice = useMemo(() => {
|
||||
return selectedTvAddonTids.reduce((sum, tid) => {
|
||||
const a = tvAddons.find((x) => Number(x.tid) === Number(tid));
|
||||
return sum + Number(a?.price || 0);
|
||||
}, 0);
|
||||
}, [selectedTvAddonTids, tvAddons]);
|
||||
|
||||
try {
|
||||
// telefon
|
||||
const phoneRes = await fetch("/api/phone/plans");
|
||||
if (!phoneRes.ok) throw new Error(`HTTP ${phoneRes.status} (phone)`);
|
||||
const phoneJson = await phoneRes.json();
|
||||
const phoneData = Array.isArray(phoneJson.data) ? phoneJson.data : [];
|
||||
const totalMonthly = basePrice + phonePrice + addonsPrice + tvAddonsPrice;
|
||||
|
||||
// dodatki JAMBOX (dla pakietu)
|
||||
const addonsRes = await fetch(`/api/jambox/addons?packageId=${pkg.id}`);
|
||||
if (!addonsRes.ok) throw new Error(`HTTP ${addonsRes.status} (addons)`);
|
||||
const addonsJson = await addonsRes.json();
|
||||
const addonsData = Array.isArray(addonsJson.data) ? addonsJson.data : [];
|
||||
const toggleTvAddon = (tid) => {
|
||||
const t = Number(tid);
|
||||
setSelectedTvAddonTids((prev) =>
|
||||
prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]
|
||||
);
|
||||
};
|
||||
|
||||
const tvRes = await fetch(`/api/jambox/tv-addons?packageId=${pkg.id}`);
|
||||
if (!tvRes.ok) throw new Error(`HTTP ${tvRes.status} (tv-addons)`);
|
||||
return (
|
||||
<div class="f-modal-overlay" onClick={onClose}>
|
||||
<button
|
||||
class="f-modal-close"
|
||||
type="button"
|
||||
aria-label="Zamknij"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
const tvJson = await tvRes.json();
|
||||
const tvData = Array.isArray(tvJson.data) ? tvJson.data : [];
|
||||
<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>
|
||||
|
||||
if (!cancelled) {
|
||||
setPhonePlans(phoneData);
|
||||
setAddons(addonsData);
|
||||
setTvAddons(tvData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("❌ Błąd ładowania danych do JamboxAddonsModal:", err);
|
||||
if (!cancelled) setError("Nie udało się załadować danych dodatkowych usług.");
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
}
|
||||
{/* PAKIET JAMBOX jako akordeon */}
|
||||
<div class="f-modal-section">
|
||||
<div class={`f-accordion-item ${baseOpen ? "is-open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
class="f-accordion-header"
|
||||
onClick={() => setBaseOpen((prev) => !prev)}
|
||||
>
|
||||
<span class="f-modal-phone-name">{pkg.name}</span>
|
||||
<span class="f-modal-phone-price">
|
||||
{basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
loadData();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isOpen, pkg?.id]);
|
||||
{baseOpen && pkg.features && pkg.features.length > 0 && (
|
||||
<div class="f-accordion-body">
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
if (!isOpen || !pkg) return null;
|
||||
{loading && <p>Ładowanie danych...</p>}
|
||||
{error && <p class="text-red-600">{error}</p>}
|
||||
|
||||
const basePrice = Number(pkg.price_monthly || 0);
|
||||
{!loading && !error && (
|
||||
<>
|
||||
{/* TV ADDONS */}
|
||||
<div class="f-modal-section">
|
||||
<h3>Pakiety dodatkowe TV</h3>
|
||||
|
||||
const phonePrice = useMemo(() => {
|
||||
if (!selectedPhoneId) return 0;
|
||||
const p = phonePlans.find((x) => x.id === selectedPhoneId);
|
||||
return Number(p?.price_monthly || 0);
|
||||
}, [selectedPhoneId, phonePlans]);
|
||||
{tvAddons.length === 0 ? (
|
||||
<p>Brak pakietów dodatkowych TV dla tego pakietu.</p>
|
||||
) : (
|
||||
<div class="f-addon-list">
|
||||
{tvAddons.map((a) => {
|
||||
const tid = Number(a.tid);
|
||||
const checked = selectedTvAddonTids.includes(tid);
|
||||
const priceNum = Number(a.price || 0);
|
||||
|
||||
// UWAGA: backend może zwrócić { id, price } albo { addon_id, price }
|
||||
const addonsPrice = useMemo(() => {
|
||||
return selectedAddonIds.reduce((sum, addonId) => {
|
||||
const a = addons.find((x) => (x.id ?? x.addon_id) === addonId);
|
||||
return sum + Number(a?.price || 0);
|
||||
}, 0);
|
||||
}, [selectedAddonIds, addons]);
|
||||
return (
|
||||
<label class="f-addon-item" key={`tv-${tid}`}>
|
||||
<div class="f-addon-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => toggleTvAddon(tid)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="f-addon-main">
|
||||
<div class="f-addon-name">{a.name}</div>
|
||||
<div class="f-addon-desc">{a.description}</div>
|
||||
</div>
|
||||
|
||||
<div class="f-addon-price">
|
||||
{Number.isFinite(priceNum) ? `${priceNum.toFixed(2)} zł/mies.` : "—"}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
const tvAddonsPrice = useMemo(() => {
|
||||
return selectedTvAddonTids.reduce((sum, tid) => {
|
||||
const a = tvAddons.find((x) => Number(x.tid) === Number(tid));
|
||||
return sum + Number(a?.price || 0);
|
||||
}, 0);
|
||||
}, [selectedTvAddonTids, tvAddons]);
|
||||
{/* TELEFON */}
|
||||
<div class="f-modal-section">
|
||||
<h3>Usługa telefoniczna</h3>
|
||||
|
||||
const totalMonthly = basePrice + phonePrice + addonsPrice + tvAddonsPrice;
|
||||
|
||||
const toggleTvAddon = (tid) => {
|
||||
const t = Number(tid);
|
||||
setSelectedTvAddonTids((prev) =>
|
||||
prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="fuz-modal-overlay" onClick={onClose}>
|
||||
<button
|
||||
class="fuz-modal-close"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="fuz-modal-panel fuz-modal-panel--compact"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="fuz-modal-inner">
|
||||
<h2 class="fuz-modal-title">Konfiguracja usług dodatkowych</h2>
|
||||
|
||||
{/* PAKIET JAMBOX jako akordeon (jak internet w Twoim modalu) */}
|
||||
<div class="fuz-modal-section">
|
||||
<div class={`fuz-accordion-item ${baseOpen ? "is-open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
class="fuz-accordion-header"
|
||||
onClick={() => setBaseOpen((prev) => !prev)}
|
||||
>
|
||||
<span class="fuz-modal-phone-name">{pkg.name}</span>
|
||||
<span class="fuz-modal-phone-price">
|
||||
{basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{baseOpen && pkg.features && pkg.features.length > 0 && (
|
||||
<div class="fuz-accordion-body">
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{phonePlans.length === 0 ? (
|
||||
<p>Brak dostępnych pakietów telefonicznych.</p>
|
||||
) : (
|
||||
<div class="f-modal-phone-list f-accordion">
|
||||
{/* brak telefonu */}
|
||||
<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">
|
||||
<input
|
||||
type="radio"
|
||||
name="phone-plan"
|
||||
checked={selectedPhoneId === null}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePhoneSelect(null);
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span class="f-modal-phone-name">Nie potrzebuję telefonu</span>
|
||||
</span>
|
||||
<span class="f-modal-phone-price">0,00 zł/mies.</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading && <p>Ładowanie danych...</p>}
|
||||
{error && <p class="text-red-600">{error}</p>}
|
||||
{/* pakiety telefonu */}
|
||||
{phonePlans.map((p) => {
|
||||
const isSelected = selectedPhoneId === p.id;
|
||||
const isOpen = openPhoneId === p.id;
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
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">
|
||||
<input
|
||||
type="radio"
|
||||
name="phone-plan"
|
||||
checked={isSelected}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePhoneSelect(p.id);
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span class="f-modal-phone-name">{p.name}</span>
|
||||
</span>
|
||||
<span class="f-modal-phone-price">
|
||||
{Number(p.price_monthly || 0).toFixed(2)} zł/mies.
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="fuz-modal-section">
|
||||
<h3>Pakiety dodatkowe TV</h3>
|
||||
|
||||
{tvAddons.length === 0 ? (
|
||||
<p>Brak pakietów dodatkowych TV dla tego pakietu.</p>
|
||||
) : (
|
||||
<div class="fuz-addon-list">
|
||||
{tvAddons.map((a) => {
|
||||
const tid = Number(a.tid);
|
||||
const checked = selectedTvAddonTids.includes(tid);
|
||||
const priceNum = Number(a.price || 0);
|
||||
|
||||
return (
|
||||
<label class="fuz-addon-item" key={`tv-${tid}`}>
|
||||
<div class="fuz-addon-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => toggleTvAddon(tid)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="fuz-addon-main">
|
||||
<div class="fuz-addon-name">{a.name}</div>
|
||||
{/* jeśli chcesz pokazać typ/kind */}
|
||||
<div class="fuz-addon-desc">{a.description}</div>
|
||||
</div>
|
||||
|
||||
<div class="fuz-addon-price">
|
||||
{Number.isFinite(priceNum) ? `${priceNum.toFixed(2)} zł/mies.` : "—"}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{isOpen && (
|
||||
<div class="f-accordion-body">
|
||||
{p.features && p.features.length > 0 && (
|
||||
<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">{f.value}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* TELEFON (identycznie jak w InternetAddonsModal) */}
|
||||
<div class="fuz-modal-section">
|
||||
<h3>Usługa telefoniczna</h3>
|
||||
{/* DODATKI JAMBOX */}
|
||||
<div class="f-modal-section">
|
||||
<h3>Dodatkowe usługi</h3>
|
||||
|
||||
{phonePlans.length === 0 ? (
|
||||
<p>Brak dostępnych pakietów telefonicznych.</p>
|
||||
) : (
|
||||
<div class="fuz-modal-phone-list fuz-accordion">
|
||||
{/* OPCJA: brak telefonu */}
|
||||
<div class="fuz-accordion-item fuz-accordion-item--no-phone">
|
||||
<button
|
||||
type="button"
|
||||
class="fuz-accordion-header"
|
||||
onClick={() => handlePhoneSelect(null)}
|
||||
>
|
||||
<span class="fuz-accordion-header-left">
|
||||
<input
|
||||
type="radio"
|
||||
name="phone-plan"
|
||||
checked={selectedPhoneId === null}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePhoneSelect(null);
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span class="fuz-modal-phone-name">
|
||||
Nie potrzebuję telefonu
|
||||
</span>
|
||||
</span>
|
||||
<span class="fuz-modal-phone-price">0,00 zł/mies.</span>
|
||||
</button>
|
||||
</div>
|
||||
{addons.length === 0 ? (
|
||||
<p>Brak usług dodatkowych dla tego pakietu.</p>
|
||||
) : (
|
||||
<div class="f-addon-list">
|
||||
{addons.map((a) => {
|
||||
const addonId = a.id ?? a.addon_id;
|
||||
const checked = selectedAddonIds.includes(addonId);
|
||||
const priceNum = Number(a.price || 0);
|
||||
|
||||
{/* PAKIETY TELEFONU */}
|
||||
{phonePlans.map((p) => {
|
||||
const isSelected = selectedPhoneId === p.id;
|
||||
const isOpen = openPhoneId === p.id;
|
||||
return (
|
||||
<label class="f-addon-item" key={addonId}>
|
||||
<div class="f-addon-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => toggleAddon(addonId)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`fuz-accordion-item ${isOpen ? "is-open" : ""}`}
|
||||
key={p.id}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="fuz-accordion-header"
|
||||
onClick={() => handlePhoneSelect(p.id)}
|
||||
>
|
||||
<span class="fuz-accordion-header-left">
|
||||
<input
|
||||
type="radio"
|
||||
name="phone-plan"
|
||||
checked={isSelected}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePhoneSelect(p.id);
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span class="fuz-modal-phone-name">{p.name}</span>
|
||||
</span>
|
||||
<span class="fuz-modal-phone-price">
|
||||
{Number(p.price_monthly || 0).toFixed(2)} zł/mies.
|
||||
</span>
|
||||
</button>
|
||||
<div class="f-addon-main">
|
||||
<div class="f-addon-name">{a.name}</div>
|
||||
{a.description && <div class="f-addon-desc">{a.description}</div>}
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div class="fuz-accordion-body">
|
||||
{p.features && p.features.length > 0 && (
|
||||
<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">{f.value}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="f-addon-price">{priceNum.toFixed(2)} zł/mies.</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* DODATKI JAMBOX (checkbox, cena z jambox_package_addon_options.price) */}
|
||||
<div class="fuz-modal-section">
|
||||
<h3>Dodatkowe usługi</h3>
|
||||
{/* PODSUMOWANIE */}
|
||||
<div class="f-modal-section f-summary">
|
||||
<h3>Podsumowanie miesięczne</h3>
|
||||
|
||||
{addons.length === 0 ? (
|
||||
<p>Brak usług dodatkowych dla tego pakietu.</p>
|
||||
) : (
|
||||
<div class="fuz-addon-list">
|
||||
{addons.map((a) => {
|
||||
const addonId = a.id ?? a.addon_id; // defensywnie
|
||||
const checked = selectedAddonIds.includes(addonId);
|
||||
<div class="f-summary-list">
|
||||
<div class="f-summary-row">
|
||||
<span>Pakiet</span>
|
||||
<span>{basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}</span>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<label class="fuz-addon-item" key={addonId}>
|
||||
<div class="fuz-addon-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => toggleAddon(addonId)}
|
||||
/>
|
||||
</div>
|
||||
<div class="f-summary-row">
|
||||
<span>Pakiety TV</span>
|
||||
<span>{tvAddonsPrice ? `${tvAddonsPrice.toFixed(2)} zł/mies.` : "—"}</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-addon-main">
|
||||
<div class="fuz-addon-name">{a.name}</div>
|
||||
{a.description && (
|
||||
<div class="fuz-addon-desc">{a.description}</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="f-summary-row">
|
||||
<span>Telefon</span>
|
||||
<span>{phonePrice ? `${phonePrice.toFixed(2)} zł/mies.` : "—"}</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-addon-price">
|
||||
{Number(a.price || 0).toFixed(2)} zł/mies.
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="f-summary-row">
|
||||
<span>Dodatki</span>
|
||||
<span>{addonsPrice ? `${addonsPrice.toFixed(2)} zł/mies.` : "—"}</span>
|
||||
</div>
|
||||
|
||||
{/* PODSUMOWANIE */}
|
||||
<div class="fuz-modal-section fuz-summary">
|
||||
<h3>Podsumowanie miesięczne</h3>
|
||||
|
||||
<div class="fuz-summary-list">
|
||||
<div class="fuz-summary-row">
|
||||
<span>Pakiet</span>
|
||||
<span>
|
||||
{basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-summary-row">
|
||||
<span>Pakiety TV</span>
|
||||
<span>
|
||||
{tvAddonsPrice ? `${tvAddonsPrice.toFixed(2)} zł/mies.` : "—"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-summary-row">
|
||||
<span>Telefon</span>
|
||||
<span>{phonePrice ? `${phonePrice.toFixed(2)} zł/mies.` : "—"}</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-summary-row">
|
||||
<span>Dodatki</span>
|
||||
<span>{addonsPrice ? `${addonsPrice.toFixed(2)} zł/mies.` : "—"}</span>
|
||||
</div>
|
||||
|
||||
<div class="fuz-summary-total">
|
||||
<span>Łącznie</span>
|
||||
<span>{totalMonthly.toFixed(2)} zł/mies.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div class="f-summary-total">
|
||||
<span>Łącznie</span>
|
||||
<span>{totalMonthly.toFixed(2)} zł/mies.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,146 +1,167 @@
|
||||
// src/islands/JamboxChannelsModal.jsx
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { useEffect, useMemo, useState } from "preact/hooks";
|
||||
import "../../styles/modal.css";
|
||||
import "../../styles/offers/offers-table.css";
|
||||
import "../../styles/channels-search.css"; // żeby input miał identyczny styl
|
||||
|
||||
export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
|
||||
const [channels, setChannels] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [channels, setChannels] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const [query, setQuery] = useState("");
|
||||
const q = query.trim().toLowerCase();
|
||||
|
||||
const q = query.trim().toLowerCase();
|
||||
const filtered = !q
|
||||
? channels
|
||||
: channels.filter((ch) => (ch.name || "").toLowerCase().includes(q));
|
||||
|
||||
const filtered = !q
|
||||
? channels
|
||||
: channels.filter((ch) =>
|
||||
(ch.name || "").toLowerCase().includes(q)
|
||||
);
|
||||
const meta = useMemo(() => {
|
||||
if (loading) return "Ładowanie…";
|
||||
if (error) return error;
|
||||
if (!query.trim()) return `Wyniki: ${filtered.length} / ${channels.length}`;
|
||||
return `Wyniki: ${filtered.length} / ${channels.length}`;
|
||||
}, [loading, error, query, filtered.length, channels.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !pkg?.id) return;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !pkg?.id) return;
|
||||
let cancelled = false;
|
||||
|
||||
let cancelled = false;
|
||||
async function loadChannels() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setChannels([]);
|
||||
setQuery("");
|
||||
|
||||
async function loadChannels() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setChannels([]);
|
||||
setQuery("");
|
||||
try {
|
||||
const params = new URLSearchParams({ packageId: String(pkg.id) });
|
||||
const res = await fetch(`/api/jambox/channels?${params.toString()}`);
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({ packageId: String(pkg.id) });
|
||||
const res = await fetch(`/api/jambox/channels?${params.toString()}`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP ${res.status}`);
|
||||
}
|
||||
const json = await res.json();
|
||||
if (!cancelled) setChannels(Array.isArray(json.data) ? json.data : []);
|
||||
} catch (err) {
|
||||
console.error("❌ Błąd pobierania listy kanałów:", err);
|
||||
if (!cancelled) setError("Nie udało się załadować listy kanałów.");
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
if (!cancelled) {
|
||||
setChannels(Array.isArray(json.data) ? json.data : []);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("❌ Błąd pobierania listy kanałów:", err);
|
||||
if (!cancelled) {
|
||||
setError("Nie udało się załadować listy kanałów.");
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
}
|
||||
loadChannels();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isOpen, pkg?.id]);
|
||||
|
||||
loadChannels();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isOpen, pkg?.id]);
|
||||
if (!isOpen || !pkg) return null;
|
||||
|
||||
if (!isOpen || !pkg) return null;
|
||||
return (
|
||||
<div class="f-modal-overlay" onClick={onClose}>
|
||||
<button
|
||||
class="f-modal-close"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
aria-label="Zamknij"
|
||||
type="button"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
return (
|
||||
<div class="fuz-modal-overlay" onClick={onClose}>
|
||||
<button
|
||||
class="fuz-modal-close"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div
|
||||
class="f-modal-panel f-modal-panel--channels"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={`Kanały w pakiecie ${pkg.name}`}
|
||||
>
|
||||
<div class="max-w-8xl mx-auto px-3 md:px-6">
|
||||
<h2 class="f-modal-title">Kanały w pakiecie {pkg.name}</h2>
|
||||
|
||||
<div
|
||||
class="fuz-modal-panel fuz-modal-panel--channels"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="max-w-8xl mx-auto px-3 md:px-6">
|
||||
<h2 class="fuz-modal-title">Kanały w pakiecie {pkg.name}</h2>
|
||||
{/* INPUT jak w wyszukiwarce (z własnym X) */}
|
||||
<div class="f-chsearch__top">
|
||||
<div class="f-chsearch__inputwrap">
|
||||
<input
|
||||
class="f-chsearch__input"
|
||||
type="search"
|
||||
value={query}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Szukaj kanału po nazwie…"
|
||||
aria-label="Szukaj kanału po nazwie"
|
||||
/>
|
||||
|
||||
<div class="fuz-chsearch__top">
|
||||
<input
|
||||
class="fuz-chsearch__input"
|
||||
type="search"
|
||||
value={query}
|
||||
onInput={(e) => setQuery(e.currentTarget.value)}
|
||||
placeholder="Szukaj kanału po nazwie…"
|
||||
aria-label="Szukaj kanału po nazwie"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!loading && !error && (
|
||||
<div class="jmb-search-meta">
|
||||
Wyniki: <strong>{filtered.length}</strong> / {channels.length}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && <p>Ładowanie kanałów...</p>}
|
||||
{error && <p class="text-red-600">{error}</p>}
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
{filtered.length === 0 ? (
|
||||
<p>Brak kanałów spełniających kryteria.</p>
|
||||
) : (
|
||||
<div class="">
|
||||
<div class="f-section-channel">
|
||||
{filtered.map((ch) => (
|
||||
<div
|
||||
class="jmb-channel-card"
|
||||
key={ch.number}
|
||||
onClick={(e) => {
|
||||
if (e.target.closest("a, button")) return;
|
||||
e.currentTarget.classList.toggle("is-flipped");
|
||||
}}
|
||||
>
|
||||
<div class="jmb-channel-inner">
|
||||
<div class="jmb-channel-face jmb-channel-front">
|
||||
{ch.logo_url && (
|
||||
<img src={ch.logo_url} alt={ch.name} class="jmb-channel-logo" loading="lazy" />
|
||||
)}
|
||||
<div class="jmb-channel-name">{ch.name}</div>
|
||||
<div class="jmb-channel-number">kanał {ch.number}</div>
|
||||
</div>
|
||||
|
||||
<div class="jmb-channel-face jmb-channel-back">
|
||||
<div class="jmb-channel-back-title">{ch.name}</div>
|
||||
<div
|
||||
class="jmb-channel-desc"
|
||||
dangerouslySetInnerHTML={{ __html: ch.description || "<em>Brak opisu kanału.</em>" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{query && (
|
||||
<button
|
||||
type="button"
|
||||
class="f-chsearch__clear"
|
||||
aria-label="Wyczyść wyszukiwanie"
|
||||
onClick={() => setQuery("")}
|
||||
onMouseDown={(e) => e.preventDefault()} // nie zabieraj focusa inputowi
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="f-chsearch__meta">{meta}</div>
|
||||
</div>
|
||||
|
||||
{loading && <p>Ładowanie kanałów...</p>}
|
||||
{error && !loading && <p class="text-red-600">{error}</p>}
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
{filtered.length === 0 ? (
|
||||
<p>Brak kanałów spełniających kryteria.</p>
|
||||
) : (
|
||||
<div class="f-section-channel">
|
||||
{filtered.map((ch) => (
|
||||
<div
|
||||
class="jmb-channel-card"
|
||||
key={ch.number}
|
||||
onClick={(e) => {
|
||||
// żeby klik w link w opisie nie flipował
|
||||
if (e.target.closest("a, button")) return;
|
||||
e.currentTarget.classList.toggle("is-flipped");
|
||||
}}
|
||||
>
|
||||
<div class="jmb-channel-inner">
|
||||
{/* FRONT */}
|
||||
<div class="jmb-channel-face jmb-channel-front">
|
||||
{ch.logo_url && (
|
||||
<img
|
||||
src={ch.logo_url}
|
||||
alt={ch.name}
|
||||
class="jmb-channel-logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
<div class="jmb-channel-name">{ch.name}</div>
|
||||
<div class="jmb-channel-number">kanał {ch.number}</div>
|
||||
</div>
|
||||
|
||||
{/* BACK */}
|
||||
<div class="jmb-channel-face jmb-channel-back">
|
||||
<div class="jmb-channel-back-title">{ch.name}</div>
|
||||
<div
|
||||
class="jmb-channel-desc"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: ch.description || "<em>Brak opisu kanału.</em>",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,10 +31,13 @@ export default function JamboxChannelsSearch() {
|
||||
params.set("q", qq);
|
||||
params.set("limit", "80");
|
||||
|
||||
const res = await fetch(`/api/jambox/channels-search?${params.toString()}`, {
|
||||
signal: ac.signal,
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
const res = await fetch(
|
||||
`/api/jambox/channels-search?${params.toString()}`,
|
||||
{
|
||||
signal: ac.signal,
|
||||
headers: { Accept: "application/json" },
|
||||
}
|
||||
);
|
||||
|
||||
const json = await res.json();
|
||||
if (!res.ok || !json.ok) throw new Error(json?.error || "API_ERROR");
|
||||
@@ -68,76 +71,81 @@ export default function JamboxChannelsSearch() {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
|
||||
el.classList.add("is-target");
|
||||
setTimeout(() => el.classList.remove("is-target"), 1200);
|
||||
window.setTimeout(() => el.classList.remove("is-target"), 1200);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div class="fuz-chsearch">
|
||||
<div class="f-chsearch">
|
||||
<h1 class="f-section-title">Wyszukiwanie kanałów w pakietach telewizji</h1>
|
||||
<div class="fuz-chsearch__top">
|
||||
<input
|
||||
class="fuz-chsearch__input"
|
||||
type="search"
|
||||
value={q}
|
||||
onInput={(e) => setQ(e.currentTarget.value)}
|
||||
placeholder="Szukaj kanału po nazwie…"
|
||||
aria-label="Szukaj kanału po nazwie"
|
||||
/>
|
||||
|
||||
<div class="fuz-chsearch__meta">
|
||||
{meta}
|
||||
<div class="f-chsearch__top">
|
||||
<div class="f-chsearch__inputwrap">
|
||||
<input
|
||||
class="f-chsearch__input"
|
||||
type="search"
|
||||
value={q}
|
||||
onInput={(e) => setQ(e.currentTarget.value)}
|
||||
placeholder="Szukaj kanału po nazwie…"
|
||||
aria-label="Szukaj kanału po nazwie"
|
||||
/>
|
||||
|
||||
{q && (
|
||||
<button
|
||||
type="button"
|
||||
class="f-chsearch__clear"
|
||||
aria-label="Wyczyść wyszukiwanie"
|
||||
onClick={() => setQ("")}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="f-chsearch__meta">{meta}</div>
|
||||
</div>
|
||||
|
||||
<div class="fuz-chsearch__list" role="list">
|
||||
<div class="f-chsearch__list" role="list">
|
||||
{items.map((c) => (
|
||||
<div class="fuz-chsearch__row" role="listitem" key={`${c.name}-${c.logo_url || ""}`}>
|
||||
<div
|
||||
class="f-chsearch__row"
|
||||
role="listitem"
|
||||
key={`${c.name}-${c.logo_url || ""}`}
|
||||
>
|
||||
{/* kolumna 1 */}
|
||||
<div class="fuz-chsearch__left">
|
||||
<div class="f-chsearch__left">
|
||||
{c.logo_url && (
|
||||
<img
|
||||
src={c.logo_url}
|
||||
alt={c.name}
|
||||
class="fuz-chsearch__logo"
|
||||
class="f-chsearch__logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div class="fuz-chsearch__channel-name">
|
||||
{c.name}
|
||||
</div>
|
||||
|
||||
{/* <div class="fuz-chsearch__channel-number">
|
||||
kanał {c.min_number || "—"}
|
||||
</div> */}
|
||||
<div class="f-chsearch__channel-name">{c.name}</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* kolumna 2 */}
|
||||
<div class="fuz-chsearch__right">
|
||||
<div class="f-chsearch__right">
|
||||
<div
|
||||
class="fuz-chsearch__desc fuz-chsearch__desc--html"
|
||||
dangerouslySetInnerHTML={{ __html: c.description || "<em>—</em>" }}
|
||||
class="f-chsearch__desc f-chsearch__desc--html"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: c.description || "<em>—</em>",
|
||||
}}
|
||||
/>
|
||||
|
||||
{Array.isArray(c.packages) && c.packages.length > 0 && (
|
||||
<div class="fuz-chsearch__packages">
|
||||
<div class="f-chsearch__packages">
|
||||
Dostępny w:
|
||||
{c.packages.map((p, i) => (
|
||||
// <span class="fuz-chsearch__pkg" key={p.id}>
|
||||
// {p.name}{" "}
|
||||
// <span class="fuz-chsearch__pkgnum">(kanał {p.number})</span>
|
||||
// {i < c.packages.length - 1 ? ", " : ""}
|
||||
// </span>
|
||||
<button
|
||||
type="button"
|
||||
class="fuz-chsearch__pkg"
|
||||
class="f-chsearch__pkg"
|
||||
key={p.id}
|
||||
onClick={() => scrollToPackage(p.id)}
|
||||
>
|
||||
{p.name}{" "}
|
||||
<span class="fuz-chsearch__pkgnum">(kanał {p.number})</span>
|
||||
<span class="f-chsearch__pkgnum">(kanał {p.number})</span>
|
||||
{i < c.packages.length - 1 ? ", " : ""}
|
||||
</button>
|
||||
))}
|
||||
@@ -148,7 +156,7 @@ export default function JamboxChannelsSearch() {
|
||||
))}
|
||||
|
||||
{q.trim().length >= 2 && !loading && items.length === 0 && (
|
||||
<div class="fuz-chsearch__empty">
|
||||
<div class="f-chsearch__empty">
|
||||
Brak wyników dla: <strong>{q}</strong>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,94 +1,127 @@
|
||||
.fuz-chsearch {
|
||||
.f-chsearch {
|
||||
@apply mt-6;
|
||||
}
|
||||
|
||||
.fuz-chsearch__top {
|
||||
.f-chsearch__top {
|
||||
@apply flex flex-col gap-1 mb-4;
|
||||
}
|
||||
|
||||
.fuz-chsearch__input {
|
||||
@apply w-full md:flex-1 px-4 py-3 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] outline-none focus:ring-2 focus:ring-[--btn-background];
|
||||
/* wrapper dla X w środku inputa */
|
||||
.f-chsearch__inputwrap {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.fuz-chsearch__meta {
|
||||
.f-chsearch__input {
|
||||
@apply w-full md:flex-1 px-4 py-3 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] outline-none focus:ring-2 focus:ring-[--btn-background];
|
||||
padding-right: 2.75rem; /* miejsce na X */
|
||||
}
|
||||
|
||||
.f-chsearch__clear {
|
||||
@apply absolute right-2 top-1/2 -translate-y-1/2 grid place-items-center rounded-full border-0 bg-transparent text-[--f-text] opacity-70;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.f-chsearch__clear:hover {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.f-chsearch__meta {
|
||||
@apply text-sm opacity-70 pl-1;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
List + Row layout
|
||||
========================== */
|
||||
.fuz-chsearch__list {
|
||||
.f-chsearch__list {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
/* ✅ węższa pierwsza kolumna */
|
||||
.fuz-chsearch__row {
|
||||
.f-chsearch__row {
|
||||
@apply grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6 rounded-2xl border border-[--f-input-border] bg-[--f-background] p-4;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Column 1: Channel card
|
||||
========================== */
|
||||
.fuz-chsearch__left {
|
||||
.f-chsearch__left {
|
||||
@apply flex flex-col items-center text-center gap-1 px-2;
|
||||
}
|
||||
|
||||
.fuz-chsearch__logo {
|
||||
.f-chsearch__logo {
|
||||
@apply w-14 h-14 object-contain bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-1 mb-1;
|
||||
}
|
||||
|
||||
.fuz-chsearch__channel-name {
|
||||
.f-chsearch__channel-name {
|
||||
@apply font-semibold text-[--fuz-header] leading-tight;
|
||||
}
|
||||
|
||||
.fuz-chsearch__channel-number {
|
||||
@apply text-sm opacity-70;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Column 2: Description + Packages
|
||||
========================== */
|
||||
.fuz-chsearch__right {
|
||||
.f-chsearch__right {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
/* opis NIE ucinany */
|
||||
.fuz-chsearch__desc {
|
||||
.f-chsearch__desc {
|
||||
@apply text-sm md:text-base opacity-90;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* HTML jak w modalu */
|
||||
.fuz-chsearch__desc--html :global(p) {
|
||||
.f-chsearch__desc--html :global(p) {
|
||||
@apply mb-2;
|
||||
}
|
||||
|
||||
.fuz-chsearch__desc--html :global(ol),
|
||||
.fuz-chsearch__desc--html :global(ul) {
|
||||
.f-chsearch__desc--html :global(ol),
|
||||
.f-chsearch__desc--html :global(ul) {
|
||||
@apply pl-6 mb-2;
|
||||
}
|
||||
|
||||
.fuz-chsearch__desc--html :global(li) {
|
||||
.f-chsearch__desc--html :global(li) {
|
||||
@apply mb-1;
|
||||
}
|
||||
|
||||
/* pakiety (bez gwarantowanych) */
|
||||
.fuz-chsearch__packages {
|
||||
.f-chsearch__packages {
|
||||
@apply text-sm opacity-80;
|
||||
}
|
||||
|
||||
.fuz-chsearch__pkg {
|
||||
@apply inline text-[--btn-background];
|
||||
/* klikalny pakiet jak link */
|
||||
.f-chsearch__pkg {
|
||||
@apply inline;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: var(--f-link, var(--btn-background));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fuz-chsearch__pkgnum {
|
||||
.f-chsearch__pkg:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.f-chsearch__pkgnum {
|
||||
@apply opacity-70;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Empty state
|
||||
========================== */
|
||||
.fuz-chsearch__empty {
|
||||
.f-chsearch__empty {
|
||||
@apply mt-2 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 opacity-80;
|
||||
}
|
||||
|
||||
.f-chsearch__input::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.f-chsearch__input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.f-chsearch__input[type="search"] {
|
||||
appearance: none;
|
||||
}
|
||||
@@ -2,98 +2,93 @@
|
||||
MODAL — FULLSCREEN OVERLAY
|
||||
=========================== */
|
||||
|
||||
.fuz-modal-overlay {
|
||||
.f-modal-overlay {
|
||||
@apply fixed inset-0 z-[9999] flex flex-col;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(6px);
|
||||
animation: fadeIn 0.25s ease-out forwards;
|
||||
}
|
||||
|
||||
.fuz-modal-close {
|
||||
.f-modal-close {
|
||||
@apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
|
||||
@apply text-[--f-text] opacity-70;
|
||||
}
|
||||
|
||||
.fuz-modal-close:hover {
|
||||
.f-modal-close:hover {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
/* panel – pełny ekran, ale treść centrowana max-w */
|
||||
.fuz-modal-panel {
|
||||
.f-modal-panel {
|
||||
@apply w-full h-full overflow-y-auto bg-[--f-background] text-[--f-text];
|
||||
@apply px-6 py-8 md:px-12 md:py-12;
|
||||
}
|
||||
|
||||
/* wersja "kompaktowa" z mniejszym max-width (używana w dodatkach) */
|
||||
.fuz-modal-panel.fuz-modal-panel--compact {
|
||||
.f-modal-panel.f-modal-panel--compact {
|
||||
@apply flex justify-center items-start;
|
||||
}
|
||||
|
||||
.fuz-modal-inner {
|
||||
.f-modal-inner {
|
||||
@apply w-full max-w-4xl mx-auto;
|
||||
}
|
||||
|
||||
.fuz-modal-title {
|
||||
.f-modal-title {
|
||||
@apply text-3xl md:text-4xl font-bold mb-8 text-center text-[--f-text];
|
||||
}
|
||||
|
||||
.fuz-modal-content p {
|
||||
.f-modal-content p {
|
||||
@apply leading-relaxed text-2xl text-center;
|
||||
}
|
||||
|
||||
.fuz-modal-content p img {
|
||||
.f-modal-content p img {
|
||||
@apply mt-2;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TELEFON — AKORDEON
|
||||
=========================== */
|
||||
|
||||
.fuz-modal-phone-list.fuz-accordion {
|
||||
.f-modal-phone-list.f-accordion {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
.fuz-accordion-item {
|
||||
.f-accordion-item {
|
||||
@apply rounded-xl border overflow-hidden bg-[--f-background];
|
||||
border-color: rgba(148, 163, 184, 0.6); /* neutralna szarość — ok w obu motywach */
|
||||
border-color: rgba(148, 163, 184, 0.6);
|
||||
}
|
||||
|
||||
.fuz-accordion-header {
|
||||
.f-accordion-header {
|
||||
@apply w-full flex items-center justify-between gap-4 px-4 py-2 cursor-pointer;
|
||||
background: rgba(148, 163, 184, 0.06);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fuz-accordion-header-left {
|
||||
.f-accordion-header-left {
|
||||
@apply flex items-center gap-1;
|
||||
}
|
||||
|
||||
.fuz-modal-phone-name {
|
||||
.f-modal-phone-name {
|
||||
@apply font-medium ml-2;
|
||||
}
|
||||
|
||||
.fuz-modal-phone-price {
|
||||
.f-modal-phone-price {
|
||||
@apply font-semibold whitespace-nowrap;
|
||||
}
|
||||
|
||||
.fuz-accordion-body {
|
||||
.f-accordion-body {
|
||||
@apply px-4 pt-2 pb-3;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.4);
|
||||
}
|
||||
|
||||
/* wyróżnienie otwartego pakietu – lekki „accent wash” na tle */
|
||||
.fuz-accordion-item.is-open .fuz-accordion-header {
|
||||
/* wyróżnienie otwartego pakietu */
|
||||
.f-accordion-item.is-open .f-accordion-header {
|
||||
background: color-mix(in srgb, var(--fuz-accent, #2563eb) 8%, transparent);
|
||||
}
|
||||
|
||||
@@ -101,94 +96,96 @@
|
||||
DODATKI — KOLUMNOWA LISTA
|
||||
=========================== */
|
||||
|
||||
.fuz-addon-list {
|
||||
.f-addon-list {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
.fuz-addon-item {
|
||||
.f-addon-item {
|
||||
@apply grid items-center gap-3 px-3 py-2 rounded-xl border cursor-pointer;
|
||||
grid-template-columns: auto 1fr auto; /* [checkbox] [opis] [cena] */
|
||||
grid-template-columns: auto 1fr auto;
|
||||
border-color: rgba(148, 163, 184, 0.5);
|
||||
background: var(--f-background);
|
||||
}
|
||||
|
||||
/* kliknięcie w środek też zaznacza checkboxa */
|
||||
.fuz-addon-item input[type="checkbox"] {
|
||||
.f-addon-item input[type="checkbox"] {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.fuz-addon-checkbox {
|
||||
.f-addon-checkbox {
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
.fuz-addon-main {
|
||||
.f-addon-main {
|
||||
@apply flex flex-col gap-0.5;
|
||||
}
|
||||
|
||||
.fuz-addon-name {
|
||||
.f-addon-name {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.fuz-addon-desc {
|
||||
.f-addon-desc {
|
||||
@apply text-sm opacity-85;
|
||||
}
|
||||
|
||||
.fuz-addon-price {
|
||||
.f-addon-price {
|
||||
@apply font-semibold whitespace-nowrap;
|
||||
}
|
||||
|
||||
/* lekkie podświetlenie przy hover */
|
||||
.fuz-addon-item:hover {
|
||||
border-color: color-mix(in srgb, var(--fuz-accent, #2563eb) 70%, rgba(148, 163, 184, 0.5) 30%);
|
||||
.f-addon-item:hover {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--fuz-accent, #2563eb) 70%,
|
||||
rgba(148, 163, 184, 0.5) 30%
|
||||
);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
PODSUMOWANIE MIESIĘCZNE
|
||||
=========================== */
|
||||
|
||||
.fuz-summary {
|
||||
.f-summary {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
.fuz-summary-list {
|
||||
.f-summary-list {
|
||||
@apply flex flex-col gap-1 mt-2 p-4 rounded-xl;
|
||||
background: rgba(148, 163, 184, 0.07);
|
||||
}
|
||||
|
||||
.fuz-summary-row,
|
||||
.fuz-summary-total {
|
||||
.f-summary-row,
|
||||
.f-summary-total {
|
||||
@apply flex items-center justify-between;
|
||||
}
|
||||
|
||||
.fuz-summary-row span:last-child {
|
||||
.f-summary-row span:last-child {
|
||||
@apply font-medium whitespace-nowrap;
|
||||
}
|
||||
|
||||
.fuz-summary-total {
|
||||
.f-summary-total {
|
||||
@apply mt-1 pt-2;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.4);
|
||||
}
|
||||
|
||||
.fuz-summary-total span:last-child {
|
||||
.f-summary-total span:last-child {
|
||||
@apply font-bold;
|
||||
font-size: 1.25rem;
|
||||
color: var(--fuz-accent, #2563eb);
|
||||
}
|
||||
|
||||
.fuz-modal-section {
|
||||
.f-modal-section {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
.fuz-modal-section h3 {
|
||||
.f-modal-section h3 {
|
||||
@apply text-xl md:text-2xl font-semibold mb-3;
|
||||
}
|
||||
|
||||
/* opcja "bez telefonu" — trochę lżejsze tło */
|
||||
.fuz-accordion-item--no-phone .fuz-accordion-header {
|
||||
/* opcja "bez telefonu" */
|
||||
.f-accordion-item--no-phone .f-accordion-header {
|
||||
background: rgba(148, 163, 184, 0.03);
|
||||
}
|
||||
|
||||
.fuz-accordion-header-left input[type="radio"] {
|
||||
.f-accordion-header-left input[type="radio"] {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
transform: scale(1.05);
|
||||
@@ -196,7 +193,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fuz-addon-checkbox input[type="checkbox"] {
|
||||
.f-addon-checkbox input[type="checkbox"] {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
transform: scale(1.05);
|
||||
@@ -204,10 +201,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fuz-accordion-header-left {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fuz-addon-checkbox {
|
||||
.f-accordion-header-left,
|
||||
.f-addon-checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -331,16 +331,3 @@ obszar ze scrollem wewnątrz modala
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.fuz-chsearch__pkg {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: var(--f-link, var(--f-link));
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fuz-chsearch__pkg:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user