379 lines
13 KiB
JavaScript
379 lines
13 KiB
JavaScript
import { useEffect, useState } from "preact/hooks";
|
|
import "../../styles/modal.css";
|
|
import "../../styles/offers/offers-table.css";
|
|
|
|
export default function InternetAddonsModal({ isOpen, onClose, plan }) {
|
|
const [phonePlans, setPhonePlans] = useState([]);
|
|
const [addons, setAddons] = useState([]);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
const [selectedPhoneId, setSelectedPhoneId] = useState(null);
|
|
const [selectedAddons, setSelectedAddons] = useState([]);
|
|
|
|
// który pakiet telefoniczny jest rozwinięty
|
|
const [openPhoneId, setOpenPhoneId] = useState(null);
|
|
|
|
// czy akordeon internetu (fiber) jest rozwinięty
|
|
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 handlePhoneSelect = (id) => {
|
|
if (id === null) {
|
|
setSelectedPhoneId(null);
|
|
setOpenPhoneId(null);
|
|
return;
|
|
}
|
|
|
|
setSelectedPhoneId(id);
|
|
setOpenPhoneId((prev) => (prev === id ? null : id));
|
|
};
|
|
|
|
// reset wyborów po otwarciu nowego planu
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
setSelectedPhoneId(null);
|
|
setSelectedAddons([]);
|
|
setOpenPhoneId(null);
|
|
setBaseOpen(true);
|
|
}, [isOpen, plan]);
|
|
|
|
// ładowanie danych
|
|
useEffect(() => {
|
|
if (!isOpen) 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
|
|
const addonsRes = await fetch("/api/internet/addons");
|
|
if (!addonsRes.ok) throw new Error(`HTTP ${addonsRes.status} (addons)`);
|
|
|
|
const addonsJson = await addonsRes.json();
|
|
const addonsData = Array.isArray(addonsJson.data) ? addonsJson.data : [];
|
|
|
|
if (!cancelled) {
|
|
setPhonePlans(phoneData);
|
|
setAddons(addonsData);
|
|
}
|
|
} catch (err) {
|
|
console.error("❌ Błąd ładowania danych do InternetAddonsModal:", err);
|
|
if (!cancelled) {
|
|
setError("Nie udało się załadować danych dodatkowych usług.");
|
|
}
|
|
} finally {
|
|
if (!cancelled) setLoading(false);
|
|
}
|
|
}
|
|
|
|
loadData();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [isOpen]);
|
|
|
|
if (!isOpen || !plan) return null;
|
|
|
|
const basePrice = plan.price_monthly || 0;
|
|
|
|
const phonePrice = (() => {
|
|
if (!selectedPhoneId) return 0;
|
|
const p = phonePlans.find((p) => p.id === selectedPhoneId);
|
|
return p?.price_monthly || 0;
|
|
})();
|
|
|
|
const addonsPrice = selectedAddons.reduce((sum, sel) => {
|
|
const addon = addons.find((a) => a.id === sel.addonId);
|
|
if (!addon) return sum;
|
|
const opt = addon.options.find((o) => o.id === sel.optionId);
|
|
if (!opt) return sum;
|
|
return sum + (opt.price || 0);
|
|
}, 0);
|
|
|
|
const totalMonthly = basePrice + phonePrice + addonsPrice;
|
|
|
|
const handleAddonToggle = (addonId, optionId) => {
|
|
setSelectedAddons((prev) => {
|
|
const exists = prev.some(
|
|
(x) => x.addonId === addonId && x.optionId === optionId
|
|
);
|
|
if (exists) {
|
|
return prev.filter(
|
|
(x) => !(x.addonId === addonId && x.optionId === optionId)
|
|
);
|
|
} else {
|
|
return [...prev, { addonId, optionId }];
|
|
}
|
|
});
|
|
};
|
|
|
|
const togglePhoneOpen = (id) => {
|
|
setOpenPhoneId((prev) => (prev === id ? null : id));
|
|
};
|
|
|
|
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>
|
|
|
|
{/* INTERNET (fiber) jako akordeon */}
|
|
<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">{plan.name}</span>
|
|
<span class="fuz-modal-phone-price">
|
|
{basePrice.toFixed(2)} zł/mies.
|
|
</span>
|
|
</button>
|
|
|
|
{baseOpen && plan.features && plan.features.length > 0 && (
|
|
<div class="fuz-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>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{loading && <p>Ładowanie danych...</p>}
|
|
{error && <p class="text-red-600">{error}</p>}
|
|
|
|
{!loading && !error && (
|
|
<>
|
|
{/* Sekcja: wybór telefonu (akordeon + opcja bez telefonu) */}
|
|
<div class="fuz-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">
|
|
<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>
|
|
|
|
|
|
{/* LISTA PAKIETÓW TELEFONICZNYCH */}
|
|
{phonePlans.map((p) => {
|
|
const isSelected = selectedPhoneId === p.id;
|
|
const isOpen = openPhoneId === p.id;
|
|
|
|
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">
|
|
{p.price_monthly.toFixed(2)} zł/mies.
|
|
</span>
|
|
</button>
|
|
|
|
{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>
|
|
|
|
{/* Sekcja: dodatki internetowe */}
|
|
<div class="fuz-modal-section">
|
|
<h3>Dodatkowe usługi</h3>
|
|
{addons.length === 0 ? (
|
|
<p>Brak dodatkowych usług.</p>
|
|
) : (
|
|
<div class="fuz-addon-list">
|
|
{addons.map((addon) =>
|
|
addon.options.map((opt) => {
|
|
const checked = selectedAddons.some(
|
|
(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">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={() =>
|
|
handleAddonToggle(addon.id, opt.id)
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div class="fuz-addon-main">
|
|
<div class="fuz-addon-name">{addon.name}</div>
|
|
{addon.description && (
|
|
<div class="fuz-addon-desc">
|
|
{addon.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div class="fuz-addon-price">
|
|
{opt.price.toFixed(2)} zł/mies.
|
|
</div>
|
|
</label>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
)}
|
|
</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>Internet</span>
|
|
<span>{basePrice.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>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|