From 7694e50fa03572c7e3c6be988d6ebd6923808b32 Mon Sep 17 00:00:00 2001 From: kbe Date: Sun, 7 Sep 2025 00:12:28 +0200 Subject: [PATCH] Improve mobile responsiveness and UI consistency across order pages and dashboard - Updated payment success and cancel pages to match order details layout - Made dashboard fully responsive with improved mobile layouts - Added missing venue address to order pages - Standardized styling and spacing across all order-related pages - Improved PDF ticket generator formatting Co-authored-by: Qwen-Coder --- app/services/ticket_pdf_generator.rb | 40 +++--- app/views/orders/payment_cancel.html.erb | 163 ++++++++++++++++++++++ app/views/orders/payment_success.html.erb | 128 +++++++++-------- app/views/orders/show.html.erb | 8 +- app/views/pages/dashboard.html.erb | 142 +++++++++---------- 5 files changed, 323 insertions(+), 158 deletions(-) create mode 100644 app/views/orders/payment_cancel.html.erb diff --git a/app/services/ticket_pdf_generator.rb b/app/services/ticket_pdf_generator.rb index 545be7e..1d0937b 100755 --- a/app/services/ticket_pdf_generator.rb +++ b/app/services/ticket_pdf_generator.rb @@ -140,14 +140,14 @@ class TicketPdfGenerator pdf.fill_color "6366F1" pdf.font "Helvetica", style: :bold, size: 24 pdf.text "AperoNight", align: :center - + pdf.move_down 5 pdf.font "Helvetica", size: 10 pdf.fill_color "64748B" pdf.text "Billet d'entree", align: :center - + pdf.move_down 20 - + # Simple divider line pdf.stroke_color "E5E7EB" pdf.horizontal_line 0, pdf.bounds.width @@ -160,24 +160,24 @@ class TicketPdfGenerator pdf.font "Helvetica", style: :bold, size: 18 pdf.text ticket.event.name, align: :center pdf.move_down 15 - + # Two-column layout for ticket details - pdf.bounding_box([0, pdf.cursor], width: pdf.bounds.width, height: 120) do + pdf.bounding_box([ 0, pdf.cursor ], width: pdf.bounds.width, height: 120) do # Left column - pdf.bounding_box([0, pdf.cursor], width: pdf.bounds.width / 2 - 20, height: 120) do + pdf.bounding_box([ 0, pdf.cursor ], width: pdf.bounds.width / 2 - 20, height: 120) do create_info_item(pdf, "Date", ticket.event.start_time.strftime("%d %B %Y")) create_info_item(pdf, "Heure", ticket.event.start_time.strftime("%H:%M")) create_info_item(pdf, "Lieu", ticket.event.venue_name) end - + # Right column - pdf.bounding_box([pdf.bounds.width / 2 + 20, pdf.cursor], width: pdf.bounds.width / 2 - 20, height: 120) do + pdf.bounding_box([ pdf.bounds.width / 2 + 20, pdf.cursor ], width: pdf.bounds.width / 2 - 20, height: 120) do create_info_item(pdf, "Type", ticket.ticket_type.name) create_info_item(pdf, "Prix", "#{sprintf('%.2f', ticket.price_euros)} €") create_info_item(pdf, "Titulaire", "#{ticket.first_name} #{ticket.last_name}") end end - + pdf.move_down 30 end @@ -185,7 +185,7 @@ class TicketPdfGenerator pdf.font "Helvetica", style: :bold, size: 9 pdf.fill_color "64748B" pdf.text label.upcase - + pdf.move_down 2 pdf.font "Helvetica", size: 11 pdf.fill_color "1F2937" @@ -197,25 +197,25 @@ class TicketPdfGenerator # Center the QR code horizontally qr_size = 120 x_position = (pdf.bounds.width - qr_size) / 2 - - pdf.bounding_box([x_position, pdf.cursor], width: qr_size, height: qr_size + 40) do + + pdf.bounding_box([ x_position, pdf.cursor ], width: qr_size, height: qr_size + 40) do # QR Code title pdf.font "Helvetica", style: :bold, size: 12 pdf.fill_color "1F2937" pdf.text "Code d'entree", align: :center pdf.move_down 10 - + # Generate QR code generate_simple_qr_code(pdf, qr_size) - + pdf.move_down 10 - + # QR code ID pdf.font "Helvetica", size: 8 pdf.fill_color "64748B" pdf.text "ID: #{ticket.qr_code[0..15]}...", align: :center end - + pdf.move_down 40 end @@ -250,14 +250,14 @@ class TicketPdfGenerator pdf.fill_color "64748B" pdf.text "Ce billet est valable pour une seule entree.", align: :center pdf.text "Presentez ce code QR a l'entree de l'evenement.", align: :center - + pdf.move_down 10 - + # Divider line pdf.stroke_color "E5E7EB" pdf.horizontal_line 0, pdf.bounds.width pdf.move_down 5 - + # Generation timestamp pdf.font "Helvetica", size: 7 pdf.fill_color "9CA3AF" @@ -294,4 +294,4 @@ class TicketPdfGenerator # Final fallback: simple ticket identifier "TICKET-#{ticket.id}" end -end \ No newline at end of file +end diff --git a/app/views/orders/payment_cancel.html.erb b/app/views/orders/payment_cancel.html.erb new file mode 100644 index 0000000..e70c3d4 --- /dev/null +++ b/app/views/orders/payment_cancel.html.erb @@ -0,0 +1,163 @@ +
+
+ +
+
+ + + +
+

