Integrate Internet banking with WC blocks

includes/blocks/assets/js/build/omise_fpx.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '5951a588e6a47ee3e88d47cac5cfe115');
+<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '449ba1e9fbdfe36ffe11aee7d7ddd2b7');

includes/blocks/assets/js/build/omise_installment.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '2abd4215eaac67e9b0541242851edae3');
+<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '0870d052051799446a862b643aaa00a1');

includes/blocks/assets/js/build/omise_internetbanking.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '5a7c1ca9a881b022e773ff44a4c3f27c');

includes/blocks/assets/js/omise-fpx.js

@@ -40,7 +40,11 @@ const FpxPaymentMethod = (props) => {
             }
         });
         return () => unsubscribe();
-    }, [ onPaymentSetup ]);
+    }, [
+        emitResponse.responseTypes.ERROR,
+		emitResponse.responseTypes.SUCCESS,
+		onPaymentSetup,
+    ]);
 
     return (<>
         {description && <p>{description}</p>}

includes/blocks/assets/js/omise-installment.js

@@ -1,4 +1,4 @@
-import {useEffect, useState, useRef} from '@wordpress/element';
+import {useEffect, useRef} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { registerPaymentMethod } from '@woocommerce/blocks-registry';

includes/blocks/assets/js/omise-internetbanking.js

@@ -0,0 +1,94 @@
+import {useEffect, useState} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { registerPaymentMethod } from '@woocommerce/blocks-registry';
+import { getSetting } from '@woocommerce/settings';
+
+const settings = getSetting( 'omise_internetbanking_data', {} )
+const label = decodeEntities( settings.title ) || 'No title set'
+const Label = ( props ) => {
+    const { PaymentMethodLabel } = props.components
+    return <PaymentMethodLabel text={ label } />
+}
+
+const InternetBankingPaymentMethod = (props) => {
+    const {eventRegistration, emitResponse} = props;
+    const {onPaymentSetup} = eventRegistration;
+    const description = decodeEntities( settings.description || '' )
+    const [selectedBank, setSelectedBank] = useState(null);
+
+    const onBankSelected = (e) => {
+        setSelectedBank(e.target.value)
+    }
+
+    useEffect(() => {
+        const unsubscribe = onPaymentSetup(async () => {
+            if (!selectedBank) {
+                return {type: emitResponse.responseTypes.ERROR, message: 'Select a bank'}
+            }
+
+            try {
+                return {
+                    type: emitResponse.responseTypes.SUCCESS,
+                    meta: {
+                        paymentMethodData: {
+                            "omise-offsite": selectedBank,
+                        }
+                    }
+                };
+            } catch (error) {
+                return {type: emitResponse.responseTypes.ERROR, message: error.message}
+            }
+        });
+        return () => unsubscribe();
+    }, [
+        emitResponse.responseTypes.ERROR,
+		emitResponse.responseTypes.SUCCESS,
+		onPaymentSetup,
+        selectedBank
+    ]);
+
+    return (<>
+        {description && <p>{description}</p>}
+        <fieldset id="omise-form-internetbanking">
+            <ul className="omise-banks-list">
+                {/* <!-- BAY --> */}
+                <li className="item">
+                    <input id="internet_banking_bay" type="radio" name="omise-offsite" value="internet_banking_bay" onChange={onBankSelected} />
+                    <label htmlFor="internet_banking_bay">
+                        <div className="bank-logo bay"></div>
+                        <div className="bank-label">
+                            <span className="title">{ __( 'Krungsri Bank', 'omise' ) }</span><br/>
+                            <span className="omise-secondary-text">{ __( 'Fee: 15 THB (same zone), 15 THB (out zone)', 'omise' ) }</span>
+                        </div>
+                    </label>
+                </li>
+
+                {/* <!-- BBL --> */}
+                <li className="item">
+                    <input id="internet_banking_bbl" type="radio" name="omise-offsite" value="internet_banking_bbl" onChange={onBankSelected} />
+                    <label htmlFor="internet_banking_bbl">
+                        <div className="bank-logo bbl"></div>
+                        <div className="bank-label">
+                            <span className="title">{ __( 'Bangkok Bank', 'omise' ) }</span><br/>
+                            <span className="omise-secondary-text">{ __( 'Fee: 10 THB (same zone), 20 THB (out zone)', 'omise' ) }</span>
+                        </div>
+                    </label>
+                </li>
+            </ul>
+        </fieldset>
+
+    </>)
+}
+
+registerPaymentMethod( {
+    name: settings.name || "",
+    label: <Label />,
+    content: <InternetBankingPaymentMethod />,
+    edit: <InternetBankingPaymentMethod />,
+    canMakePayment: () => true,
+    ariaLabel: label,
+    supports: {
+        features: settings.supports,
+    }
+} )

includes/blocks/gateways/omise-block-internetbanking.php

@@ -0,0 +1,14 @@
+<?php
+
+class Omise_Block_InternetBanking extends Omise_Block_Payment {
+    /**
+	 * Payment method name/id/slug.
+	 *
+	 * @var string
+	 */
+	protected $name = 'omise_internetbanking';
+
+	public function set_additional_data() {
+        $this->additional_data = [];
+    }
+}

includes/blocks/omise-block-payments.php

@@ -31,6 +31,7 @@ class Omise_Block_Payments {
         Omise_Block_Atome::class,
         Omise_Block_Truemoney::class,
         Omise_Block_GooglePay::class,
+        Omise_Block_InternetBanking::class,
     ];
 
     function __construct($container) {

omise-woocommerce.php

@@ -173,6 +173,7 @@ public function block_init()
 		require_once __DIR__ . '/includes/blocks/gateways/omise-block-atome.php';
 		require_once __DIR__ . '/includes/blocks/gateways/omise-block-truemoney.php';
 		require_once __DIR__ . '/includes/blocks/gateways/omise-block-googlepay.php';
+		require_once __DIR__ . '/includes/blocks/gateways/omise-block-internetbanking.php';
 		Omise_Block::init();
 	}
 

webpack.config.js

@@ -36,6 +36,7 @@ module.exports = {
 		'omise_atome': '/includes/blocks/assets/js/omise-atome.js',
 		'omise_truemoney': '/includes/blocks/assets/js/omise-truemoney.js',
 		'omise_googlepay': '/includes/blocks/assets/js/omise-googlepay.js',
+		'omise_internetbanking': '/includes/blocks/assets/js/omise-internetbanking.js',
 	},
 	output: {
 		path: path.resolve( __dirname, 'includes/blocks/assets/js/build' ),