Skip to main content

Site Edit Modal - Tabbed Sync Configuration

Implementation Complete ✅​

Successfully implemented a tabbed interface for sync settings in the site edit modal with individual health check URLs for each sync type.

Visual Layout​

┌────────────────────────────────────────────────────────────────┐
│  Edit Site: Main BigCommerce Store                         ✕   │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  ▼ Site Information                                            │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │  Platform: [BigCommerce ▾]  Name: [Main Store]          │ │
│  │  Order Prefix: [BC]         Store URL: [https://...]    │ │
│  │  ☑ Active  ☐ Staging Environment                        │ │
│  └──────────────────────────────────────────────────────────┘ │
│                                                                │
│  ▼ Sync Configuration                                          │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │  ┌─────────┬───────────┬──────────┬──────────┬────────┐  │ │
│  │  │ Orders  │ Inventory │ Tracking │BazaarVoice│  Kit  │  │ │
│  │  └─────────┴───────────┴──────────┴──────────┴────────┘  │ │
│  │  ──────────────────────────────────────────────────────  │ │
│  │                                                           │ │
│  │  ☑ Enable Order Sync                                     │ │
│  │     Sync orders from this site to Business Central        │ │
│  │                                                           │ │
│  │  Health Check URL                                        │ │
│  │  ┌────────────────────────────────────────────────────┐ │ │
│  │  │ https://healthchecks.io/ping/...                   │ │ │
│  │  └────────────────────────────────────────────────────┘ │ │
│  │  Optional URL to ping for order sync health monitoring   │ │
│  └──────────────────────────────────────────────────────────┘ │
│                                                                │
│  ▼ BigCommerce Credentials                                     │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │  Store Hash: [abc123]  Client ID: [xyz789]              │ │
│  │  Access Token: [••••••]  Channel ID: [1]                │ │
│  └──────────────────────────────────────────────────────────┘ │
│                                                                │
│  ▼ Additional Settings                                         │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │  ☑ Enable Signifyd Fraud Protection                     │ │
│  └──────────────────────────────────────────────────────────┘ │
│                                                                │
├────────────────────────────────────────────────────────────────┤
│  [Save Site]  [Cancel]                                         │
└────────────────────────────────────────────────────────────────┘

Tab Content Examples​

When "Inventory" Tab is Selected​

┌──────────────────────────────────────────────────────────┐
│  ┌─────────┬───────────┬──────────┬──────────┬────────┐  │
│  │ Orders  │ Inventory │ Tracking │BazaarVoice│  Kit  │  │
│  └─────────┴═══════════┴──────────┴──────────┴────────┘  │
│  ──────────────────────────────────────────────────────  │
│                                                           │
│  ☑ Enable Inventory Sync                                 │
│     Update product inventory from Business Central        │
│                                                           │
│  Health Check URL                                        │
│  ┌────────────────────────────────────────────────────┐ │
│  │ https://healthchecks.io/ping/inv-abc-123           │ │
│  └────────────────────────────────────────────────────┘ │
│  Optional URL to ping for inventory sync monitoring      │
│                                                           │
│  Webhook Secret 🔒                                       │
│  ┌────────────────────────────────────────────────────┐ │
│  │ ••••••••••••••••••••••••••••••••                  │ │
│  └────────────────────────────────────────────────────┘ │
│  Secret for verifying BigCommerce product webhooks       │
└──────────────────────────────────────────────────────────┘

When "Tracking" Tab is Selected​

┌──────────────────────────────────────────────────────────┐
│  ┌─────────┬───────────┬──────────┬──────────┬────────┐  │
│  │ Orders  │ Inventory │ Tracking │BazaarVoice│  Kit  │  │
│  └─────────┴───────────┴══════════┴──────────┴────────┘  │
│  ──────────────────────────────────────────────────────  │
│                                                           │
│  ☑ Enable Tracking Sync                                  │
│     Sync tracking numbers from Business Central           │
│                                                           │
│  Health Check URL                                        │
│  ┌────────────────────────────────────────────────────┐ │
│  │ https://healthchecks.io/ping/track-xyz-789         │ │
│  └────────────────────────────────────────────────────┘ │
│  Optional URL to ping for tracking sync monitoring       │
└──────────────────────────────────────────────────────────┘

Benefits​

1. Organization​

  • Clear Separation: Each sync type has its own space
  • No Clutter: Only relevant settings shown
  • Easy Navigation: Click tabs to switch between sync types

2. Monitoring​

  • Independent Tracking: Monitor each sync type separately
  • Health Check URLs: Use services like healthchecks.io
  • Immediate Alerts: Know when a specific sync fails

3. Scalability​

  • Extensible: Easy to add more settings per tab
  • Platform-Specific: Show/hide based on platform (e.g., webhook secret for BigCommerce only)
  • Conditional: BazaarVoice panel only appears when enabled

4. User Experience​

  • Intuitive: Familiar tab interface
  • Consistent: Matches WordPress admin design
  • Accessible: Keyboard navigation support
  • Responsive: Works on all screen sizes

Technical Details​

Component Structure​

<PanelBody title="Sync Configuration">
  <TabPanel tabs={[
    { name: 'orders', title: 'Order Sync' },
    { name: 'inventory', title: 'Inventory Sync' },
    { name: 'tracking', title: 'Tracking Sync' },
    { name: 'bazaarvoice', title: 'BazaarVoice' },
    { name: 'kit', title: 'Kit Builder' },
  ]}>
    {(tab) => (
      <div className="gsm-sync-tab-content">
        {/* Tab-specific content */}
      </div>
    )}
  </TabPanel>
</PanelBody>

Form State Management​

Each tab has its own form fields:

  • orders_sync, orders_health_url
  • inventory_sync, inventory_health_url, webhook_secret
  • tracking_sync, tracking_health_url
  • bazaarvoice_sync, bazaarvoice_health_url
  • kit_sync, kit_health_url

All fields are stored in the same form state object and saved together.

Database Schema​

New columns in rm_sites table:

orders_health_url       VARCHAR(500) NULL
inventory_health_url    VARCHAR(500) NULL
tracking_health_url     VARCHAR(500) NULL
bazaarvoice_health_url  VARCHAR(500) NULL
kit_health_url          VARCHAR(500) NULL
webhook_secret          VARCHAR(255) NULL  -- From previous migration

Files Changed​

1. React Component​

File: assets/js/components/SiteFormModal.jsx

  • ✅ Added TabPanel import
  • ✅ Restructured sync settings into tabs
  • ✅ Added health URL fields for each sync type
  • ✅ Added webhook secret field for inventory sync
  • ✅ Updated DEFAULT_FORM with new fields
  • ✅ Platform-specific logic (Kit tab only for BigCommerce)

2. Stylesheet​

File: assets/js/site-manager.scss

  • ✅ Added .gsm-sync-tabs styles
  • ✅ Tab navigation styling
  • ✅ Active tab indicator
  • ✅ Tab content spacing
  • ✅ Hover and focus states

3. Database Migration​

File: src/Database/migrations/002_add_sync_health_urls.php

  • ✅ Adds new health URL columns
  • ✅ Migrates old health_check_url → orders_health_url
  • ✅ Migrates old health_check_inventory_url → inventory_health_url
  • ✅ Includes rollback functionality

4. Documentation​

Files Updated:

  • docs/docs/features/site-management.md - Added tab configuration guide
  • docs/docs/operations/inventory-sync.md - Updated with webhook details
  • docs/docs/operations/inventory-sync/webhooks.md - New comprehensive guide
  • docs/docs/operations/inventory-sync/queue-management.md - New queue guide
  • docs/docs/operations/inventory-sync/performance.md - New performance guide

Testing Checklist​

  • Build succeeds without errors
  • Documentation builds successfully
  • TypeScript/JavaScript has no errors
  • SCSS compiles correctly
  • Database migration created
  • Migration handles existing data
  • All tabs render
  • Form state updates correctly
  • Platform-specific fields show/hide
  • Responsive design maintained

Usage Instructions​

For End Users​

  1. Navigate to Control Panel

    • Go to WordPress Admin → GSM Middleware → Control Panel

  2. Edit a Site

    • Click "Edit" button on any site

  3. Configure Sync Settings

    • Click on any tab (Orders, Inventory, Tracking, etc.)
    • Enable/disable that specific sync
    • Optionally add a health check URL
    • For Inventory + BigCommerce: Add webhook secret

  4. Save Changes

    • Click "Save Site"
    • Changes apply immediately

For Developers​

Adding a new tab:

// In SiteFormModal.jsx tabs array
{
  name: 'new_sync_type',
  title: __('New Sync Type', 'gsm-integrator'),
  className: 'gsm-sync-tab',
}

// In TabPanel children
{tab.name === 'new_sync_type' && (
  <>
    <ToggleControl
      label={__('Enable New Sync', 'gsm-integrator')}
      checked={!!form.new_sync_enabled}
      onChange={set('new_sync_enabled')}
    />
    <TextControl
      label={__('Health Check URL', 'gsm-integrator')}
      type="url"
      value={form.new_sync_health_url}
      onChange={set('new_sync_health_url')}
    />
  </>
)}

Adding database field:

// In migration file
if (!in_array('new_sync_health_url', $columns, true)) {
  $columns_to_add[] = 'ADD COLUMN new_sync_health_url VARCHAR(500) NULL';
}