wc plugin tested

esprit-woo/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-old/
+old/
+src/test.html

esprit-woo/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'caa9ae0720f92f20607c');
+<?php return array('dependencies' => array(), 'version' => '1f6fbcae425714b61ad3');

esprit-woo/esprit-pay.php

@@ -30,7 +30,7 @@ function my_gateway_init() {
         class WC_My_Gateway extends WC_Payment_Gateway {
             public function __construct() {
                 $this->id                   = 'esprit_pay';
-                $this->icon                 = apply_filters( 'esprit_pay_icon', plugins_url('/assets/icon.png', __FILE__ ) );
+                $this->icon                 = apply_filters( 'esprit_pay_icon', plugins_url('/assets/logosmall.svg', __FILE__ ) );
                 $this->has_fields           = false;
                 $this->method_title         = 'Esprit Pay';
                 $this->method_description   = 'Accept payment from anyone with a Web3 wallet. Supports bank deposits in <b>USD</b>, <b>EUR</b>, <b>GBP</b>, <b>AUD</b>, <b>CAD</b>, and <b>TWD</b>';
@@ -44,15 +44,15 @@ public function __construct() {
                 add_action( 'wp_enqueue_scripts', function() {
                     global $woocommerce;  
                     $cart_order_total = $woocommerce->cart->total;
-                    wp_enqueue_style('style',  plugin_dir_url(__FILE__)."src/style.css");
+                    wp_enqueue_style('style',  plugin_dir_url(__FILE__)."src/style.css", [], "1.6");
                     // $script_path = plugin_dir_url(__FILE__)."src/index.js";
                     $script_path = plugin_dir_url(__FILE__)."build/index.js";
-                    wp_register_script('script_handler', $script_path, [], "1.2", true);
+                    wp_register_script('script_handler', $script_path, [], "1.6", true); // change version if script cached and loading old script
                     wp_localize_script('script_handler', 'data', [
                         'amount' => $cart_order_total,
                         'address' => $this->evmaddress,
                     ]);
-                    wp_enqueue_script('script_handler', plugin_dir_url(__FILE__)."build/index.js", [], "1.2", true);
+                    wp_enqueue_script('script_handler', plugin_dir_url(__FILE__)."build/index.js", [], "1.6", true);
                 });
 
                 add_filter('woocommerce_gateway_description', function($description, $payment_id) {

esprit-woo/package.json

@@ -22,6 +22,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@gelatonetwork/relay-sdk": "^5.5.5",
     "pusher-js": "^8.4.0-rc2",
     "qrcode": "^1.5.3"
   },

esprit-woo/src/index.js

@@ -1,8 +1,9 @@
 const QRCode = require("qrcode");
 const { v4: uuidv4 } = require("uuid");
 const Pusher = require("pusher-js");
+const { GelatoRelay } = require("@gelatonetwork/relay-sdk");
 
-const pusher = new Pusher("a29a22e46d485f5f2038", { cluster: "ap3" });
+const pusher = new Pusher("56bc83149af81d0da2d4", { cluster: "ap1" });
 pusher.connection.bind("error", (e) => {
   console.error("Pusher connection error:", e);
 });
@@ -15,25 +16,62 @@ jQuery(document).ready(($) => {
 
       $(document).ajaxComplete(async () => {
         $("#place_order").hide();
-        const dataURL = await QRCode.toDataURL(`paymentId=${paymentId}&amount=0.009678&address=${data.address}&amountUSD=${data.amount}`);
+        const opts = {
+          margin: 0,
+        };
+        // example: paymentId=e6844694-b556-4133-a501-dafb915beee9&address=0x0ad11e8600b488aeF8F5E591edf32927c586883b&amount=200
+        const dataURL = await QRCode.toDataURL(`paymentId=${paymentId}&address=${data.address}&amount=${data.amount}`, opts);
         // If the qrcode element exists, then don't append it. Needed or multiple qrcodes will get appended.
-        if (!$(".esprit-qrcode").length) {
-          $(".esprit-container").append(`<img src=${dataURL} class="esprit-qrcode" />`);
+        if (!$(".esprit-container-container").length) {
           $(".esprit-container").append(
-            `<div class="esprit-text-container"><div class="esprit-text-one">Pay with Esprit and earn an instant 2% cashback!</div><div class="esprit-text-two">To pay, scan the QR code with your Esprit App and confirm the payment. Leave this window open during payment.</div></div>`
+            `<div class="esprit-container-container"><img src=${dataURL} class="esprit-qrcode" /><div class="esprit-text-container"><div class="esprit-text-one">Pay with Esprit and earn an instant 2% cashback!</div><div class="esprit-text-two">To pay, scan the QR code with your Esprit App and confirm the payment. Leave this window open during payment.</div></div></div>`
           );
         }
         // If not subscribed, then subcribe. Needed or will execute multiple subscriptions and callback will be executed multiple times.
-        // subscribe to Pusher
-        let channels = pusher.allChannels();
-        if (!channels.includes(data.paymentId)) {
-          const channel = pusher.subscribe("my-channel"); //data.paymentId
-          channel.bind("my-event", async (message) => {
-            alert(JSON.stringify(message));
-            pusher.unsubscribe("my-channel"); //data.paymentId
-            $("#place_order").show();
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-            $("#place_order").click();
+        let channels = await pusher.allChannels();
+        let channelNames = channels.map((i) => i.name);
+        if (!channelNames.includes(paymentId)) {
+          console.log("pusher channel:", paymentId);
+          const channel = pusher.subscribe(paymentId);
+          channel.bind("payment-submitted", async (pusherData) => {
+            let taskId = pusherData.message;
+            console.log("pusher taskId:", taskId); // indicate Pusher message received; this should appear once to indicate we only subscribed once
+            await pusher.unsubscribe(paymentId);
+
+            // show process payment message
+            $(".esprit-container-container").hide();
+            $(".esprit-container").append(
+              '<div class="esprit-processing-container"><div class="esprit-processing-one">Payment is processing...</div><div class="esprit-processing-two">(Please do not close this window)</div></div>'
+            );
+            // poll GelatoRelay for completed txn
+            const relay = new GelatoRelay();
+            const taskStatusPromise = new Promise((resolve, reject) => {
+              const maxRetry = 100;
+              let retryNum = 0;
+              const interval = setInterval(async () => {
+                retryNum++;
+                if (retryNum > maxRetry) {
+                  clearInterval(interval);
+                  reject("Max retry reached");
+                }
+                const taskStatus = await relay.getTaskStatus(taskId);
+                console.log("Task Status", taskStatus);
+                if (taskStatus?.taskState == "ExecSuccess") {
+                  clearInterval(interval);
+                  resolve(taskStatus);
+                }
+              }, 500);
+            });
+            const taskStatus = await taskStatusPromise;
+            console.log("taskStatus.taskState:", taskStatus.taskState);
+
+            // click Place Order button if success
+            // TODO: if taskState == "Cancelled", then display error modal
+            if (taskStatus.taskState == "ExecSuccess") {
+              $("#place_order").show();
+              await new Promise((resolve) => setTimeout(resolve, 1000)); // seems neccessary
+              $("#place_order").click();
+            }
           });
         }
       });