listen websocket with action cable consumer

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

@@ -254,29 +254,28 @@
 $(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({
+    const subscription = cable.subscriptions.create(
+      {
         channel: "TestChannel",
-                receipt_no: $receiptNo.text()
-            })
-        }));
-    };
+        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();
           }
+        },
 
-        if (msg?.message?.status === "PAY_SUCCESS") {
+        handlePaymentSuccess() {
           $paymentWaiting.html(`
             <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
             <div class="payment-success text-center">
@@ -294,30 +293,27 @@ $(document).ready(function() {
               'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
             },
             data: JSON.stringify({ sale_id: "<%= @sale_data.sale_id %>" }),
-                success: function(data) {
+            success: (data) => {
               if (data.status) {
                 customer_display_view({
                   msg: "Payment Successful",
                   paid_amount: amountToReceive,
-                            receipt_no: $receiptNo.text()
+                  receipt_no: receiptNo
                 }, "pay_success");
 
-                        setTimeout(function() {
+                setTimeout(() => {
                   window.location.href = "/";
                 }, 3000);
-                        ws.close();
               }
             },
-                error: function(xhr, status, error) {
+            error: (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', {