Add QR expires count down for promptpay

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);
-    }
 }

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());
     }
 }

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>
+        <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>
+        </ol>
+    </div>
 </div>
+
+<script>
+(function () {
+    let countDownInterval;
+
+    function calculateCountdown() {
+        const currentDateTime = new Date();
+        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));
+        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>