Merge pull request #454 from omise/release-v3.5.0

Bump v3.5.0

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

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [v3.5.0 _(Oct, 24, 2023)_](https://github.com/omise/omise-magento/releases/tag/v3.5.0)
+- Added QR expires count down for promptpay. (PR: [#453](https://github.com/omise/omise-magento/pull/453))
+
 ## [v3.4.0 _(Oct, 11, 2023)_](https://github.com/omise/omise-magento/releases/tag/v3.4.0)
 - Added dynamic webhooks with feature flag. (PR: [#450](https://github.com/omise/omise-magento/pull/450))
 

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

composer.json

@@ -9,7 +9,7 @@
             "email": "[email protected]"
         }
     ],
-    "version": "3.4.0",
+    "version": "3.5.0",
     "minimum-stability": "stable",
     "type": "magento2-module",
     "license": "MIT",

etc/module.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
-    <module name="Omise_Payment" setup_version="3.4.0">
+    <module name="Omise_Payment" setup_version="3.5.0">
       <sequence>
         <module name="Magento_Sales"/>
         <module name="Magento_Payment"/>

view/frontend/templates/checkout/onepage/success/promptpay_additional_info.phtml

@@ -1,25 +1,80 @@
-<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" style="margin-bottom: 10px;">
+    <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 hideQrInfoAndShowPaymentExpired() {
+        const element = document.getElementById('qr-info')
+        element.innerHTML = `<div class="messages">
+            <div class="message-warning warning message">
+                <span>Payment Expired.</span>
+            </div>
+        </div>`
+    }
+
+    function updateCountdown() {
+        const countdownDisplay = document.getElementById('countdown');
+        if(!countdownDisplay) {
+            return;
+        }
+
+        const { hours, minutes, seconds } = calculateCountdown();
+
+        if (hours + minutes + seconds < 0) {
+            if(countDownInterval) {
+                clearInterval(countDownInterval)
+            }
+            hideQrInfoAndShowPaymentExpired()
+            return;
+        }
+
+        countdownDisplay.innerHTML = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
+        if (!countDownInterval) {
+            countDownInterval = setInterval(updateCountdown, 1000);
+        }
+    }
+
+    updateCountdown()
+})()
+</script>