From 54bdc1edb3d0af2b90dfebe295d0cd1dd06de14d Mon Sep 17 00:00:00 2001
From: Zin Kyaw Kyaw <108650842+ajzkk@users.noreply.github.com>
Date: Wed, 18 Oct 2023 13:38:17 +0630
Subject: [PATCH 1/6] add count down for promptpay QR expires

---
 .../PromptpayAdditionalInformation.php        | 14 +--
 Controller/Callback/Threedsecure.php          |  2 +-
 .../PromptpayAdditionalInformationTest.php    |  4 +-
 .../success/promptpay_additional_info.phtml   | 99 ++++++++++++++-----
 4 files changed, 79 insertions(+), 40 deletions(-)

diff --git a/Block/Checkout/Onepage/Success/PromptpayAdditionalInformation.php b/Block/Checkout/Onepage/Success/PromptpayAdditionalInformation.php
index 125b96d8..d78d910b 100644
--- a/Block/Checkout/Onepage/Success/PromptpayAdditionalInformation.php
+++ b/Block/Checkout/Onepage/Success/PromptpayAdditionalInformation.php
@@ -14,20 +14,8 @@ protected function _toHtml()
         }
         $data['order_amount'] = $this->getOrderAmount();
         $data['image_code'] = $this->getPaymentAdditionalInformation('image_code');
-        $data['charge_expires_at'] = $this->getChargeExpiryDate();
+        $data['charge_expires_at'] = $this->getPaymentAdditionalInformation('charge_expires_at');
         $this->addData($data);
         return parent::_toHtml();
     }
-
-    /**
-     * get expiry date
-     * @return string
-     */
-    public function getChargeExpiryDate()
-    {
-        // Making sure that timezone is Thailand
-        date_default_timezone_set("Asia/Bangkok");
-        $timestamp = strtotime($this->getPaymentAdditionalInformation('charge_expires_at'));
-        return date("M d, Y h:i A", $timestamp);
-    }
 }
diff --git a/Controller/Callback/Threedsecure.php b/Controller/Callback/Threedsecure.php
index e334fdbd..2f98fe3e 100644
--- a/Controller/Callback/Threedsecure.php
+++ b/Controller/Callback/Threedsecure.php
@@ -146,7 +146,7 @@ public function execute()
             if ($result instanceof Invalid) {
                 // restoring the cart
                 $this->checkoutSession->restoreQuote();
-                return $this->processFailedCharge($result->getMessage());
+                return $this->processFailedCharge($result->getMessage(), false);
             }
 
             // Do not proceed if webhook is enabled
diff --git a/Test/Unit/PromptpayAdditionalInformationTest.php b/Test/Unit/PromptpayAdditionalInformationTest.php
index 6c4c1e79..9715d67b 100644
--- a/Test/Unit/PromptpayAdditionalInformationTest.php
+++ b/Test/Unit/PromptpayAdditionalInformationTest.php
@@ -57,9 +57,9 @@ public function testPromptpayAdditionalInformation()
         $this->checkoutSessionMock->shouldReceive('getLastRealOrder')->andReturn($this->orderMock);
         $model = new PromptpayAdditionalInformation($this->contextMock, $this->checkoutSessionMock, []);
 
-        $this->assertEquals("Sep 29, 2023 01:49 PM", $model->getChargeExpiryDate());
-
         $html = $model->toHtml();
         $this->assertNotNull($html);
+
+        $this->assertEquals("2023-09-29T06:49:35Z", $model->getChargeExpiresAt());
     }
 }
