feat: Implement complete ticket purchasing flow with new TicketsController
- Create new TicketsController with actions for name collection, creation, and checkout - Add dedicated ticket views (new.html.erb, checkout.html.erb, show.html.erb) - Update ticket_selection_controller.js to handle form submission via AJAX - Add store_cart endpoint in EventsController for session-based cart management - Update routes to support new ticket flow: /tickets/new, /create, /checkout - Fix attribute name consistency across views (title→name, starts_at→start_time) - Add Stripe checkout integration with proper error handling - Remove deprecated collect_names flow in favor of streamlined approach The flow is now: Event selection → AJAX cart storage → Name collection → Checkout → Payment
This commit is contained in:
kbe
163
app/views/tickets/checkout.html.erb
Normal file
163
app/views/tickets/checkout.html.erb
Normal file
@@ -0,0 +1,163 @@
|
||||
<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>
|
||||
const stripe = Stripe('<%= Rails.application.config.stripe[:publishable_key] %>');
|
||||
|
||||
function redirectToCheckout() {
|
||||
stripe.redirectToCheckout({
|
||||
sessionId: '<%= @checkout_session.id %>'
|
||||
}).then(function (result) {
|
||||
if (result.error) {
|
||||
alert(result.error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick="redirectToCheckout()"
|
||||
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>
|
||||
Reference in New Issue
Block a user