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>
|
||||
|
||||
Reference in New Issue
Block a user