dwindown/formipay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: React admin icon imports and mount point rendering

Browse Source 
- 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>
This commit is contained in:
dwindown
2026-04-18 13:28:57 +07:00
parent 6fd6d29fe8
commit ab69d03f78
25 changed files with 21577 additions and 14586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/admin/components/dashboard/AnalyticsDashboard.js
View File

@@ -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">

5
src/admin/components/formBuilder/FormCanvas.js
View File

@@ -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>

11
src/admin/components/formBuilder/FormField.js
View File

@@ -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>

8
src/admin/components/formBuilder/FormFieldOptions.js
View File

@@ -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>

12
src/admin/components/notifications/NotificationLog.js
View File

@@ -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>

10
src/admin/components/orders/OrderDetail.js
View File

@@ -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>

5
src/admin/components/orders/OrderList.js
View File

@@ -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">

5
src/admin/components/orders/OrderListItem.js
View File

@@ -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>

10
src/admin/components/products/VariationPricingTable.js
View File

@@ -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' };

8
src/admin/components/settings/GlobalSettings.js
View File

@@ -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>

5
src/admin/pages/Products.js
View File

@@ -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>