feat : redirect to sale page if MMQR is being selected

feat : add MMQR button in payment selection fix : add create_pay params in add_order_function
2025-05-21 09:35:00 +06:30
parent d02da668b8
commit 67dfd6f1ce
3 changed files with 174 additions and 24 deletions
--- a/app/views/foodcourt/addorders/create.json.jbuilder
+++ b/app/views/foodcourt/addorders/create.json.jbuilder
@@ -2,6 +2,7 @@ if @status == true
  json.status :success
  json.booking_id @booking.id
  json.order_id   @order.id
+  json.sale_id @booking.sale_id
  json.order_items do
    json.array! @order.order_items, :item_code, :item_name, :qty, :options, :remark
  end
--- a/app/views/foodcourt/addorders/detail.html.erb
+++ b/app/views/foodcourt/addorders/detail.html.erb
@@ -795,4 +795,92 @@ showHideNavbar(webview);
 <% end %>
 });

+/* MMQR INTEGRATION **/
+$(document).on('click','#mmqr_btn', function(event){
+  const paymentMethod = 'MMQR';
+  create_order($(this),paymentMethod);
+})
+
+function create_order(data,paymentMethod = "") {
+  $("#oqs_loading_wrapper").show();
+  var cashier_type = $("#link_type").val();
+  localStorage.setItem("cashier_type", cashier_type);
+  quick_service = window.location.href.indexOf("quick_service");
+  localStorage.setItem("quick_service", quick_service);
+  food_court = window.location.href.indexOf("food_court");
+  localStorage.setItem("food_court", food_court);
+  if (quick_service != -1 || food_court != -1) {
+    type = cashier_type;
+    var table_type = $("#table_type").text();
+    var table_id = $("#table_id").val();
+    var customer_id = $("#customer_id").val();
+    var booking_id = $("#booking_id").text();
+    var ajax_url = "addorders/create";
+  } else {
+    type = "cashier";
+    var table_type = $("#table_type").text();
+    var table_id = $("#table_id").text();
+    var customer_id = $("#customer_id").text();
+    var booking_id = $("#booking_id").text();
+    var ajax_url = "../addorders/create";
+  }
+  var order_items = JSON.stringify(get_order_item_rows());
+  if (booking_id.length > 0) {
+    var params = {
+      order_source: type,
+      order_type: "dine_in",
+      customer_id: customer_id,
+      guest_info: "",
+      booking_id: booking_id,
+      table_id: table_id,
+      order_items: order_items,
+      create_type: "create_pay",
+    };
+  } else {
+    var params = {
+      order_source: type,
+      order_type: "dine_in",
+      customer_id: customer_id,
+      guest_info: "",
+      table_id: table_id,
+      order_items: order_items,
+      create_type: "create_pay",
+    };
+  }
+
+  $.ajax({
+    type: "POST",
+    url: ajax_url,
+    data: params,
+    dataType: "json",
+    success: function (result) {
+      booking_id = result.booking_id;
+      console.log(result);
+      if (type == "quick_service") {
+        window.location.href = "/origami/quick_service";
+      }else if (type == "food_court" && paymentMethod == "") {
+        window.location.href =
+          "/foodcourt/app_orders?pending_id=" + booking_id;
+      }else if (type == "food_court" && paymentMethod == "MMQR") {
+        window.location.href =
+          `/foodcourt/sale/${result.sale_id}/${cashier_type}/payment`;
+      }else {
+        if (table_type == "Table") {
+          window.location.href = "/origami/table/" + table_id;
+        } else {
+          window.location.href = "/origami/room/" + table_id;
+        }
+      }
+      if ($("#server_mode").val() != "cloud" && second_display_lookup == 2) {
+        customer_display_view(null, "reload");
+      }
+    },
+    error: function (XMLHttpRequest, textStatus, errorThrown) {
+      $("#oqs_loading_wrapper").hide();
+      $("#create_order").prop("disabled", false);
+      $("#create_pay_order").prop("disabled", false);
+      swal("Error", "Status: " + textStatus, "error");
+    },
+  });
+}
 </script>
--- a/app/views/layouts/_read_modal.html.erb
+++ b/app/views/layouts/_read_modal.html.erb
@@ -1,28 +1,8 @@
-<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>
-
 <style>
  #read_modal {
-  text-align: center;
-  padding: 0!important;
-}
+    text-align: center;
+    padding: 0!important;
+  }

  #read_modal:before {
    display: inline-block;
@@ -35,5 +15,86 @@
    display: inline-block;
    text-align: left;
    vertical-align: middle;
+    max-width: 90%;
  }
-</style>
+
+  .payment-option-btn {
+    padding: 20px;
+    border: 2px solid #54A5AF;
+    border-radius: 12px;
+    background-color: white;
+    margin: 10px;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 180px;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .payment-option-btn#mmqr_btn:hover {
+    background-color: #f0f8fa;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  }
+
+  .payment-option-btn:active {
+    transform: translateY(1px);
+  }
+
+  .payment-option-btn img {
+    height: 100px;
+    width: auto;
+    margin-bottom: 12px;
+    transition: transform 0.3s ease;
+    object-fit: contain;
+    display: block;
+  }
+
+  .payment-option-btn#mmqr_btn:hover img {
+    transform: scale(1.05);
+  }
+
+  .payment-option-btn span {
+    font-size: 16px;
+    font-weight: 600;
+    color: #2a626b;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  #close {
+    padding: 10px 40px;
+    font-size: 16px;
+    border-radius: 25px;
+    margin-top: 15px;
+    font-weight: 600;
+  }
+</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;">Chose Payment Method</h4>
+            </div>
+            <div class="modal-body">
+                <p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or pay with MMQR</p>
+                <div style="text-align: center; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
+                    <button class="payment-option-btn" id="mmqr_btn">
+                        <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px;">
+                        <span>MMQR</span>
+                    </button>
+                    <button class="payment-option-btn">
+                        <img src="/image/nfc.png" alt="NFC Payment" style="max-width: 120px;">
+                        <span>NFC Reader</span>
+                    </button>
+                </div>
+            </div>
+            <div class="modal-footer" style="justify-content: center;">
+                <button type="button" class="btn btn-danger btn-lg" id="close">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>