Add `@woocommerce/extend-cart-checkout-block` package (#32323)

* initial commit

* 1.1.0

* Add additional files

* 1.2.0

* Add sass file and comment to webpack.config.js

* 1.3.0

* Use pascal case for class name

* 1.4.0

* Add package lock

* Add gitignore

* Add plugin header

* 1.5.0

* Add actions to initialise class

* 1.6.0

* Fix issue with __FILE__ and version constant

* 1.7.0

* Add scripts to package.lock.json

* 1.8.0

* Move scripts to src and remove package.json template

* 1.9.0

* Add JS script in root of src folder

* 1.10.0

* Add correct directory to JS script

* 1.11.0

* Add correct path to sass loader webpack

* 1.12.0

* 1.13.0

* Remove automattic colour import

* 1.14.0

* update src of scripts

* 1.15.0

* update example data

* 1.16.0

* update example with filters

* 1.17.0

* Add filter for cod payment method

* 1.18.0

* Create README.md

* Update package.json (https://github.com/woocommerce/blocks-template/pull/1)

* Add new file to house the integration class and prevent a fatal error (https://github.com/woocommerce/blocks-template/pull/2)

* 1.19.0

* Update integration to use correct hooks

* 1.20.0

* Include blocks integration file

* 1.21.0

* Remove package lock and update repo references

* Remove gitignore and update README

* Add project.json

* Move package to extend-cart-checkout-block

* Update pnpm lock for new package name

* Add new package name to dependency extraction webpack plugin

* Remove unnecessary config options from webpack.config.js.mustache

* Include npmDevDependencies in defaultValues

* Add changelog for dependency extraction plugin

* Add composer.json for changeglog generation

* Add postinstall script to package.json

* Remove test script from package.json

* Reset package version to 1.0.0

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

packages/js/dependency-extraction-webpack-plugin/assets/packages.js

@@ -10,6 +10,7 @@ module.exports = [
 	'@woocommerce/eslint-plugin',
 	'@woocommerce/experimental',
 	'@woocommerce/explat',
+	'@woocommerce/extend-cart-checkout-block',
 	'@woocommerce/navigation',
 	'@woocommerce/notices',
 	'@woocommerce/number',

packages/js/dependency-extraction-webpack-plugin/changelog/add-woocommerce__extend-cart-checkout-block

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Add '@woocommerce/extend-cart-checkout-block' to list of packages

packages/js/extend-cart-checkout-block/$slug-blocks-integration.php.mustache

@@ -0,0 +1,106 @@
+<?php
+use Automattic\WooCommerce\Blocks\Integrations\IntegrationInterface;
+
+define ( '{{slugPascalCase}}_VERSION', '0.1.0' );
+
+/**
+ * Class for integrating with WooCommerce Blocks
+ */
+class {{slugPascalCase}}_Blocks_Integration implements IntegrationInterface {
+
+	/**
+	 * The name of the integration.
+	 *
+	 * @return string
+	 */
+	public function get_name() {
+		return '{{slug}}';
+	}
+
+	/**
+	 * When called invokes any initialization/setup for the integration.
+	 *
+	 */
+	public function initialize() {
+		$script_path = '/build/index.js';
+		$style_path  = '/build/style-index.css';
+
+		$script_url = plugins_url( $script_path, __FILE__ );
+		$style_url  = plugins_url( $style_path, __FILE__ );
+
+		$script_asset_path = dirname( __FILE__ ) . '/build/index.asset.php';
+		$script_asset      = file_exists( $script_asset_path )
+			? require $script_asset_path
+			: array(
+				'dependencies' => array(),
+				'version'      => $this->get_file_version( $script_path ),
+			);
+
+		wp_enqueue_style(
+			'{{slug}}-blocks-integration',
+			$style_url,
+			[],
+			$this->get_file_version( $style_path )
+		);
+
+		wp_register_script(
+			'{{slug}}-blocks-integration',
+			$script_url,
+			$script_asset['dependencies'],
+			$script_asset['version'],
+			true
+		);
+		wp_set_script_translations(
+			'{{slug}}-blocks-integration',
+			'{{slug}}',
+			'{{slug}}',
+			dirname( __FILE__ ) . '/languages'
+		);
+	}
+
+	/**
+	 * Returns an array of script handles to enqueue in the frontend context.
+	 *
+	 * @return string[]
+	 */
+	public function get_script_handles() {
+		return array( '{{slug}}-blocks-integration' );
+	}
+
+	/**
+	 * Returns an array of script handles to enqueue in the editor context.
+	 *
+	 * @return string[]
+	 */
+	public function get_editor_script_handles() {
+		return array( '{{slug}}-blocks-integration' );
+	}
+
+	/**
+	 * An array of key, value pairs of data made available to the block on the client side.
+	 *
+	 * @return array
+	 */
+	public function get_script_data() {
+		$data = array(
+			'{{slug}}-active' => true,
+			'example-data' => 'This is some example data from the server',
+		);
+
+		return $data;
+
+	}
+
+	/**
+	 * Get the file modified time as a cache buster if we're in dev mode.
+	 *
+	 * @param string $file Local path to the file.
+	 * @return string The cache buster value to use for the given file.
+	 */
+	protected function get_file_version( $file ) {
+		if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG && file_exists( $file ) ) {
+			return filemtime( $file );
+		}
+		return {{slugPascalCase}}_VERSION;
+	}
+}

packages/js/extend-cart-checkout-block/$slug.php.mustache

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Plugin Name:     {{title}}
+{{#description}}
+ * Description:     {{description}}
+{{/description}}
+ * Version:         {{version}}
+{{#author}}
+ * Author:          {{author}}
+{{/author}}
+{{#license}}
+ * License:         {{license}}
+{{/license}}
+{{#licenseURI}}
+ * License URI:     {{{licenseURI}}}
+{{/licenseURI}}
+ * Text Domain:     {{textdomain}}
+ *
+ * @package         {{namespace}}
+ */
+add_action('woocommerce_blocks_loaded', function() {
+    require_once __DIR__ . '/{{slug}}-blocks-integration.php';
+	add_action(
+		'woocommerce_blocks_cart_block_registration',
+		function( $integration_registry ) {
+			$integration_registry->register( new {{slugPascalCase}}_Blocks_Integration() );
+		}
+	);
+	add_action(
+		'woocommerce_blocks_checkout_block_registration',
+		function( $integration_registry ) {
+			$integration_registry->register( new {{slugPascalCase}}_Blocks_Integration() );
+		}
+	);
+});

packages/js/extend-cart-checkout-block/.eslintignore.mustache

@@ -0,0 +1,3 @@
+!.eslintrc.js
+build
+node_modules

packages/js/extend-cart-checkout-block/.eslintrc.js.mustache

@@ -0,0 +1,3 @@
+module.exports = {
+	extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
+};

packages/js/extend-cart-checkout-block/.gitignore.mustache

@@ -0,0 +1,30 @@
+/nbproject/private/
+node_modules
+project.xml
+project.properties
+.DS_Store
+Thumbs.db
+.buildpath
+.project
+.settings*
+.vscode
+sftp-config.json
+/deploy/
+/wc-apidocs/
+/languages/
+screenshots/
+.idea
+
+# Ignore all log files except for .htaccess
+/logs/*
+!/logs/.htaccess
+
+tests/e2e/config/local-*
+.eslintcache
+
+/vendor/
+
+dist
+build
+
+{{slug}}.zip

packages/js/extend-cart-checkout-block/README.md

@@ -0,0 +1,14 @@
+# @woocommerce/extend-cart-checkout-block
+
+This is a template to be used with `@wordpress/create-block` to create a WooCommerce Blocks extension starting point.
+
+## Installation
+From your `plugins` directory run:
+```
+npx @wordpress/create-block -t @woocommerce/extend-cart-checkout-block your_extension_name
+```
+
+When this has completed, go to your WordPress plugins page and activate the plugin.
+
+Add some items to your cart and visit the Checkout block, notice there is additional data on the block that this
+template has added.

packages/js/extend-cart-checkout-block/README.md.mustache

@@ -0,0 +1,14 @@
+# {{name}}
+
+A WooCommerce Blocks Extension
+
+## Development
+
+To get started, run the following commands:
+
+```text
+npm install
+npm start
+```
+
+See [wp-scripts](https://github.com/WordPress/gutenberg/tree/master/packages/scripts) for more usage information.

packages/js/extend-cart-checkout-block/composer.json

@@ -0,0 +1,27 @@
+{
+  "name": "woocommerce/extend-cart-checkout-block",
+  "description": "A template for extending the Cart and Checkout blocks to be used with @wordpress/create-block",
+  "type": "library",
+  "license": "GPL-3.0-or-later",
+  "minimum-stability": "dev",
+  "require-dev": {
+	"automattic/jetpack-changelogger": "3.0.2"
+  },
+  "extra": {
+	"changelogger": {
+	  "formatter": {
+		"filename": "../../../tools/changelogger/PackageFormatter.php"
+	  },
+	  "types": {
+		"fix": "Fixes an existing bug",
+		"add": "Adds functionality",
+		"update": "Update existing functionality",
+		"dev": "Development related task",
+		"tweak": "A minor adjustment to the codebase",
+		"performance": "Address performance issues",
+		"enhancement": "Improve existing functionality"
+	  },
+	  "changelog": "NEXT_CHANGELOG.md"
+	}
+  }
+}

packages/js/extend-cart-checkout-block/index.js

@@ -0,0 +1,9 @@
+module.exports = {
+	templatesPath: __dirname,
+	defaultValues: {
+		npmDevDependencies: [
+			'@woocommerce/dependency-extraction-webpack-plugin',
+			'@woocommerce/eslint-plugin',
+		],
+	},
+};

packages/js/extend-cart-checkout-block/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@woocommerce/extend-cart-checkout-block",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "postinstall": "composer install"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woocommerce/woocommerce.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/woocommerce/woocommerce/issues"
+  },
+  "homepage": "https://github.com/woocommerce/woocommerce/tree/trunk/packages/js/extend-cart-checkout-block#readme"
+}

packages/js/extend-cart-checkout-block/project.json

@@ -0,0 +1,5 @@
+{
+  "root": "packages/js/extend-cart-checkout-block",
+  "sourceRoot": "packages/js/extend-cart-checkout-block",
+  "projectType": "library"
+}

packages/js/extend-cart-checkout-block/src/css/_colors.scss.mustache

@@ -0,0 +1,4 @@
+@import "node_modules/@wordpress/base-styles/colors";
+
+// Bright colors
+$example_color: #999999;

packages/js/extend-cart-checkout-block/src/index.js.mustache

@@ -0,0 +1 @@
+import './js/index';

packages/js/extend-cart-checkout-block/src/js/ExampleComponent.js.mustache

@@ -0,0 +1,11 @@
+/*
+ * An example component that will be rendered at the bottom of the sidebar in
+ * the Cart and Checkout blocks.
+ */
+export const ExampleComponent = ( { data } ) => {
+	return (
+		<div className="{{slug}}-example-component">
+			Data passed to this component: { data['example-data'] }
+		</div>
+	);
+};

packages/js/extend-cart-checkout-block/src/js/filters.js.mustache

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { __experimentalRegisterCheckoutFilters } from '@woocommerce/blocks-checkout';
+import { registerPaymentMethodExtensionCallbacks } from '@woocommerce/blocks-registry';
+import { __, sprintf } from '@wordpress/i18n';
+
+export const registerFilters = ( pointsLabelPlural, discountRegex ) => {
+    __experimentalRegisterCheckoutFilters( '{{slug}}', {
+        itemName: ( name ) => {
+            return `${name} + extra data!`
+        },
+    } );
+
+    registerPaymentMethodExtensionCallbacks( '{{slug}}',
+        {
+            cod: ( arg ) => arg.billingData.city !== 'Denver',
+        }
+    );
+};

packages/js/extend-cart-checkout-block/src/js/index.js.mustache

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
+import { getSetting } from '@woocommerce/settings';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const exampleDataFromSettings = getSetting( '{{slug}}_data' );
+
+/**
+ * Internal dependencies
+ */
+import { registerFilters } from './filters';
+import { ExampleComponent } from './ExampleComponent';
+
+const render = () => {
+	return (
+		<>
+			<ExperimentalOrderMeta>
+				<ExampleComponent data={ exampleDataFromSettings } />
+			</ExperimentalOrderMeta>
+		</>
+	);
+};
+
+registerPlugin( '{{slug}}', {
+	render,
+	scope: 'woocommerce-checkout',
+} );
+
+registerFilters();

packages/js/extend-cart-checkout-block/src/js/style.scss.mustache

@@ -0,0 +1,4 @@
+.{{slug}}-example-component {
+ font-size: 20px;
+ color: $example_color;
+}

packages/js/extend-cart-checkout-block/webpack.config.js.mustache

@@ -0,0 +1,67 @@
+const path = require( 'path' );
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+
+// Remove SASS rule from the default config so we can define our own.
+const defaultRules = defaultConfig.module.rules.filter( ( rule ) => {
+	return String( rule.test ) !== String( /\.(sc|sa)ss$/ );
+} );
+
+module.exports = {
+	...defaultConfig,
+	module: {
+		...defaultConfig.module,
+		rules: [
+			...defaultRules,
+			{
+				test: /\.(sc|sa)ss$/,
+				exclude: /node_modules/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					{ loader: 'css-loader', options: { importLoaders: 1 } },
+					{
+						loader: 'sass-loader',
+						options: {
+							sassOptions: {
+								includePaths: [ 'src/css' ],
+							},
+							additionalData: ( content, loaderContext ) => {
+								const {
+									resourcePath,
+									rootContext,
+								} = loaderContext;
+								const relativePath = path.relative(
+									rootContext,
+									resourcePath
+								);
+
+								if (
+									relativePath.startsWith( 'src/css/' )
+								) {
+									return content;
+								}
+
+								// Add code here to prepend to all .scss/.sass files.
+								return (
+									'@import "_colors"; ' +
+									content
+								);
+							},
+						},
+					},
+				],
+			},
+		],
+	},
+	plugins: [
+		...defaultConfig.plugins.filter(
+			( plugin ) =>
+				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
+		),
+		new WooCommerceDependencyExtractionWebpackPlugin(),
+		new MiniCssExtractPlugin( {
+			filename: `[name].css`,
+		} ),
+	],
+};

pnpm-lock.yaml

@@ -935,6 +935,9 @@ importers:
       ts-jest: 27.1.3_b64eba0a9f1c7068f7f3a75addda5ccd
       typescript: 4.6.2
 
+  packages/js/extend-cart-checkout-block:
+    specifiers: {}
+
   packages/js/js-tests:
     specifiers:
       '@babel/core': ^7.17.5