Create module assets

modules/ppcp-order-tracking/.gitignore

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

modules/ppcp-order-tracking/composer.json

@@ -0,0 +1,17 @@
+{
+    "name": "woocommerce/ppcp-order-tracking",
+    "type": "dhii-mod",
+    "description": "Order tracking module for PPCP",
+    "license": "GPL-2.0",
+    "require": {
+        "php": "^7.1 | ^8.0",
+        "dhii/module-interface": "^0.3.0-alpha1"
+    },
+    "autoload": {
+        "psr-4": {
+            "WooCommerce\\PayPalCommerce\\OrderTracking\\": "src"
+        }
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

modules/ppcp-order-tracking/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "ppcp-order-tracking",
+  "version": "1.0.0",
+  "license": "GPL-3.0-or-later",
+  "main": "resources/js/order-edit-page.js",
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "cross-env": "^7.0.3",
+    "file-loader": "^6.2.0",
+    "sass": "^1.42.1",
+    "sass-loader": "^12.1.0",
+    "webpack": "^5.55.0",
+    "webpack-cli": "^4.8.0"
+  },
+  "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-order-tracking/resources/css/order-edit-page.scss

@@ -0,0 +1,20 @@
+#ppcp_order-tracking {
+	.tracking-info-message {
+		padding-left: 20px;
+	}
+
+	.error {
+		color: red;
+		font-weight: bold;
+	}
+
+	.success {
+		color: green;
+		font-weight: bold;
+	}
+
+	input,select {
+		width: 100%;
+	}
+}
+

modules/ppcp-order-tracking/resources/js/order-edit-page.js

@@ -0,0 +1,44 @@
+import {PaymentMethods} from "../../../ppcp-button/resources/js/modules/Helper/CheckoutMethodState";
+
+document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+        const config = PayPalCommerceGatewayOrderTrackingInfo;
+        if (!typeof (PayPalCommerceGatewayOrderTrackingInfo)) {
+            console.error('trackign cannot be set.');
+            return;
+        }
+
+        const submitButton = jQuery('.submit_tracking_info');
+
+        jQuery('.submit_tracking_info').click(function() {
+            submitButton.prop( 'disabled', true );
+            fetch(config.ajax.tracking_info.endpoint, {
+                method: 'POST',
+                body: JSON.stringify({
+                    nonce: config.ajax.tracking_info.nonce,
+                    transaction_id: jQuery('.ppcp-tracking-transaction_id').val(),
+                    tracking_number: jQuery('.ppcp-tracking-tracking_number').val(),
+                    status: jQuery('.ppcp-tracking-status').val(),
+                    carrier: jQuery('.ppcp-tracking-carrier').val(),
+                    order_id: jQuery('.ppcp-order_id').val(),
+                    action: jQuery('.submit_tracking_info').data('action'),
+                })
+            }).then(function (res) {
+                console.log(res);
+                return res.json();
+            }).then(function (data) {
+                if (!data.success) {
+                    console.error(data);
+                    throw Error(data.data.message);
+                }
+
+                jQuery( "<span class='success tracking-info-message'>" + data.data.message + "</span>" ).insertAfter(submitButton);
+                setTimeout(()=> jQuery('.tracking-info-message').remove(),3000);
+
+                submitButton.html('update')
+                submitButton.prop( 'disabled', false );
+            });
+        })
+    },
+);

modules/ppcp-order-tracking/webpack.config.js

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