fix: move GBP connection status to top of page with action buttons
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions

Moved the OAuth connection status banner from the middle of the page
to directly below the header for immediate visibility. Added direct
link buttons to /konto/integracje for each state: "Zarządzaj" (active),
"Połącz ponownie" (expired), "Połącz konto" (not connected).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-11 07:29:06 +01:00
parent c03a2ad055
commit 997009d88c

View File

@ -961,6 +961,46 @@
</div>
</div>
{# GBP Console Connection Status — at the top for visibility #}
{% if gbp_connection and gbp_connection.connected %}
{% if gbp_connection.is_active and not gbp_connection.is_expired %}
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: var(--radius-lg); margin-bottom: var(--spacing-md);">
<span style="font-size: 22px;"></span>
<div style="flex: 1;">
<strong style="color: #16a34a;">Konsola Google Business Profile połączona</strong>
<p style="margin: 2px 0 0; font-size: var(--font-size-xs); color: var(--text-secondary);">
Dostępne są pełne dane: wyświetlenia, wyszukiwania, kliknięcia i interakcje klientów.
{% if gbp_connection.created_at %}Połączone od {{ gbp_connection.created_at.strftime('%d.%m.%Y') }}.{% endif %}
</p>
</div>
<a href="{{ url_for('auth.konto_integracje') }}" class="btn btn-outline btn-sm" style="white-space: nowrap;">Zarządzaj</a>
</div>
{% else %}
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: var(--radius-lg); margin-bottom: var(--spacing-md);">
<span style="font-size: 22px;"></span>
<div style="flex: 1;">
<strong style="color: #d97706;">Połączenie z konsolą GBP wygasło</strong>
<p style="margin: 2px 0 0; font-size: var(--font-size-xs); color: var(--text-secondary);">
Autoryzacja Google wygasła{% if gbp_connection.expires_at %} {{ gbp_connection.expires_at.strftime('%d.%m.%Y') }}{% endif %}.
Dane audytu pochodzą z publicznego API. Połącz ponownie, aby uzyskać pełne statystyki.
</p>
</div>
<a href="{{ url_for('auth.konto_integracje') }}" class="btn btn-sm" style="background: #d97706; color: white; border: none; white-space: nowrap;">Połącz ponownie</a>
</div>
{% endif %}
{% else %}
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: rgba(107, 114, 128, 0.04); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--spacing-md);">
<span style="font-size: 22px; color: var(--text-tertiary);"></span>
<div style="flex: 1;">
<strong style="color: var(--text-secondary);">Konsola Google Business Profile niepołączona</strong>
<p style="margin: 2px 0 0; font-size: var(--font-size-xs); color: var(--text-secondary);">
Dane audytu pochodzą wyłącznie z publicznego API Google Places. Po połączeniu konta będą dostępne dodatkowe statystyki: wyświetlenia w Google, kliknięcia, połączenia telefoniczne i nawigacje.
</p>
</div>
<a href="{{ url_for('auth.konto_integracje') }}" class="btn btn-primary btn-sm" style="white-space: nowrap;">Połącz konto</a>
</div>
{% endif %}
{% if audit %}
<!-- Score Section -->
{# Unified 5-level color scale: 0-29 red, 30-49 orange, 50-69 amber, 70-89 lime, 90-100 green #}
@ -1988,65 +2028,6 @@
</div>
{% endif %}
{# GBP Console Connection Status #}
<div style="background: var(--surface); padding: var(--spacing-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: var(--spacing-md);">
<h2 class="section-title">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
</svg>
Połączenie z konsolą Google Business Profile
</h2>
{% if gbp_connection and gbp_connection.connected %}
{% if gbp_connection.is_active and not gbp_connection.is_expired %}
{# Active and valid connection #}
<div style="display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: var(--radius);">
<span style="font-size: 20px;"></span>
<div>
<strong style="color: #16a34a;">Połączone</strong>
<p style="margin: 4px 0 0; font-size: var(--font-size-xs); color: var(--text-secondary);">
Konsola GBP jest aktywna. Dostępne są dane o wyświetleniach, wyszukiwaniach i interakcjach klientów.
</p>
</div>
</div>
{% elif gbp_connection.is_expired or not gbp_connection.is_active %}
{# Expired or inactive connection #}
<div style="display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--radius);">
<span style="font-size: 20px;"></span>
<div>
<strong style="color: #d97706;">Połączenie wygasło</strong>
<p style="margin: 4px 0 0; font-size: var(--font-size-xs); color: var(--text-secondary);">
Autoryzacja Google wygasła{% if gbp_connection.expires_at %} ({{ gbp_connection.expires_at.strftime('%d.%m.%Y') }}){% endif %}.
{% if gbp_connection.has_refresh_token %}
Token odświeżający jest dostępny, ale wymaga ponownej autoryzacji.
{% endif %}
Właściciel firmy powinien ponownie połączyć konto w panelu <strong>Konto → Integracje</strong>.
</p>
</div>
</div>
{% endif %}
<div style="margin-top: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--text-tertiary);">
Połączone od: {{ gbp_connection.created_at.strftime('%d.%m.%Y') if gbp_connection.created_at else '—' }}
{% if gbp_connection.has_location %} · Lokalizacja GBP skonfigurowana{% endif %}
</div>
{% else %}
{# No connection at all #}
<div style="display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background: rgba(107, 114, 128, 0.06); border: 1px solid var(--border); border-radius: var(--radius);">
<span style="font-size: 20px; color: var(--text-tertiary);"></span>
<div>
<strong style="color: var(--text-secondary);">Brak połączenia</strong>
<p style="margin: 4px 0 0; font-size: var(--font-size-xs); color: var(--text-secondary);">
Konsola Google Business Profile nie jest połączona. Dane audytu pochodzą wyłącznie z publicznego API Google Places.
Po połączeniu konta będą dostępne dodatkowe statystyki: wyświetlenia w Google, kliknięcia, połączenia telefoniczne i nawigacje.
</p>
<p style="margin: 6px 0 0; font-size: var(--font-size-xs); color: var(--text-tertiary);">
Właściciel firmy może połączyć konto w panelu <strong>Konto → Integracje</strong>.
</p>
</div>
</div>
{% endif %}
</div>
{# Google Reviews from Places API — data is dict with 'reviews' key #}
{% if places_data and places_data.google_reviews_data is mapping and places_data.google_reviews_data.get('reviews') %}