listen websocket with action cable consumer

app/views/foodcourt/qrpay/init.html.erb

@@ -254,70 +254,66 @@
 $(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");
+    const receiptNo = $('#receipt_no').text();
+    const cable = ActionCable.createConsumer("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()
-            })
-        }));
-    };
+    const subscription = cable.subscriptions.create(
+      {
+        channel: "TestChannel",
+        receipt_no: receiptNo
+      },
+      {
+        connected() {
+          console.log("Nagato channel connected");
+        },
 
-    ws.onmessage = function(e) {
-        const msg = JSON.parse(e.data);
-        console.log("Received:", msg);
+        received(data) {
+          console.log("Received:", data);
 
-        if (msg.type === 'confirm_subscription') {
-            console.log("This world shall know pain");
+          if (data.status === "PAY_SUCCESS") {
+            this.handlePaymentSuccess();
+          }
+        },
+
+        handlePaymentSuccess() {
+          $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 = "/";
+                }, 3000);
+              }
+            },
+            error: (xhr, status, error) => {
+              console.log("Error:", error);
+            }
+          });
         }
+      }
+    );
 
-        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>
-            `);
-
-            $.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");
-
-                        setTimeout(function() {
-                            window.location.href = "/";
-                        }, 3000);
-                        ws.close();
-                    }
-                },
-                error: function(xhr, status, error) {
-                    console.log("Error:", error);
-                }
-            });
-        }
-    };
-
-    ws.onerror = function(e) {
-        console.error("WebSocket error:", e);
-    };
 
     function customer_display_view(data, status) {
         $.post('/foodcourt/customer_view', {