Merge pull request #1924 from woocommerce/PCP-921-paylater-configurator

Use Pay Later Messaging configurator

modules/ppcp-button/src/Endpoint/CreateOrderEndpoint.php

@@ -422,6 +422,7 @@ class CreateOrderEndpoint implements EndpointInterface {
 	 *
 	 * @throws RuntimeException If create order request fails.
 	 * @throws PayPalApiException If create order request fails.
+	 *
 	 * phpcs:disable Squiz.Commenting.FunctionCommentThrowTag.WrongNumber
 	 */
 	private function create_paypal_order( \WC_Order $wc_order = null, string $payment_method = '', array $data = array() ): Order {

modules/ppcp-paylater-configurator/.babelrc

@@ -0,0 +1,14 @@
+{
+	"presets": [
+		[
+			"@babel/preset-env",
+			{
+				"useBuiltIns": "usage",
+				"corejs": "3.25.0"
+			}
+		],
+		[
+			"@babel/preset-react"
+		]
+	]
+}

modules/ppcp-paylater-configurator/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+assets/js
+assets/css

modules/ppcp-paylater-configurator/composer.json

@@ -0,0 +1,17 @@
+{
+    "name": "woocommerce/ppcp-paylater-configurator",
+    "type": "dhii-mod",
+    "description": "Pay Later Messaging configurator module for PPCP",
+    "license": "GPL-2.0",
+    "require": {
+        "php": "^7.2 | ^8.0",
+        "dhii/module-interface": "^0.3.0-alpha1"
+    },
+    "autoload": {
+        "psr-4": {
+            "WooCommerce\\PayPalCommerce\\PayLaterConfigurator\\": "src"
+        }
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

modules/ppcp-paylater-configurator/extensions.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * The Pay Later configurator module extensions.
+ *
+ * @package WooCommerce\PayPalCommerce\PayLaterConfigurator
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\PayLaterConfigurator;
+
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+
+return array(
+	'wcgateway.settings.fields' => function ( ContainerInterface $container, array $fields ): array {
+		$old_fields = array(
+			'pay_later_messaging_locations',
+			'pay_later_enable_styling_per_messaging_location',
+			'pay_later_general_message_layout',
+			'pay_later_general_message_logo',
+			'pay_later_general_message_position',
+			'pay_later_general_message_color',
+			'pay_later_general_message_flex_color',
+			'pay_later_general_message_flex_ratio',
+			'pay_later_general_message_preview',
+			'pay_later_product_messaging_heading',
+			'pay_later_product_message_layout',
+			'pay_later_product_message_logo',
+			'pay_later_product_message_position',
+			'pay_later_product_message_color',
+			'pay_later_product_message_flex_color',
+			'pay_later_product_message_flex_ratio',
+			'pay_later_product_message_preview',
+			'pay_later_cart_messaging_heading',
+			'pay_later_cart_message_layout',
+			'pay_later_cart_message_logo',
+			'pay_later_cart_message_position',
+			'pay_later_cart_message_color',
+			'pay_later_cart_message_flex_color',
+			'pay_later_cart_message_flex_ratio',
+			'pay_later_cart_message_preview',
+			'pay_later_checkout_messaging_heading',
+			'pay_later_checkout_message_layout',
+			'pay_later_checkout_message_logo',
+			'pay_later_checkout_message_position',
+			'pay_later_checkout_message_color',
+			'pay_later_checkout_message_flex_color',
+			'pay_later_checkout_message_flex_ratio',
+			'pay_later_checkout_message_preview',
+			'pay_later_shop_messaging_heading',
+			'pay_later_shop_message_layout',
+			'pay_later_shop_message_logo',
+			'pay_later_shop_message_position',
+			'pay_later_shop_message_color',
+			'pay_later_shop_message_flex_color',
+			'pay_later_shop_message_flex_ratio',
+			'pay_later_shop_message_preview',
+			'pay_later_home_messaging_heading',
+			'pay_later_home_message_layout',
+			'pay_later_home_message_logo',
+			'pay_later_home_message_position',
+			'pay_later_home_message_color',
+			'pay_later_home_message_flex_color',
+			'pay_later_home_message_flex_ratio',
+			'pay_later_home_message_preview',
+			'pay_later_messaging_enabled',
+		);
+		foreach ( $old_fields as $old_field ) {
+			unset( $fields[ $old_field ] );
+		}
+
+		return $fields;
+	},
+);

modules/ppcp-paylater-configurator/module.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * The Pay Later configurator module.
+ *
+ * @package WooCommerce\PayPalCommerce\PayLaterConfigurator
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\PayLaterConfigurator;
+
+use WooCommerce\PayPalCommerce\Vendor\Dhii\Modular\Module\ModuleInterface;
+
+return static function (): ModuleInterface {
+	return new PayLaterConfiguratorModule();
+};

modules/ppcp-paylater-configurator/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "ppcp-paylater-configurator",
+    "version": "1.0.0",
+    "license": "GPL-3.0-or-later",
+    "browserslist": [
+        "> 0.5%",
+        "Safari >= 8",
+        "Chrome >= 41",
+        "Firefox >= 43",
+        "Edge >= 14"
+    ],
+    "dependencies": {
+        "core-js": "^3.25.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.19",
+        "@babel/preset-env": "^7.19",
+        "@babel/preset-react": "^7.18.6",
+        "@woocommerce/dependency-extraction-webpack-plugin": "^2.2.0",
+        "babel-loader": "^8.2",
+        "cross-env": "^7.0.3",
+        "file-loader": "^6.2.0",
+        "sass": "^1.42.1",
+        "sass-loader": "^12.1.0",
+        "webpack": "^5.76",
+        "webpack-cli": "^4.10"
+    },
+    "scripts": {
+        "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
+        "watch": "cross-env BABEL_ENV=default NODE_ENV=production webpack --watch",
+        "dev": "cross-env BABEL_ENV=default webpack --watch"
+    }
+}

modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss

@@ -0,0 +1,30 @@
+#messaging-configurator {
+	& > div {
+		justify-content: left;
+		margin: 0;
+
+		& > div {
+			padding: 0;
+		}
+	}
+	.ppcp-paylater-configurator-publishButton {
+		display:none;
+	}
+	.ppcp-paylater-configurator-header {
+		font-size: 1.3em;
+		color: #1d2327;
+		margin: 1em 0;
+		font-weight: 600;
+		font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+		line-height: 1.3;
+	}
+	#configurator-eligibleContainer div:has(.ppcp-paylater-configurator-header#configurator-headerText) {
+		display: none;
+	}
+	.ppcp-paylater-configurator-subheader {
+		font-size: 14px;
+		line-height: 1.5;
+		color: #3c434a;
+		font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+	}
+}

modules/ppcp-paylater-configurator/resources/js/paylater-configurator.js

@@ -0,0 +1,45 @@
+document.addEventListener( 'DOMContentLoaded', () => {
+    const form = document.querySelector('#mainform');
+    const table = form.querySelector('.form-table');
+    const saveChangesButton = form.querySelector('.woocommerce-save-button');
+    const publishButtonClassName = PcpPayLaterConfigurator.publishButtonClassName;
+
+    table.insertAdjacentHTML('afterend', '<div id="messaging-configurator"></div>');
+
+
+    saveChangesButton.addEventListener('click', () => {
+        form.querySelector('.' + publishButtonClassName).click();
+
+        // Delay the page refresh by a few milliseconds to ensure changes take effect
+        setTimeout(() => {
+            location.reload();
+        }, 1000);
+    });
+
+    merchantConfigurators.Messaging({
+        config: PcpPayLaterConfigurator.config,
+        merchantClientId: PcpPayLaterConfigurator.merchantClientId,
+        partnerClientId: PcpPayLaterConfigurator.partnerClientId,
+        partnerName: 'WooCommerce',
+        bnCode: 'Woo_PPCP',
+        placements: ['cart', 'checkout', 'product', 'category', 'homepage', 'custom_placement'],
+        styleOverrides: {
+            button: publishButtonClassName,
+            header: PcpPayLaterConfigurator.headerClassName,
+            subheader: PcpPayLaterConfigurator.subheaderClassName
+        },
+    onSave: data => {
+            fetch(PcpPayLaterConfigurator.ajax.save_config.endpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'same-origin',
+                body: JSON.stringify({
+                    nonce: PcpPayLaterConfigurator.ajax.save_config.nonce,
+                    config: data,
+                }),
+            });
+        }
+    })
+} );

