8950988eac
- Add PaymentSuccessController with authentication and subscription selection logic - Create PaymentConfirmation Livewire component with polling mechanism - Implement real-time subscription status verification via Polar provider API - Add confetti animation for successful payment confirmation - Design responsive payment success page with dark mode support - Fix Polar provider field mapping (updated_at -> modified_at) - Add comprehensive error handling and logging - Support multiple subscription status states (verifying, activated, pending, error) - Implement automatic polling with 30-second intervals (max 5 attempts) - Add fallback redirects and user-friendly status messages
259 lines
13 KiB
PHP
259 lines
13 KiB
PHP
<div>
|
|
<!-- Status Display -->
|
|
<div class="mb-8"></div>
|
|
|
|
<!-- Verifying Status -->
|
|
@if ($status === 'verifying')
|
|
<div class="text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4">
|
|
<svg class="w-10 h-10 text-blue-600 dark:text-blue-400 animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
|
{{ $this->statusText }}
|
|
</h2>
|
|
|
|
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
|
We're confirming your payment with the provider. This usually takes a few seconds.
|
|
</p>
|
|
|
|
<!-- Progress Indicator -->
|
|
<div class="flex items-center justify-center gap-2 mb-4">
|
|
<div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
|
|
<div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
|
|
<div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-500 dark:text-gray-500">
|
|
Check {{ $pollCount }} of {{ $maxPolls }} • Retrying in 30 seconds...
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Activated Status -->
|
|
@if ($status === 'activated')
|
|
<div class="text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 dark:bg-green-900/20 rounded-full mb-4 success-glow">
|
|
<svg class="w-10 h-10 text-green-600 dark:text-green-400 animate-pulse-scale" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-green-600 dark:text-green-400 mb-2">
|
|
{{ $this->statusText }}
|
|
</h2>
|
|
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Your subscription is now active and you have access to all premium features!
|
|
</p>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="{{ route('dashboard') }}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
|
</svg>
|
|
Go to Dashboard
|
|
</a>
|
|
|
|
<a href="{{ route('dashboard') }}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
View Subscription
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Pending Status -->
|
|
@if ($status === 'pending')
|
|
<div class="text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-yellow-100 dark:bg-yellow-900/20 rounded-full mb-4">
|
|
<svg class="w-10 h-10 text-yellow-600 dark:text-yellow-400 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mb-2">
|
|
{{ $this->statusText }}
|
|
</h2>
|
|
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Your payment is being processed. You'll receive an email once your subscription is active.
|
|
</p>
|
|
|
|
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p class="text-sm text-yellow-800 dark:text-yellow-200">
|
|
This can take a few minutes. You can check your subscription status from the dashboard.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<div class="flex justify-center">
|
|
<a href="{{ route('dashboard') }}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
Continue to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Error Status -->
|
|
@if ($status === 'error')
|
|
<div class="text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-red-100 dark:bg-red-900/20 rounded-full mb-4">
|
|
<svg class="w-10 h-10 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">
|
|
{{ $this->statusText }}
|
|
</h2>
|
|
|
|
@if ($errorMessage)
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">{{ $errorMessage }}</p>
|
|
@endif
|
|
|
|
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p class="text-sm text-red-800 dark:text-red-200">
|
|
If you continue to see this message, please contact our support team.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button wire:click="checkSubscriptionStatus"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-all duration-200">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
Try Again
|
|
</button>
|
|
|
|
<a href="{{ route('dashboard') }}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
|
</svg>
|
|
Go to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Subscription Details (if available) -->
|
|
@if ($subscription)
|
|
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-6 mt-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Subscription Details</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Subscription ID</p>
|
|
<p class="font-mono text-sm">{{ $subscription->provider_subscription_id }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Provider</p>
|
|
<p class="font-medium">{{ ucfirst($subscription->provider) }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Status</p>
|
|
<div class="mt-1">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
|
@if ($status === 'activated')
|
|
bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400
|
|
@else
|
|
bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400
|
|
@endif">
|
|
{{ ucfirst($subscription->status) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Created</p>
|
|
<p class="font-medium">{{ $subscription->created_at->format('M j, Y H:i') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Polling Indicator - temporarily disabled -->
|
|
@if ($this->shouldContinuePolling)
|
|
<!-- <div wire:poll.30000ms
|
|
wire:key="subscription-poll-{{ $subscription->id ?? 'none' }}-{{ $pollCount }}">
|
|
</div> -->
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Confetti Script -->
|
|
<script>
|
|
@if ($showConfetti)
|
|
console.log('Confetti should be shown - showConfetti is true');
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOM loaded, starting confetti');
|
|
|
|
// Check if confetti function is available
|
|
if (typeof confetti === 'function') {
|
|
console.log('Confetti function is available');
|
|
|
|
// Create confetti effect
|
|
var duration = 3000;
|
|
var animationEnd = Date.now() + duration;
|
|
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
|
|
|
|
function randomInRange(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
var interval = setInterval(function() {
|
|
var timeLeft = animationEnd - Date.now();
|
|
|
|
if (timeLeft <= 0) {
|
|
return clearInterval(interval);
|
|
}
|
|
|
|
var particleCount = 50 * (timeLeft / duration);
|
|
|
|
// Create two bursts for better effect
|
|
confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
|
|
confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
|
|
}, 250);
|
|
|
|
// Additional celebration burst after 1 second
|
|
setTimeout(function() {
|
|
confetti({
|
|
particleCount: 100,
|
|
spread: 70,
|
|
origin: { y: 0.6 }
|
|
});
|
|
}, 1000);
|
|
} else {
|
|
console.error('Confetti function is not available');
|
|
}
|
|
});
|
|
@else
|
|
console.log('Confetti should NOT be shown - showConfetti is false');
|
|
@endif
|
|
</script> |