feat: initialize React admin build pipeline (F2.1-F2.6)

- Add package.json with @wordpress/scripts and React dependencies - Configure webpack for admin bundle output - Create src/admin directory structure (api, components, pages) - Implement API client with nonce handling (ajaxRequest, apiRequest) - Add API methods for orders, customers, products, forms, coupons, licenses - Create React App component with page routing - Add placeholder page components for all admin sections - Create ReactAdmin PHP class to manage asset enqueuing - Register ReactAdmin singleton in main plugin file - Bump version to 2.0.0 Build: Run 'npm install && npm run build' to generate assets
2026-04-18 11:17:53 +07:00
parent 306377e8f5
commit f7a149a1c5
14 changed files with 478 additions and 2 deletions
--- a/includes/Admin/ReactAdmin.php
+++ b/includes/Admin/ReactAdmin.php
@@ -0,0 +1,137 @@
+<?php
+namespace Formipay\Admin;
+use Formipay\Traits\SingletonTrait;
+
+if ( ! defined( 'ABSPATH' ) ) exit;
+
+class ReactAdmin {
+
+    use SingletonTrait;
+
+    protected function __construct() {
+
+        add_action( 'admin_enqueue_scripts', [$this, 'enqueue_assets'] );
+        add_filter( 'formipay/admin/data', [$this, 'localize_data'] );
+
+    }
+
+    public function enqueue_assets() {
+
+        $screen = get_current_screen();
+
+        // Only load React assets on Formipay admin pages
+        if ( strpos( $screen->id, 'formipay' ) === false ) {
+            return;
+        }
+
+        // Enqueue React build assets
+        $build_dir = FORMIPAY_PATH . 'build';
+        $build_url = FORMIPAY_URL . 'build';
+
+        if ( ! file_exists( $build_dir . '/admin.asset.php' ) ) {
+            return; // Build not generated yet
+        }
+
+        $assets_file = require $build_dir . '/admin.asset.php';
+        $dependencies = $assets_file['dependencies'] ?? [];
+        $version = $assets_file['version'] ?? FORMIPAY_VERSION;
+
+        wp_enqueue_style(
+            'formipay-admin-style',
+            $build_url . '/style-admin.css',
+            [],
+            $version
+        );
+
+        wp_enqueue_script(
+            'formipay-admin',
+            $build_url . '/admin.js',
+            $dependencies,
+            $version,
+            true
+        );
+
+        // Localize script with required data
+        $data = apply_filters( 'formipay/admin/data', [
+            'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+            'restUrl' => rest_url( 'formipay/v1' ),
+            'nonce' => wp_create_nonce( 'formipay-admin' ),
+        ] );
+
+        wp_localize_script( 'formipay-admin', 'formipayAdmin', $data );
+
+    }
+
+    public function localize_data( $data ) {
+
+        $screen = get_current_screen();
+        $page = '';
+
+        // Determine current page based on screen ID
+        if ( $screen->id === 'formipay_page_formipay-orders' ) {
+            $page = 'orders';
+        } elseif ( $screen->id === 'formipay_page_formipay-customers' ) {
+            $page = 'customers';
+        } elseif ( $screen->id === 'formipay_page_formipay-products' ) {
+            $page = 'products';
+        } elseif ( $screen->id === 'toplevel_page_formipay' ) {
+            $page = 'forms';
+        } elseif ( $screen->id === 'formipay_page_formipay-coupons' ) {
+            $page = 'coupons';
+        } elseif ( $screen->id === 'formipay_page_formipay-access' ) {
+            $page = 'access';
+        } elseif ( $screen->id === 'formipay_page_formipay-licenses' ) {
+            $page = 'licenses';
+        }
+
+        if ( $page ) {
+            $data[$page] = $this->get_page_data( $page );
+        }
+
+        return $data;
+
+    }
+
+    private function get_page_data( $page ) {
+
+        $data = [];
+
+        switch ( $page ) {
+
+            case 'orders':
+                $data['statusOptions'] = formipay_order_status_list();
+                break;
+
+            case 'customers':
+                $data['columns'] = [
+                    'id' => __( 'ID', 'formipay' ),
+                    'name' => __( 'Name', 'formipay' ),
+                    'email' => __( 'Email', 'formipay' ),
+                    'phone' => __( 'Phone', 'formipay' ),
+                    'total_order' => __( 'Total Orders', 'formipay' ),
+                ];
+                break;
+
+            case 'products':
+                $data['currencies'] = formipay_global_currency_options();
+                break;
+
+        }
+
+        return $data;
+
+    }
+
+    /**
+     * Render React mount point
+     */
+    public static function render_mount_point( $page ) {
+
+        printf(
+            '<div id="formipay-admin-root" data-formipay-mount="%s"></div>',
+            esc_attr( $page )
+        );
+
+    }
+
+}