Détails de la Commande

+
+
+ +
+
+

Détails de Votre Commande

+ <% if @order %> +
+
+ + + +
+ Commande n°<%= @order.id %> + <%= @order.created_at.strftime("%d %B %Y") %> +
+
+
+ + + + + Paiement annulé + +
+
+ <% else %> +

Aucune commande trouvée.

+ <% end %> +
+ + <% if @order %> + +
+

Événement

+
+

<%= @order.event.name %>

+
+ <% if @order.event.start_time %> +
+ + + + <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %> +
+ <% end %> + <% if @order.event.venue_name.present? %> +
+ + + + + <%= @order.event.venue_name %> +
+ <% end %> + <% if @order.event.venue_address.present? %> +
+ + + + <%= @order.event.venue_address %> +
+ <% end %> +
+
+
+ + +
+

Récapitulatif

+ + <% @order.tickets.each do |ticket| %> +
+
+

<%= ticket.ticket_type.name %>

+
+ + + + <%= ticket.first_name %> <%= ticket.last_name %> +
+
+ + + + En attente de paiement +
+
+
+
<%= ticket.price_euros %>€
+
+
+ <% end %> +
+ + +
+
+ Total à payer + + <%= @order.total_amount_euros %>€ + +
+
+ <% end %> +
+ + +
+ <% if @order&.can_retry_payment? %> + +
+

Paiement Requis

+

Votre commande nécessite un paiement

+
+ +
+ <%= link_to checkout_order_path(@order), class: "block w-full text-center py-3 px-4 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors" do %> +
+ + + + Procéder au Paiement +
+ <% end %> +
+ <% end %> + + +
+
+ <%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %> +
+ + + + Retour au Tableau de Bord +
+ <% end %> + <%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %> +
+ + + + Voir l'Événement Complet +
+ <% end %> +
+
+
+
+
+
\ No newline at end of file diff --git a/app/views/orders/payment_success.html.erb b/app/views/orders/payment_success.html.erb index 8a9181f..601f6e6 100644 --- a/app/views/orders/payment_success.html.erb +++ b/app/views/orders/payment_success.html.erb @@ -1,35 +1,36 @@ -
+
- -
-
- - + +
+
+ +
-

Paiement réussi !

-

- Félicitations ! Votre commande a été traitée avec succès. Vous allez recevoir vos billets par email d'ici quelques minutes. -

+

Détails de la Commande

-
- +
-

Récapitulatif de la commande

+

Détails de Votre Commande

- + - Commande #<%= @order.id %> +
+ Commande n°<%= @order.id %> + <%= @order.created_at.strftime("%d %B %Y") %> +
- Payée + + Payée +
@@ -45,7 +46,7 @@ - <%= l(@order.event.start_time, format: :long) %> + <%= @order.event.start_time.strftime("%d %B %Y à %H:%M") %>
<% end %> <% if @order.event.venue_name.present? %> @@ -57,13 +58,21 @@ <%= @order.event.venue_name %>
<% end %> + <% if @order.event.venue_address.present? %> +
+ + + + <%= @order.event.venue_address %> +
+ <% end %>
- +
-