modules/ppcp-paylater-configurator/services.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * The Pay Later configurator module services.
+ *
+ * @package WooCommerce\PayPalCommerce\PayLaterConfigurator
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\PayLaterConfigurator;
+
+use WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint\SaveConfig;
+use WooCommerce\PayPalCommerce\PayLaterConfigurator\Factory\ConfigFactory;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+
+return array(
+	'paylater-configurator.url'                  => static function ( ContainerInterface $container ): string {
+		/**
+		 * Cannot return false for this path.
+		 *
+		 * @psalm-suppress PossiblyFalseArgument
+		 */
+		return plugins_url(
+			'/modules/ppcp-paylater-configurator/',
+			dirname( realpath( __FILE__ ), 3 ) . '/woocommerce-paypal-payments.php'
+		);
+	},
+	'paylater-configurator.factory.config'       => static function ( ContainerInterface $container ): ConfigFactory {
+		return new ConfigFactory();
+	},
+	'paylater-configurator.endpoint.save-config' => static function ( ContainerInterface $container ): SaveConfig {
+		return new SaveConfig(
+			$container->get( 'wcgateway.settings' ),
+			$container->get( 'button.request-data' ),
+			$container->get( 'woocommerce.logger.woocommerce' )
+		);
+	},
+);

modules/ppcp-paylater-configurator/src/Endpoint/SaveConfig.php

