Publiczny kalendarz rezerwacji

Instrukcja (WordPress / strona firmy)

Publiczny kalendarz można osadzić na stronie AcePark przez iframe, np.:

<iframe
  src="https://klient.acepark.pl/book/ace-park?city=Opole&street=Spokojna"
  style="width:100%;height:760px;border:0;background:transparent"
  title="Rezerwacja kortu"
  allowtransparency="true"
></iframe>

Parametry city i street przypinają lokalizację — na stronie lokalizacji nie trzeba już wybierać obiektu.

Tło strony bookingu jest przezroczyste, żeby w iframe przeświecało tło WordPressa. Same karty (filtry, siatka, dialogi) zostają nieprzezroczyste.

W iframe ukrywany jest nagłówek strony („Zarezerwuj kort” / „Wybierz termin…”) — WordPress ma już swój tytuł sekcji. Przy bezpośrednim wejściu na /book/... nagłówek zostaje.

Filtry, wybór daty, wybór kortu i formularz rezerwacji otwierają się jako wyśrodkowany dialog (nie jako dolny drawer). Dzięki temu overlay wygląda poprawnie także w iframe na WordPressie.

Dokumentacja techniczna

• Trasa: app/(public)/book/[tenant]/
• Overlaye (Dialog shadcn, bez Vaul Drawer):
  • PublicFiltersBar — lokalizacja / czas trwania
  • PublicDateCalendar — wybór dnia
  • PublicTimeDialog — wybór kortu dla godziny
  • ReservationDialog — OTP + potwierdzenie + płatność
• Tło html/body i wrappera kalendarza jest przezroczyste (TransparentPageBackground + bg-transparent), żeby embed na WordPressie dziedziczył tło strony hosta.
• Wykrywanie iframe: useIsInIframe (window.self !== window.top). W embedzie ukrywany jest <header> z tytułem/podtytułem.
• W iframe dialogi nie używają backdrop-blur ani przyciemnienia tła (rozmazuje/przyciemnia stronę hosta pod ramką) — overlay jest przezroczysty (html[data-in-iframe]).
• Osadzanie cross-origin wymaga CSP frame-ancestors przez env PUBLIC_BOOKING_FRAME_ANCESTORS (middleware ustawia nagłówek tylko dla /book/*). Przykład:

PUBLIC_BOOKING_FRAME_ANCESTORS='self' https://acepark.pl https://www.acepark.pl

Bez domeny hosta w allowliście przeglądarka zablokuje iframe (frame-ancestors).