qr pay updates

- subscribe to action cable from cloud and listen
- callback from cloud to local and show success payment in real time
- payment service and process payment after callback

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

@@ -247,29 +247,87 @@
 <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) %>
+    let amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
+    const ws = new WebSocket("wss://juicecorner-0mo.sx-fc.app/cable");
 
-    function checkPaymentStatus() {
-      // fetch('')
-      //   .then(response => response.json())
-      //   .then(data => {
-      //     if (data.paid) {
-      //         paymentWaiting.innerHTML = `
-      //           <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>
-      //         `;
-      //     } else {
-      //       setTimeout(checkPaymentStatus, 3000);
-      //     }
-      //   });
+    ws.onopen = () => {
+      console.log("Nagato channel connected");
+
+      ws.send(JSON.stringify({
+        command: "subscribe",
+        identifier: JSON.stringify({
+          channel: "TestChannel"
+        })
+      }));
     }
 
-    // Start checking payment status
-    checkPaymentStatus();
+    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 = `
+                  <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>
+                `;
+        ws.close();
+
+        // 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: "SAL-0qg000000671" })
+        //         })
+
+        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(null, "reload");
+              setTimeout(() => {
+                window.location.href = "/";
+              }, 3000)
+            }else {
+              console.log("error:", data);
+            }
+          }).catch((e) => console.log(e))
+        ;
+      }
+    }
+
+    ws.onerror = (e) => {
+      console.log(error)
+    }
+
+    function customer_display_view(data, status) {
+      let url = '/foodcourt/customer_view';
+
+      $.ajax({
+        type: "POST",
+        url: url,
+        data: { data: data, status: status },
+        dataType: "json",
+        success:function(result){
+        }
+      });
+    }
+
+    // cancel order
     document.querySelector('#cancel-btn').addEventListener('click', function(e) {
         const data = {
           sale_id: "<%= @sale_data.sale_id %>",