From 0f8d8da0466f3d86198545880a51e7a40b2629e1 Mon Sep 17 00:00:00 2001
From: aungthetkhaing <aung.tk@code2lab.com>
Date: Wed, 28 May 2025 11:16:11 +0630
Subject: [PATCH] fix layout

---
 app/views/foodcourt/qrpay/init.html.erb       | 171 +++++++++---------
 .../second_display/_second_display.html.erb   |   2 +-
 app/views/layouts/_read_modal.html.erb        |   2 +-
 3 files changed, 85 insertions(+), 90 deletions(-)

diff --git a/app/views/foodcourt/qrpay/init.html.erb b/app/views/foodcourt/qrpay/init.html.erb
index 67ec371e..8901f7e5 100644
--- a/app/views/foodcourt/qrpay/init.html.erb
+++ b/app/views/foodcourt/qrpay/init.html.erb
@@ -195,10 +195,6 @@
           </tfooter>
         </table>
       </div>
-     <!-- <div> -->
-  <!-- <INPUT TYPE="Button" class='btn btn-primary' VALUE="Reprint" onClick="" style='width:120px'/>
-  <INPUT TYPE="Submit" class='btn btn-primary' VALUE="CANCEL" action="foodcourt/index" style='width:120px'/> -->
-  <!-- </div> -->
 </div>
 </div>
 
@@ -255,107 +251,106 @@
 </div>
 
 <script defer type="text/javascript">
