Beta support for Checkout Block

* Checkout Block
* Implements @wordpress/scripts for block building
* Use asset file

Author: alexhernandezord

.gitignore

@@ -1,5 +1,7 @@
+/node_modules/
 /svn/
 /vendor/
 aplazame.latest.zip
 composer.lock
 docker-compose.override.yml
+package-lock.json

package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "@wordpress/scripts": "^27.9.0"
+  },
+  "scripts": {
+    "build": "wp-scripts build --webpack-src-dir=resources --output-path=plugin/resources",
+    "start": "wp-scripts start --webpack-src-dir=resources --output-path=plugin/resources"
+  }
+}

plugin/aplazame.php

@@ -164,11 +164,22 @@ public function __construct( $apiBaseUri ) {
 
 		add_action( 'woocommerce_api_aplazame', array( $this, 'api_router' ) );
 
+		// Cart and Checkout Blocks
+		add_action( 'woocommerce_blocks_loaded', array( $this, 'add_gateway_block') );
+		add_action(
+			'before_woocommerce_init',
+			function() {
+				if ( class_exists('\Automattic\WooCommerce\Utilities\FeaturesUtil') ) {
+					\Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'cart_checkout_blocks', __FILE__, true );
+				}
+			}
+		);
+
 		// Declare HPOS compatibility
 		add_action(
 			'before_woocommerce_init',
 			function () {
-				if ( class_exists( \Automattic\WooCommerce\Utilities\FeaturesUtil::class ) ) {
+				if ( class_exists('\Automattic\WooCommerce\Utilities\FeaturesUtil') ) {
 					\Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'custom_order_tables', __FILE__, true );
 				}
 			}
@@ -276,6 +287,20 @@ public function add_gateway( $methods ) {
 		return $methods;
 	}
 
+	public function add_gateway_block() {
+		if( ! class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
+			return;
+		}
+
+		include_once 'classes/wc-aplazame-gateway-block.php';
+		add_action(
+			'woocommerce_blocks_payment_method_type_registration',
+			function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
+				$payment_method_registry->register( new WC_Aplazame_Gateway_Blocks_Support );
+			}
+		);
+	}
+
 	public function aplazameJs() {
 
 		Aplazame_Helpers::render_to_template( 'layout/header.php' );

plugin/classes/wc-aplazame-gateway-block.php

@@ -0,0 +1,48 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
+
+final class WC_Aplazame_Gateway_Blocks_Support extends AbstractPaymentMethodType {
+	private $gateway;
+	protected $name = WC_Aplazame::METHOD_ID;
+
+	public function initialize() {
+		$this->settings = get_option( "woocommerce_{$this->name}_settings", [] );
+		$gateways = WC()->payment_gateways->payment_gateways();
+		$this->gateway  = $gateways[ $this->name ];
+	}
+
+	public function is_active() {
+		return $this->gateway->is_available();
+	}
+
+	public function get_payment_method_script_handles() {
+		$asset_path   = plugin_dir_path( __FILE__ ) . '../resources/payment-block.asset.php';
+		$version      = null;
+		$dependencies = array();
+		if( file_exists( $asset_path ) ) {
+			$asset        = require $asset_path;
+			$version      = isset( $asset[ 'version' ] ) ? $asset[ 'version' ] : $version;
+			$dependencies = isset( $asset[ 'dependencies' ] ) ? $asset[ 'dependencies' ] : $dependencies;
+		}
+		wp_register_script(
+			'wc-aplazame-blocks-integration',
+			plugin_dir_url( __FILE__ ) . '../resources/payment-block.js',
+			$dependencies,
+			$version,
+			true
+		);
+		return [ 'wc-aplazame-blocks-integration' ];
+	}
+
+	public function get_payment_method_data() {
+		return [
+			'title'     => $this->gateway->title,
+			'description'     => $this->gateway->settings['description'],
+		];
+	}
+}

plugin/resources/block.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "aplazame/payment-block",
+  "version": "1.0.0",
+  "title": "Aplazame Payment Block",
+  "editorScript": "file:payment-block.js"
+}

plugin/resources/payment-block.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-element', 'wp-html-entities'), 'version' => 'cd602efc1a4a409b88bc');

plugin/resources/payment-block.js

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "aplazame/payment-block",
+  "version": "1.0.0",
+  "title": "Aplazame Payment Block",
+  "editorScript": "file:payment-block.js"
+}

resources/block.json

@@ -0,0 +1,30 @@
+import { decodeEntities } from '@wordpress/html-entities';
+import { RawHTML } from '@wordpress/element';
+
+const { registerPaymentMethod } = window.wc.wcBlocksRegistry
+const { getSetting } = window.wc.wcSettings
+const settings = getSetting( 'aplazame_data', {} )
+const label = decodeEntities( settings.title )
+
+const Content = () => {
+  return <RawHTML>{ settings.description || '' }</RawHTML>;
+}
+
+const Label = ( props ) => {
+  const { PaymentMethodLabel } = props.components
+  return <PaymentMethodLabel text={ label } />
+}
+
+registerPaymentMethod(
+    {
+    name: "aplazame",
+    label: <Label />,
+    content: <Content />,
+    edit: <Content />,
+    canMakePayment: () => true,
+    ariaLabel: label,
+    supports: {
+      features: settings.supports,
+    }
+  }
+)