Integrate TrueMoney payment with WC blocks (#458)

* Integrated installment with WC blocks.

* Set terms to null if bank is changed.

* removed commented if statement

* Integrated FPX with WC blocks.

* Integrated Atome payment with WC blocks.

* Integrate Truemoney payment with WC block.

* Fix test

---------

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

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

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

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

@@ -0,0 +1,116 @@
+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_truemoney_data', {} )
+const label = decodeEntities( settings.title ) || 'No title set'
+const Label = ( props ) => {
+    const { PaymentMethodLabel } = props.components
+    return <PaymentMethodLabel text={ label } />
+}
+
+const TruemoneyPaymentMethod = ({content, ...props}) => {
+    const Content = content;
+    const {eventRegistration, emitResponse} = props;
+    const {onPaymentSetup} = eventRegistration;
+    const description = decodeEntities( settings.description.trim() || '' )
+    const { is_wallet} = 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);
+    }
+
+    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_phone_number_default": (useDefaultPhoneNumber ? 1 : 0).toString(),
+                            'omise_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>}
+        {
+            is_wallet && (
+                <fieldset id="omise-form-truemoney">
+                    { __( 'TrueMoney phone number', 'omise' ) }<br/>
+
+                    <p id="omise_phone_number_default_field" className="form-row form-row-wide omise-label-inline">
+                        <input
+                            id="omise_phone_number_default"
+                            type="checkbox"
+                            name="omise_phone_number_default"
+                            value={useDefaultPhoneNumber}
+                            defaultChecked={true}
+                            onChange={onChangeDefaultPhoneNumber}
+                        />
+                        <label htmlFor="omise_phone_number_default">{ __( 'Same as Billing Detail', 'omise' ) }</label>
+                    </p>
+
+                    <p id="omise_phone_number_field" className="form-row form-row-wide" style={{display: showPhoneField ? "block" : "none"}}>
+                        <span className="woocommerce-input-wrapper">
+                            <input
+                                id="omise_phone_number"
+                                className="input-text"
+                                name="omise_phone_number"
+                                type="tel"
+                                autoComplete="off"
+                                onChange={onChangePhoneNumber}
+                            />
+                        </span>
+                    </p>
+
+                    <p className="omise-secondary-text">
+                        { __( 'One-Time Password (OTP) will be sent to the phone number above', 'omise' ) }
+                    </p>
+                </fieldset>
+            )
+        }
+    </>)
+}
+
+registerPaymentMethod( {
+    name: settings.name,
+    label: <Label />,
+    content: <TruemoneyPaymentMethod />,
+    edit: <TruemoneyPaymentMethod />,
+    canMakePayment: () => true,
+    ariaLabel: label,
+    supports: {
+        features: settings.supports,
+    }
+} )

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

@@ -38,7 +38,7 @@ public function is_active() {
 		return $this->gateway->is_available();
 	}
 
-    /**
+	/**
 	 * Returns an array of scripts/handles to be registered for this payment method.
 	 *
 	 * @return array

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

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

includes/blocks/omise-block-payments.php

@@ -29,6 +29,7 @@ class Omise_Block_Payments {
         Omise_Block_Installment::class,
         Omise_Block_Fpx::class,
         Omise_Block_Atome::class,
+        Omise_Block_Truemoney::class,
     ];
 
     function __construct($container) {

includes/gateway/class-omise-payment-promptpay.php

@@ -138,7 +138,6 @@ public function display_qrcode( $order, $context = 'view' ) {
 		}
 
 		$charge = OmiseCharge::retrieve( $this->get_charge_id_from_order() );
-		error_log(print_r($charge['return_uri'], true));
 		if ( $this->get_pending_status() !== $charge['status'] ) {
 			return;
 		}

includes/gateway/class-omise-payment-truemoney.php

@@ -33,7 +33,7 @@ public function __construct()
 		$this->title                = $this->get_option( 'title' );
 		$this->description          = $this->get_option( 'description' );
 		$this->restricted_countries = array( 'TH' );
-		$this->source_type        = $this->get_source();
+		$this->source_type          = null;
 
 		add_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) );
 		add_action( 'woocommerce_api_' . $this->id . '_callback', 'Omise_Callback::execute' );
@@ -75,30 +75,43 @@ public function init_form_fields()
 	public function payment_fields()
 	{
 		parent::payment_fields();
-		if (self::WALLET === $this->source_type) {
+		if ($this->is_wallet()) {
 			Omise_Util::render_view( 'templates/payment/form-truemoney.php', [] );
 		}
 	}
 
+	public function is_wallet()
+	{
+		// Moved the logic to set source type from constructor because
+		// the Capability API is not being called from WC blocks.
+		if (!$this->source_type) {
+			$this->source_type = $this->get_source();
+		}
+
+		return self::WALLET === $this->source_type;
+	}
+
 	/**
 	 * @inheritdoc
 	 */
 	public function charge($order_id, $order)
 	{
-		$requestData = $this->get_charge_request($order_id, $order);
-		return OmiseCharge::create($requestData);
+		$request_data = $this->get_charge_request($order_id, $order);
+		return OmiseCharge::create($request_data);
 	}
 
 	public function get_charge_request($order_id, $order)
 	{
+		$is_wallet = $this->is_wallet();
+
 		$request_data = $this->build_charge_request(
 			$order_id,
 			$order,
 			$this->source_type,
 			$this->id . '_callback'
 		);
 
-		if (self::WALLET === $this->source_type) {
+		if ($is_wallet) {
 			$phone_option = $_POST['omise_phone_number_default'];
 			$is_phone_option_checked = isset($phone_option) && 1 == $phone_option;
 			$phone_number = $is_phone_option_checked ?

omise-woocommerce.php

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

tests/unit/includes/gateway/class-omise-payment-truemoney-test.php

@@ -25,7 +25,6 @@ public function setUp(): void
 
     public function test_get_charge_request()
     {
-        $this->omise_capability_mock->shouldReceive('retrieve')->once();
         // set source type to truemoney wallet
         $obj = new Omise_Payment_Truemoney();
         $obj->source_type = 'truemoney';

webpack.config.js

@@ -34,6 +34,7 @@ module.exports = {
 		'omise_installment': '/includes/blocks/assets/js/omise-installment.js',
 		'omise_fpx': '/includes/blocks/assets/js/omise-fpx.js',
 		'omise_atome': '/includes/blocks/assets/js/omise-atome.js',
+		'omise_truemoney': '/includes/blocks/assets/js/omise-truemoney.js',
 	},
 	output: {
 		path: path.resolve( __dirname, 'includes/blocks/assets/js/build' ),