From edccfa0f7bfff81372786f6360dbcdeb7e21f245 Mon Sep 17 00:00:00 2001
From: aungthetkhaing <aung.tk@code2lab.com>
Date: Tue, 10 Jun 2025 15:00:44 +0630
Subject: [PATCH] check payment status is not working if the ws server is down

---
 app/views/foodcourt/qrpay/init.html.erb | 253 ++++++++++++------------
 1 file changed, 132 insertions(+), 121 deletions(-)

diff --git a/app/views/foodcourt/qrpay/init.html.erb b/app/views/foodcourt/qrpay/init.html.erb
index ba8c89bc..a8139fc7 100644
--- a/app/views/foodcourt/qrpay/init.html.erb
+++ b/app/views/foodcourt/qrpay/init.html.erb
@@ -253,140 +253,151 @@
 
 <script defer type="text/javascript">
 $(document).ready(function() {
-    const $paymentWaiting = $('.payment-waiting');
-    const amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
-    const receiptNo = $('#receipt_no').text();
-    let paymentProcessed = false;
-    let fallbackTimeout;
+  const $paymentWaiting = $('.payment-waiting');
+  const amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
+  const receiptNo = $('#receipt_no').text();
+  let paymentProcessed = false;
+  let fallbackTimeout;
+  let connected = false;
 
-    function handlePaymentSuccess(){
-      if(paymentProcessed) return;
-      paymentProcessed = true;
-      clearTimeout(fallbackTimeout);
-      $('#cancel-btn').hide();
-      $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>
-      `);
+  function handlePaymentSuccess() {
+    if (paymentProcessed) return;
+    paymentProcessed = true;
+    clearTimeout(fallbackTimeout);
+    $('#cancel-btn').hide();
+    $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>
+    `);
 
-      $.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: (data) => {
-          if (data.status) {
-            customer_display_view({
-              msg: "Payment Successful",
-              paid_amount: amountToReceive,
-              receipt_no: receiptNo
-            }, "pay_success");
-
-            setTimeout(() => {
-              window.location.href = "/";
-            }, 2000);
-          }
-        },
-        error: (xhr, status, error) => {
-          console.log("Error:", error);
-        }
-      });
-    }
-
-    function checkPaymentStatus() {
-      $.ajax({
-        url: '/foodcourt/qrpay/check_payment_status',
-        method: 'POST',
-        contentType: 'application/json',
-        headers: {
-          'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
-        },
-        data: JSON.stringify({ receipt_no: receiptNo }),
-        success: function(response) {
-            if (response.status === "PAY_SUCCESS") {
-              handlePaymentSuccess();
-            } else if (response.status === "CONFIG_ERROR") {
-              clearTimeout(fallbackTimeout);
-            } else {
-              if (!paymentProcessed) {
-                fallbackTimeout = setTimeout(checkPaymentStatus, 5000);
-              }
-            }
-          },
-          error: function() {
-            if (!paymentProcessed) {
-              fallbackTimeout = setTimeout(checkPaymentStatus, 5000);
-            }
-          }
-      });
-    }
-
-    const cable = ActionCable.createConsumer("wss://juicecorner-0mo.sx-fc.app/cable");
-
-    const subscription = cable.subscriptions.create(
-      {
-          channel: "NagatoChannel",
-          receipt_no: receiptNo
+    $.ajax({
+      url: '/foodcourt/qrpay/process_payment',
+      method: 'POST',
+      contentType: 'application/json',
+      headers: {
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
       },
-      {
-        connected() {
+      data: JSON.stringify({ sale_id: "<%= @sale_data.sale_id %>" }),
+      success: (data) => {
+        if (data.status) {
+          customer_display_view({
+            msg: "Payment Successful",
+            paid_amount: amountToReceive,
+            receipt_no: receiptNo
+          }, "pay_success");
+
+          setTimeout(() => {
+            window.location.href = "/";
+          }, 2000);
+        }
+      },
+      error: (xhr, status, error) => {
+        console.log("Error:", error);
+      }
+    });
+  }
+
+  function checkPaymentStatus() {
+    $.ajax({
+      url: '/foodcourt/qrpay/check_payment_status',
+      method: 'POST',
+      contentType: 'application/json',
+      headers: {
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+      },
+      data: JSON.stringify({ receipt_no: receiptNo }),
+      success: function(response) {
+        if (response.status === "PAY_SUCCESS") {
+          handlePaymentSuccess();
+        } else if (response.status === "CONFIG_ERROR") {
+          clearTimeout(fallbackTimeout);
+        } else if (!paymentProcessed) {
+          fallbackTimeout = setTimeout(checkPaymentStatus, 5000);
+        }
+      },
+      error: function() {
+        if (!paymentProcessed) {
+          fallbackTimeout = setTimeout(checkPaymentStatus, 5000);
+        }
+      }
+    });
+  }
+
+  // ----- WebSocket Setup -----
+  const cable = ActionCable.createConsumer("wss://juicecorner-0mo.sx-fc.app/cable");
+
+  const subscription = cable.subscriptions.create(
+    {
+      channel: "NagatoChannel",
+      receipt_no: receiptNo
+    },
+    {
+      connected() {
         console.log("Nagato channel connected");
+        connected = true;
         fallbackTimeout = setTimeout(checkPaymentStatus, 30000);
-        },
+      },
 
-        received(data) {
-          console.log("Received:", data);
-          if (data.status === "PAY_SUCCESS" && !paymentProcessed) {
-            clearTimeout(fallbackTimeout);
-            handlePaymentSuccess();
-          }
-        },
+      received(data) {
+        console.log("Received:", data);
+        if (data.status === "PAY_SUCCESS" && !paymentProcessed) {
+          clearTimeout(fallbackTimeout);
+          handlePaymentSuccess();
+        }
+      },
 
-        disconnected() {
-          console.log("Nagato channel disconnected");
+      disconnected() {
+        console.log("Nagato channel disconnected");
+        if (!paymentProcessed) {
           fallbackTimeout = setTimeout(checkPaymentStatus, 30000);
         }
       }
-    );
-
-    function customer_display_view(data, status) {
-        $.post('/foodcourt/customer_view', {
-            data: data,
-            status: status
-        }, function(result) {
-        }, 'json');
     }
+  );
 
-    $('#cancel-btn').on('click', function(e) {
-        const postData = {
-            sale_id: "<%= @sale_data.sale_id %>"
-        };
+  // Fallback if WebSocket doesn't connect within 5 seconds
+  setTimeout(() => {
+    if (!connected) {
+      console.warn("WebSocket failed to connect — falling back to polling.");
+      checkPaymentStatus(); // start polling
+    }
+  }, 5000);
 
-        $.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);
-            }
-        });
+  function customer_display_view(data, status) {
+    $.post('/foodcourt/customer_view', {
+      data: data,
+      status: status
+    }, function(result) {}, 'json');
+  }
+
+  $('#cancel-btn').on('click', function(e) {
+    const postData = {
+      sale_id: "<%= @sale_data.sale_id %>"
+    };
+
+    $.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>