Premium - poprawki stopka z rejestracją

2025-12-18 11:06:00 +01:00
parent a1740fcc31
commit 2920dc7c08
8 changed files with 336 additions and 8406 deletions
--- a/src/content/internet-telewizja/tv-addons.yaml
+++ b/src/content/internet-telewizja/tv-addons.yaml
@@ -4,6 +4,37 @@ opis: |
  Dobierz pakiet filmowy, sportowy lub rozrywkowy — dokładnie pod to, co oglądasz.
  
 cena_opis: zł/mies.
+
+grupy:
+  hbo_max:
+    tytul: HBO + Max
+    rejestracja:
+      opis: Jeśli nie masz konta HBO Max, a masz wykupiony pakiet HBO, należy się zarejestrować
+      label: Rejestracja HBO Max
+      href: "https://www.jambox.pl/max-rejestracja"
+      title: "Rejestracja w usłudze streamingowej"
+  canal_plus:
+    tytul: CANAL+
+    rejestracja:
+      opis: Aby skorzystać z Platformy należy się zarejestrować
+      label: Rejestracja CANAL+
+      href: "https://jambox.pl/cplus-rejestracja"
+      title: "Rejestracja w usłudze streamingowej"
+  disney:
+    tytul: Disney+
+    rejestracja: 
+      opis: Jeśli masz wykupiony pakiet Disney+ musisz się zarejestrować
+      label: Rejestracja Disney+
+      href: "https://www.jambox.pl/rejestracja-uslug"
+      title: "Rejestracja w usłudze streamingowej"
+  filmbox:
+    tytul: Filmbox+
+    rejestracja: 
+      opis: Jeśli nie masz konta FilmBox+ a masz wykupiony pakiet FilmBox+ należy się zarejestrować
+      label: Rejestracja Filmbox+
+      href: "https://www.jambox.pl/rejestracja-uslug"
+      title: "Rejestracja w usłudze streamingowej"
+
 dodatki:
  - id: canal_seriale_filmy
    nazwa: CANAL+ Seriale i Filmy
@@ -32,11 +63,8 @@ dodatki:
    opis: |
      Pakiet sportowy Canal+ oraz dostęp do platformy streamingowej Canal+
      
-      Platforma CANAL+ jest dostępna za pośrednictwem strony internetowej, podłączonych telewizorów, aplikacji na smartfony i tablety, konsol do gier i urządzeń takich jak Apple TV i Google Chromecast. Wszystkie obsługiwane urządzenia opisane są na stronie: canalplus.com
-
-      Aby skorzystać z Platformy należy się zarejestrować
-
-      [Rejestracja]("https://jambox.pl/cplus-rejestracja" "Rejestracja w usłudze streamingowej" btn)
+      Platforma CANAL+ jest dostępna za pośrednictwem strony internetowej, podłączonych telewizorów, aplikacji na smartfony i tablety, konsol do gier i urządzeń takich jak Apple TV i Google Chromecast.
+      Wszystkie obsługiwane urządzenia opisane są na stronie: canalplus.com
      
    cena:
      - pakiety:
@@ -83,11 +111,12 @@ dodatki:
    nazwa: FilmBox+
    tid: 19
    typ: checkbox
+    group: filmbox
+    group_mode: single
    opis: |
      5 kanałów FilmBox oraz dostęp do platformy streamingowej FilmBox+
      Serwis FilmBox+ dostępny jest na dekoderze TV Smart 4K BOX, stronie www.filmboxplus.com, aplikacji mobilnej na telefony i tablety (Android, iOS) oraz aplikacji na Smart TV.
-      Jeśli nie masz konta FilmBox+ a masz wykupiony pakiet FilmBox+ należy się zarejestrować
-      [Rejestracja]("https://www.jambox.pl/rejestracja-uslug" "Rejestracja w usłudze streamingowej" btn)
+     
    cena:
      - pakiety:
          - Podstawowy
@@ -157,9 +186,6 @@ dodatki:
      * Biblioteka TVN
      * Bez reklam
      * Możliwość 100 pobrań (obowiązują ograniczenia) 
-
-      Jeśli nie masz konta HBO Max, a masz wykupiony pakiet HBO, należy się zarejestrować   
-      [Rejestracja]("https://www.jambox.pl/max-rejestracja" "Rejestracja w usłudze streamingowej" btn)
    cena:
      - pakiety:
          - Smart
@@ -231,9 +257,6 @@ dodatki:
      * 4K UHD / HDR / Dolby Atmos
      * Bez reklam
      * Pobieranie offline