diff --git a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
index 8c4571ab..828d040c 100644
--- a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
+++ b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
@@ -1,25 +1,76 @@
-<p>
-    <?= $block->escapeHtml(__('Amount to pay')) ?>: 
-    <strong>
-        <?= $block->escapeHtml($block->getOrderAmount()) ?>
-        </b>
-    </strong>
-<p style="margin:.5rem 0"><?= $block->escapeHtml(__('PromptPay QR Code.')); ?></p>
-<div><img id="img_payment_code" src="<?= $block->escapeHtml($block->getImageCode()) ?>" /></div>
-<p>
-    Payment expires at: <?= $block->escapeHtml($block->getChargeExpiresAt()); ?>
-</p>
-<p>
-    <button class="action secondary" onclick="window.print ? window.print() : alert('Print not available')">
-    <?= $block->escapeHtml(__('Print'))?></button>
-</p>
-
-<div style="padding: 15px; margin: 20px 0; border: 1px solid black">
-    <p><strong>To make payment:</strong></p>
-    <ul style="list-style: auto; margin-bottom: 0px; padding: 0px 15px;">
-        <li>Download the QR code or open your preferred bank app to scan it</li>
-        <li>Check that the payment details are correct</li>
-        <li>Import the QR code image into your bank app or scan the QR code with your bank app to pay</li>
-        <li>Share the payment slip from your bank app to the seller</li>
-    </ul>
+<div id="qr-info">
+    <p>
+        <?= $block->escapeHtml(__('Amount to pay')) ?>: 
+        <strong>
+            <?= $block->escapeHtml($block->getOrderAmount()) ?>
+            </b>
+        </strong>
+    <p style="margin:.5rem 0"><?= $block->escapeHtml(__('PromptPay QR Code.')); ?></p>
+    <div><img id="img_payment_code" src="<?= $block->escapeHtml($block->getImageCode()) ?>" /></div>
+    <p>
+        Payment expires in: <span id="countdown"></span>
+    </p>
+    <p>
+        <button class="action secondary" onclick="window.print ? window.print() : alert('Print not available')">
+        <?= $block->escapeHtml(__('Print'))?></button>
+    </p>
+
+    <div style="padding: 15px; margin: 20px 0; border: 1px solid black">
+        <p><strong>To make payment:</strong></p>
+        <ul style="list-style: auto; margin-bottom: 0px; padding: 0px 15px;">
+            <li>Download the QR code or open your preferred bank app to scan it</li>
+            <li>Check that the payment details are correct</li>
+            <li>Import the QR code image into your bank app or scan the QR code with your bank app to pay</li>
+            <li>Share the payment slip from your bank app to the seller</li>
+        </ul>
+    </div>
 </div>
+
+<script>
+(function () {
+    let countDownInterval;
+
+    function calculateCountdown() {
+        const currentDateTime = new Date();
+        const expiresAtDateTime = new Date("<?= $block->getChargeExpiresAt(); ?>");
+        const difference = expiresAtDateTime - currentDateTime;
+        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+        return { hours, minutes, seconds };
+    }
+
+    function padZero(num) {
+        return num.toString().padStart(2, '0');
+    }
+
+    function hideQrInfo() {
+        const element = document.getElementById('qr-info')
+        element.style.display = 'none'
+    }
+
+    function updateCountdown() {
+        const countdownDisplay = document.getElementById('countdown');
+        if(!countdownDisplay) {
+            return;
+        }
+
+        const { hours, minutes, seconds } = calculateCountdown();
+
+        if (hours + minutes + seconds < 0) {
+            if(countDownInterval) {
+                clearInterval(countDownInterval)
+            }
+            hideQrInfo()
+            return;
+        }
+
+        countdownDisplay.innerHTML = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
+        if (!countDownInterval) {
+            countDownInterval = setInterval(updateCountdown, 1000);
+        }
+    }
+
+    updateCountdown()
+})()
+</script>
\ No newline at end of file

From c5b3e8c5cff16e967b320f3d6d5584b5a3b8b8c4 Mon Sep 17 00:00:00 2001
From: Zin Kyaw Kyaw <108650842+ajzkk@users.noreply.github.com>
Date: Wed, 18 Oct 2023 13:41:21 +0630
Subject: [PATCH 2/6] fix EOF and m2 code standard

---
 .../checkout/onepage/success/promptpay_additional_info.phtml  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
index 828d040c..1f86ed98 100644
--- a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
+++ b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
@@ -32,7 +32,7 @@
 
     function calculateCountdown() {
         const currentDateTime = new Date();
-        const expiresAtDateTime = new Date("<?= $block->getChargeExpiresAt(); ?>");
+        const expiresAtDateTime = new Date("<?= $block->escapeHtml($block->getChargeExpiresAt()) ?>");
         const difference = expiresAtDateTime - currentDateTime;
         const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
         const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
@@ -73,4 +73,4 @@
 
     updateCountdown()
 })()
-</script>
\ No newline at end of file
+</script>

