updates

- qrpay selection when add orders
- minor fixes

app/controllers/foodcourt/qrpay_controller.rb

@@ -249,6 +249,98 @@ class Foodcourt::QrpayController < BaseFoodcourtController
     end
   end
 
+  def req_bill
+    sale_data =[]
+    customer_id = params[:customer_id]
+    if !ShiftSale.current_shift.nil?
+      order_id = params[:order_id]
+      order = Order.find(order_id)
+      booking = order.booking
+      if Customer.exists?(customer_id: customer_id)
+        booking.orders.update_all(customer_id: customer_id)
+      end
+      if booking.checkin_at.utc > Time.now.utc && booking.checkout_at.nil?
+        @status = false
+        @error_message = "Operation failed, Could not request bill!"
+      else
+        table = DiningFacility.find_by(id: booking.dining_facility_id)
+
+        if booking.sale_id.nil?
+          if sale_data = Sale.generate_invoice_from_booking(booking, current_login_employee, current_user, order.source, params[:current_checkin_induties_count])
+            # in-duty update
+            in_duties = InDuty.where("booking_id=?", booking.id)
+            if !in_duties.empty?
+              in_duties.each do |in_duty|
+                induty = InDuty.find(in_duty.id)
+                induty.sale_id = sale_data.sale_id
+                induty.out_time = Time.now
+                induty.save
+              end
+            end
+
+            action_by = current_user.name
+            type = "REQUEST_BILL"
+
+            remark = "Request bill Receipt No #{sale_data.receipt_no}"
+            sale_audit = SaleAudit.record_audit_sale(sale_data.sale_id,remark,action_by,type )
+
+            # Promotion Activation
+            Promotion.promo_activate(sale_data)
+
+            #bill channel
+            if ENV["SERVER_MODE"] == 'cloud'
+              from = request.host
+            else
+              from = ""
+            end
+
+            if ["quick_service", "cashier"].include? order.source
+              ActionCable.server.broadcast "bill_channel", table: table, from: from
+            end
+
+            unless ["quick_service", "food_court"].include? order.source
+              #check checkInOut pdf print
+              checkout_time = Lookup.collection_of('checkout_time')
+              if !booking.dining_facility_id.nil?
+                terminal = DiningFacility.find_by_id(booking.dining_facility_id)
+                cashier_terminal = CashierTerminal.find_by_id(terminal.zone_id)
+
+                if (!checkout_time.empty?) && (ENV["SERVER_MODE"] != "cloud") #no print in cloud server
+                  unique_code = "CheckInOutPdf"
+                  printer = PrintSetting.find_by_unique_code(unique_code)
+
+                  # print when complete click
+                  order_queue_printer = Printer::OrderQueuePrinter.new(printer)
+
+                  if !printer.nil?
+                    order_queue_printer.print_check_in_out(printer, cashier_terminal, booking, table)
+                  end
+                end
+              end
+            end
+            @status = true
+            sale_id = sale_data.sale_id
+          else
+            @status = false
+            sale_id = nil
+          end
+        else
+          @status = true
+          sale_id = booking.sale_id
+        end
+      end
+
+      respond_to do |format|
+        format.json { render :json => { :status => @status, :sale_id => sale_id } }
+      end
+    else
+      respond_to do |format|
+        format.json {
+          render :json => { :status => false, :error_message => "No Current Open Shift for This Employee" } }
+      end
+    end
+  end
+
   def test_pay
   end
 

app/views/foodcourt/orders/_read_modal.html.erb

