Integrated Atome payment with WC blocks.

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

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

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

@@ -0,0 +1,119 @@
+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_atome_data', {} )
+const label = decodeEntities( settings.title ) || 'No title set'
+const Label = ( props ) => {
+    const { PaymentMethodLabel } = props.components
+    return <PaymentMethodLabel text={ label } />
+}
+
+const AtomePaymentMethod = (props) => {
+    const {eventRegistration, emitResponse} = props;
+    const {onPaymentSetup} = eventRegistration;
+    const description = decodeEntities( settings.description || '' )
+    const { status, message } = settings.data;
+    const [showPhoneField, setShowPhoneField] = useState(false)
+    const [useDefaultPhoneNumber, setUseDefaultPhoneNumber] = useState(true)
+    const [phoneNumber, setPhoneNumber] = useState('')
+
+    const onChangeDefaultPhoneNumber = (e) => {
+        setUseDefaultPhoneNumber(!useDefaultPhoneNumber)
+        setShowPhoneField(!showPhoneField)
+
+        if (useDefaultPhoneNumber) {
+            setPhoneNumber('');
+        }
+    }
+
+    const onChangePhoneNumber = (e) => {
+        setPhoneNumber(e.target.value);
+        // phoneNumberRef.current = e.target.value;
+    }
+
+    useEffect(() => {
+        const unsubscribe = onPaymentSetup(async () => {
+            if (!useDefaultPhoneNumber && phoneNumber.length === 0) {
+                return {type: emitResponse.responseTypes.ERROR, message: 'Enter a phone number'}
+            }
+            try {
+                return {
+                    type: emitResponse.responseTypes.SUCCESS,
+                    meta: {
+                        paymentMethodData: {
+                            "omise_atome_phone_default": (useDefaultPhoneNumber ? 1 : 0).toString(),
+                            'omise_atome_phone_number': phoneNumber,
+                        }
+                    }
+                };
+            } catch (error) {
+                return {type: emitResponse.responseTypes.ERROR, message: error.message}
+            }
+        });
+        return () => unsubscribe();
+    }, [
+        onPaymentSetup,
+        emitResponse.responseTypes.ERROR,
+		emitResponse.responseTypes.SUCCESS,
+        useDefaultPhoneNumber,
+        phoneNumber
+    ]);
+
+    return (<>
+        {description && <p>{description}</p>}
+        {
+            !status
+                ? <p>{message}</p>
+                : (
+                    <fieldset id="omise-form-atome">
+                        { __('Atome phone number', 'omise') }<br />
+
+                        <p className="form-row form-row-wide omise-label-inline">
+                            <input
+                                id="omise_atome_phone_default"
+                                type="checkbox"
+                                name="omise_atome_phone_default"
+                                value={useDefaultPhoneNumber}
+                                defaultChecked={true}
+                                onChange={onChangeDefaultPhoneNumber}
+                            />
+                            <label htmlFor="omise_atome_phone_default">{ __('Same as Billing Detail', 'omise') }</label>
+                        </p>
+
+                        <p id="omise_atome_phone_field" className="form-row form-row-wide" style={{display: showPhoneField ? "block" : "none"}}>
+                            <span className="woocommerce-input-wrapper">
+                                <input
+                                    id="omise_atome_phone_number"
+                                    className="input-text"
+                                    name="omise_atome_phone_number"
+                                    type="tel"
+                                    autoComplete="off"
+                                    placeholder="+66123456789"
+                                    onChange={onChangePhoneNumber}
+                                />
+                            </span>
+                        </p>
+
+                        <p className="omise-secondary-text">
+                            { __('The phone number will be used for creating Atome charge', 'omise') }
+                        </p>
+                    </fieldset>
+                )
+        }
+    </>)
+}
+
+registerPaymentMethod( {
+    name: settings.name,
+    label: <Label />,
+    content: <AtomePaymentMethod />,
+    edit: <AtomePaymentMethod />,
+    canMakePayment: () => true,
+    ariaLabel: label,
+    supports: {
+        features: settings.supports,
+    }
+} )

includes/blocks/gateways/abstract-omise-block-payment.php

