From 11458013dd45ef24496a0124ea7221ac7f3a5f43 Mon Sep 17 00:00:00 2001
From: sreyleak <sreyleak.deth19@gmail.com>
Date: Tue, 26 Nov 2024 11:52:03 +0700
Subject: [PATCH] Close #2087 Improve UI in order_mailer to preview the QR code
 in the admin panel

---
 .../spree_cm_commissioner/orders_controller.rb     |  1 +
 app/mailers/spree/order_mailer_decorator.rb        |  1 +
 .../spree/order_mailer/confirm_email.html.erb      |  2 +-
 .../order_mailer/_greeting.html.erb                |  9 ++++++++-
 .../order_mailer/_mailer_stylesheets.html.erb      | 14 +++++++++++++-
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/controllers/spree_cm_commissioner/orders_controller.rb b/app/controllers/spree_cm_commissioner/orders_controller.rb
index 0c261383e..06a3e3d8f 100644
--- a/app/controllers/spree_cm_commissioner/orders_controller.rb
+++ b/app/controllers/spree_cm_commissioner/orders_controller.rb
@@ -4,6 +4,7 @@ class SpreeCmCommissioner::OrdersController < Spree::BaseController
 
   def show
     @order = Spree::Order.search_by_qr_data!(params[:id])
+    @show_qr = true
     @product_type = @order.products.first&.product_type || 'accommodation'
 
     render :template => 'spree/order_mailer/confirm_email'
diff --git a/app/mailers/spree/order_mailer_decorator.rb b/app/mailers/spree/order_mailer_decorator.rb
index d4fa66778..71ee7e177 100644
--- a/app/mailers/spree/order_mailer_decorator.rb
+++ b/app/mailers/spree/order_mailer_decorator.rb
@@ -14,6 +14,7 @@ def confirm_email(order, resend: false)
 
       @current_store = @order.store
       @product_type = @order.products.first&.product_type || 'accommodation'
+      @show_qr = false
 
       subject = (resend ? "[#{Spree.t(:resend).upcase}] " : '')
       subject += "#{@current_store&.name} Booking Confirmation ##{@order.number}"
diff --git a/app/views/spree/order_mailer/confirm_email.html.erb b/app/views/spree/order_mailer/confirm_email.html.erb
index 38aabe260..6e6dd65aa 100644
--- a/app/views/spree/order_mailer/confirm_email.html.erb
+++ b/app/views/spree/order_mailer/confirm_email.html.erb
@@ -6,7 +6,7 @@
       <tr>
          <td>
             <div class="f-fallback">
-               <%= render 'spree_cm_commissioner/order_mailer/greeting', order: @order%>
+               <%= render 'spree_cm_commissioner/order_mailer/greeting', order: @order, show_qr: @show_qr %>
                <div class="content">
                   <%= render 'spree_cm_commissioner/order_mailer/order_total', order: @order %>
                   <%= render 'spree_cm_commissioner/order_mailer/your_booking', order: @order, show_booking_header: true %>
diff --git a/app/views/spree_cm_commissioner/order_mailer/_greeting.html.erb b/app/views/spree_cm_commissioner/order_mailer/_greeting.html.erb
index 2e5ae83db..96174c2b4 100644
--- a/app/views/spree_cm_commissioner/order_mailer/_greeting.html.erb
+++ b/app/views/spree_cm_commissioner/order_mailer/_greeting.html.erb
@@ -1,4 +1,4 @@
-<div id="greeting-card">
+<div id="greeting-card" class="content-cell flex">
   <div>
     <%= image_tag "mailer/bookme-plus.png", class: "icon-bookme-plus"%>
     <div class="booking-confirm"><%= I18n.t('mail.order_mailer.booking_confirm')%></div>
@@ -7,4 +7,11 @@
       <%= I18n.t('mail.order_mailer.booking_event', order_number: order.number || 'NA') %>
     </div>
   </div>
+
+  <% if show_qr %>
+    <div class="qr-container">
+      <%= image_tag main_app.url_for("/i/#{order.qr_data}"), class: 'qr-code' %>
+      <p>Show your QR to enter</p>
+    </div>
+  <% end %>
 </div>
diff --git a/app/views/spree_cm_commissioner/order_mailer/_mailer_stylesheets.html.erb b/app/views/spree_cm_commissioner/order_mailer/_mailer_stylesheets.html.erb
index b58e1129f..5fa6a2644 100644
--- a/app/views/spree_cm_commissioner/order_mailer/_mailer_stylesheets.html.erb
+++ b/app/views/spree_cm_commissioner/order_mailer/_mailer_stylesheets.html.erb
@@ -80,7 +80,19 @@
     font-style: normal;
     font-weight: 700;
     line-height: 1.75rem;
-    margin-bottom: 0.25rem;    margin-top: 1.25rem;
+    margin-bottom: 0.25rem;
+    margin-top: 1.25rem;
+  }
+  #confirm-email .qr-container {
+    padding: 20px 20px 0;
+    text-align: center;
+  }
+
+  #confirm-email .qr-container .qr-code {
+    width: 200px;
+    border-radius: 26px;
+    background-color: #fff;
+    margin-bottom: 12px;
   }
   #confirm-email #greeting-card .booking-confirm {
     font-size: 1.5rem;