add expires in count down for promptpay QR

omise · Oct 12, 2023 · 25f8c76 · 25f8c76
1 parent a0475fd
commit 25f8c76
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 3 deletions.
diff --git a/assets/javascripts/omise-promptpay-count-down.js b/assets/javascripts/omise-promptpay-count-down.js
@@ -0,0 +1,43 @@
+(function () {
+    let countDownInterval;
+
+    function calculateCountdown() {
+        const currentDateTime = new Date();
+        const expiresAtDateTime = new Date(omise.qr_expires_at);
+        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 updateCountdown(fromInterval = true) {
+        const countdownDisplay = document.getElementById('countdown');
+        if(!countdownDisplay) {
+            return;
+        }
+
+        const { hours, minutes, seconds } = calculateCountdown();
+
+        if (hours + minutes + seconds < 0) {
+            // To prevent infinite loading, we need to reload and clear interval 
+            // only when it is from setInterval function.
+            if (fromInterval) {
+                clearInterval(countDownInterval)
+                window.location.reload()
+            }
+            return;
+        }
+
+        countdownDisplay.innerHTML = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
+        if (!countDownInterval) {
+            countDownInterval = setInterval(updateCountdown, 1000);
+        }
+    }
+
+    updateCountdown(false)
+})()
diff --git a/includes/gateway/class-omise-payment-promptpay.php b/includes/gateway/class-omise-payment-promptpay.php
@@ -46,6 +46,23 @@ private function register_omise_promptpay_scripts() {
 		);
 	}
 
+	/**
+	 * register scripts for count down
+	 */
+	private function register_omise_promptpay_count_down_script($expiresAt) {
+		wp_enqueue_script(
+			'omise-promptpay-count-down',
+			plugins_url( '../assets/javascripts/omise-promptpay-count-down.js', dirname( __FILE__ ) ),
+			array(),
+			WC_VERSION,
+			true
+		);
+		wp_localize_script('omise-promptpay-count-down', 'omise', [
+			// Format `c` is used to format as ISO string
+			'qr_expires_at' => $expiresAt->format('c')
+		]);
+	}
+
 	/**
 	 * @see WC_Settings_API::init_form_fields()
 	 * @see woocommerce/includes/abstracts/abstract-wc-settings-api.php
@@ -128,6 +145,10 @@ public function display_qrcode( $order, $context = 'view' ) {
 		$expires_datetime = new WC_DateTime( $charge['expires_at'], new DateTimeZone( 'UTC' ) );
 		$expires_datetime->set_utc_offset( wc_timezone_offset() );
 
+		if ( 'view' === $context ) {
+			$this->register_omise_promptpay_count_down_script($expires_datetime);
+		}
+
 		$nonce = wp_create_nonce( OmisePluginHelperWcOrder::get_order_key_by_id( $order ) );
 
 		if ( 'view' === $context ) : ?>
@@ -139,9 +160,8 @@ public function display_qrcode( $order, $context = 'view' ) {
 				</div>
 				<a id="omise-download-promptpay-qr" class="omise-download-promptpay-qr" href="<?php echo $qrcode ?>" download="qr_code.svg">Download QR</a>
 				<div>
-					<?php echo __( 'Payment expires at: ', 'omise' ); ?>
-					<?php echo wc_format_datetime( $expires_datetime, wc_date_format() ); ?>
-					<?php echo wc_format_datetime( $expires_datetime, wc_time_format() ); ?>
+					<?php echo __( 'Payment expires in: ', 'omise' ); ?>
+					<span id="countdown"></span>
 				</div>
 
 				<div id="omise-offline-payment-timeout" style="margin-top: 2em; display: none;">