@@ -0,0 +1,168 @@
+<?php
+/**
+ * The endpoint for saving the Pay Later messaging config from the configurator.
+ *
+ * @package WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint;
+
+use Psr\Log\LoggerInterface;
+use Throwable;
+use WooCommerce\PayPalCommerce\Button\Endpoint\RequestData;
+use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
+
+/**
+ * Class SaveConfig.
+ */
+class SaveConfig {
+	const ENDPOINT = 'ppc-save-message-config';
+
+	/**
+	 * The settings.
+	 *
+	 * @var Settings
+	 */
+	protected $settings;
+
+	/**
+	 * The request data.
+	 *
+	 * @var RequestData
+	 */
+	protected $request_data;
+
+	/**
+	 * The logger.
+	 *
+	 * @var LoggerInterface
+	 */
+	private $logger;
+
+	/**
+	 * SaveConfig constructor.
+	 *
+	 * @param Settings        $settings The settings.
+	 * @param RequestData     $request_data The request data.
+	 * @param LoggerInterface $logger The logger.
+	 */
+	public function __construct(
+		Settings $settings,
+		RequestData $request_data,
+		LoggerInterface $logger
+	) {
+		$this->settings     = $settings;
+		$this->request_data = $request_data;
+		$this->logger       = $logger;
+	}
+
+	/**
+	 * Returns the nonce.
+	 */
+	public static function nonce(): string {
+		return self::ENDPOINT;
+	}
+
+	/**
+	 * Handles the request.
+	 */
+	public function handle_request(): bool {
+		if ( ! current_user_can( 'manage_woocommerce' ) ) {
+			wp_send_json_error( 'Not admin.', 403 );
+			return false;
+		}
+
+		try {
+			$data = $this->request_data->read_request( $this->nonce() );
+
+			$this->save_config( $data['config']['config'] );
+
+			wp_send_json_success();
+			return true;
+		} catch ( Throwable $error ) {
+			$this->logger->error( "SaveConfig execution failed. {$error->getMessage()} {$error->getFile()}:{$error->getLine()}" );
+
+			wp_send_json_error();
+			return false;
+		}
+	}
+
+	/**
+	 * Saves the config into the old settings.
+	 *
+	 * @param array $config The configurator config.
+	 */
+	private function save_config( array $config ): void {
+		$this->settings->set( 'pay_later_enable_styling_per_messaging_location', true );
+		$this->settings->set( 'pay_later_messaging_enabled', true );
+
+		$enabled_locations = array();
+
+		foreach ( $config as $placement => $data ) {
+			$location = $this->configurator_placement_to_location( $placement );
+
+			$this->save_config_for_location( $data, $location );
+
+			if ( $data['status'] === 'enabled' ) {
+				$enabled_locations[] = $location;
+			}
+		}
+
+		$this->settings->set( 'pay_later_messaging_locations', $enabled_locations );
+
+		$this->settings->persist();
+	}
+
+	/**
+	 * Saves the config for a location into the old settings.
+	 *
+	 * @param array  $config The configurator config for a location.
+	 * @param string $location The location name in the old settings.
+	 */
+	private function save_config_for_location( array $config, string $location ): void {
+		$this->set_value_if_present( $config, 'layout', "pay_later_{$location}_message_layout" );
+
+		$this->set_value_if_present( $config, 'color', "pay_later_{$location}_message_flex_color" );
+		$this->set_value_if_present( $config, 'ratio', "pay_later_{$location}_message_flex_ratio" );
+
+		$this->set_value_if_present( $config, 'logo-position', "pay_later_{$location}_message_position" );
+		$this->set_value_if_present( $config, 'logo-type', "pay_later_{$location}_message_logo" );
+		$this->set_value_if_present( $config, 'logo-color', "pay_later_{$location}_message_color" );
+		$this->set_value_if_present( $config, 'text-size', "pay_later_{$location}_message_text_size" );
+	}
+
+	/**
+	 * Sets the value in the settings if it is available in the config.
+	 *
+	 * @param array  $config The configurator config.
+	 * @param string $key The key in the config.
+	 * @param string $settings_key The key in the settings.
+	 */
+	private function set_value_if_present( array $config, string $key, string $settings_key ): void {
+		if ( isset( $config[ $key ] ) ) {
+			$this->settings->set( $settings_key, $config[ $key ] );
+		}
+	}
+
+	/**
+	 * Converts the configurator placement into location in the old settings.
+	 *
+	 * @param string $placement The configurator placement.
+	 */
+	private function configurator_placement_to_location( string $placement ): string {
+		switch ( $placement ) {
+			case 'cart':
+			case 'checkout':
+			case 'product':
+				return $placement;
+			case 'category':
+				return 'shop';
+			case 'homepage':
+				return 'home';
+			default:
+				return '';
+		}
+	}
+}

