diff --git a/src/content/internet-swiatlowodowy/offers.yaml b/src/content/internet-swiatlowodowy/offers.yaml new file mode 100644 index 0000000..9b4b549 --- /dev/null +++ b/src/content/internet-swiatlowodowy/offers.yaml @@ -0,0 +1,124 @@ +przelaczniki: + - id: "budynek" + etykieta: "Rodzaj budynku" + domyslny: "jednorodzinny" + opcje: + - id: "jednorodzinny" + nazwa: "Jednorodzinny" + - id: "wielorodzinny" + nazwa: "Wielorodzinny" + + - id: "umowa" + etykieta: "Okres umowy" + domyslny: "24m" + opcje: + - id: "24m" + nazwa: "24 miesiące" + - id: "bezterminowa" + nazwa: "Bezterminowa" + +# WIERSZE TABELI +funkcje: + - id: "pobieranie" + etykieta: "Prędkość pobierania" + - id: "wysylanie" + etykieta: "Prędkość wysyłania" + - id: "router" + etykieta: "Router Wi-Fi" + # - id: "tv" + # etykieta: "Pakiet TV" + - id: "umowa_info" + etykieta: "Umowa" + - id: "instalacja" + etykieta: "Aktywacja" + - id: "adres_ip" + etykieta: "Adres IP" + +# PLANY – jedna lista, ceny zależą od kombinacji przełączników +plany: + - id: "fiber100" + nazwa: "FIBER 100" + predkosc: "100 Mb/s" + popularny: false + ceny: + jednorodzinny: + # 12m: "59 zł/mies." + 24m: "64 zł/mies." + bezterminowa: "84 zł/mies." + wielorodzinny: + # 12m: "55 zł/mies." + 24m: "54 zł/mies." + bezterminowa: "74 zł/mies." + funkcje: + pobieranie: "do 100 Mb/s" + wysylanie: "do 50 Mb/s" + router: true + adres_ip: "Dynamiczny" + tv: false + umowa_info: "12 / 24 / bez umowy" + instalacja: "149 zł" + + - id: "fiber300" + nazwa: "FIBER 300" + predkosc: "300 Mb/s" + popularny: true + ceny: + jednorodzinny: + # 12m: "79 zł/mies." + 24m: "75 zł/mies." + bezterminowa: "95 zł/mies." + wielorodzinny: + # 12m: "69 zł/mies." + 24m: "65 zł/mies." + bezterminowa: "85 zł/mies." + funkcje: + pobieranie: "do 300 Mb/s" + wysylanie: "do 150 Mb/s" + router: true + umowa_info: "12 / 24 / bez umowy" + instalacja: "149,00 zł" + adres_ip: "Dynamiczny" + + - id: "fiber600" + nazwa: "FIBER 600" + predkosc: "600 Mb/s" + popularny: false + ceny: + jednorodzinny: + 24m: "85 zł/mies." + bezterminowa: "105 zł/mies." + wielorodzinny: + 24m: "75 zł/mies." + bezterminowa: "95 zł/mies." + funkcje: + pobieranie: "do 600 Mb/s" + wysylanie: "do 300 Mb/s" + router: true + umowa_info: "24 / bez umowy" + instalacja: "149 zł" + adres_ip: "Dynamiczny" + +uslugi_dodatkowe: + - id: "public_ip" + nazwa: "Publiczny adres IP" + cena: "18,45 zł miesięcznie." + opis: | + Otrzymujesz unikalny, publiczny adres przypisany na stałe do Twojego łącza, który pozwala na: + - Monitoring domu + - Dostęp zdalny do urządzeń + - Hostowanie serwera lub aplikacji + + Jest to przydatne dla firm, graczy i zaawansowanych użytkowników, którzy potrzebują stabilnej identyfikacji swojej sieci w internecie. + + - id: telefon + nazwa: Telefon + cena: od wybranej opcji + opis: | + Profesjonalna telefonia VoIP jako dodatek do internetu + - Niższe koszty połączeń - szczególnie na komórki i za granicę + - Zachowaj dotychczasowy numer lub otrzymaj nowy lokalny + - Bez dodatkowych kabli - działa przez internet + - Jeden numer dostępny na wielu urządzeniach jednocześnie + - Krystalicznie czysty dźwięk HD + + [Poznaj szczegóły oferty telefonii →](/telefon) \ No newline at end of file diff --git a/src/content/internet-swiatlowodowy/page.yaml b/src/content/internet-swiatlowodowy/page.yaml index 4d5f4c1..95f700c 100644 --- a/src/content/internet-swiatlowodowy/page.yaml +++ b/src/content/internet-swiatlowodowy/page.yaml @@ -18,4 +18,11 @@ paragraphs: Sprawdź naszą pełną ofertę i wybierz rozwiązanie dopasowane do Twoich potrzeb. + - title: + content: + Router WiFi AC1200 w cenie instalacji, zapewnia jeszcze większą moc, szybkość, zasięg i bezpieczeństwo dla Twoich stale rosnących potrzeb sieciowych. + + Dzięki funkcji sieci gościnnej Twoi goście mają dostęp do internetu, a Twoje urządzenia i dane pozostają bezpieczne. + + Technologia dwuzakresowa eliminuje zakłócenia i gwarantuje płynne działanie sieci dla całej rodziny. # Kolejne sekcje mozna dodawać poja wiać się bedą pod tabela produktów \ No newline at end of file diff --git a/src/helpers/getActiveLabel.js b/src/helpers/getActiveLabel.js new file mode 100644 index 0000000..6c55e86 --- /dev/null +++ b/src/helpers/getActiveLabel.js @@ -0,0 +1,6 @@ +export function getActiveLabel(switches, selected, switchId) { + const sw = switches.find((s) => s.id === switchId); + if (!sw) return ""; + const opt = sw.opcje.find((o) => o.id === selected[switchId]); + return opt?.nazwa ?? ""; +} diff --git a/src/helpers/getPrice.js b/src/helpers/getPrice.js new file mode 100644 index 0000000..15621df --- /dev/null +++ b/src/helpers/getPrice.js @@ -0,0 +1,16 @@ +export function getPrice(plan, switches, selected) { + try { + if (plan.cena) return plan.cena; + if (!switches.length) return plan.ceny || "-"; + + let v = plan.ceny; + for (const sw of switches) { + const key = selected[sw.id]; + if (!v || !(key in v)) return "-"; + v = v[key]; + } + return v; + } catch { + return "-"; + } +} diff --git a/src/islands/Offers/OffersExtraServices.jsx b/src/islands/Offers/OffersExtraServices.jsx new file mode 100644 index 0000000..36d63ce --- /dev/null +++ b/src/islands/Offers/OffersExtraServices.jsx @@ -0,0 +1,54 @@ +import FuzMarkdown from "../Markdown.jsx"; +import "../../styles/offers/offers-extra.css"; + + +export default function OffersExtraServices({ + extraServices, + openId, + toggle, +}) { + if (!extraServices.length) return null; + + return ( +
+

