feat: Add visual success screen after accepting/rejecting changes
- Show full-screen success overlay with progress steps (like InPost) - Display clear confirmation that changes were accepted/rejected - Show workflow progress: Złożono → Weryfikacja → Rozpatrzenie → Decyzja - Button to navigate to status page Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
8a8d39632f
commit
dcc2e470ec
@ -409,6 +409,162 @@
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Ekran sukcesu */
|
||||
.success-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--background);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.success-overlay.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.success-box {
|
||||
background: var(--surface);
|
||||
padding: var(--spacing-2xl) var(--spacing-3xl);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: successSlideIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes successSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.success-icon.accept svg {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.success-icon.reject svg {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.success-box h2 {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.success-box > p {
|
||||
margin: 0 0 var(--spacing-2xl) 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.success-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--background);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--border);
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-icon {
|
||||
background: #16a34a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-step.current .step-icon {
|
||||
background: #0ea5e9;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-step.completed .step-label,
|
||||
.progress-step.current .step-label {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: var(--border);
|
||||
margin: 0 var(--spacing-xs);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress-line.completed {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.btn-success-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-success-action:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.success-progress {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.actions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@ -538,6 +694,44 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ekran sukcesu -->
|
||||
<div class="success-overlay" id="successOverlay">
|
||||
<div class="success-box">
|
||||
<div class="success-icon" id="successIcon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="9 12 12 15 16 10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 id="successTitle">Zmiany zaakceptowane!</h2>
|
||||
<p id="successMessage">Twoja deklaracja wróciła do rozpatrzenia przez administratora.</p>
|
||||
<div class="success-progress">
|
||||
<div class="progress-step completed">
|
||||
<div class="step-icon">1</div>
|
||||
<div class="step-label">Złożono deklarację</div>
|
||||
</div>
|
||||
<div class="progress-line completed"></div>
|
||||
<div class="progress-step completed">
|
||||
<div class="step-icon">2</div>
|
||||
<div class="step-label">Weryfikacja danych</div>
|
||||
</div>
|
||||
<div class="progress-line completed"></div>
|
||||
<div class="progress-step current">
|
||||
<div class="step-icon">3</div>
|
||||
<div class="step-label">Rozpatrzenie</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step">
|
||||
<div class="step-icon">4</div>
|
||||
<div class="step-label">Decyzja</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ url_for('membership.status') }}" class="btn-success-action">
|
||||
Zobacz status deklaracji →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal potwierdzenia -->
|
||||
<div class="confirm-modal" id="confirmModal">
|
||||
<div class="confirm-modal-content">
|
||||
@ -660,20 +854,21 @@ async function doAcceptChanges() {
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
hideLoading();
|
||||
|
||||
if (data.success) {
|
||||
showNotification('Zmiany zostały zaakceptowane. Twoja deklaracja wróciła do rozpatrzenia.', 'success');
|
||||
setTimeout(() => {
|
||||
window.location.href = '{{ url_for("membership.status") }}';
|
||||
}, 1500);
|
||||
showSuccessScreen(
|
||||
'accept',
|
||||
'Zmiany zaakceptowane!',
|
||||
'Twoja deklaracja wróciła do rozpatrzenia przez administratora. Otrzymasz powiadomienie o decyzji.'
|
||||
);
|
||||
} else {
|
||||
showNotification(data.error || 'Wystąpił błąd', 'error');
|
||||
hideLoading();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
showNotification('Wystąpił błąd połączenia. Spróbuj ponownie.', 'error');
|
||||
hideLoading();
|
||||
showNotification('Wystąpił błąd połączenia. Spróbuj ponownie.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@ -702,23 +897,44 @@ async function doRejectChanges() {
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
hideLoading();
|
||||
|
||||
if (data.success) {
|
||||
showNotification('Propozycja zmian została odrzucona. Zachowano oryginalne dane.', 'info');
|
||||
setTimeout(() => {
|
||||
window.location.href = '{{ url_for("membership.status") }}';
|
||||
}, 1500);
|
||||
showSuccessScreen(
|
||||
'reject',
|
||||
'Propozycja odrzucona',
|
||||
'Twoja deklaracja zachowuje oryginalne dane i wróciła do rozpatrzenia przez administratora.'
|
||||
);
|
||||
} else {
|
||||
showNotification(data.error || 'Wystąpił błąd', 'error');
|
||||
hideLoading();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
showNotification('Wystąpił błąd połączenia. Spróbuj ponownie.', 'error');
|
||||
hideLoading();
|
||||
showNotification('Wystąpił błąd połączenia. Spróbuj ponownie.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function showSuccessScreen(type, title, message) {
|
||||
const overlay = document.getElementById('successOverlay');
|
||||
const icon = document.getElementById('successIcon');
|
||||
const titleEl = document.getElementById('successTitle');
|
||||
const messageEl = document.getElementById('successMessage');
|
||||
|
||||
titleEl.textContent = title;
|
||||
messageEl.textContent = message;
|
||||
|
||||
icon.className = 'success-icon ' + type;
|
||||
|
||||
if (type === 'accept') {
|
||||
icon.innerHTML = '<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 16 10"/></svg>';
|
||||
} else {
|
||||
icon.innerHTML = '<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>';
|
||||
}
|
||||
|
||||
overlay.classList.add('show');
|
||||
}
|
||||
|
||||
// Zamknij modal klikając poza nim
|
||||
document.getElementById('confirmModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user