Integrate Konbini to WC blocks. (#464)

Co-authored-by: Aashish <aashish@omise.co>

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

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

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

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

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

@@ -0,0 +1,120 @@
+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_konbini_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 [name, setName] = useState(null);
+    const [email, setEmail] = useState(null);
+    const [phone, setPhone] = useState(null);
+
+    const onNameChange = (e) => {
+        setName(e.target.value)
+    }
+
+    const onEmailChange = (e) => {
+        setEmail(e.target.value)
+    }
+
+    const onPhoneChange = (e) => {
+        setPhone(e.target.value)
+    }
+
+    useEffect(() => {
+        const unsubscribe = onPaymentSetup(async () => {
+            if (!name || !email || !phone) {
+                return {type: emitResponse.responseTypes.ERROR, message: 'Name, email and phone fields are required'}
+            }
+
+            try {
+                return {
+                    type: emitResponse.responseTypes.SUCCESS,
+                    meta: {
+                        paymentMethodData: {
+                            "omise_konbini_name": name,
+                            "omise_konbini_email": email,
+                            "omise_konbini_phone": phone,
+                        }
+                    }
+                };
+            } catch (error) {
+                return {type: emitResponse.responseTypes.ERROR, message: error.message}
+            }
+        });
+        return () => unsubscribe();
+    }, [
+        emitResponse.responseTypes.ERROR,
+		emitResponse.responseTypes.SUCCESS,
+		onPaymentSetup,
+        name,
+        email,
+        phone
+    ]);
+
+    return (<>
+        {description && <p>{description}</p>}
+        <fieldset id="omise-form-konbini">
+            <p className="form-row form-row-wide omise-required-field">
+                <label htmlFor="omise_konbini_name">{ __( 'Name', 'omise' ) }</label>
+                <input
+                    id="omise_konbini_name"
+                    className="input-text"
+                    name="omise_konbini_name"
+                    type="text"
+                    maxLength="10"
+                    autoComplete="off"
+                    onChange={onNameChange}
+                />
+            </p>
+
+            <p className="form-row form-row-wide omise-required-field">
+                <label htmlFor="omise_konbini_email">{ __( 'Email', 'omise' ) }</label>
+                <input
+                    id="omise_konbini_email"
+                    className="input-text"
+                    name="omise_konbini_email"
+                    type="text"
+                    maxLength="50"
+                    autoComplete="off"
+                    onChange={onEmailChange}
+                />
+            </p>
+
+            <p className="form-row form-row-wide omise-required-field">
+                <label htmlFor="omise_konbini_phone">{ __( 'Phone', 'omise' ) }</label>
+                <input
+                    id="omise_konbini_phone"
+                    className="input-text"
+                    name="omise_konbini_phone"
+                    type="text"
+                    maxLength="11"
+                    autoComplete="off"
+                    onChange={onPhoneChange}
+                />
+            </p>
+        </fieldset>
+    </>)
+}
+
+registerPaymentMethod( {
+    name: settings.name || "",
+    label: <Label />,
+    content: <InternetBankingPaymentMethod />,
+    edit: <InternetBankingPaymentMethod />,
+    canMakePayment: () => settings.is_active,
+    ariaLabel: label,
+    supports: {
+        features: settings.supports,
+    }
+} )

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

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

includes/blocks/omise-block-payments.php

@@ -33,6 +33,7 @@ class Omise_Block_Payments {
         Omise_Block_GooglePay::class,
         Omise_Block_InternetBanking::class,
         Omise_Block_DuitNow_OBW::class,
+        Omise_Block_Konbini::class,
     ];
 
     public function __construct($container) {

omise-woocommerce.php

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

templates/payment/form-konbini.php

@@ -1,16 +1,16 @@
 <fieldset id="omise-form-konbini">
     <p class="form-row form-row-wide omise-required-field">
-	    <label for="omise_konbini_name"><?php _e( 'Name', 'omise' ); ?></label>
-	    <input id="omise_konbini_name" class="input-text" name="omise_konbini_name" type="text" maxlength="10" autocomplete="off">
+        <label for="omise_konbini_name"><?php _e( 'Name', 'omise' ); ?></label>
+        <input id="omise_konbini_name" class="input-text" name="omise_konbini_name" type="text" maxlength="10" autocomplete="off">
     </p>
 
     <p class="form-row form-row-wide omise-required-field">
-	    <label for="omise_konbini_email"><?php _e( 'Email', 'omise' ); ?></label>
-	    <input id="omise_konbini_email" class="input-text" name="omise_konbini_email" type="text" maxlength="50" autocomplete="off">
+        <label for="omise_konbini_email"><?php _e( 'Email', 'omise' ); ?></label>
+        <input id="omise_konbini_email" class="input-text" name="omise_konbini_email" type="text" maxlength="50" autocomplete="off">
     </p>
 
     <p class="form-row form-row-wide omise-required-field">
-	    <label for="omise_konbini_phone"><?php _e( 'Phone', 'omise' ); ?></label>
-	    <input id="omise_konbini_phone" class="input-text" name="omise_konbini_phone" type="text" maxlength="11" autocomplete="off">
+        <label for="omise_konbini_phone"><?php _e( 'Phone', 'omise' ); ?></label>
+        <input id="omise_konbini_phone" class="input-text" name="omise_konbini_phone" type="text" maxlength="11" autocomplete="off">
     </p>
 </fieldset>

tests/unit/includes/blocks/gateways/omise-block-konbini-test.php

@@ -0,0 +1,38 @@
+<?php
+
+use PHPUnit\Framework\TestCase;
+use Brain\Monkey;
+
+class Omise_Block_Konbini_Test extends TestCase
+{
+    use MockPaymentGateways;
+
+    public $obj;
+
+    protected function setUp() : void
+    {
+        parent::setUp();
+        $this->mockWcGateways();
+        require_once __DIR__ . '/../../../../../includes/blocks/gateways/abstract-omise-block-payment.php';
+        require_once __DIR__ . '/../../../../../includes/blocks/gateways/omise-block-konbini.php';
+        $this->obj = new Omise_Block_Konbini;
+    }
+
+    /**
+     * @test
+     */
+    public function set_additional_data()
+    {
+        Monkey\Functions\expect('get_option')->andReturn(null);
+        $this->obj->initialize();
+        $this->obj->set_additional_data();
+
+        $clazz = new \ReflectionClass($this->obj);
+        $property = $clazz->getProperty('additional_data');
+        $property->setAccessible(true);
+        $result = $property->getValue($this->obj);
+
+        $this->assertIsArray($result);
+        $this->assertEmpty($result);
+    }
+}

tests/unit/includes/blocks/gateways/traits/mock-gateways.php

@@ -71,6 +71,7 @@ public function get_available_banks() {
                         'omise_installment' => $gateway,
                         'omise_fpx' => $gateway,
                         'omise_duitnow_obw' => $gateway,
+                        'omise_konbini' => $gateway,
                     ];
                 }
             }

webpack.config.js

@@ -38,6 +38,7 @@ module.exports = {
 		'omise_googlepay': '/includes/blocks/assets/js/omise-googlepay.js',
 		'omise_internetbanking': '/includes/blocks/assets/js/omise-internetbanking.js',
 		'omise_duitnow_obw': '/includes/blocks/assets/js/omise-duitnow-obw.js',
+		'omise_konbini': '/includes/blocks/assets/js/omise-konbini.js',
 	},
 	output: {
 		path: path.resolve( __dirname, 'includes/blocks/assets/js/build' ),