-
-      Jeśli masz wykupiony pakiet Disney+ musisz się zarejestrować 
-      [Rejestracja]("https://www.jambox.pl/rejestracja-uslug" "Rejestracja w usłudze streamingowej" btn)
    cena:
      - pakiety:
          - Smart
--- a/src/data/ServiceRange2.csv
+++ b/src/data/ServiceRange2.csv
--- a/src/data/ServiceRange_nowy.csv
+++ b/src/data/ServiceRange_nowy.csv
--- a/src/islands/jambox/JamboxChannelsSearch.jsx
+++ b/src/islands/jambox/JamboxChannelsSearch.jsx
@@ -296,7 +296,8 @@ export default function JamboxChannelsSearch() {
                        type="button"
                        class="f-chsearch-pkg"
                        onClick={() => window.open(
-                          `/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(p.tid)}`,
+                          // `/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(p.tid)}`,
+                           `/premium/${p.tid}`,
                          "_blank",
                          "noopener,noreferrer"
                        )}
--- a/src/pages/premium/[tid].astro
+++ b/src/pages/premium/[tid].astro
@@ -25,11 +25,25 @@ type TvAddon = {
  group_mode?: string;
 };

+// ✅ OPCJA A: metadane grupy + CTA
+type GroupCta = {
+  label?: string;
+  href?: string;
+  title?: string;
+  opis?: string;
+};
+
+type GroupMeta = {
+  tytul?: string;
+  rejestracja?: GroupCta;
+};
+
 type TvAddonsDoc = {
  tytul?: string;
  opis?: string;
  cena_opis?: string;
  dodatki?: TvAddon[];
+  grupy?: Record<string, GroupMeta>;
 };

 const doc = yaml.load(
@@ -40,6 +54,9 @@ const pageTitle = doc?.tytul ?? "Dodatkowe pakiety TV";
 const pageDesc = doc?.opis ?? "";
 const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];

+// ✅ mapa meta grup
+const groupMeta: Record<string, GroupMeta> = doc?.grupy ?? {};
+
 // --- dynamic param ---
 const tidParam = Astro.params.tid; // np. "49"
 const tid = Number(tidParam);
@@ -63,95 +80,83 @@ if (pickedGroup) {
  viewAddons = [picked];
 }

-// stabilne sortowanie (np. po tid, żeby HBO/Disney nie skakały)
+// (jak miałeś) sortowanie w grupie — możesz zostawić albo wywalić
 viewAddons = viewAddons
  .slice()
  .sort((a, b) => Number(a?.tid ?? 0) - Number(b?.tid ?? 0));

 // tytuł/description strony
-const singleTitle = pickedGroup ? (pickedGroup.toUpperCase() || pageTitle) : (String(picked?.nazwa ?? "").trim() || pageTitle);
+const singleTitle = pickedGroup
+  ? (groupMeta[pickedGroup]?.tytul ?? pickedGroup.toUpperCase() ?? pageTitle)
+  : (String(picked?.nazwa ?? "").trim() || pageTitle);
+
 const singleDesc = pageDesc;
+
+// ✅ CTA dla tej grupy (jeśli istnieje)
+const footerCta: GroupCta | undefined =
+  pickedGroup ? groupMeta[pickedGroup]?.rejestracja : undefined;
 ---

 <DefaultLayout title={singleTitle} description={singleDesc}>
-  <!-- (opcjonalnie) nagłówek strony -->
-  <!-- <section class="f-section">
-    <div class="f-section-grid-single">
-      <h1 class="f-section-title">{singleTitle}</h1>
-      {singleDesc && <Markdown text={singleDesc} />}
-    </div>
-  </section> -->
+  {/* Opcjonalnie: box jak na stronie ogólnej, tylko jeśli jesteśmy w grupie */}
+  <div class={pickedGroup ? "f-addon-group" : ""}>
+    {
+      viewAddons.map((addon: TvAddon, index: number) => {
+        const isAboveFold = index === 0;

-  {
-    viewAddons.map((addon: TvAddon, index: number) => {
-      const isAboveFold = index === 0;
+        const pkgName = String(addon?.nazwa ?? "").trim();
+        const hasYamlImage = !!String(addon?.image ?? "").trim();
+        const assumeHasMedia = pkgName ? true : hasYamlImage;

-      const pkgName = String(addon?.nazwa ?? "").trim();
-      const hasYamlImage = !!String(addon?.image ?? "").trim();
-      const assumeHasMedia = pkgName ? true : hasYamlImage;
+        const anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;

-      const anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;
+        return (
+          <section class="f-section" id={anchorId}>
+            <div
+              class={`f-section-grid f-addon-grid f-addon-section ${
+                assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
+              }`}
+              data-addon-section
+              data-has-media={assumeHasMedia ? "1" : "0"}
+            >
+              <div class="f-addon-text">
+                {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
+                {addon?.opis && <Markdown text={addon.opis} />}
+              </div>

-      return (
-        <section class="f-section" id={anchorId}>
-          <div
-            class={`f-section-grid f-addon-grid f-addon-section ${
-              assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
-            }`}
-            data-addon-section
-            data-has-media={assumeHasMedia ? "1" : "0"}
-          >
-            <div class="f-addon-text">
-              {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
-              {addon?.opis && <Markdown text={addon.opis} />}
+              <div class="f-addon-media">
+                {pkgName ? (
+                  <AddonChannelsGrid
+                    client:idle
+                    packageName={pkgName}
+                    fallbackImage={String(addon?.image ?? "")}
+                    aboveFold={isAboveFold}
+                    title={pkgName}
+                  />
+                ) : null}
+              </div>
            </div>
-
-            <div class="f-addon-media">
-              {pkgName ? (
-                <AddonChannelsGrid
-                  client:idle
-                  packageName={pkgName}
-                  fallbackImage={String(addon?.image ?? "")}
-                  aboveFold={isAboveFold}
-                  title={pkgName}
-                />
-              ) : null}
-            </div>
-          </div>
-        </section>
-      );
-    })
-  }
-
-  <script is:inline>
-    function __scrollToHashWithOffset(behavior = "auto") {
-      if (!location.hash) return;
-
-      const id = decodeURIComponent(location.hash.slice(1));
-      const el = document.getElementById(id);
-      if (!el) return;
-
-      const nav =
-        document.querySelector(".f-navbar") ||
-        document.querySelector("header") ||
-        document.querySelector("[data-navbar]");
-
-      const navH = nav ? nav.getBoundingClientRect().height : 84;
-      const extra = 8;
-
-      const top = el.getBoundingClientRect().top + window.pageYOffset - navH - extra;
-
-      window.scrollTo({ top: Math.max(0, top), behavior });
+          </section>
+        );
+      })
    }

-    function __runFix() {
-      __scrollToHashWithOffset("auto");
-      requestAnimationFrame(() => __scrollToHashWithOffset("auto"));
-      setTimeout(() => __scrollToHashWithOffset("auto"), 120);
-      setTimeout(() => __scrollToHashWithOffset("auto"), 600);
-    }
+    {/* ✅ STOPKA GRUPY: tylko na stronach grupowych */}
+    {pickedGroup && footerCta?.href && footerCta?.label ? (
+      <div class="f-addon-group-footer fuz-markdown max-w-none">
+        {footerCta.opis ? <p>{footerCta.opis}</p> : null}
+
+        <a
+          class="btn btn-primary"
+          href={footerCta.href}
+          title={footerCta.title ?? footerCta.label}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {footerCta.label}
+        </a>
+      </div>
+    ) : null}
+  </div>

-    window.addEventListener("load", __runFix);
-    window.addEventListener("hashchange", () => __scrollToHashWithOffset("smooth"));
-  </script>
 </DefaultLayout>
--- a/src/pages/premium/index.astro
+++ b/src/pages/premium/index.astro
@@ -6,7 +6,6 @@ import Markdown from "../../islands/Markdown.jsx";
 import AddonChannelsGrid from "../../islands/jambox/AddonChannelsModal.jsx";
 import "../../styles/jambox-tematyczne.css";

-/** Typy minimalne */
 type AddonPriceRow = {
  pakiety?: string[] | any;
  "12m"?: number | string;
@@ -21,6 +20,21 @@ type TvAddon = {
  opis?: string;
  image?: string;
  cena?: AddonPriceRow[];
+  group?: string;
+  group_mode?: string;
+};
+
+// ✅ OPCJA A: metadane grupy + CTA
+type GroupCta = {
+  label?: string;
+  href?: string;
+  title?: string;
+  opis?: string;
+};
+
+type GroupMeta = {
+  tytul?: string;
+  rejestracja?: GroupCta;
 };

 type TvAddonsDoc = {
@@ -28,6 +42,7 @@ type TvAddonsDoc = {
  opis?: string;
  cena_opis?: string;
  dodatki?: TvAddon[];
+  grupy?: Record<string, GroupMeta>; // ✅
 };

 const doc = yaml.load(
@@ -38,8 +53,35 @@ const pageTitle = doc?.tytul ?? "Dodatkowe pakiety TV";
 const pageDesc = doc?.opis ?? "";
 const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];

-// ustaw tu bazowy URL dla stron pakietów
-const detailsBase = "/pakiety-premium"; // => /pakiety-premium/{tid}
+const detailsBase = "/pakiety-premium";
+
+// ✅ mapa meta grup (np. hbo_max -> { rejestracja: {...} })
+const groupMeta: Record<string, GroupMeta> = doc?.grupy ?? {};
+
+type Group = {
+  key: string;
+  title?: string;
+  items: TvAddon[];
+  groupId?: string;
+};
+const groupsMap = new Map<string, Group>();
+
+for (const a of addons) {
+  const g = String(a?.group ?? "").trim();
+  const key = g ? `g:${g}` : `s:${a?.tid ?? a?.id ?? a?.nazwa ?? ""}`;
+
+  if (!groupsMap.has(key)) {
+    groupsMap.set(key, {
+      key,
+      groupId: g || undefined,
+      title: g || undefined,
+      items: [],
+    });
+  }
+  groupsMap.get(key)!.items.push(a);
+}
+
+const groups: Group[] = Array.from(groupsMap.values());
 ---

 <DefaultLayout title={pageTitle} description={pageDesc}>
@@ -51,43 +93,77 @@ const detailsBase = "/pakiety-premium"; // => /pakiety-premium/{tid}
  </section>

  {
-    addons.map((addon: TvAddon, index: number) => {
-      const isAboveFold = index === 0;
+    groups.map((group, groupIndex) => {
+      const isSingle = group.key.startsWith("s:");
+      const gId = String(group.groupId ?? "").trim(); // np. "hbo_max"
+      const meta = gId ? groupMeta[gId] : undefined;

-      const hasYamlImage = !!String(addon?.image ?? "").trim();
-      const pkgName = String(addon?.nazwa ?? "").trim();
-
-      const assumeHasMedia = pkgName ? true : hasYamlImage;
-
-      // link do strony pakietu (jeśli jest tid)
-      const href = addon?.tid != null ? `${detailsBase}/${addon.tid}` : null;
+      const footerCta = meta?.rejestracja;
+      const footerTitle =
+        meta?.tytul || (gId ? gId.replace(/_/g, " ") : undefined);

      return (
-        <section class="f-section">
-          <div
-            class={`f-section-grid f-addon-grid f-addon-section ${
-              assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
-            }`}
-          >
-            <div class="f-addon-text">
-              {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
+        <div class={`f-addon-group ${isSingle ? "f-addon-group--single" : ""}`}>

-              {addon?.opis && <Markdown text={addon.opis} />}
-            </div>
+          {group.items.map((addon: TvAddon, index: number) => {
+            const isAboveFold = groupIndex === 0 && index === 0;

-            <div class="f-addon-media">
-              {pkgName ? (
-                <AddonChannelsGrid
-                  client:idle
-                  packageName={pkgName}
-                  fallbackImage={String(addon?.image ?? "")}
-                  aboveFold={isAboveFold}
-                  title={pkgName}
-                />
-              ) : null}
+            const pkgName = String(addon?.nazwa ?? "").trim();
+            const hasYamlImage = !!String(addon?.image ?? "").trim();
+
+            // ✅ zachowanie jak wcześniej (1 kolumna + ukrycie media gdy brak)
+            const assumeHasMedia = pkgName ? true : hasYamlImage;
+
+            const href =
+              addon?.tid != null ? `${detailsBase}/${addon.tid}` : null;
+
+            return (
+              <section class="f-section f-addon-group-item">
+                <div
+                  class={`f-section-grid f-addon-grid f-addon-section ${
+                    assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
+                  }`}
+                  data-addon-section
+                  data-has-media={assumeHasMedia ? "1" : "0"}
+                >
+                  <div class="f-addon-text">
+                    {pkgName && <h3 class="f-section-title">{pkgName}</h3>}
+
+                    {addon?.opis && <Markdown text={addon.opis} />}
+                  </div>
+
+                  <div class="f-addon-media">
+                    {pkgName ? (
+                      <AddonChannelsGrid
+                        client:idle
+                        packageName={pkgName}
+                        fallbackImage={String(addon?.image ?? "")}
+                        aboveFold={isAboveFold}
+                        title={pkgName}
+                      />
+                    ) : null}
+                  </div>
+                </div>
+              </section>
+            );
+          })}
+
+          {/* ✅ STOPKA GRUPY: przycisk rejestracji dla całej grupy */}
+          {!isSingle && footerCta?.href && footerCta?.label ? (
+            <div class="f-addon-group-footer fuz-markdown max-w-none">
+               {footerCta.opis ? <p>{footerCta.opis}</p> : null}
+              <a
+                class="btn btn-primary"
+                href={footerCta.href}
+                title={footerCta.title ?? footerCta.label}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {footerCta.label}
+              </a>
            </div>
-          </div>
-        </section>
+          ) : null}
+        </div>
      );
    })
  }
--- a/src/styles/jambox-tematyczne.css
+++ b/src/styles/jambox-tematyczne.css
@@ -43,7 +43,7 @@
  padding: .75rem;
  border-radius: 1.25rem;
  border: 1px solid var(--f-border-color);
-  background: color-mix(in oklab, var(--f-background) 92%, black 8%);
+  /* background: color-mix(in oklab, var(--f-background) 92%, black 8%); */
 }
@media (min-width: 520px){
  .f-channels-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
@@ -96,3 +96,102 @@
  border-radius: 1.25rem;
  border: 1px solid var(--f-border-color);
 }
+
+
+/* ===========================
+   GROUP BOX (delikatny shadow)
+   =========================== */
+
+.f-addon-group{
+  @apply px-5;
+  max-width: var(--f-content-width, 80rem);
+margin: 1.75rem auto;
+
+
+  border-radius: 2rem;
+  border: 1px solid color-mix(in oklab, var(--f-border-color) 82%, transparent 18%);
+  background: color-mix(in oklab, var(--f-background) 96%, black 10%);
+
+  box-shadow:
+    0 18px 40px -28px rgba(0,0,0,.35),
+    0 6px 14px -10px rgba(0,0,0,.25);
+}
+
+.f-addon-group-head{
+  padding: .25rem .25rem 1rem .25rem;
+}
+
+.f-addon-group-title{
+  font-size: 1.35rem;
+  font-weight: 800;
+  letter-spacing: .02em;
+  text-transform: capitalize;
+  opacity: .9;
+}
+
+/* elementy w grupie: mniejsze odstępy niż “sekcje strony” */
+/* .f-addon-group-item{
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+} */
+
+/* separator pomiędzy pozycjami */
+.f-addon-group-item + .f-addon-group-item{
+  border-top: 1px dashed color-mix(in oklab, var(--f-border-color) 60%, transparent 40%);
+}
+
+/* rząd tytułu + link */
+.f-addon-title-row{
+  display:flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.f-addon-details{
+  font-weight: 700;
+  text-decoration: none;
+  opacity: .85;
+}
+.f-addon-details:hover{
+  opacity: 1;
+  text-decoration: underline;
+}
+
+/* jeśli to nie jest grupa, tylko single – nadal w boxie, ale dyskretniej */
+.f-addon-group--single{
+  box-shadow:
+    0 14px 34px -26px rgba(0,0,0,.30),
+    0 4px 10px -10px rgba(0,0,0,.18);
+}
+
+.f-addon-group-footer{
+  
+}
+
+.f-addon-group-footer{
+  @apply mt-4 pt-4;
+  @apply flex flex-col items-center justify-center gap-3;
+  @apply border-t border-[--f-premium-border];
+}
+
+.f-addon-group-footer .btn{
+  @apply mb-4;
+}
+/* .f-addon-group-cta{
+  display:inline-flex;
+  align-items:center;
+  gap:.5rem;
+  padding:.65rem 1rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in oklab, var(--f-border-color) 70%, transparent 30%);
+  background: color-mix(in oklab, var(--f-background) 92%, black 8%);
+  font-weight: 800;
+  text-decoration:none;
+  opacity:.95;
+}
+.f-addon-group-cta:hover{
+  opacity:1;
+  text-decoration: underline;
+} */
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -5,6 +5,8 @@
  --brand-saturation: 100%;
  --brand-lightness: 50%;
  --brand-dark: hsl(200 calc(100% / 0.2) calc(50% / 1.5));
+
+
 }

 :root {
@@ -57,9 +59,12 @@
  --f-addons-text: #fffae6;
  --f-addons-background: #1a6655;

+
+  /* Obramowanie footer w kanałów premium  */
+  --f-premium-border: #adb5bd;
 }

-:root.dark3 {
+:root.dark2 {
  --header: #f4442e;
  --text: #adb5bd;
  --text-link: #f48c06;
@@ -123,6 +128,7 @@
  --f-addons-text: #fffae6;
  --f-addons-background: #1a6655;

+  --f-premium-border: #adb5bd;
 }

 :root.dark {
@@ -182,4 +188,5 @@
  --f-addons-text: #fffae6;
  --f-addons-background: #1a6655;

+    --f-premium-border: #3d3f40;
 }