Kolejne poprawki
This commit is contained in:
dm
@@ -1,83 +1,75 @@
|
||||
import { getPrice } from "../../helpers/getPrice";
|
||||
import { getActiveLabel } from "../../helpers/getActiveLabel";
|
||||
import { getInstallationPrice } from "../../helpers/getInstallationPrice";
|
||||
import "../../styles/offers/offers-table.css";
|
||||
|
||||
export default function OffersCards({ data, switches, selected }) {
|
||||
const plans = data.plany;
|
||||
|
||||
export default function OffersTable({ switches, selected, plans, features, plan_title }) {
|
||||
return (
|
||||
<div class="f-table-wrapper">
|
||||
<table class="f-table">
|
||||
<thead class="f-table-head">
|
||||
<tr>
|
||||
<th class="f-table-heading">{plan_title}</th>
|
||||
{plans.map((plan) => (
|
||||
<th
|
||||
class={`f-plan-heading ${plan.popularny ? "is-popular f-popular-top" : ""
|
||||
}`}
|
||||
>
|
||||
{/* {plan.popularny && (<div class="f-popular-badge">Popularny</div>)} */}
|
||||
<div class="f-plan-title">{plan.nazwa}</div>
|
||||
<div class="f-plan-price">
|
||||
{getPrice(plan, switches, selected)}
|
||||
</div>
|
||||
{/* <div class="f-plan-speed">{plan.predkosc}</div> */}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<section class="f-offers">
|
||||
{data.plany_title && (
|
||||
<h2 class="f-offers-title">{data.plany_title}</h2>
|
||||
)}
|
||||
|
||||
<tbody>
|
||||
{features.map((f, rowIndex) => (
|
||||
<tr class={rowIndex % 2 === 0 ? "f-row-even" : "f-row-odd"}>
|
||||
<td class="f-feature-name">{f.etykieta}</td>
|
||||
<div class={`f-offers-grid f-count-${plans.length}`}>
|
||||
{plans.map((plan) => (
|
||||
<OfferCard
|
||||
key={plan.id}
|
||||
plan={plan}
|
||||
features={data.funkcje}
|
||||
switches={switches}
|
||||
selected={selected}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
{plans.map((plan) => {
|
||||
const isPopular = plan.popularny;
|
||||
const isLastRow = rowIndex === features.length - 1;
|
||||
function OfferCard({ plan, features, switches, selected }) {
|
||||
const basePrice = getPrice(plan, switches, selected);
|
||||
|
||||
if (f.id === "umowa_info") {
|
||||
return (
|
||||
<td
|
||||
class={`f-feature-cell ${isPopular
|
||||
? `is-popular ${isLastRow ? "f-popular-bottom" : ""
|
||||
}`
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{getActiveLabel(switches, selected, "umowa")}
|
||||
</td>
|
||||
);
|
||||
}
|
||||
// NOWE: cena instalacji dynamiczna
|
||||
const installPrice = getInstallationPrice(plan, switches, selected);
|
||||
|
||||
const val = plan.funkcje?.[f.id];
|
||||
return (
|
||||
<div class={`f-card ${plan.popularny ? "f-card-popular" : ""}`}>
|
||||
{plan.popularny && (
|
||||
<div class="f-card-badge">Najczęściej wybierany</div>
|
||||
)}
|
||||
|
||||
const baseClass =
|
||||
val === true
|
||||
? "f-feature-yes"
|
||||
: val === false || val == null
|
||||
? "f-feature-no"
|
||||
: "f-feature-cell";
|
||||
<div class="f-card-header">
|
||||
<div class="f-card-name">{plan.nazwa}</div>
|
||||
<div class="f-card-price">{basePrice} zł/mies.</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<td
|
||||
class={`${baseClass} ${isPopular
|
||||
? `is-popular ${isLastRow ? "f-popular-bottom" : ""
|
||||
}`
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{val === true
|
||||
? "✓"
|
||||
: val === false || val == null
|
||||
? "✕"
|
||||
: val}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="f-card-features">
|
||||
{features.map((f) => {
|
||||
let val =
|
||||
f.id === "umowa_info"
|
||||
? getActiveLabel(switches, selected, "umowa")
|
||||
: plan.funkcje?.[f.id];
|
||||
|
||||
// PODMIANA pola instalacji — nie ze statycznego YAML tylko dynamicznie
|
||||
if (f.id === "instalacja") {
|
||||
val = installPrice + " zł";
|
||||
}
|
||||
|
||||
return (
|
||||
<li class="f-card-row">
|
||||
<span class="f-card-label">{f.etykieta}</span>
|
||||
<span class="f-card-value">
|
||||
{val === true
|
||||
? "✓"
|
||||
: val === false || val == null
|
||||
? "✕"
|
||||
: val}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,69 +1,59 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import FuzMarkdown from "./Markdown.jsx";
|
||||
|
||||
import OffersSwitches from "./Offers/OffersSwitches.jsx";
|
||||
import OffersTable from "./Offers/OffersTable.jsx";
|
||||
import OffersCards from "./Offers/OffersTable.jsx"; // <-- WAŻNE!!
|
||||
import OffersExtraServices from "./Offers/OffersExtraServices.jsx";
|
||||
// import "../styles/offers/offers-main.css";
|
||||
|
||||
export default function InternetOffersIsland({ data }) {
|
||||
export default function OffersIsland({ data }) {
|
||||
const switches = data.przelaczniki ?? [];
|
||||
const features = data.funkcje ?? [];
|
||||
const plans = data.plany ?? [];
|
||||
const plan_title = data.plany_title ?? "";
|
||||
const extraServices = data.uslugi_dodatkowe ?? [];
|
||||
const services = data.uslugi ?? [];
|
||||
|
||||
const initialSelected = {};
|
||||
switches.forEach((sw) => {
|
||||
initialSelected[sw.id] = sw.domyslny;
|
||||
// selected state
|
||||
const [selected, setSelected] = useState(() => {
|
||||
const init = {};
|
||||
switches.forEach((sw) => (init[sw.id] = sw.domyslny));
|
||||
return init;
|
||||
});
|
||||
|
||||
const [selected, setSelected] = useState(initialSelected);
|
||||
const [openServiceId, setOpenServiceId] = useState(null);
|
||||
// services accordion (jeśli potrzebne)
|
||||
const [openId, setOpenId] = useState(null);
|
||||
|
||||
const toggleService = (id) =>
|
||||
setOpenServiceId((prev) => (prev === id ? null : id));
|
||||
const handleSwitch = (switchId, value) => {
|
||||
setSelected((prev) => ({
|
||||
...prev,
|
||||
[switchId]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSwitchClick = (switchId, optionId) =>
|
||||
setSelected((prev) => ({ ...prev, [switchId]: optionId }));
|
||||
const toggleExtra = (id) => {
|
||||
setOpenId((prev) => (prev === id ? null : id));
|
||||
};
|
||||
|
||||
return (
|
||||
<section class="f-offers-section">
|
||||
<div class="f-offers-container">
|
||||
{data.opis_gorny && (
|
||||
<div class="f-offers-description">
|
||||
<FuzMarkdown text={data.opis_gorny} />
|
||||
</div>
|
||||
)}
|
||||
<div class="f-offers-wrapper">
|
||||
|
||||
<OffersSwitches
|
||||
switches={switches}
|
||||
selected={selected}
|
||||
onSwitch={handleSwitchClick}
|
||||
/>
|
||||
{/* SWITCHERY */}
|
||||
<OffersSwitches
|
||||
switches={switches}
|
||||
selected={selected}
|
||||
onSwitch={handleSwitch}
|
||||
/>
|
||||
|
||||
<OffersTable
|
||||
switches={switches}
|
||||
selected={selected}
|
||||
plans={plans}
|
||||
features={features}
|
||||
plan_title={plan_title}
|
||||
/>
|
||||
{/* KARTY OFERT */}
|
||||
<OffersCards
|
||||
data={data}
|
||||
switches={switches}
|
||||
selected={selected}
|
||||
/>
|
||||
|
||||
{/* USŁUGI DODATKOWE */}
|
||||
{data.uslugi_dodatkowe && (
|
||||
<OffersExtraServices
|
||||
extraServices={extraServices}
|
||||
openId={openServiceId}
|
||||
toggle={toggleService}
|
||||
services={services}
|
||||
extraServices={data.uslugi_dodatkowe}
|
||||
services={data.uslugi}
|
||||
openId={openId}
|
||||
toggle={toggleExtra}
|
||||
/>
|
||||
|
||||
{data.opis_dolny && (
|
||||
<div class="fuz-offers-description">
|
||||
<FuzMarkdown text={data.opis_dolny} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user