WooNooW/examples/biteship-addon/src/Settings.jsx

/**
 * Biteship Custom Settings Component
 * 
 * This demonstrates how to create a custom React settings page for a WooNooW addon
 * using the exposed window.WooNooW API
 */

// Access WooNooW API from window
const { React, hooks, components, icons, utils } = window.WooNooW;
const { useModuleSettings } = hooks;
const { SettingsLayout, SettingsCard, Input, Button, Switch, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Badge } = components;
const { Settings: SettingsIcon, Save, AlertCircle, Check } = icons;
const { toast } = utils;

function BiteshipSettings() {
  const { settings, isLoading, updateSettings } = useModuleSettings('biteship-shipping');
  const [formData, setFormData] = React.useState({});
  const [testingConnection, setTestingConnection] = React.useState(false);
  const [connectionStatus, setConnectionStatus] = React.useState(null);

  // Initialize form data from settings
  React.useEffect(() => {
    if (settings) {
      setFormData(settings);
    }
  }, [settings]);

  const handleChange = (key, value) => {
    setFormData(prev => ({ ...prev, [key]: value }));
  };

  const handleSave = () => {
    updateSettings.mutate(formData);
  };

  const testConnection = async () => {
    if (!formData.api_key) {
      toast.error('Please enter an API key first');
      return;
    }

    setTestingConnection(true);
    setConnectionStatus(null);

    // Simulate API test (in real addon, call Biteship API)
    setTimeout(() => {
      const isValid = formData.api_key.startsWith('biteship_');
      setConnectionStatus(isValid ? 'success' : 'error');
      setTestingConnection(false);
      
      if (isValid) {
        toast.success('Connection successful!');
      } else {
        toast.error('Invalid API key format');
      }
    }, 1500);
  };

  if (isLoading) {
    return React.createElement(SettingsLayout, { title: 'Biteship Settings', isLoading: true });
  }

  return React.createElement(SettingsLayout, {
    title: 'Biteship Shipping Settings',
    description: 'Configure your Biteship integration for Indonesian shipping'
  },
    // API Configuration Card
    React.createElement(SettingsCard, {
      title: 'API Configuration',
      description: 'Connect your Biteship account'
    },
      React.createElement('div', { className: 'space-y-4' },
        // API Key
        React.createElement('div', { className: 'space-y-2' },
          React.createElement('label', { className: 'text-sm font-medium' }, 'API Key'),
          React.createElement('div', { className: 'flex gap-2' },
            React.createElement(Input, {
              type: 'password',
              value: formData.api_key || '',
              onChange: (e) => handleChange('api_key', e.target.value),
              placeholder: 'biteship_xxxxxxxxxxxxx'
            }),
            React.createElement(Button, {
              variant: 'outline',
              onClick: testConnection,
              disabled: testingConnection
            }, testingConnection ? 'Testing...' : 'Test Connection')
          ),
          connectionStatus && React.createElement('div', {
            className: `flex items-center gap-2 text-sm ${connectionStatus === 'success' ? 'text-green-600' : 'text-red-600'}`
          },
            React.createElement(connectionStatus === 'success' ? Check : AlertCircle, { className: 'h-4 w-4' }),
            connectionStatus === 'success' ? 'Connection successful' : 'Connection failed'
          )
        ),

        // Environment
        React.createElement('div', { className: 'space-y-2' },
          React.createElement('label', { className: 'text-sm font-medium' }, 'Environment'),
          React.createElement(Select, {
            value: formData.environment || 'test',
            onValueChange: (value) => handleChange('environment', value)
          },
            React.createElement(SelectTrigger, null,
              React.createElement(SelectValue, null)
            ),
            React.createElement(SelectContent, null,
              React.createElement(SelectItem, { value: 'test' }, 'Test Mode'),
              React.createElement(SelectItem, { value: 'production' }, 'Production')
            )
          ),
          React.createElement('p', { className: 'text-xs text-muted-foreground' },
            'Use test mode for development and testing'
          )
        )
      )
    ),

    // Origin Location Card
    React.createElement(SettingsCard, {
      title: 'Origin Location',
      description: 'Your warehouse or pickup location'
    },
      React.createElement('div', { className: 'grid grid-cols-2 gap-4' },
        React.createElement('div', { className: 'space-y-2' },
          React.createElement('label', { className: 'text-sm font-medium' }, 'Latitude'),
          React.createElement(Input, {
            value: formData.origin_lat || '',
            onChange: (e) => handleChange('origin_lat', e.target.value),
            placeholder: '-6.200000'
          })
        ),
        React.createElement('div', { className: 'space-y-2' },
          React.createElement('label', { className: 'text-sm font-medium' }, 'Longitude'),
          React.createElement(Input, {
            value: formData.origin_lng || '',
            onChange: (e) => handleChange('origin_lng', e.target.value),
            placeholder: '106.816666'
          })
        )
      )
    ),

    // Features Card
    React.createElement(SettingsCard, {
      title: 'Features',
      description: 'Enable or disable shipping features'
    },
      React.createElement('div', { className: 'space-y-4' },
        // COD
        React.createElement('div', { className: 'flex items-center justify-between' },
          React.createElement('div', null,
            React.createElement('p', { className: 'font-medium' }, 'Cash on Delivery'),
            React.createElement('p', { className: 'text-sm text-muted-foreground' }, 'Allow customers to pay on delivery')
          ),
          React.createElement(Switch, {
            checked: formData.enable_cod || false,
            onCheckedChange: (checked) => handleChange('enable_cod', checked)
          })
        ),

        // Insurance
        React.createElement('div', { className: 'flex items-center justify-between' },
          React.createElement('div', null,
            React.createElement('p', { className: 'font-medium' }, 'Shipping Insurance'),
            React.createElement('p', { className: 'text-sm text-muted-foreground' }, 'Automatically add insurance to shipments')
          ),
          React.createElement(Switch, {
            checked: formData.enable_insurance !== false,
            onCheckedChange: (checked) => handleChange('enable_insurance', checked)
          })
        ),

        // Debug Mode
        React.createElement('div', { className: 'flex items-center justify-between' },
          React.createElement('div', null,
            React.createElement('p', { className: 'font-medium' }, 'Debug Mode'),
            React.createElement('p', { className: 'text-sm text-muted-foreground' }, 'Log API requests for troubleshooting')
          ),
          React.createElement(Switch, {
            checked: formData.debug_mode || false,
            onCheckedChange: (checked) => handleChange('debug_mode', checked)
          })
        )
      )
    ),

    // Save Button
    React.createElement('div', { className: 'flex justify-end' },
      React.createElement(Button, {
        onClick: handleSave,
        disabled: updateSettings.isPending
      },
        React.createElement(Save, { className: 'mr-2 h-4 w-4' }),
        updateSettings.isPending ? 'Saving...' : 'Save Settings'
      )
    )
  );
}

// Export component to global scope for WooNooW to load
window.WooNooWAddon_biteship_shipping = BiteshipSettings;