fix: React admin icon imports and mount point rendering

- Fix all @wordpress/icons imports - use build/ paths and call as functions
- Update all admin pages to render React mount points
- Components fixed: VariationPricingTable, NotificationLog, GlobalSettings,
  FormFieldOptions, OrderDetail, OrderListItem, OrderList, FormCanvas,
  AnalyticsDashboard, FormField, Products
- Admin pages updated: Order.php, Customer.php, Coupon.php, License.php,
  Product.php, Access.php, Form.php

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

build/admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '45cbff321e1153724caa');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/chevron-down', 'wp-icons/build/chevron-up', 'wp-icons/build/eye-closed', 'wp-icons/build/eye-opened', 'wp-icons/build/list', 'wp-icons/build/message', 'wp-icons/build/minus', 'wp-icons/build/plus', 'wp-icons/build/trash', 'wp-icons/build/visible'), 'version' => '44e6bb755959bfd53a19');

includes/Access.php

@@ -84,7 +84,7 @@ class Access {
     }
 
     public function formipay_access_items() {
-        include_once FORMIPAY_PATH . 'admin/page-access-items.php';
+        \Formipay\Admin\ReactAdmin::render_mount_point('access');
     }
 
     public function enqueue_admin() {

includes/Coupon.php

@@ -94,7 +94,7 @@ class Coupon {
     }
 
     public function formipay_coupon() {
-        include_once FORMIPAY_PATH . 'admin/page-coupons.php';
+        \Formipay\Admin\ReactAdmin::render_mount_point('coupons');
     }
 
     public function enqueue_admin() {

includes/Customer.php

@@ -219,14 +219,7 @@ class Customer {
     }
 
     public function customers_page() {
-
+        \Formipay\Admin\ReactAdmin::render_mount_point('customers');
-        $customer_id = intval(filter_input(INPUT_GET, 'customer_id', FILTER_SANITIZE_STRING));
-        if(empty($customer_id)){
-            include FORMIPAY_PATH . 'admin/page-customers.php';
-        }else{
-            include FORMIPAY_PATH . 'admin/page-customer-details.php';
-        }
-
     }
 
     public function formipay_tabledata_customers() {

includes/Form.php

@@ -93,7 +93,7 @@ class Form {
     }
 
     public function formipay_form() {
-        include_once FORMIPAY_PATH . 'admin/page-forms.php';
+        \Formipay\Admin\ReactAdmin::render_mount_point('forms');
     }
 
     public function metaboxes($post) {

includes/License.php

@@ -70,7 +70,7 @@ class License {
     }
 
     public function page_licenses() {
-        include FORMIPAY_PATH . 'admin/page-licenses.php';
+        \Formipay\Admin\ReactAdmin::render_mount_point('licenses');
     }
 
     /** Enqueue admin assets for Licenses page */

includes/Order.php

@@ -642,12 +642,13 @@ class Order {
 
         // phpcs:ignore WordPress.Security.NonceVerification.Recommended
         $order_id = isset($_GET['order_id']) ? intval($_GET['order_id']) : 0;
-        if(empty($order_id)){
+        $page = $order_id ? 'order-detail' : 'orders';
-            include FORMIPAY_PATH . 'admin/page-orders.php';
+
-        }else{
+        // Render React mount point
-            $order = formipay_get_order( $order_id );
+        printf(
-            include FORMIPAY_PATH . 'admin/page-order-details.php';
+            '<div id="formipay-admin-root" data-formipay-mount="%s"></div>',
-        }
+            esc_attr($page)
+        );
 
     }
 

includes/Product.php

@@ -228,7 +228,7 @@ class Product {
     }
 
     public function formipay_products() {
-        include_once FORMIPAY_PATH . 'admin/page-products.php';
+        \Formipay\Admin\ReactAdmin::render_mount_point('products');
     }
 
     public function cpt_post_fields_box($boxes) {

src/admin/components/dashboard/AnalyticsDashboard.js

@@ -5,7 +5,10 @@
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
-import { Icon, chartLine, money, shoppingCart } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import chartLine from '@wordpress/icons/build/chart-line';
+import money from '@wordpress/icons/build/money';
+import shoppingCart from '@wordpress/icons/build/shopping-cart';
 import { ordersApi } from '../../api/client';
 import './AnalyticsDashboard.css';
 
@@ -58,7 +61,7 @@ export default function AnalyticsDashboard() {
         <div className="formipay-analytics-dashboard">
             <div className="formipay-dashboard-header">
                 <h2>
-                    <Icon icon={chartLine} />
+                    <Icon icon={chartLine()} />
                     { __('Dashboard', 'formipay') }
                 </h2>
                 <SelectControl
@@ -82,7 +85,7 @@ export default function AnalyticsDashboard() {
                     <div className="formipay-stats-grid">
                         <div className="stat-card">
                             <div className="stat-icon">
-                                <Icon icon={shoppingCart} size={24} />
+                                <Icon icon={shoppingCart()} size={24} />
                             </div>
                             <div className="stat-content">
                                 <span className="stat-label">
@@ -96,7 +99,7 @@ export default function AnalyticsDashboard() {
 
                         <div className="stat-card">
                             <div className="stat-icon">
-                                <Icon icon={money} size={24} />
+                                <Icon icon={money()} size={24} />
                             </div>
                             <div className="stat-content">
                                 <span className="stat-label">

src/admin/components/formBuilder/FormCanvas.js

@@ -3,7 +3,8 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { Icon, plus } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import plus from '@wordpress/icons/build/plus';
 import { DEFAULT_FIELD_CONFIG, generateFieldId } from '../../config/fieldTypes';
 import FormField from './FormField';
 import './FormCanvas.css';
@@ -60,7 +61,7 @@ export default function FormCanvas({
             >
                 {fields.length === 0 ? (
                     <div className="formipay-empty-state">
-                        <Icon icon={plus} size={48} />
+                        <Icon icon={plus()} size={48} />
                         <p>
                             { __('Drag fields from the palette to build your form', 'formipay') }
                         </p>

src/admin/components/formBuilder/FormField.js

@@ -3,7 +3,10 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { Icon, chevronUp, chevronDown, trash } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import chevronUp from '@wordpress/icons/build/chevron-up';
+import chevronDown from '@wordpress/icons/build/chevron-down';
+import trash from '@wordpress/icons/build/trash';
 import { FIELD_TYPES } from '../../config/fieldTypes';
 import './FormField.css';
 
@@ -49,7 +52,7 @@ export default function FormField({
                         disabled={!onMoveUp}
                         title={ __('Move Up', 'formipay') }
                     >
-                        <Icon icon={chevronUp} size={16} />
+                        <Icon icon={chevronUp()} size={16} />
                     </button>
                     <button
                         type="button"
@@ -58,7 +61,7 @@ export default function FormField({
                         disabled={!onMoveDown}
                         title={ __('Move Down', 'formipay') }
                     >
-                        <Icon icon={chevronDown} size={16} />
+                        <Icon icon={chevronDown()} size={16} />
                     </button>
                     <button
                         type="button"
@@ -66,7 +69,7 @@ export default function FormField({
                         onClick={(e) => { e.stopPropagation(); onDelete?.(); }}
                         title={ __('Delete', 'formipay') }
                     >
-                        <Icon icon={trash} size={16} />
+                        <Icon icon={trash()} size={16} />
                     </button>
                 </div>
             </div>

src/admin/components/formBuilder/FormFieldOptions.js

@@ -4,7 +4,9 @@
 
 import { __ } from '@wordpress/i18n';
 import { TextControl, Button } from '@wordpress/components';
-import { Icon as WPIcon, plus } from '@wordpress/icons';
+import { Icon as WPIcon } from '@wordpress/icons';
+import plus from '@wordpress/icons/build/plus';
+import trash from '@wordpress/icons/build/trash';
 
 export default function FormFieldOptions({ options = [], onChange, fieldType }) {
     const handleAddOption = () => {
@@ -46,7 +48,7 @@ export default function FormFieldOptions({ options = [], onChange, fieldType })
                     variant="secondary"
                     size="compact"
                     onClick={handleAddOption}
-                    icon={<WPIcon icon={plus} size={16} />}
+                    icon={<WPIcon icon={plus()} size={16} />}
                 >
                     { __('Add Option', 'formipay') }
                 </Button>
@@ -85,7 +87,7 @@ export default function FormFieldOptions({ options = [], onChange, fieldType })
                                 variant="tertiary"
                                 size="compact"
                                 onClick={() => handleDeleteOption(index)}
-                                icon={<WPIcon icon={trash} size={16} />}
+                                icon={<WPIcon icon={trash()} size={16} />}
                                 label={__('Delete Option', 'formipay')}
                             />
                         </div>

src/admin/components/notifications/NotificationLog.js

@@ -3,7 +3,9 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { Icon, bell, mail, message } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import bell from '@wordpress/icons/build/bell';
+import message from '@wordpress/icons/build/message';
 import './NotificationLog.css';
 
 export default function NotificationLog() {
@@ -22,19 +24,19 @@ export default function NotificationLog() {
     const getIcon = (type) => {
         switch (type) {
             case 'email':
-                return mail;
+                return bell();
             case 'sms':
             case 'whatsapp':
-                return message;
+                return message();
             default:
-                return bell;
+                return bell();
         }
     };
 
     return (
         <div className="formipay-notification-log">
             <h3>
-                <Icon icon={bell} size={18} />
+                <Icon icon={bell()} size={18} />
                 { __('Notification Log', 'formipay') }
             </h3>
 

src/admin/components/orders/OrderDetail.js

@@ -5,7 +5,9 @@
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { Button, SelectControl } from '@wordpress/components';
-import { Icon, arrowLeft, trash } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import arrowLeft from '@wordpress/icons/build/arrow-left';
+import trash from '@wordpress/icons/build/trash';
 import { ordersApi } from '../../api/client';
 import OrderTimeline from './OrderTimeline';
 import NotificationLog from '../notifications/NotificationLog';
@@ -102,7 +104,7 @@ export default function OrderDetail({ orderId, onBack }) {
                         variant="secondary"
                         onClick={onBack}
                     >
-                        <Icon icon={arrowLeft} size={16} />
+                        <Icon icon={arrowLeft()} size={16} />
                         { __('Back to Orders', 'formipay') }
                     </Button>
                 </div>
@@ -122,7 +124,7 @@ export default function OrderDetail({ orderId, onBack }) {
                     variant="secondary"
                     onClick={onBack}
                 >
-                    <Icon icon={arrowLeft} size={16} />
+                    <Icon icon={arrowLeft()} size={16} />
                     { __('Back', 'formipay') }
                 </Button>
                 <h1>
@@ -134,7 +136,7 @@ export default function OrderDetail({ orderId, onBack }) {
                         isDestructive
                         onClick={handleDelete}
                     >
-                        <Icon icon={trash} size={16} />
+                        <Icon icon={trash()} size={16} />
                         { __('Delete', 'formipay') }
                     </Button>
                 </div>

src/admin/components/orders/OrderList.js

@@ -5,7 +5,8 @@
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { SearchControl, SelectControl, Button } from '@wordpress/components';
-import { Icon, list } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import list from '@wordpress/icons/build/list';
 import { ordersApi } from '../../api/client';
 import OrderListItem from './OrderListItem';
 import './OrderList.css';
@@ -85,7 +86,7 @@ export default function OrderList({ onSelectOrder }) {
         <div className="formipay-order-list">
             <div className="formipay-orders-header">
                 <h2>
-                    <Icon icon={list} />
+                    <Icon icon={list()} />
                     { __('Orders', 'formipay') }
                 </h2>
                 <span className="order-count">

src/admin/components/orders/OrderListItem.js

@@ -3,7 +3,8 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { Icon, seen } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import seen from '@wordpress/icons/build/visible';
 import './OrderListItem.css';
 
 const STATUS_COLORS = {
@@ -78,7 +79,7 @@ export default function OrderListItem({ order, onSelect }) {
                     className="button button-small"
                     onClick={onSelect}
                 >
-                    <Icon icon={seen} size={16} />
+                    <Icon icon={seen()} size={16} />
                     { __('View', 'formipay') }
                 </button>
             </td>

src/admin/components/products/VariationPricingTable.js

@@ -6,7 +6,10 @@
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
 import { TextControl, Button } from '@wordpress/components';
-import { Icon, minus, eye, eyeClosed } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import minus from '@wordpress/icons/build/minus';
+import eyeClosed from '@wordpress/icons/build/eye-closed';
+import eyeOpened from '@wordpress/icons/build/eye-opened';
 import './VariationPricingTable.css';
 
 export default function VariationPricingTable({ productId, productDetails }) {
@@ -462,7 +465,7 @@ function VariationRow({ row, rowIndex, showFlatPricing, defaultCurrencyCode,
                         size="small"
                         isDestructive
                         onClick={onDelete}
-                        icon={minus}
+                        icon={minus()}
                     >
                         { __('Delete', 'formipay') }
                     </Button>
@@ -537,6 +540,3 @@ function PriceCell({ price, field, onChange }) {
     );
 }
 
-// Icon helpers
-const eyeOpened = { ...eye, icon: 'eyeOpened' };
-const eyeClosed = { ...eyeClosed, icon: 'eyeClosed' };

src/admin/components/settings/GlobalSettings.js

@@ -5,7 +5,9 @@
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback } from '@wordpress/element';
 import { TextControl, CheckboxControl, SelectControl, Button, Panel, PanelBody, PanelRow } from '@wordpress/components';
-import { Icon, settings, save } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import settings from '@wordpress/icons/build/settings';
+import save from '@wordpress/icons/build/save';
 import './GlobalSettings.css';
 
 export default function GlobalSettings({ initialData }) {
@@ -61,7 +63,7 @@ export default function GlobalSettings({ initialData }) {
         <div className="formipay-global-settings">
             <div className="formipay-settings-header">
                 <h1>
-                    <Icon icon={settings} size={24} />
+                    <Icon icon={settings()} size={24} />
                     { __('Formipay Settings', 'formipay') }
                 </h1>
                 <div className="header-actions">
@@ -80,7 +82,7 @@ export default function GlobalSettings({ initialData }) {
                         onClick={handleSave}
                         disabled={saving}
                         isBusy={saving}
-                        icon={save}
+                        icon={save()}
                     >
                         { saving ? __('Saving...', 'formipay') : __('Save Settings', 'formipay') }
                     </Button>

src/admin/pages/Products.js

@@ -4,7 +4,8 @@
 
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Icon, plus } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
+import plus from '@wordpress/icons/build/plus';
 import VariationPricingTable from '../components/products/VariationPricingTable';
 
 export default function ProductsPage({ initialData }) {
@@ -50,7 +51,7 @@ export default function ProductsPage({ initialData }) {
                         setIsEditor(true);
                     }}
                 >
-                    <Icon icon={plus} size={16} />
+                    <Icon icon={plus()} size={16} />
                     { __('Add New Product', 'formipay') }
                 </button>
             </div>