Usługi dodatkowe

+ +
+ + + + + + + + + + + {extraServices.map((srv, i) => ( + <> + + + + + + + {openId === srv.id && ( + + + + )} + + ))} + +
UsługaCenaSzczegóły
{srv.nazwa}{srv.cena} + +
+ +
+
+
+ ); +} + diff --git a/src/islands/Offers/OffersSwitches.jsx b/src/islands/Offers/OffersSwitches.jsx new file mode 100644 index 0000000..48f15c5 --- /dev/null +++ b/src/islands/Offers/OffersSwitches.jsx @@ -0,0 +1,27 @@ +import "../../styles/offers/offers-switches.css"; + +export default function OffersSwitches({ switches, selected, onSwitch }) { + if (!switches.length) return null; + + return ( +
+ {switches.map((sw) => ( +
+
+ {sw.opcje.map((op) => ( + + ))} +
+
+ ))} +
+ ); +} diff --git a/src/islands/Offers/OffersTable.jsx b/src/islands/Offers/OffersTable.jsx new file mode 100644 index 0000000..111efae --- /dev/null +++ b/src/islands/Offers/OffersTable.jsx @@ -0,0 +1,88 @@ +import { getPrice } from "../../helpers/getPrice"; +import { getActiveLabel } from "../../helpers/getActiveLabel"; +import "../../styles/offers/offers-table.css"; + + +export default function OffersTable({ switches, selected, plans, features }) { + return ( +
+ + + + + + {plans.map((plan) => ( + + ))} + + + + + {features.map((f, rowIndex) => ( + + + + {plans.map((plan) => { + const isPopular = plan.popularny; + const isLastRow = rowIndex === features.length - 1; + + if (f.id === "umowa_info") { + return ( + + ); + } + + const val = plan.funkcje?.[f.id]; + + const baseClass = + val === true + ? "fuz-feature-yes" + : val === false || val == null + ? "fuz-feature-no" + : "fuz-feature-cell"; + + return ( + + ); + })} + + ))} + +
Parametr +
{plan.nazwa}
+
+ {getPrice(plan, switches, selected)} +
+
{plan.predkosc}
+
{f.etykieta} + {getActiveLabel(switches, selected, "umowa")} + + {val === true + ? "✓" + : val === false || val == null + ? "✕" + : val} +
+
+ ); +} diff --git a/src/islands/OffersIsland.jsx b/src/islands/OffersIsland.jsx new file mode 100644 index 0000000..23c2d06 --- /dev/null +++ b/src/islands/OffersIsland.jsx @@ -0,0 +1,65 @@ +import { useState } from "preact/hooks"; +import FuzMarkdown from "./Markdown.jsx"; + +import OffersSwitches from "./Offers/OffersSwitches.jsx"; +import OffersTable from "./Offers/OffersTable.jsx"; +import OffersExtraServices from "./Offers/OffersExtraServices.jsx"; +import "../styles/offers/offers-main.css"; + +export default function InternetOffersIsland({ data }) { + const switches = data.przelaczniki ?? []; + const features = data.funkcje ?? []; + const plans = data.plany ?? []; + const extraServices = data.uslugi_dodatkowe ?? []; + + const initialSelected = {}; + switches.forEach((sw) => { + initialSelected[sw.id] = sw.domyslny; + }); + + const [selected, setSelected] = useState(initialSelected); + const [openServiceId, setOpenServiceId] = useState(null); + + const toggleService = (id) => + setOpenServiceId((prev) => (prev === id ? null : id)); + + const handleSwitchClick = (switchId, optionId) => + setSelected((prev) => ({ ...prev, [switchId]: optionId })); + + return ( +
+
+ {data.opis_gorny && ( +
+ +
+ )} + + + + + + + + {data.opis_dolny && ( +
+ +
+ )} +
+
+ ); +} diff --git a/src/pages/internet-swiatlowodowy/index.astro b/src/pages/internet-swiatlowodowy/index.astro index 2050a27..c91d7e0 100644 --- a/src/pages/internet-swiatlowodowy/index.astro +++ b/src/pages/internet-swiatlowodowy/index.astro @@ -3,6 +3,7 @@ import DefaultLayout from "../../layouts/DefaultLayout.astro"; import Hero from "../../components/hero/Hero.astro"; import SectionRenderer from "../../components/sections/SectionRenderer.astro"; import Markdown from "../../islands/Markdown.jsx"; +import OffersIsland from "../../islands/OffersIsland.jsx"; import yaml from "js-yaml"; import fs from "fs"; @@ -17,7 +18,16 @@ const page = yaml.load( fs.readFileSync("./src/content/internet-swiatlowodowy/page.yaml", "utf8"), ); +type Paragraph = { + title?: string; + content: string; +}; + +const data = yaml.load( + fs.readFileSync("./src/content/internet-swiatlowodowy/offers.yaml", "utf8"), +); const first = page.paragraphs[0]; +const rest = page.paragraphs.slice(1); --- @@ -26,28 +36,21 @@ const first = page.paragraphs[0];
{page.title.map((line: any) =>

{line}

)} - {first.title &&

{first.title}

}
- { - page.paragraphs.slice(1).map((p: { title: string; content: string }) => ( -
-
- {p.title &&

{p.title}

} + - {p.content - .trim() - .split(/\n\n+/) - .map((par: string) => ( - - ))} -
-
- )) - } + {rest.map((p: Paragraph) => ( +
+
+ {p.title &&

{p.title}

} + +
+
+))}