Vos billets

+

Récapitulatif

<% @order.tickets.each do |ticket| %>
@@ -93,46 +102,47 @@
Total payé - <%= @order.total_amount_euros %>€ + + <%= @order.total_amount_euros %>€ +
- +
+
-

Prochaines étapes

-

Que faire maintenant ?

+

Accédez à Vos Billets

+

Téléchargez ou consultez vos billets

- -
-
- 1 -
-
-

Vérifiez votre email

-

Nous avons envoyé vos billets à <%= current_user.email %>. Vérifiez aussi vos spams.

-
-
-
- 2 + + +
-

Téléchargez vos billets

+

Télécharger Vos Billets

Gardez vos billets sur votre téléphone ou imprimez-les.

- <% @order.tickets.each do |ticket| %> - <%= link_to ticket_download_path(ticket.qr_code), class: "inline-flex items-center px-3 py-2 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-purple-50 hover:bg-purple-100 transition-colors mr-2 mb-2" do %> - - - - <%= ticket.first_name %> <%= ticket.last_name %> - <% end %> + <% @order.tickets.each_with_index do |ticket, index| %> +
+ <%= link_to ticket_path(ticket.qr_code), class: "flex-1 flex items-center text-purple-700 hover:text-purple-800 font-medium" do %> +
+ <%= index + 1 %> +
+ <%= ticket.first_name %> <%= ticket.last_name %> + <% end %> + <%= link_to ticket_download_path(ticket.qr_code), class: "ml-3 p-2 text-purple-600 hover:text-purple-800 hover:bg-purple-200 rounded-lg transition-colors", title: "Télécharger le billet PDF" do %> + + + + <% end %> +
<% end %>
@@ -141,46 +151,34 @@
- 3 + + +
-

Le jour J

+

Le Jour de l'Événement

Présentez votre billet (QR code) à l'entrée. Arrivez un peu en avance !

- -
-

Besoin d'aide ?

-

Si vous avez des questions ou des problèmes avec votre commande, n'hésitez pas à nous contacter.

-
- <%= link_to "mailto:support@example.com", class: "inline-flex items-center text-sm text-purple-600 hover:text-purple-700" do %> - - - - Contactez le support - <% end %> -
-
- - +
<%= link_to dashboard_path, class: "block w-full text-center py-3 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors" do %>
- + - Voir tous mes billets + Retour au Tableau de Bord
<% end %> - <%= link_to events_path, class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %> + <%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
- + - Découvrir d'autres événements + Voir l'Événement Complet
<% end %>
diff --git a/app/views/orders/show.html.erb b/app/views/orders/show.html.erb index 1036117..210f8d1 100644 --- a/app/views/orders/show.html.erb +++ b/app/views/orders/show.html.erb @@ -13,7 +13,7 @@
-

Détails de Votre Commande

+

Informations

@@ -33,7 +33,11 @@ <% end %> - <%= @order.status.humanize %> + <%= case @order.status + when 'paid' then 'Payé' + when 'completed' then 'Terminé' + else @order.status.humanize + end %>
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb index b694cb9..57fc81f 100755 --- a/app/views/pages/dashboard.html.erb +++ b/app/views/pages/dashboard.html.erb @@ -1,28 +1,28 @@ -
+
-
+
-

Mon tableau de bord

-

Gérez vos commandes et accédez à vos billets

+

Mon tableau de bord

+

Gérez vos commandes et accédez à vos billets

<% if current_user.promoter? %> -
- <%= link_to promoter_events_path, class: "inline-flex items-center justify-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm sm:text-base" do %> - - Mes Événements +
+ <%= link_to promoter_events_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %> + + Mes Événements <% end %> - <%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-4 py-2 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 text-sm sm:text-base" do %> - - Créer un Événement + <%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 text-sm" do %> + + Créer un Événement <% end %>
<% else %> - <%= link_to events_path, class: "inline-flex items-center justify-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm sm:text-base" do %> - - Découvrir des Événements + <%= link_to events_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %> + + Découvrir des Événements <% end %> <% end %>
@@ -30,42 +30,40 @@ <% if @draft_orders.any? %> -
+
- -
-

- +
+

+ Commandes en Attente de Paiement

-

Vous avez des commandes qui nécessitent un paiement

