feat: Implement Phase 2, 3, 4 - Module Settings System with Schema Forms and Addon API
Phase 2: Schema-Based Form System
- Add ModuleSettingsController with GET/POST/schema endpoints
- Create SchemaField component supporting 8 field types (text, textarea, email, url, number, toggle, checkbox, select)
- Create SchemaForm component for automatic form generation from schema
- Add ModuleSettings page with dynamic routing (/settings/modules/:moduleId)
- Add useModuleSettings React hook for settings management
- Implement NewsletterSettings as example with 8 configurable fields
- Add has_settings flag to module registry
- Settings stored as woonoow_module_{module_id}_settings
Phase 3: Advanced Features
- Create windowAPI.ts exposing React, hooks, components, icons, utils to addons via window.WooNooW
- Add DynamicComponentLoader for loading external React components
- Create TypeScript definitions (woonoow-addon.d.ts) for addon developers
- Initialize Window API in App.tsx on mount
- Enable custom React components for addon settings pages
Phase 4: Production Polish & Example
- Create complete Biteship addon example demonstrating both approaches:
* Schema-based settings (no build required)
* Custom React component (with build)
- Add comprehensive README with installation and testing guide
- Include package.json with esbuild configuration
- Demonstrate window.WooNooW API usage in custom component
Bug Fixes:
- Fix footer newsletter form visibility (remove redundant module check)
- Fix footer contact_data and social_links not saving (parameter name mismatch: snake_case vs camelCase)
- Fix useModules hook returning undefined (remove .data wrapper, add fallback)
- Add optional chaining to footer settings rendering
- Fix TypeScript errors in woonoow-addon.d.ts (use any for external types)
Files Added (15):
- includes/Api/ModuleSettingsController.php
- includes/Modules/NewsletterSettings.php
- admin-spa/src/components/forms/SchemaField.tsx
- admin-spa/src/components/forms/SchemaForm.tsx
- admin-spa/src/routes/Settings/ModuleSettings.tsx
- admin-spa/src/hooks/useModuleSettings.ts
- admin-spa/src/lib/windowAPI.ts
- admin-spa/src/components/DynamicComponentLoader.tsx
- types/woonoow-addon.d.ts
- examples/biteship-addon/biteship-addon.php
- examples/biteship-addon/src/Settings.jsx
- examples/biteship-addon/package.json
- examples/biteship-addon/README.md
- PHASE_2_3_4_SUMMARY.md
Files Modified (11):
- admin-spa/src/App.tsx
- admin-spa/src/hooks/useModules.ts
- admin-spa/src/routes/Appearance/Footer.tsx
- admin-spa/src/routes/Settings/Modules.tsx
- customer-spa/src/hooks/useModules.ts
- customer-spa/src/layouts/BaseLayout.tsx
- customer-spa/src/components/NewsletterForm.tsx
- includes/Api/Routes.php
- includes/Api/ModulesController.php
- includes/Core/ModuleRegistry.php
- woonoow.php
API Endpoints Added:
- GET /woonoow/v1/modules/{module_id}/settings
- POST /woonoow/v1/modules/{module_id}/settings
- GET /woonoow/v1/modules/{module_id}/schema
For Addon Developers:
- Schema-based: Define settings via woonoow/module_settings_schema filter
- Custom React: Build component using window.WooNooW API, externalize react/react-dom
- Both approaches use same storage and retrieval methods
- TypeScript definitions provided for type safety
- Complete working example (Biteship) included
This commit is contained in:
Dwindi Ramadhana
177
examples/biteship-addon/biteship-addon.php
Normal file
177
examples/biteship-addon/biteship-addon.php
Normal file
@@ -0,0 +1,177 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: WooNooW Biteship Shipping
|
||||
* Plugin URI: https://woonoow.com/addons/biteship
|
||||
* Description: Indonesia shipping integration with Biteship API - Example WooNooW Addon
|
||||
* Version: 1.0.0
|
||||
* Author: WooNooW Team
|
||||
* Author URI: https://woonoow.com
|
||||
* Requires Plugins: woonoow
|
||||
*
|
||||
* This is an EXAMPLE addon demonstrating the WooNooW module system integration.
|
||||
* It shows both schema-based settings AND custom React component patterns.
|
||||
*/
|
||||
|
||||
if (!defined('ABSPATH')) exit;
|
||||
|
||||
/**
|
||||
* Register Biteship as a WooNooW Module
|
||||
*/
|
||||
add_filter('woonoow/addon_registry', function($addons) {
|
||||
$addons['biteship-shipping'] = [
|
||||
'id' => 'biteship-shipping',
|
||||
'name' => 'Biteship Shipping',
|
||||
'description' => 'Real-time shipping rates from Indonesian couriers (JNE, J&T, SiCepat, and more)',
|
||||
'version' => '1.0.0',
|
||||
'author' => 'WooNooW Team',
|
||||
'category' => 'shipping',
|
||||
'icon' => 'truck',
|
||||
'features' => [
|
||||
'Real-time shipping rates',
|
||||
'Multiple courier support (JNE, J&T, SiCepat, AnterAja, Ninja Express)',
|
||||
'Automatic tracking integration',
|
||||
'Shipping label generation',
|
||||
'Cash on Delivery (COD) support',
|
||||
],
|
||||
'has_settings' => true,
|
||||
// Option 1: Use schema-based settings (uncomment to use)
|
||||
// 'settings_component' => null,
|
||||
|
||||
// Option 2: Use custom React component (current)
|
||||
'settings_component' => plugin_dir_url(__FILE__) . 'dist/Settings.js',
|
||||
];
|
||||
return $addons;
|
||||
});
|
||||
|
||||
/**
|
||||
* Register Settings Schema (Option 1: Schema-based)
|
||||
*
|
||||
* This provides a no-code settings form automatically
|
||||
*/
|
||||
add_filter('woonoow/module_settings_schema', function($schemas) {
|
||||
$schemas['biteship-shipping'] = [
|
||||
'api_key' => [
|
||||
'type' => 'text',
|
||||
'label' => __('Biteship API Key', 'biteship'),
|
||||
'description' => __('Get your API key from Biteship dashboard', 'biteship'),
|
||||
'placeholder' => 'biteship_xxxxxxxxxxxxx',
|
||||
'required' => true,
|
||||
],
|
||||
'environment' => [
|
||||
'type' => 'select',
|
||||
'label' => __('Environment', 'biteship'),
|
||||
'description' => __('Use test mode for development', 'biteship'),
|
||||
'options' => [
|
||||
'test' => __('Test Mode', 'biteship'),
|
||||
'production' => __('Production', 'biteship'),
|
||||
],
|
||||
'default' => 'test',
|
||||
],
|
||||
'origin_lat' => [
|
||||
'type' => 'text',
|
||||
'label' => __('Origin Latitude', 'biteship'),
|
||||
'description' => __('Your warehouse latitude coordinate', 'biteship'),
|
||||
'placeholder' => '-6.200000',
|
||||
],
|
||||
'origin_lng' => [
|
||||
'type' => 'text',
|
||||
'label' => __('Origin Longitude', 'biteship'),
|
||||
'description' => __('Your warehouse longitude coordinate', 'biteship'),
|
||||
'placeholder' => '106.816666',
|
||||
],
|
||||
'enable_cod' => [
|
||||
'type' => 'toggle',
|
||||
'label' => __('Enable Cash on Delivery', 'biteship'),
|
||||
'description' => __('Allow customers to pay on delivery', 'biteship'),
|
||||
'default' => false,
|
||||
],
|
||||
'enable_insurance' => [
|
||||
'type' => 'toggle',
|
||||
'label' => __('Enable Shipping Insurance', 'biteship'),
|
||||
'description' => __('Automatically add insurance to shipments', 'biteship'),
|
||||
'default' => true,
|
||||
],
|
||||
'enabled_couriers' => [
|
||||
'type' => 'select',
|
||||
'label' => __('Enabled Couriers', 'biteship'),
|
||||
'description' => __('Select which couriers to show to customers', 'biteship'),
|
||||
'options' => [
|
||||
'jne' => 'JNE',
|
||||
'jnt' => 'J&T Express',
|
||||
'sicepat' => 'SiCepat',
|
||||
'anteraja' => 'AnterAja',
|
||||
'ninja' => 'Ninja Express',
|
||||
'idexpress' => 'ID Express',
|
||||
],
|
||||
],
|
||||
'debug_mode' => [
|
||||
'type' => 'toggle',
|
||||
'label' => __('Debug Mode', 'biteship'),
|
||||
'description' => __('Log API requests for troubleshooting', 'biteship'),
|
||||
'default' => false,
|
||||
],
|
||||
];
|
||||
return $schemas;
|
||||
});
|
||||
|
||||
/**
|
||||
* Hook into WooNooW shipping calculation
|
||||
*
|
||||
* This is where the actual shipping logic would go
|
||||
*/
|
||||
add_filter('woonoow/shipping/calculate_rates', function($rates, $package) {
|
||||
// Check if module is enabled
|
||||
if (!class_exists('WooNooW\Core\ModuleRegistry')) {
|
||||
return $rates;
|
||||
}
|
||||
|
||||
if (!\WooNooW\Core\ModuleRegistry::is_enabled('biteship-shipping')) {
|
||||
return $rates;
|
||||
}
|
||||
|
||||
// Get settings
|
||||
$settings = get_option('woonoow_module_biteship-shipping_settings', []);
|
||||
|
||||
if (empty($settings['api_key'])) {
|
||||
return $rates;
|
||||
}
|
||||
|
||||
// TODO: Call Biteship API to get real rates
|
||||
// For now, return example rates
|
||||
$rates[] = [
|
||||
'id' => 'biteship_jne_reg',
|
||||
'label' => 'JNE Regular',
|
||||
'cost' => 15000,
|
||||
'meta_data' => [
|
||||
'courier' => 'JNE',
|
||||
'service' => 'REG',
|
||||
'etd' => '2-3 days',
|
||||
],
|
||||
];
|
||||
|
||||
$rates[] = [
|
||||
'id' => 'biteship_jnt_reg',
|
||||
'label' => 'J&T Express Regular',
|
||||
'cost' => 12000,
|
||||
'meta_data' => [
|
||||
'courier' => 'J&T',
|
||||
'service' => 'REG',
|
||||
'etd' => '2-4 days',
|
||||
],
|
||||
];
|
||||
|
||||
return $rates;
|
||||
}, 10, 2);
|
||||
|
||||
/**
|
||||
* React to settings changes
|
||||
*/
|
||||
add_action('woonoow/module_settings_updated/biteship-shipping', function($settings) {
|
||||
// Clear any caches
|
||||
delete_transient('biteship_courier_list');
|
||||
|
||||
// Log settings update in debug mode
|
||||
if (!empty($settings['debug_mode'])) {
|
||||
error_log('Biteship settings updated: ' . print_r($settings, true));
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user