@@ -0,0 +1,269 @@
+
+<style>
+  /* Base Styling */
+  .payment-modal {
+    border-radius: 18px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+  }
+
+  .payment-header {
+    background: #f8fbfc;
+    padding: 1.5rem;
+    border-bottom: 2px solid #e0f0f3;
+    text-align: center;
+  }
+
+  .merchant-logo {
+    height: 65px;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 2px 4px rgba(84,165,175,0.1));
+  }
+
+  .modal-title {
+    color: #2a626b;
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+
+  /* Amount Display */
+  .amount-section {
+    background: #54A5AF15;
+    padding: 1.2rem;
+    margin: 0 1.5rem;
+    border-radius: 12px;
+    border: 2px dashed #54A5AF40;
+  }
+
+  .total-amount {
+    color: #2a626b;
+    font-size: 1.8rem;
+    font-weight: 800;
+    margin: 0;
+  }
+
+  .amount-label {
+    color: #678c93;
+    font-size: 0.95rem;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Payment Options Grid */
+  .payment-grid {
+    display: flex;
+    flex-direction: column;
+    /* grid-template-columns: repeat(1, 1fr); */
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .payment-card {
+    background: white;
+    border: 2px solid #e0f0f3;
+    border-radius: 14px;
+    padding: 1.5rem;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+  }
+
+  .payment-card:hover {
+    transform: translateY(-3px);
+    border-color: #54A5AF;
+    box-shadow: 0 6px 20px rgba(84,165,175,0.1);
+  }
+
+  .payment-card.active {
+    border-color: #54A5AF;
+    background: #f8fbfc;
+  }
+
+  .payment-icon {
+    font-size: 2.2rem;
+    color: #54A5AF;
+    margin-bottom: 1rem;
+  }
+
+  .payment-label {
+    color: #2a626b;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+
+  .payment-description {
+    color: #678c93;
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  /* Footer Actions */
+  .modal-footer {
+    background: #f8fbfc;
+    padding: 1.2rem;
+    display: flex;
+    justify-content: space-between;
+    border-top: 2px solid #e0f0f3;
+  }
+
+  .btn-cancel {
+    background: transparent;
+    border: 2px solid #e0f0f3;
+    color: #678c93;
+    padding: 0.8rem 1.5rem;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+  }
+
+  .btn-cancel:hover {
+    border-color: #ff4757;
+    color: #ff4757;
+  }
+
+  .btn-proceed {
+    background: transparent;
+    border: 2px solid #e0f0f3;
+    color: #678c93;
+    padding: 0.8rem 1.5rem;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  .btn-proceed:hover {
+    border-color: #ff4757;
+    color: #ff4757;
+  }
+  .payment-card#read_nfc {
+      opacity: 0.6;
+      cursor: pointer;
+      /* cursor: not-allowed; */
+  }
+</style>
+
+<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
+    <div class="modal-dialog read-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header" style="background-color: #54A5AF;padding-top:10px !important;">
+                <h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Customer Detail</h4>
+            </div>
+            <div class="modal-body">
+                <p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or Scan Code</p>
+                <div style="text-align: center;">
+                    <img src="/image/barcode.png" style="height: 200px">
+                    <img src="/image/nfc.png" style="height: 200px"><br>
+                </div>
+            </div>
+            <div class="modal-footer" style="justify-content: center;">
+                <button type="button" class="btn btn-danger" id="close" >Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade payment-modal" id="payment_modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="payment-header">
+                <h2 class="modal-title">Payment Options</h2>
+        </div>
+      <div class="payment-grid">
+        <div class="payment-card" id="dynamic_qr">
+          <div class="payment-icon text-center">
+              <img src="/image/mmqr.webp" width="100" height="100" />
+          </div>
+          <div class="payment-label text-center">Click here to pay with MMQR</div>
+        </div>
+
+        <div class="text-center text-bold text-muted">
+            (Or)
+        </div>
+
+        <!-- Read NFC Card -->
+        <button type="button" id="read_nfc" data-toggle="modal" data-target="#read_modal">
+            <div class="payment-card disabled" id="read_nfc" style="grid-column: span 2;">
+              <div class="payment-icon text-center">
+                  <img src="/image/nfc.png" width="100" height="100" />
+              </div>
+              <div class="payment-label text-center">Tap your NFC-enabled card or device</div>
+            </div>
+        </button>
+
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn-cancel" id="close">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script defer type="text/javascript">
+document.addEventListener('DOMContentLoaded', function () {
+    const paymentCards = document.querySelectorAll('.payment-card:not(.disabled)');
+    const cancelButton = document.querySelector('.btn-cancel');
+
+    $('#read_modal').hide();
+    $('.modal-backdrop.fade').css('display', 'none');
+
+    $('#read_nfc').on('hide.bs.modal', function() {
+      $('#payment_modal').css('display', 'none');
+      $('.modal-backdrop.fade').css('display', 'none');
+    });
+
+    $("#read_nfc").on('click', function() {
+      $('#payment_modal').css('display', 'none');
+      $('.modal-backdrop.fade').css('display', 'none');
+    });
+
+
+    cancelButton.addEventListener('click', function () {
+        console.log("Action: Cancel payment.");
+
+        paymentCards.forEach(c => c.classList.remove('active'));
+
+    });
+
+    const disabledNfcCard = document.querySelector('.payment-card.disabled');
+
+    document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
+      initDynamicQrPay();
+    });
+
+    function initDynamicQrPay() {
+        const paymentMethod = 'MMQR';
+        const $serverMode = $('#server_mode');
+        const $createOrderBtn = $('#create_order');
+        const $createPayOrderBtn = $('#create_pay_order');
+
+        $.ajax({
+            url: '/foodcourt/qrpay/req_bill?order_id=' + $('#receipt_no').text().trim() + '&customer_id=' + $('input[name="customer_id"]').val(),
+            method: 'GET',
+            success: function(result) {
+                console.log(result);
+                if(! result.status) {
+                  alert('Something went wrong');
+                  return;
+                }
+
+                window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
+                if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
+                    // customer_display_view(null, "reload");
+                }
+            },
+            error: function(xhr) {
+                $('#oqs_loading_wrapper').hide();
+                $createOrderBtn.prop('disabled', false);
+                $createPayOrderBtn.prop('disabled', false);
+
+                const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
+                swal("Error", errorMsg, "error");
+            }
+        });
+    }
+  });
+</script>

app/views/foodcourt/orders/app_orders.html.erb

@@ -305,12 +305,18 @@
               <% end%>
             </div>
             <div class="row customer_detail p-l-5 p-r-5">
-              <div class="col-lg-6 col-md-6 col-sm-6">
+              <div class="col-lg-6 col-md-6 col-sm-6" >
                 <% if @status == 'sale' %>
-                  &nbsp; Customer: <%= @pending.customer.name rescue "-" %>
-                <% else%>
-                  &nbsp; Customer: <%= @pending.orders.first.customer.name rescue "-" %>
-                <% end%>
+                  <input type="hidden" name="customer_id" value="<%= @pending.customer.customer_id rescue "-" %>" />
+                  <span>
+                    Customer: <%= @pending.customer.name rescue "-" %>
+                  </span>
+                <% else %>
+                  <input type="hidden" name="customer_id" value="<%= @pending.orders.first.customer_id rescue "-" %>" />
+                  <span>
+                    Customer: <%= @pending.orders.first.customer.name rescue "-" %>
+                  </span>
+                <% end %>
               </div>
             </div>
           </div>
@@ -428,7 +434,7 @@
           <hr>
           <!-- <button type="button" id="request_bills" class="btn btn-block bg-blue waves-effect">Req.Bill</button> -->
           <% order_id = @pending.try(:orders).try(:first).try(:order_id) if @status == 'order' %>
-          <button type="button" class="btn btn-block bg-blue waves-effect req_bill" data-toggle="modal" data-target="#read_modal" >Req.Bill</button>
+          <button type="button" class="btn btn-block bg-blue waves-effect req_bill" data-toggle="modal" data-target="#payment_modal" >Req.Bill</button>
           <button type="button" id="order_cancel" class="btn btn-block bg-red waves-effect" >CANCEL</button>
           <input type="hidden" id="save_order_id" value="<%=order_id%>">
         <%end%>
@@ -510,10 +516,18 @@
     </div>
   </div>
 </div>
-<%= render "layouts/read_modal" %>
+<%= render "read_modal" %>
 
 <script type="text/javascript">
   var cashier_type = 'food_court';
+  $("#read_modal").on("hidden.bs.modal", function (e) {
+    $("#read_modal").css("display", "none");
+  });
+
+  $("#payment_modal").on("hidden.bs.modal", function (e) {
+    $("#read_modal").css("display", "none");
+  });
+
   $(document).ready( function() {
     if ("<%= @pending %>" || "<%= @booking %>") { // adjust column gap
       $('.card-columns').css('column-gap', '0.3rem')

config/routes.rb

@@ -751,6 +751,7 @@ scope "(:locale)", locale: /en|mm/ do
     get 'qrpay/test-payment' => 'qrpay#test_payment'
     post 'qrpay/process_payment' => 'qrpay#create'
     post 'qrpay/check_payment_status' => 'qrpay#check_payment_status'
+    get 'qrpay/req_bill' => 'qrpay#req_bill'
   end
 end
 end