('/rajaongkir/destinations', { search });
- setOptions(data);
- } catch (error) {
- console.error('Failed to search destinations:', error);
- } finally {
- setLoading(false);
- }
- }, 300);
-
- return () => clearTimeout(timer);
- }, [search]);
-
- const handleSelect = (selectedValue: string) => {
- const selected = options.find(o => o.value === selectedValue);
- if (selected) {
- onChange(selected.value, selected.label);
- }
- };
-
- return (
-
-
-
- {label && (
-
Selected: {label}
- )}
-
- setShippingData({
- ...shippingData,
- destination_id: id,
- destination_label: label,
- })}
- />
-
-)}
-```
+| Option | Description |
+|--------|-------------|
+| `type` | `'searchable_select'` for API-backed search |
+| `search_endpoint` | REST API endpoint for searching |
+| `search_param` | Query param name (default: 'search') |
+| `min_chars` | Minimum characters before searching (default: 2) |
+| `placeholder` | Input placeholder text |
---
## Testing
-1. Install Rajaongkir plugin and configure API key
-2. Add the bridge code above
-3. Go to WooNooW Checkout
-4. Set country to Indonesia
-5. Type in the destination search field
+1. Add the code snippet via Code Snippets plugin
+2. Go to WooNooW checkout with a product in cart
+3. Set country to Indonesia
+4. A "Destination" field should appear
+5. Type at least 2 characters to search
6. Select a destination from dropdown
-7. Click "Calculate Shipping"
-8. Verify Rajaongkir rates appear
+7. Complete checkout - shipping rates should use selected destination
+
+---
+
+## How WooNooW Processes This
+
+```
+┌─────────────────┐ ┌───────────────────┐ ┌─────────────────┐
+│ PHP Filter adds │ ──▶ │ /checkout/fields │ ──▶ │ Customer-spa │
+│ shipping_ │ │ API returns field │ │ renders field │
+│ destination_id │ │ with type/config │ │ (searchable) │
+└─────────────────┘ └───────────────────┘ └─────────────────┘
+ │
+ ▼
+┌─────────────────┐ ┌───────────────────┐ ┌─────────────────┐
+│ Rajaongkir uses │ ◀── │ Hook fires with │ ◀── │ User submits │
+│ session data │ │ shipping data │ │ checkout │
+└─────────────────┘ └───────────────────┘ └─────────────────┘
+```
+
+---
+
+## Compatibility
+
+This works with:
+- **Standard WooCommerce filters** - no WooNooW-specific code needed
+- **Checkout Field Editor Pro** - all its fields will render
+- **Custom code snippets** - just use the filter
+- **Other shipping plugins** - same hook pattern works
---
## Troubleshooting
-### Destinations not loading?
+### Field not appearing?
+```php
+// Debug: Check if field is being added
+add_action('wp_footer', function() {
+ $fields = WC()->checkout()->get_checkout_fields();
+ error_log('Checkout fields: ' . print_r(array_keys($fields['shipping'] ?? []), true));
+});
+```
-Check the REST API endpoint:
+### Search not working?
```
GET /wp-json/woonoow/v1/rajaongkir/destinations?search=jakarta
```
-### Session not persisting?
-
-Verify the hook is firing:
+### Session not set?
```php
-add_action( 'woonoow/shipping/before_calculate', function( $shipping, $items ) {
- error_log( 'Shipping data: ' . print_r( $shipping, true ) );
-}, 5, 2 );
+add_action('woonoow/shipping/before_calculate', function($shipping) {
+ error_log('Shipping data: ' . print_r($shipping, true));
+}, 5);
```
---
## Related Documentation
-- [SHIPPING_INTEGRATION.md](SHIPPING_INTEGRATION.md) - General shipping integration guide
-- [SHIPPING_METHOD_TYPES.md](SHIPPING_METHOD_TYPES.md) - Shipping method types explanation
-- [Rajaongkir Plugin Documentation](https://cekongkir.com/docs)
+- [SHIPPING_INTEGRATION.md](SHIPPING_INTEGRATION.md) - General shipping patterns
+- [HOOKS_REGISTRY.md](HOOKS_REGISTRY.md) - All WooNooW hooks
diff --git a/customer-spa/src/components/DynamicCheckoutField.tsx b/customer-spa/src/components/DynamicCheckoutField.tsx
new file mode 100644
index 0000000..80106ee
--- /dev/null
+++ b/customer-spa/src/components/DynamicCheckoutField.tsx
@@ -0,0 +1,294 @@
+import React, { useState, useEffect } from 'react';
+import { SearchableSelect } from '@/components/ui/searchable-select';
+import { api } from '@/lib/api/client';
+
+interface CheckoutField {
+ key: string;
+ fieldset: 'billing' | 'shipping' | 'account' | 'order';
+ type: string;
+ label: string;
+ placeholder?: string;
+ required: boolean;
+ hidden: boolean;
+ class?: string[];
+ priority: number;
+ options?: Record | null;
+ custom: boolean;
+ autocomplete?: string;
+ validate?: string[];
+ input_class?: string[];
+ custom_attributes?: Record;
+ default?: string;
+ // For searchable_select type
+ search_endpoint?: string | null;
+ search_param?: string;
+ min_chars?: number;
+}
+
+interface DynamicCheckoutFieldProps {
+ field: CheckoutField;
+ value: string;
+ onChange: (value: string) => void;
+ countryOptions?: { value: string; label: string }[];
+ stateOptions?: { value: string; label: string }[];
+}
+
+interface SearchOption {
+ value: string;
+ label: string;
+}
+
+export function DynamicCheckoutField({
+ field,
+ value,
+ onChange,
+ countryOptions = [],
+ stateOptions = [],
+}: DynamicCheckoutFieldProps) {
+ const [searchOptions, setSearchOptions] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+
+ // For searchable_select with API endpoint
+ useEffect(() => {
+ if (field.type !== 'searchable_select' || !field.search_endpoint) {
+ return;
+ }
+
+ // If we have a value but no options yet, we might need to load it
+ // This handles pre-selected values
+ }, [field.type, field.search_endpoint, value]);
+
+ // Handle API search for searchable_select
+ const handleApiSearch = async (searchTerm: string) => {
+ if (!field.search_endpoint) return;
+
+ const minChars = field.min_chars || 2;
+ if (searchTerm.length < minChars) {
+ setSearchOptions([]);
+ return;
+ }
+
+ setIsSearching(true);
+ try {
+ const param = field.search_param || 'search';
+ const results = await api.get(field.search_endpoint, { [param]: searchTerm });
+ setSearchOptions(Array.isArray(results) ? results : []);
+ } catch (error) {
+ console.error('Search failed:', error);
+ setSearchOptions([]);
+ } finally {
+ setIsSearching(false);
+ }
+ };
+
+ // Don't render hidden fields
+ if (field.hidden) {
+ return null;
+ }
+
+ // Get field key without prefix (billing_, shipping_)
+ const fieldName = field.key.replace(/^(billing_|shipping_)/, '');
+
+ // Determine CSS classes
+ const isWide = ['address_1', 'address_2', 'email'].includes(fieldName) ||
+ field.class?.includes('form-row-wide');
+ const wrapperClass = isWide ? 'md:col-span-2' : '';
+
+ // Render based on type
+ const renderInput = () => {
+ switch (field.type) {
+ case 'country':
+ return (
+
+ );
+
+ case 'state':
+ return stateOptions.length > 0 ? (
+
+ ) : (
+ onChange(e.target.value)}
+ placeholder={field.placeholder}
+ required={field.required}
+ autoComplete={field.autocomplete}
+ className="w-full border rounded-lg px-4 py-2"
+ />
+ );
+
+ case 'select':
+ if (field.options && Object.keys(field.options).length > 0) {
+ const options = Object.entries(field.options).map(([val, label]) => ({
+ value: val,
+ label: String(label),
+ }));
+ return (
+
+ );
+ }
+ return null;
+
+ case 'searchable_select':
+ return (
+ {
+ onChange(v);
+ // Also store label for display
+ const selected = searchOptions.find(o => o.value === v);
+ if (selected) {
+ // Store label in a hidden field with _label suffix
+ const event = new CustomEvent('woonoow:field_label', {
+ detail: { key: field.key + '_label', value: selected.label }
+ });
+ document.dispatchEvent(event);
+ }
+ }}
+ placeholder={isSearching ? 'Searching...' : (field.placeholder || `Search ${field.label}...`)}
+ emptyLabel={
+ isSearching
+ ? 'Searching...'
+ : `Type at least ${field.min_chars || 2} characters to search`
+ }
+ />
+ );
+
+ case 'textarea':
+ return (
+