206 lines
11 KiB
Plaintext
206 lines
11 KiB
Plaintext
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-8" aria-label="Breadcrumb">
|
|
<ol class="flex items-center space-x-2 text-sm">
|
|
<%= link_to root_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
|
|
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
|
|
</svg>
|
|
Accueil
|
|
<% end %>
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
<%= link_to events_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
|
|
Événements
|
|
<% end %>
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
<%= link_to event_path(@event.slug, @event), class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
|
|
<%= @event.name %>
|
|
<% end %>
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
<li class="font-medium text-gray-900" aria-current="page">Paiement</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Order Summary -->
|
|
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
|
|
<div class="text-center mb-6">
|
|
<div class="mx-auto bg-green-100 rounded-full p-3 w-16 h-16 flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-green-600" 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"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-2">Récapitulatif de votre commande</h2>
|
|
<p class="text-gray-600">Vérifiez les détails de vos billets avant le paiement</p>
|
|
</div>
|
|
|
|
<!-- Event Info -->
|
|
<div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl p-6 mb-6 border border-purple-100">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2"><%= @event.name %></h3>
|
|
<div class="flex items-center text-gray-600 text-sm mb-2">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
<%= @event.start_time.strftime("%d %B %Y à %H:%M") %>
|
|
</div>
|
|
<div class="flex items-center text-gray-600 text-sm">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
<%= @event.venue_name %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tickets List -->
|
|
<div class="space-y-4 mb-6">
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-4">Vos billets</h4>
|
|
<% @tickets.each do |ticket| %>
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div class="flex-1">
|
|
<h5 class="font-medium text-gray-900"><%= ticket.ticket_type.name %></h5>
|
|
<p class="text-sm text-gray-600"><%= ticket.first_name %> <%= ticket.last_name %></p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-semibold text-gray-900"><%= number_to_currency(ticket.price_euros, unit: "€", separator: ",", delimiter: " ", format: "%n %u") %></p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Total -->
|
|
<div class="border-t pt-4">
|
|
<div class="flex items-center justify-between text-xl font-bold text-gray-900">
|
|
<span>Total</span>
|
|
<span><%= number_to_currency(@total_amount / 100.0, unit: "€", separator: ",", delimiter: " ", format: "%n %u") %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Section -->
|
|
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
|
|
<div class="text-center mb-6">
|
|
<div class="mx-auto bg-purple-100 rounded-full p-3 w-16 h-16 flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-2">Paiement sécurisé</h2>
|
|
<p class="text-gray-600">Procédez au paiement de vos billets</p>
|
|
</div>
|
|
|
|
<% if @checkout_session.present? %>
|
|
<!-- Stripe Checkout -->
|
|
<div class="space-y-4">
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-blue-600 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"/>
|
|
</svg>
|
|
<span class="text-blue-800 text-sm">Paiement sécurisé avec Stripe</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<script>
|
|
let stripeInstance = null;
|
|
|
|
// Initialize Stripe when the script is loaded
|
|
function initializeStripe() {
|
|
if (typeof Stripe !== 'undefined' && !stripeInstance) {
|
|
stripeInstance = Stripe('<%= Rails.application.config.stripe[:publishable_key] %>');
|
|
console.log('Stripe initialized successfully');
|
|
}
|
|
}
|
|
|
|
// Function to redirect to checkout
|
|
function redirectToCheckout(buttonElement) {
|
|
// Ensure Stripe is initialized
|
|
if (!stripeInstance) {
|
|
initializeStripe();
|
|
}
|
|
|
|
if (!stripeInstance) {
|
|
alert('Erreur: Le système de paiement n\'est pas disponible. Veuillez rafraîchir la page.');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
const originalText = buttonElement.innerHTML;
|
|
buttonElement.disabled = true;
|
|
buttonElement.innerHTML = '<span class="flex items-center justify-center"><svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Redirection...</span>';
|
|
|
|
stripeInstance.redirectToCheckout({
|
|
sessionId: '<%= @checkout_session.id %>'
|
|
}).then(function (result) {
|
|
if (result.error) {
|
|
alert('Erreur de paiement: ' + result.error.message);
|
|
// Restore button state
|
|
buttonElement.disabled = false;
|
|
buttonElement.innerHTML = originalText;
|
|
}
|
|
}).catch(function(error) {
|
|
console.error('Stripe error:', error);
|
|
alert('Une erreur est survenue. Veuillez réessayer.');
|
|
// Restore button state
|
|
buttonElement.disabled = false;
|
|
buttonElement.innerHTML = originalText;
|
|
});
|
|
}
|
|
|
|
// Initialize Stripe when the page is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeStripe();
|
|
});
|
|
|
|
// Fallback: Try to initialize after a short delay
|
|
setTimeout(function() {
|
|
initializeStripe();
|
|
}, 500);
|
|
</script>
|
|
|
|
<button onclick="redirectToCheckout(this)"
|
|
class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-4 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5">
|
|
<span class="flex items-center justify-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
|
</svg>
|
|
Procéder au paiement
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<% else %>
|
|
<!-- Fallback when Stripe is not configured -->
|
|
<div class="space-y-4">
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-yellow-600 mr-2" 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 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
|
</svg>
|
|
<span class="text-yellow-800 text-sm">Le paiement en ligne n'est pas configuré</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center text-gray-600 p-6">
|
|
<p class="mb-4">Veuillez contacter l'organisateur pour finaliser votre réservation.</p>
|
|
<p class="text-sm">Vos billets ont été créés et sont en attente de paiement.</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="mt-6 pt-4 border-t">
|
|
<%= link_to "Retour aux détails",
|
|
ticket_new_path(@event.slug, @event.id),
|
|
class: "w-full inline-block text-center px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 font-medium transition-colors duration-200" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |