Create Assets for compat module

modules/ppcp-compat/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+/assets

modules/ppcp-compat/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "ppcp-compat",
+    "version": "1.0.0",
+    "license": "GPL-3.0-or-later",
+    "main": "resources/js/compat.js",
+    "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-loader": "^8.2",
+        "cross-env": "^7.0.3",
+        "file-loader": "^6.2.0",
+        "sass": "^1.42.1",
+        "sass-loader": "^12.1.0",
+        "webpack": "^5.74",
+        "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-compat/resources/js/gzd-compat.js

@@ -0,0 +1,39 @@
+document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+        const orderTrackingContainerId = "ppcp_order-tracking";
+        const orderTrackingContainerSelector = "#ppcp_order-tracking";
+        const gzdSaveButton = document.getElementById('order-shipments-save');
+        const loadLocation = location.href + " " + orderTrackingContainerSelector + ">*";
+
+        const disableTrackingFields = function () {
+            var childNodes = document.getElementById(orderTrackingContainerId).getElementsByTagName('*');
+            for (var node of childNodes) {
+                node.disabled = true;
+            }
+        }
+
+        const enableTrackingFields = function () {
+            var childNodes = document.getElementById(orderTrackingContainerId).getElementsByTagName('*');
+            for (var node of childNodes) {
+                node.disabled = false;
+            }
+        }
+
+        const waitForTrackingUpdate = function () {
+            if (jQuery('#order-shipments-save').css('display') !== 'none') {
+                disableTrackingFields();
+                setTimeout(waitForTrackingUpdate, 100)
+            } else {
+                jQuery(orderTrackingContainerSelector).load(loadLocation,"");
+            }
+        }
+
+        if (typeof(gzdSaveButton) != 'undefined' && gzdSaveButton != null) {
+            gzdSaveButton.addEventListener('click', function (event) {
+                waitForTrackingUpdate();
+                enableTrackingFields();
+            })
+        }
+    },
+);

modules/ppcp-compat/src/Assets/CompatAssets.php

@@ -0,0 +1,77 @@
+<?php
+/**
+ * Register and configure assets for Compat module.
+ *
+ * @package WooCommerce\PayPalCommerce\Compat\Assets
+ */
+
+declare(strict_types=1);
+
+namespace WooCommerce\PayPalCommerce\Compat\Assets;
+
+/**
+ * Class OrderEditPageAssets
+ */
+class CompatAssets {
+	/**
+	 * The URL to the module.
+	 *
+	 * @var string
+	 */
+	private $module_url;
+
+	/**
+	 * The assets version.
+	 *
+	 * @var string
+	 */
+	private $version;
+
+	/**
+	 * Whether Germanized synchronization scripts should be loaded.
+	 *
+	 * @var bool
+	 */
+	protected $should_enqueue_gzd_scripts;
+
+	/**
+	 * Compat module assets constructor.
+	 *
+	 * @param string $module_url The URL to the module.
+	 * @param string $version The assets version.
+	 * @param bool   $should_enqueue_gzd_scripts Whether Germanized synchronization scripts should be loaded.
+	 */
+	public function __construct( string $module_url, string $version, bool $should_enqueue_gzd_scripts ) {
+		$this->module_url                 = $module_url;
+		$this->version                    = $version;
+		$this->should_enqueue_gzd_scripts = $should_enqueue_gzd_scripts;
+	}
+
+	/**
+	 * Registers the scripts and styles.
+	 *
+	 * @return void
+	 */
+	public function register(): void {
+		if ( $this->should_enqueue_gzd_scripts ) {
+			wp_register_script(
+				'ppcp-gzd-compat',
+				untrailingslashit( $this->module_url ) . '/assets/js/gzd-compat.js',
+				array( 'jquery' ),
+				$this->version,
+				true
+			);
+		}
+	}
+
+	/**
+	 * Enqueues the necessary scripts.
+	 *
+	 * @return void
+	 */
+	public function enqueue(): void {
+		if ( $this->should_enqueue_gzd_scripts ) {
+			wp_enqueue_script( 'ppcp-gzd-compat' );
+		}
+	}
+}

modules/ppcp-compat/webpack.config.js

@@ -0,0 +1,35 @@
+const path         = require('path');
+const isProduction = process.env.NODE_ENV === 'production';
+
+module.exports = {
+    devtool: isProduction ? 'source-map' : 'eval-source-map',
+    mode: isProduction ? 'production' : 'development',
+    target: 'web',
+    entry: {
+        'gzd-compat': path.resolve('./resources/js/gzd-compat.js'),
+    },
+    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'}
+                ]
+            }]
+    }
+};

package.json

@@ -11,15 +11,17 @@
     "install:modules:ppcp-webhooks": "cd modules/ppcp-webhooks && yarn install && cd -",
     "install:modules:ppcp-vaulting": "cd modules/ppcp-vaulting && yarn install && cd -",
     "install:modules:ppcp-order-tracking": "cd modules/ppcp-order-tracking && yarn install && cd -",
+    "install:modules:ppcp-compat": "cd modules/ppcp-compat && yarn install && cd -",
     "install:modules:ppcp-onboarding": "cd modules/ppcp-onboarding && yarn install && cd -",
-    "install:modules": "yarn run install:modules:ppcp-button && yarn run install:modules:ppcp-wc-gateway && yarn run install:modules:ppcp-webhooks && yarn run install:modules:ppcp-vaulting && yarn run install:modules:ppcp-order-tracking && yarn run install:modules:ppcp-onboarding",
+    "install:modules": "yarn run install:modules:ppcp-button && yarn run install:modules:ppcp-wc-gateway && yarn run install:modules:ppcp-webhooks && yarn run install:modules:ppcp-vaulting && yarn run install:modules:ppcp-order-tracking && yarn run install:modules:ppcp-compat && yarn run install:modules:ppcp-onboarding",
     "build:modules:ppcp-button": "cd modules/ppcp-button && yarn run build && cd -",
     "build:modules:ppcp-wc-gateway": "cd modules/ppcp-wc-gateway && yarn run build && cd -",
     "build:modules:ppcp-webhooks": "cd modules/ppcp-webhooks && yarn run build && cd -",
     "build:modules:ppcp-vaulting": "cd modules/ppcp-vaulting && yarn run build && cd -",
     "build:modules:ppcp-order-tracking": "cd modules/ppcp-order-tracking && yarn run build && cd -",
+    "build:modules:ppcp-compat": "cd modules/ppcp-compat && yarn run build && cd -",
     "build:modules:ppcp-onboarding": "cd modules/ppcp-onboarding && yarn run build && cd -",
-    "build:modules": "yarn run build:modules:ppcp-button && yarn build:modules:ppcp-wc-gateway && yarn build:modules:ppcp-webhooks && yarn build:modules:ppcp-vaulting && yarn build:modules:ppcp-order-tracking && yarn build:modules:ppcp-onboarding",
+    "build:modules": "yarn run build:modules:ppcp-button && yarn build:modules:ppcp-wc-gateway && yarn build:modules:ppcp-webhooks && yarn build:modules:ppcp-vaulting && yarn build:modules:ppcp-order-tracking && yarn build:modules:ppcp-compat && yarn build:modules:ppcp-onboarding",
     "build:dev": "yarn run install:modules && yarn run build:modules",
 
     "ddev:setup": "ddev start && ddev orchestrate",