flowglad-pricing-ui

Skill do budowania stron cenowych, kart planów i tabel porównawczych w Flowglad. Obsługuje stany ładowania, formatowanie cen, przełączanie między okresami rozliczeniowymi (miesięczny/roczny), wyróżnianie aktualnego planu oraz responsywne układy. Idealny dla twórców SaaS, agencji i platform e-commerce, które chcą szybko wdrożyć profesjonalny interfejs cenowy bez pisania kodu od zera.

1. Zainstaluj skill Flowglad Pricing UI w swoim projekcie i upewnij się, że masz dostęp do danych modelu cenowego poprzez helper functions getProduct i getPrice.
2. Poczekaj na załadowanie pricingModel przed renderowaniem komponentów — użyj usePricingModel do publicznych stron cenowych lub poczekaj na dane z API.
3. Pobierz produkty i ceny za pomocą helperów, przefiltruj je według potrzeb (np. tylko aktywne plany) i wyodrębnij informacje o funkcjach dla każdego planu.
4. Sformatuj ceny z centów na walutę (np. 9900 centów = 99,00 zł), wyświetl okres rozliczeniowy (miesięczny/roczny) i dodaj przełącznik do zmiany interwału.
5. Wykryj aktualny plan subskrypcji użytkownika i wyróżnij go wizualnie — zablokuj przycisk CTA lub zmień styl dla aktualnego planu.
6. Dostosuj layout do urządzeń mobilnych — skill zawiera wzorce responsywne dla tabel cenowych i kart planów.