-  document.addEventListener('DOMContentLoaded', function() {
-    const paymentWaiting = document.querySelector('.payment-waiting');
-    let amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
-    const receipt_no = document.querySelector('#receipt_no').textContent;
+$(document).ready(function() {
+    const $paymentWaiting = $('.payment-waiting');
+    const amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
+    const $receiptNo = $('#receipt_no');
     const ws = new WebSocket("wss://juicecorner-0mo.sx-fc.app/cable");
 
+    ws.onopen = function() {
+        console.log("Nagato channel connected");
+        ws.send(JSON.stringify({
+            command: "subscribe",
+            identifier: JSON.stringify({
+                channel: "TestChannel",
+                receipt_no: $receiptNo.text()
+            })
+        }));
+    };
 
+    ws.onmessage = function(e) {
+        const msg = JSON.parse(e.data);
+        console.log("Received:", msg);
 
-    ws.onopen = () => {
-      console.log("Nagato channel connected");
+        if (msg.type === 'confirm_subscription') {
+            console.log("This world shall know pain");
+        }
 
-      ws.send(JSON.stringify({
-        command: "subscribe",
-        identifier: JSON.stringify({
-          channel: "TestChannel",
-          // receipt_no: receipt_no
-        })
-      }));
-    }
-
-    ws.onmessage = (e) => {
-      const msg = JSON.parse(e.data);
-      console.log("Received:", msg)
-
-      if(msg.type === 'confirm_subscription') {
-        console.log("This world shall know pain");
-      }
-
-      if(msg?.message?.status === "PAY_SUCCESS") {
-        paymentWaiting.innerHTML = `
-                  <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
-                  <div class="payment-success text-center">
+        if (msg?.message?.status === "PAY_SUCCESS") {
+            $paymentWaiting.html(`
+                <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
+                <div class="payment-success text-center">
                     <i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
                     <h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
                     <p>Amount Received: ${amountToReceive}</p>
-                  </div>
-                `;
+                </div>
+            `);
 
-        fetch('/foodcourt/qrpay/process_payment', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
-          },
-          body: JSON.stringify({ sale_id: "<%= @sale_data.sale_id %>" })
-        }).then((res) => res.json())
-          .then((data) => {
-            if(data.status) {
-              customer_display_view({msg: "Payment Successful", paid_amount: amountToReceive,receipt_no:receipt_no}, "pay_success");
-              setTimeout(() => {
-                window.location.href = "/";
-              }, 3000)
-            }else {
-              console.log("error:", data);
-            }
-          }).catch((e) => console.log(e))
-        ;
-      }
-    }
+            $.ajax({
+                url: '/foodcourt/qrpay/process_payment',
+                method: 'POST',
+                contentType: 'application/json',
+                headers: {
+                    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+                },
+                data: JSON.stringify({ sale_id: "<%= @sale_data.sale_id %>" }),
+                success: function(data) {
+                    if (data.status) {
+                        customer_display_view({
+                            msg: "Payment Successful",
+                            paid_amount: amountToReceive,
+                            receipt_no: $receiptNo.text()
+                        }, "pay_success");
 
-    ws.onerror = (e) => {
-      console.log(error)
-    }
+                        setTimeout(function() {
+                            window.location.href = "/";
+                        }, 3000);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.log("Error:", error);
+                }
+            });
+        }
+    };
+
+    ws.onerror = function(e) {
+        console.error("WebSocket error:", e);
+    };
 
     function customer_display_view(data, status) {
-      let url = '/foodcourt/customer_view';
-
-      console.log(data);
-
-      $.ajax({
-        type: "POST",
-        url: url,
-        data: { data: data, status: status },
-        dataType: "json",
-        success:function(result){
-        }
-      });
+        $.post('/foodcourt/customer_view', {
+            data: data,
+            status: status
+        }, function(result) {
+            // Optional success handler
+        }, 'json');
     }
 
-    // cancel order
-    document.querySelector('#cancel-btn').addEventListener('click', function(e) {
-        const data = {
-          sale_id: "<%= @sale_data.sale_id %>",
+    // Cancel order
+    $('#cancel-btn').on('click', function(e) {
+        const postData = {
+            sale_id: "<%= @sale_data.sale_id %>"
         };
 
-        fetch('/foodcourt/qrpay/cancel', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
-          },
-          body: JSON.stringify(data)
-        }).then(function(res) {
-          customer_display_view(null,"reload");
-          return  res.json();
-        }).then(function(data) {
-            if(data.status) {
-
-              window.location.href = "/";
+        $.ajax({
+            url: '/foodcourt/qrpay/cancel',
+            method: 'POST',
+            contentType: 'application/json',
+            headers: {
+                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+            },
+            data: JSON.stringify(postData),
+            success: function(data) {
+                if (data.status) {
+                    customer_display_view(null, "reload");
+                    window.location.href = "/";
+                }
+            },
+            error: function(xhr, status, error) {
+                console.log("Error:", error);
             }
         });
     });
-  });
+});
 </script>
diff --git a/app/views/foodcourt/second_display/_second_display.html.erb b/app/views/foodcourt/second_display/_second_display.html.erb
index 5ffb8985..2184910e 100644
--- a/app/views/foodcourt/second_display/_second_display.html.erb
+++ b/app/views/foodcourt/second_display/_second_display.html.erb
@@ -66,7 +66,7 @@
               <p class="text-muted">Use your mobile wallet app</p>
             </div>
 
-            <div id="qr-payment-container" class="mx-auto text-center p-3 bg-white rounded border" style="max-width: 400px;">
+            <div id="qr-payment-container" class="mx-auto text-center p-3 bg-white rounded border" style="max-width: 300px;">
               <!-- Added mx-auto to center this block within its col-6 parent -->
               <div id="qr-code" class="mb-2">
                 <div id="qrpay_svg">
diff --git a/app/views/layouts/_read_modal.html.erb b/app/views/layouts/_read_modal.html.erb
index d53f4dc9..4c3bda13 100644
--- a/app/views/layouts/_read_modal.html.erb
+++ b/app/views/layouts/_read_modal.html.erb
@@ -305,7 +305,7 @@ document.addEventListener('DOMContentLoaded', function () {
         .then(result => {
           booking_id = result.booking_id;
           console.log(result);
-          window.location.href = `/foodcourt/${result.sale_id}/qrpay/dynamic_init`;
+          window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
 
           if (document.getElementById("server_mode").value !== "cloud" && second_display_lookup === 2) {
             // customer_display_view(null, "reload");