From a77e58aad1b6da70b314bbeeba4544fda1f81b20 Mon Sep 17 00:00:00 2001
From: Zin Kyaw Kyaw <108650842+ajzkk@users.noreply.github.com>
Date: Wed, 18 Oct 2023 14:01:33 +0630
Subject: [PATCH 3/6] remove false in processFailedCharge

---
 Controller/Callback/Threedsecure.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Controller/Callback/Threedsecure.php b/Controller/Callback/Threedsecure.php
index 2f98fe3e..e334fdbd 100644
--- a/Controller/Callback/Threedsecure.php
+++ b/Controller/Callback/Threedsecure.php
@@ -146,7 +146,7 @@ public function execute()
             if ($result instanceof Invalid) {
                 // restoring the cart
                 $this->checkoutSession->restoreQuote();
-                return $this->processFailedCharge($result->getMessage(), false);
+                return $this->processFailedCharge($result->getMessage());
             }
 
             // Do not proceed if webhook is enabled

From 692d08920b38314f6d68c4a0491b4ad260342fc4 Mon Sep 17 00:00:00 2001
From: Zin Kyaw Kyaw <108650842+ajzkk@users.noreply.github.com>
Date: Wed, 18 Oct 2023 14:50:29 +0630
Subject: [PATCH 4/6] update ul to ol on listing description

---
 .../checkout/onepage/success/promptpay_additional_info.phtml  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
index 1f86ed98..1e90e63e 100644
--- a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
+++ b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
@@ -17,12 +17,12 @@
 
     <div style="padding: 15px; margin: 20px 0; border: 1px solid black">
         <p><strong>To make payment:</strong></p>
-        <ul style="list-style: auto; margin-bottom: 0px; padding: 0px 15px;">
+        <ol style="margin-bottom: 0px; padding: 0px 15px;">
             <li>Download the QR code or open your preferred bank app to scan it</li>
             <li>Check that the payment details are correct</li>
             <li>Import the QR code image into your bank app or scan the QR code with your bank app to pay</li>
             <li>Share the payment slip from your bank app to the seller</li>
-        </ul>
+        </ol>
     </div>
 </div>
 

From 07ec21001b060452f4b4fb0de7f9f6ce6faf34db Mon Sep 17 00:00:00 2001
From: Zin Kyaw Kyaw <108650842+ajzkk@users.noreply.github.com>
Date: Wed, 18 Oct 2023 19:46:23 +0630
Subject: [PATCH 5/6] show payment expired info

---
 .../onepage/success/promptpay_additional_info.phtml       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
index 1e90e63e..b223f786 100644
--- a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
+++ b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
@@ -1,4 +1,4 @@
-<div id="qr-info">
+<div id="qr-info" style="margin-bottom: 10px;">
     <p>
         <?= $block->escapeHtml(__('Amount to pay')) ?>: 
         <strong>
@@ -44,9 +44,9 @@
         return num.toString().padStart(2, '0');
     }
 
-    function hideQrInfo() {
+    function hideQrInfoAndShowPaymentExpired() {
         const element = document.getElementById('qr-info')
-        element.style.display = 'none'
+        element.innerHTML = 'Payment Expired.'
     }
 
     function updateCountdown() {
@@ -61,7 +61,7 @@
             if(countDownInterval) {
                 clearInterval(countDownInterval)
             }
-            hideQrInfo()
+            hideQrInfoAndShowPaymentExpired()
             return;
         }
 

From caad3c371554bea876f9e0647085135d5c358681 Mon Sep 17 00:00:00 2001
From: Zin Kyaw Kyaw <108650842+ajzkk@users.noreply.github.com>
Date: Thu, 19 Oct 2023 09:16:28 +0630
Subject: [PATCH 6/6] show payment expired with default alert box

---
 .../onepage/success/promptpay_additional_info.phtml         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
index b223f786..116c933f 100644
--- a/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
+++ b/view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml
@@ -46,7 +46,11 @@
 
     function hideQrInfoAndShowPaymentExpired() {
         const element = document.getElementById('qr-info')
-        element.innerHTML = 'Payment Expired.'
+        element.innerHTML = `<div class="messages">
+            <div class="message-warning warning message">
+                <span>Payment Expired.</span>
+            </div>
+        </div>`
     }
 
     function updateCountdown() {