modules/ppcp-paylater-configurator/src/Factory/ConfigFactory.php

@@ -0,0 +1,107 @@
+<?php
+/**
+ * The factory the Pay Later messaging configurator configs.
+ *
+ * @package WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\PayLaterConfigurator\Factory;
+
+use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
+
+/**
+ * Class ConfigFactory.
+ */
+class ConfigFactory {
+	/**
+	 * Returns the configurator config for the given old settings.
+	 *
+	 * @param Settings $settings The settings.
+	 */
+	public function from_settings( Settings $settings ): array {
+		return array(
+			$this->location_to_configurator_placement( 'cart' ) => $this->for_location( $settings, 'cart' ),
+			$this->location_to_configurator_placement( 'checkout' ) => $this->for_location( $settings, 'checkout' ),
+			$this->location_to_configurator_placement( 'product' ) => $this->for_location( $settings, 'product' ),
+			$this->location_to_configurator_placement( 'shop' ) => $this->for_location( $settings, 'shop' ),
+			$this->location_to_configurator_placement( 'home' ) => $this->for_location( $settings, 'home' ),
+		);
+	}
+
+	/**
+	 * Returns the configurator config for a location.
+	 *
+	 * @param Settings $settings The settings.
+	 * @param string   $location The location name in the old settings.
+	 */
+	private function for_location( Settings $settings, string $location ): array {
+		$selected_locations = $settings->has( 'pay_later_messaging_locations' ) ? $settings->get( 'pay_later_messaging_locations' ) : array();
+
+		$placement = $this->location_to_configurator_placement( $location );
+		if ( in_array( $placement, array( 'category', 'homepage' ), true ) ) {
+			$config = array(
+				'layout' => 'flex',
+				'color'  => $this->get_or_default( $settings, "pay_later_{$location}_message_flex_color", 'black', array( 'black', 'blue', 'white', 'white-no-border' ) ),
+				'ratio'  => $this->get_or_default( $settings, "pay_later_{$location}_message_flex_ratio", '8x1', array( '8x1', '20x1' ) ),
+			);
+		} else {
+			$config = array(
+				'layout'        => 'text',
+				'logo-position' => $this->get_or_default( $settings, "pay_later_{$location}_message_position", 'left' ),
+				'logo-type'     => $this->get_or_default( $settings, "pay_later_{$location}_message_logo", 'inline' ),
+				'text-color'    => $this->get_or_default( $settings, "pay_later_{$location}_message_color", 'black' ),
+				'text-size'     => $this->get_or_default( $settings, "pay_later_{$location}_message_text_size", '12' ),
+
+			);
+		}
+
+		return array_merge(
+			array(
+				'status'    => in_array( $location, $selected_locations, true ) ? 'enabled' : 'disabled',
+				'placement' => $placement,
+			),
+			$config
+		);
+	}
+
+	/**
+	 * Converts the location name from the old settings into the configurator placement.
+	 *
+	 * @param string $location The location name in the old settings.
+	 */
+	private function location_to_configurator_placement( string $location ): string {
+		switch ( $location ) {
+			case 'cart':
+			case 'checkout':
+			case 'product':
+				return $location;
+			case 'shop':
+				return 'category';
+			case 'home':
+				return 'homepage';
+			default:
+				return '';
+		}
+	}
+
+	/**
+	 * Returns the settings value or default, if does not exist or not allowed value.
+	 *
+	 * @param Settings   $settings The settings.
+	 * @param string     $key The key.
+	 * @param mixed      $default The default value.
+	 * @param array|null $allowed_values The list of allowed values, or null if all values are allowed.
+	 * @return mixed
+	 */
+	private function get_or_default( Settings $settings, string $key, $default, ?array $allowed_values = null ) {
+		if ( $settings->has( $key ) ) {
+			$value = $settings->get( $key );
+			if ( ! $allowed_values || in_array( $value, $allowed_values, true ) ) {
+				return $value;
+			}
+		}
+		return $default;
+	}
+}