+

Vous avez des commandes qui nécessitent un paiement

-

<% @draft_orders.each do |order| %> -
-
+
+
-

<%= order.event.name %>

-

- +

<%= order.event.name %>

+

+ <%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>

- + Order #<%= order.id %>
<% order.tickets.each do |ticket| %> -
+
<%= ticket.ticket_type.name %> - <%= ticket.first_name %> <%= ticket.last_name %> @@ -77,18 +75,20 @@ <% end %>
-
-
- Tentatives: <%= order.payment_attempts %>/3 +
+
+
+ Tentatives: <%= order.payment_attempts %>/3 +
<% if order.expiring_soon? %> - ⚠️ Expire dans <%= time_ago_in_words(order.expires_at) %> + ⚠️ Expire dans <%= time_ago_in_words(order.expires_at) %> <% else %> - Expire dans <%= time_ago_in_words(order.expires_at) %> + Expire dans <%= time_ago_in_words(order.expires_at) %> <% end %>
<%= link_to retry_payment_order_path(order), method: :post, - class: "inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors duration-200" do %> + class: "inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-orange-600 text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors duration-200 whitespace-nowrap" do %> Reprendre le Paiement (€<%= order.total_amount_euros %>) <% end %>
@@ -100,11 +100,11 @@ <% end %> -
+
-

Mes Commandes

- +

Mes Commandes

+ <%= pluralize(@user_orders.count, 'commande') %>
@@ -113,40 +113,40 @@ <% if @user_orders.any? %>
<% @user_orders.each do |order| %> -
-
+
+
-
-

<%= order.event.name %>

+
+

<%= order.event.name %>

<%= order.status.humanize %>
-
+
- + <%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>
- + <%= order.event.venue_name %>
- + <%= pluralize(order.tickets.count, 'billet') %>
-
+
Order #<%= order.id %> • <%= order.created_at.strftime("%m/%d/%Y") %> • €<%= order.total_amount_euros %>
-
+
<%= link_to order_path(order), - class: "inline-flex items-center px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors duration-200" do %> - + class: "inline-flex items-center px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white text-xs sm:text-sm font-medium rounded-lg transition-colors duration-200 whitespace-nowrap" do %> + Voir les Détails <% end %>
@@ -156,11 +156,11 @@
<% order.tickets.limit(3).each do |ticket| %> -
+
<%= ticket.ticket_type.name %> - - <%= ticket.first_name %> <%= ticket.last_name %> + - <%= ticket.first_name %> <%= ticket.last_name %>
<%= link_to ticket_download_path(ticket.qr_code), @@ -182,19 +182,19 @@
<% if @user_orders.count >= 10 %> -
- <%= link_to "Voir Toutes Mes Commandes", orders_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium transition-colors duration-200" %> +
+ <%= link_to "Voir Toutes Mes Commandes", orders_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium transition-colors duration-200 text-sm" %>
<% end %> <% else %> -
-
- +
+
+
-

Aucune Commande

-

Vous n'avez pas encore passé de commandes.

- <%= link_to events_path, class: "inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200" do %> - +

Aucune Commande

+

Vous n'avez pas encore passé de commandes.

+ <%= link_to events_path, class: "inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %> + Découvrir des Événements <% end %>
@@ -204,22 +204,22 @@ <% if @user_orders.any? %> -
+
-
-

Découvrir d'autres événements

- <%= link_to events_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium text-sm transition-colors duration-200" do %> +
+

Découvrir d'autres événements

+ <%= link_to events_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium text-sm transition-colors duration-200 whitespace-nowrap" do %> Voir tout → <% end %>
<% if @upcoming_preview_events.any? %> -
+
<% @upcoming_preview_events.each do |event| %> -
-

<%= event.name %>

-
+
+

<%= event.name %>

+
<%= event.start_time.strftime("%d %B") %> @@ -229,8 +229,8 @@ <%= event.venue_name %>
-
- <%= link_to event_path(event.slug, event), class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm font-medium" do %> +
+ <%= link_to event_path(event.slug, event), class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-xs sm:text-sm font-medium" do %> Voir l'Événement → <% end %>
@@ -238,7 +238,7 @@ <% end %>
<% else %> -

Aucun événement à venir pour le moment.

+

Aucun événement à venir pour le moment.

<% end %>