Mega Bilet 2.0: Szczegółowy plan wdrożenia 1. Struktura projektu Copymega-bilet/ ├── assets/ │ ├── fonts/ │ ├── images/ │ └── styles/ ├── components/ │ ├── booking/ │ ├── common/ │ ├── contact/ │ ├── payment/ │ └── ui/ ├── composables/ ├── layouts/ ├── pages/ ├── public/ ├── server/ │ └── api/ ├── stores/ ├── types/ └── utils/ 2. Szczegółowa lista plików i ich zawartość 2.1. Konfiguracja główna nuxt.config.ts Konfiguracja Nuxt 3 Rejestracja modułów (Pinia, i18n, Nuxt UI) Konfiguracja transpilacji, środowisk i zmiennych app.vue Główny komponent aplikacji Renderowanie WidgetContainera tailwind.config.js Konfiguracja Tailwind CSS Definicja kolorów, przestrzeni, animacji Dostosowanie dla Nuxt UI tsconfig.json Konfiguracja TypeScript Ścieżki aliasów Opcje kompilacji 2.2. Typy i interfejsy TypeScript types/activity.ts Interfejsy dla danych aktywności Typy dla danych Bokun (wycieczki, bilety) types/booking.ts Interfejsy dla procesu rezerwacji Typy dla uczestników, harmonogramów types/contact.ts Interfejsy dla danych kontaktowych Typy dla niestandardowych pól formularzy types/payment.ts Interfejsy dla płatności Typy dla metod płatności, transakcji types/api.ts Interfejsy dla odpowiedzi API Typy dla żądań API 2.3. Sklepy danych (Pinia) stores/activityStore.ts Stan aktywności (wycieczki) Dane harmonogramu, dostępności Metody pobierania danych stores/bookingStore.ts Stan rezerwacji Wybrani uczestnicy, daty, godziny Metody zarządzania rezerwacją stores/contactStore.ts Stan danych kontaktowych Pola niestandardowe Metody walidacji formularzy stores/paymentStore.ts Stan płatności Metody płatności, kody rabatowe Metody zarządzania płatnością stores/uiStore.ts Stan UI widgetu Aktualny krok, ładowanie, błędy Metody zarządzania UI 2.4. Composables composables/useActivityManager.ts Logika zarządzania aktywnościami Pobieranie danych aktywności Przełączanie między aktywnościami composables/useCalendar.ts Logika kalendarza i dostępności Formatowanie dat Sprawdzanie dostępności composables/useParticipants.ts Logika zarządzania uczestnikami Sprawdzanie limitów Obliczanie cen composables/useReservation.ts Logika procesu rezerwacji Tworzenie wstępnej rezerwacji Anulowanie rezerwacji composables/usePayment.ts Logika płatności Obsługa różnych metod Sprawdzanie statusu composables/usePromoCode.ts Logika kodów rabatowych Weryfikacja i zastosowanie kodów Obliczanie zniżek composables/useMultiStepForm.ts Logika formularza wieloetapowego Zarządzanie krokami Walidacja kroków composables/useGtmTracker.ts Logika śledzenia GTM Śledzenie wydarzeń e-commerce Śledzenie konwersji 2.5. Komponenty UI components/ui/Button.vue Komponent przycisku Warianty, stany, rozmiary components/ui/Input.vue Komponent pola wprowadzania Obsługa walidacji, błędów components/ui/Select.vue Komponent rozwijanych list Obsługa opcji, grup components/ui/Checkbox.vue Komponent pola wyboru Stany, warianty components/ui/Radio.vue Komponent przycisków radiowych Stany, warianty components/ui/Alert.vue Komponent alertów Typy, warianty components/ui/LoadingSpinner.vue Komponent indykatora ładowania Warianty, rozmiary 2.6. Komponenty widgetu components/common/WidgetContainer.vue Główny kontener widgetu Zarządzanie stanem otwarcia/zamknięcia Obsługa overlay i dialogów components/common/MultiStepForm.vue Formularz wieloetapowy Zarządzanie krokami Nawigacja między krokami components/common/StepperNav.vue Nawigacja między krokami Wizualizacja postępu Obsługa kliknięć components/common/ConfirmationDialog.vue Dialog potwierdzenia Obsługa akcji potwierdzenia/anulowania components/common/ErrorBoundary.vue Komponent do obsługi błędów Wyświetlanie komunikatów błędów 2.7. Komponenty rezerwacji components/booking/TripTypeSelector.vue Wybór typu wycieczki Wyświetlanie informacji o wycieczce Przełączanie między wycieczkami w grupie components/booking/ActivitySwitcher.vue Przełączanie między aktywnościami Wyświetlanie dostępnych aktywności components/booking/ParticipantSelector.vue Wybór uczestników Inkrementacja/dekrementacja liczby Obsługa limitów components/booking/Calendar.vue Kalendarz z dostępnymi datami Obsługa wyboru daty Wyświetlanie cen components/booking/CalendarHeader.vue Nagłówek kalendarza Nawigacja między miesiącami components/booking/CalendarCell.vue Komórka kalendarza Wyświetlanie dostępności, cen components/booking/TimeSelector.vue Wybór godziny wycieczki Wyświetlanie dostępnych godzin Obsługa wyboru components/booking/BookingSummary.vue Podsumowanie rezerwacji Wyświetlanie szczegółów, cen Obsługa przejścia dalej 2.8. Komponenty danych kontaktowych components/contact/ContactForm.vue Formularz danych kontaktowych Wyświetlanie pól z Bokun Obsługa walidacji components/contact/PhoneInput.vue Komponent pola telefonu Formatowanie, walidacja components/contact/CustomFieldInput.vue Dynamiczne pola niestandardowe Obsługa różnych typów pól components/contact/PromoCodeInput.vue Pole kodu rabatowego Weryfikacja, zastosowanie 2.9. Komponenty płatności components/payment/PaymentMethods.vue Wybór metod płatności Wyświetlanie dostępnych metod components/payment/BlikPayment.vue Płatność BLIK Wprowadzanie kodu Obsługa płatności components/payment/CardPayment.vue Płatność kartą Integracja z Tpay components/payment/BankPayment.vue Płatność przelewem Wybór banku components/payment/PaymentSummary.vue Podsumowanie płatności Wyświetlanie szczegółów, kwoty components/payment/AgreementCheckboxes.vue Checkboxy zgód Obsługa zaznaczania/odznaczania components/payment/ConfirmationPage.vue Strona potwierdzenia płatności Wyświetlanie statusu Obsługa powrotu 2.10. Strony (routing) pages/index.vue Główna strona widgetu Inicjalizacja widgetu pages/booking.vue Strona procesu rezerwacji Zawiera komponenty rezerwacji pages/contact.vue Strona danych kontaktowych Zawiera formularz kontaktowy pages/payment.vue Strona płatności Zawiera komponenty płatności pages/confirmation.vue Strona potwierdzenia Wyświetlanie statusu płatności 2.11. Layouts layouts/default.vue Domyślny układ Struktura widgetu layouts/widget.vue Układ dla widgetu Zawiera obsługę zarządzania stanem widgetu 2.12. API (server) server/api/bokun/general-information/[id]/[lang].ts Endpoint do pobierania informacji o aktywności server/api/bokun/schedule/[id]/[dateStart].ts Endpoint do pobierania harmonogramu server/api/bokun/reservation.post.ts Endpoint do tworzenia rezerwacji server/api/bokun/cancel-reservation.post.ts Endpoint do anulowania rezerwacji server/api/wp/acf-trip-data/[postKey]/[postId].ts Endpoint do pobierania danych ACF server/api/tpay/payment-methods.ts Endpoint do pobierania metod płatności server/api/tpay/payment.post.ts Endpoint do obsługi płatności BLIK server/api/tpay/payment-bank.post.ts Endpoint do obsługi płatności bankowej server/api/tpay/check-reservation/[code].ts Endpoint do sprawdzania statusu rezerwacji 2.13. Narzędzia i pomocnicy utils/date.ts Funkcje pomocnicze do formatowania dat Obliczanie różnic między datami utils/price.ts Funkcje pomocnicze do formatowania cen Obliczanie cen, zniżek utils/validation.ts Funkcje pomocnicze do walidacji Schematy walidacji utils/api.ts Funkcje pomocnicze do komunikacji z API Obsługa błędów, retry utils/storage.ts Funkcje pomocnicze do localStorage Zapisywanie/odczytywanie danych sesji 2.14. Internacjonalizacja i18n/en.ts Tłumaczenia angielskie i18n/pl.ts Tłumaczenia polskie i18n/index.ts Konfiguracja i18n Eksport tłumaczeń 3. Plan wdrożenia 3.1. Faza 1: Inicjalizacja projektu i podstawowa struktura (1-2 dni) Inicjalizacja projektu Nuxt 3 Konfiguracja Nuxt UI i Tailwind Konfiguracja TypeScript Konfiguracja Pinia Konfiguracja i18n Definicja podstawowych typów i interfejsów 3.2. Faza 2: Implementacja API i podstawowych sklepów danych (2-3 dni) Implementacja podstawowych interfejsów API Implementacja ActivityStore Implementacja BookingStore Implementacja ContactStore Implementacja PaymentStore Implementacja UIStore 3.3. Faza 3: Implementacja podstawowych composables (2-3 dni) Implementacja useActivityManager Implementacja useCalendar Implementacja useParticipants Implementacja useReservation Implementacja usePayment Implementacja useMultiStepForm 3.4. Faza 4: Implementacja podstawowych komponentów UI (2-3 dni) Implementacja komponentów UI (Button, Input, Select) Implementacja WidgetContainer Implementacja MultiStepForm Implementacja StepperNav Implementacja ConfirmationDialog 3.5. Faza 5: Implementacja komponentów rezerwacji (3-4 dni) Implementacja TripTypeSelector Implementacja ActivitySwitcher Implementacja ParticipantSelector Implementacja Calendar Implementacja TimeSelector Implementacja BookingSummary 3.6. Faza 6: Implementacja komponentów danych kontaktowych (2-3 dni) Implementacja ContactForm Implementacja PhoneInput Implementacja CustomFieldInput Implementacja PromoCodeInput 3.7. Faza 7: Implementacja komponentów płatności (3-4 dni) Implementacja PaymentMethods Implementacja BlikPayment Implementacja CardPayment Implementacja BankPayment Implementacja PaymentSummary Implementacja AgreementCheckboxes Implementacja ConfirmationPage 3.8. Faza 8: Integracja komponentów i strony (2-3 dni) Implementacja strony głównej Implementacja strony rezerwacji Implementacja strony danych kontaktowych Implementacja strony płatności Implementacja strony potwierdzenia 3.9. Faza 9: Testy i optymalizacja (2-3 dni) Testy integracyjne Testy UX Optymalizacja wydajności Poprawki błędów 3.10. Faza 10: Wdrożenie pierwszej wersji (1-2 dni) Konfiguracja procesu budowania Wdrożenie wersji produkcyjnej Testowanie w środowisku produkcyjnym