@@ -0,0 +1,91 @@
+<?php
+
+use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
+
+abstract class Omise_Block_Payment extends AbstractPaymentMethodType {
+	/**
+	 * The gateway instance.
+	 */
+	protected $gateway;
+
+	/**
+	 * Payment method name/id/slug.
+	 *
+	 * @var string
+	 */
+	protected $name;
+
+	/**
+	 * Additional data required in the UI
+	 */
+	protected $additional_data;
+
+	/**
+	 * Initializes the payment method type.
+	 */
+	public function initialize() {
+		$this->settings = get_option("woocommerce_{$this->name}_settings", []);
+		$gateways       = WC()->payment_gateways->payment_gateways();
+		$this->gateway  = $gateways[$this->name];
+	}
+
+	/**
+	 * Returns if this payment method should be active. If false, the scripts will not be enqueued.
+	 *
+	 * @return boolean
+	 */
+	public function is_active() {
+		return $this->gateway->is_available();
+	}
+
+    /**
+	 * Returns an array of scripts/handles to be registered for this payment method.
+	 *
+	 * @return array
+	 */
+	public function get_payment_method_script_handles() {
+        if (!wp_script_is("wc-{$this->name}-payments-blocks", 'enqueued')) {
+            $script_asset = require __DIR__ . "/../assets/js/build/{$this->name}.asset.php";
+            wp_register_script(
+                "wc-{$this->name}-payments-blocks",
+                plugin_dir_url(__DIR__) . "assets/js/build/{$this->name}.js",
+                $script_asset['dependencies'],
+                $script_asset['version'],
+                true
+            );
+
+            wp_enqueue_script("wc-{$this->name}-payments-blocks");
+        }
+
+		return ["wc-{$this->name}-payments-blocks"];
+	}
+
+	/**
+	 * Returns an array of key=>value pairs of data made available to the payment methods script.
+	 *
+	 * @return array
+	 */
+	public function get_payment_method_data() {
+		if (!is_checkout()) {
+			return [];
+		}
+
+		$this->set_additional_data();
+
+		return [
+			'name'        => $this->name,
+			'title'       => $this->get_setting('title'),
+			'description' => $this->get_setting('description'),
+			'supports'    => array_filter($this->gateway->supports, [$this->gateway, 'supports']),
+			'data'        => $this->additional_data,
+		];
+	}
+
+	/**
+	 * Set additional data requried to make UI work. Different payment
+	 * methods may require different additional data.
+	 * 
+	 * @return void
+	 */
+	abstract public function set_additional_data();
+}

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

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

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

@@ -1,78 +1,16 @@
 <?php
 
-use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
-
-class Omise_Block_Fpx extends AbstractPaymentMethodType {
-	/**
-	 * The gateway instance.
-	 */
-	protected $gateway;
-
+class Omise_Block_Fpx extends Omise_Block_Payment {
 	/**
 	 * Payment method name/id/slug.
 	 *
 	 * @var string
 	 */
 	protected $name = 'omise_fpx';
 
-	/**
-	 * Initializes the payment method type.
-	 */
-	public function initialize() {
-		$this->settings = get_option("woocommerce_{$this->name}_settings", []);
-		$gateways       = WC()->payment_gateways->payment_gateways();
-		$this->gateway  = $gateways[$this->name];
-	}
-
-	/**
-	 * Returns if this payment method should be active. If false, the scripts will not be enqueued.
-	 *
-	 * @return boolean
-	 */
-	public function is_active() {
-		return $this->gateway->is_available();
-	}
-
-	/**
-	 * Returns an array of scripts/handles to be registered for this payment method.
-	 *
-	 * @return array
-	 */
-	public function get_payment_method_script_handles() {
-		if (!wp_script_is("wc-{$this->name}-payments-blocks", 'enqueued')) {
-			$script_asset = require __DIR__ . "/../assets/js/build/{$this->name}.asset.php";
-			wp_register_script(
-				"wc-{$this->name}-payments-blocks",
-				plugin_dir_url(__DIR__) . "assets/js/build/{$this->name}.js",
-				$script_asset['dependencies'],
-				$script_asset['version'],
-				true
-			);
-
-			wp_enqueue_script("wc-{$this->name}-payments-blocks");
-		}
-
-		return ["wc-{$this->name}-payments-blocks"];
-	}
-
-	/**
-	 * Returns an array of key=>value pairs of data made available to the payment methods script.
-	 *
-	 * @return array
-	 */
-	public function get_payment_method_data() {
-		if (!is_checkout()) {
-			return [];
-		}
-
-		return [
-			'name'        => $this->name,
-			'title'       => $this->get_setting('title'),
-			'description' => $this->get_setting('description'),
-			'supports'    => array_filter($this->gateway->supports, [$this->gateway, 'supports']),
-			'data' => [
-				'bank_list' => $this->gateway->backend->get_available_banks()
-			]
+	public function set_additional_data() {
+		$this->additional_data = [
+			'bank_list' => $this->gateway->backend->get_available_banks()
 		];
 	}
 }