modules/ppcp-paylater-configurator/src/PayLaterConfiguratorModule.php

@@ -0,0 +1,133 @@
+<?php
+/**
+ * The Pay Later configurator module.
+ *
+ * @package WooCommerce\PayPalCommerce\PayLaterConfigurator
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\PayLaterConfigurator;
+
+use WooCommerce\PayPalCommerce\Button\Helper\MessagesApply;
+use WooCommerce\PayPalCommerce\PayLaterConfigurator\Endpoint\SaveConfig;
+use WooCommerce\PayPalCommerce\PayLaterConfigurator\Factory\ConfigFactory;
+use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider;
+use WooCommerce\PayPalCommerce\Vendor\Dhii\Modular\Module\ModuleInterface;
+use WooCommerce\PayPalCommerce\Vendor\Interop\Container\ServiceProviderInterface;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
+
+/**
+ * Class PayLaterConfiguratorModule
+ */
+class PayLaterConfiguratorModule implements ModuleInterface {
+	/**
+	 * Returns whether the module should be loaded.
+	 */
+	public static function is_enabled(): bool {
+		return apply_filters(
+			// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
+			'woocommerce.feature-flags.woocommerce_paypal_payments.paylater_configurator_enabled',
+			getenv( 'PCP_PAYLATER_CONFIGURATOR' ) !== '0'
+		);
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function setup(): ServiceProviderInterface {
+		return new ServiceProvider(
+			require __DIR__ . '/../services.php',
+			require __DIR__ . '/../extensions.php'
+		);
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function run( ContainerInterface $c ): void {
+		$messages_apply = $c->get( 'button.helper.messages-apply' );
+		assert( $messages_apply instanceof MessagesApply );
+
+		if ( ! $messages_apply->for_country() ) {
+			return;
+		}
+
+		add_action(
+			'wc_ajax_' . SaveConfig::ENDPOINT,
+			static function () use ( $c ) {
+				$endpoint = $c->get( 'paylater-configurator.endpoint.save-config' );
+				assert( $endpoint instanceof SaveConfig );
+				$endpoint->handle_request();
+			}
+		);
+
+		$current_page_id = $c->get( 'wcgateway.current-ppcp-settings-page-id' );
+
+		if ( $current_page_id !== Settings::PAY_LATER_TAB_ID ) {
+			return;
+		}
+
+		$settings = $c->get( 'wcgateway.settings' );
+		assert( $settings instanceof Settings );
+
+		add_action(
+			'init',
+			static function () use ( $c, $settings ) {
+				wp_enqueue_script(
+					'ppcp-paylater-configurator-lib',
+					'https://www.paypalobjects.com/merchant-library/preview/merchant-configurator.js',
+					array(),
+					$c->get( 'ppcp.asset-version' ),
+					true
+				);
+
+				wp_enqueue_script(
+					'ppcp-paylater-configurator',
+					$c->get( 'paylater-configurator.url' ) . '/assets/js/paylater-configurator.js',
+					array(),
+					$c->get( 'ppcp.asset-version' ),
+					true
+				);
+
+				wp_enqueue_style(
+					'ppcp-paylater-configurator-style',
+					$c->get( 'paylater-configurator.url' ) . '/assets/css/paylater-configurator.css',
+					array(),
+					$c->get( 'ppcp.asset-version' )
+				);
+
+				$config_factory = $c->get( 'paylater-configurator.factory.config' );
+				assert( $config_factory instanceof ConfigFactory );
+
+				wp_localize_script(
+					'ppcp-paylater-configurator',
+					'PcpPayLaterConfigurator',
+					array(
+						'ajax'                   => array(
+							'save_config' => array(
+								'endpoint' => \WC_AJAX::get_endpoint( SaveConfig::ENDPOINT ),
+								'nonce'    => wp_create_nonce( SaveConfig::nonce() ),
+							),
+						),
+						'config'                 => $config_factory->from_settings( $settings ),
+						'merchantClientId'       => $settings->get( 'client_id' ),
+						'partnerClientId'        => $c->get( 'api.partner_merchant_id' ),
+						'publishButtonClassName' => 'ppcp-paylater-configurator-publishButton',
+						'headerClassName'        => 'ppcp-paylater-configurator-header',
+						'subheaderClassName'     => 'ppcp-paylater-configurator-subheader',
+					)
+				);
+			}
+		);
+	}
+
+	/**
+	 * Returns the key for the module.
+	 *
+	 * @return string|void
+	 */
+	public function getKey() {
+	}
+}

modules/ppcp-paylater-configurator/webpack.config.js

@@ -0,0 +1,39 @@
+const path         = require('path');
+const isProduction = process.env.NODE_ENV === 'production';
+
+const DependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
+
+module.exports = {
+    devtool: isProduction ? 'source-map' : 'eval-source-map',
+    mode: isProduction ? 'production' : 'development',
+    target: 'web',
+    plugins: [ new DependencyExtractionWebpackPlugin() ],
+    entry: {
+        'paylater-configurator': path.resolve('./resources/js/paylater-configurator.js'),
+        'paylater-configurator-style': path.resolve('./resources/css/paylater-configurator.scss'),
+    },
+    output: {
+        path: path.resolve(__dirname, 'assets/'),
+        filename: 'js/[name].js',
+    },
+    module: {
+        rules: [{
+            test: /\.js?$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader',
+        },
+            {
+                test: /\.scss$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: 'css/[name].css',
+                        }
+                },
+                    {loader:'sass-loader'}
+                ]
+        }]
+    }
+};