StratIQX Documentation

Appearance

StratIQX Services Management Guide ​

A comprehensive guide to managing your centralized service configuration system.

📋 Table of Contents ​

  1. Overview
  2. Service Configuration Structure
  3. Adding New Services
  4. Modifying Existing Services
  5. Service Status Management
  6. Pricing & Deposit Management
  7. Testing & Validation
  8. Best Practices
  9. Troubleshooting
  10. Advanced Configuration

🎯 Overview ​

Your StratIQX platform uses a centralized service configuration system located in:

src/config/services.config.ts

This single file controls ALL service definitions across your entire platform, eliminating the need for hardcoded values in multiple components.

🗂️ Architecture Benefits ​

  • ✅ Single Source of Truth: All service data in one place
  • ✅ Type Safety: Full TypeScript support with validation
  • ✅ Dynamic UI Updates: Changes reflect across all pages automatically
  • ✅ Consistent Branding: Uniform service presentation
  • ✅ Easy A/B Testing: Quick price/feature experiments

🛠️ Service Configuration Structure ​

Basic Service Template ​

typescript
'service-id': {
  id: 'service-id',                    // Must match key
  name: 'Service Display Name',        // Shows on UI
  description: 'Detailed description', // Marketing copy
  
  price: {
    value: 8500,                       // Numeric value in USD
    display: '$8,500'                  // Formatted display string
  },
  
  deposit: {
    type: 'percentage',                // 'fixed' | 'percentage' | 'full-price' | 'none'
    value: 25,                         // Amount or percentage
    amount: 2125,                      // Calculated deposit (auto-computed)
    display: '25% deposit required'    // User-friendly text
  },
  
  billingType: 'one-time',            // 'one-time' | 'monthly'
  
  features: [                         // Bullet points for UI
    'Feature 1',
    'Feature 2',
    'Feature 3'
  ],
  
  metadata: {                         // Additional service info
    deliveryTime: '2-3 weeks',
    reportPages: '30-50'
  },
  
  icon: 'BarChart3',                 // Lucide icon name
  popular: false,                    // Shows "Most Popular" badge
  active: true,                      // Service is available
  comingSoon: false,                 // Shows "Coming Soon" badge
  displayOrder: 1                    // Sort order (0 = first)
}

➕ Adding New Services ​

Step 1: Define the Service ​

Add your new service to SERVICES_CONFIG in services.config.ts:

typescript
'my-new-service': {
  id: 'my-new-service',
  name: 'Advanced Market Research',
  description: 'Deep-dive analysis with predictive modeling and scenario planning.',
  
  price: {
    value: 15000,
    display: '$15,000'
  },
  
  deposit: {
    type: 'fixed',
    value: 5000,
    amount: 5000,
    display: '$5,000 deposit required'
  },
  
  billingType: 'one-time',
  
  features: [
    'Predictive market modeling',
    'Scenario planning analysis',
    '60+ page comprehensive report',
    'Executive presentation included'
  ],
  
  metadata: {
    deliveryTime: '4-6 weeks',
    reportPages: '60+',
    includesPresentation: true
  },
  
  icon: 'TrendingUp',
  popular: false,
  active: true,
  displayOrder: 2
}

Step 2: Add Icon (if needed) ​

If using a new icon, add it to icons.config.ts:

typescript
import { TrendingUp } from 'lucide-react'

const ICON_MAP: Record<string, React.ComponentType<any>> = {
  // ... existing icons
  'TrendingUp': TrendingUp,
}

Step 3: Test & Validate ​

bash
npm run build    # Check for errors
npm test         # Run validation tests

✏️ Modifying Existing Services ​

Changing Prices ​

typescript
// Update both value and display
price: {
  value: 12000,        // New numeric price
  display: '$12,000'   // Update display format
}

Updating Features ​

typescript
features: [
  'Updated feature 1',
  'New premium feature',    // Add new features
  'Enhanced capability'     // Modify existing ones
]

Modifying Deposits ​

typescript
// Fixed deposit
deposit: {
  type: 'fixed',
  value: 3000,
  amount: 3000,
  display: '$3,000 deposit required'
}

// Percentage deposit
deposit: {
  type: 'percentage', 
  value: 30,
  amount: 0,  // Will be auto-calculated
  display: '30% deposit required'
}

// No deposit
deposit: {
  type: 'none',
  amount: 0,
  display: 'No deposit required'
}

🎛️ Service Status Management ​

Making Services Active/Inactive ​

typescript
// Available for purchase
active: true,
comingSoon: false

// Coming soon (shows but not selectable)
active: true,
comingSoon: true

// Hidden completely
active: false
typescript
// Show "Most Popular" badge
popular: true

// Remove badge
popular: false

Display Order ​

typescript
displayOrder: 0    // Shows first
displayOrder: 1    // Shows second
displayOrder: 2    // Shows third

💰 Pricing & Deposit Management ​

Deposit Types Explained ​

1. Fixed Deposit ​

typescript
deposit: {
  type: 'fixed',
  value: 2500,                    // Fixed amount
  amount: 2500,
  display: '$2,500 deposit required'
}

2. Percentage Deposit ​

typescript
deposit: {
  type: 'percentage',
  value: 25,                      // 25% of price
  amount: 0,                      // Auto-calculated
  display: '25% deposit required'
}

3. Full Price Payment ​

typescript
deposit: {
  type: 'full-price',
  amount: 0,                      // Will match full price
  display: 'Full payment required'
}

4. No Deposit Required ​

typescript
deposit: {
  type: 'none',
  amount: 0,
  display: 'No deposit required'
}

Free Services ​

typescript
price: {
  value: 0,
  display: 'Free Executive Report'    // Will show in green
},
deposit: {
  type: 'none',
  amount: 0,
  display: 'No credit card required'
}

🧪 Testing & Validation ​

Automatic Validation ​

The system includes built-in validation. Run tests with:

bash
npm test src/config/__tests__/services.config.test.ts

Manual Testing Checklist ​

  • [ ] Service displays correctly on landing page
  • [ ] Payment page shows correct deposit amount
  • [ ] Icons render properly
  • [ ] "Coming Soon" services are not selectable
  • [ ] Popular badges appear correctly
  • [ ] Free services show in green

Build Testing ​

bash
npm run build    # Must pass without errors

🎯 Best Practices ​

1. Naming Conventions ​

  • Service IDs: kebab-case (e.g., market-intelligence)
  • Names: Title Case (e.g., Market Intelligence Reports)
  • Keep descriptions under 150 characters

2. Pricing Strategy ​

  • Use round numbers for better psychology ($8,500 vs $8,473)
  • Percentage deposits typically 20-30%
  • Fixed deposits for high-value services

3. Feature Lists ​

  • 4-7 features per service (optimal for UI)
  • Lead with strongest value proposition
  • Use action-oriented language

4. Display Order Strategy ​

typescript
displayOrder: 0    // Free/trial service (lead magnet)
displayOrder: 1    // Main paid offering
displayOrder: 2    // Premium services
displayOrder: 3+   // Specialized/coming soon

5. Icon Selection ​

  • BarChart3: Analytics/reporting services
  • Target: Strategic/advisory services
  • RotateCcw: Ongoing/subscription services
  • TrendingUp: Growth/forecasting services

🔧 Troubleshooting ​

Common Issues & Solutions ​

Service Not Displaying ​

typescript
// Check these fields:
active: true,           // Must be true
comingSoon: false,      // False for selectable services

Wrong Deposit Amount ​

typescript
// For percentage deposits, amount is auto-calculated
deposit: {
  type: 'percentage',
  value: 25,
  amount: 0,            // Leave as 0 - will auto-calculate
  display: '25% deposit required'
}

Icon Not Showing ​

  1. Check icon is imported in icons.config.ts
  2. Verify icon name matches exactly
  3. Ensure icon exists in Lucide React library

Build Errors ​

  • Check for TypeScript errors in service definitions
  • Ensure all required fields are present
  • Validate service ID matches object key

Debug Mode ​

Add console logs to see what's happening:

typescript
console.log('Active services:', ServiceConfigUtils.getActiveServices());
console.log('Service details:', ServiceConfigUtils.getService('service-id'));

🚀 Advanced Configuration ​

A/B Testing Prices ​

typescript
// Use environment variables or feature flags
price: {
  value: process.env.VITE_TEST_PRICING === 'true' ? 10000 : 8500,
  display: process.env.VITE_TEST_PRICING === 'true' ? '$10,000' : '$8,500'
}

Seasonal Promotions ​

typescript
// Add promotional fields
metadata: {
  deliveryTime: '2-3 weeks',
  promotion: {
    active: true,
    originalPrice: '$8,500',
    discountPercent: 20,
    validUntil: '2024-12-31'
  }
}

Dynamic Pricing ​

typescript
// Calculate based on market conditions
price: {
  value: calculateDynamicPrice('market-intelligence'),
  display: formatPrice(calculateDynamicPrice('market-intelligence'))
}

Service Dependencies ​

typescript
metadata: {
  deliveryTime: '2-3 weeks',
  prerequisites: ['free-trial'],        // Must complete first
  addOns: ['executive-presentation'],   // Optional upgrades
  bundleWith: ['ongoing-retainer']      // Recommended combinations
}

📊 Service Performance Tracking ​

Key Metrics to Monitor ​

  1. Conversion Rates: Free → Paid service upgrades
  2. Service Popularity: Which services get selected most
  3. Deposit Success: Payment completion rates by deposit amount
  4. Feature Appeal: Which features resonate with users

Analytics Integration ​

typescript
metadata: {
  deliveryTime: '2-3 weeks',
  analytics: {
    category: 'premium-service',
    trackingId: 'market-intel-v2',
    conversionGoal: 'purchase-completion'
  }
}

📄 Version Control & Deployment ​

Safe Deployment Process ​

  1. Test Locally: npm run build and npm test
  2. Staged Rollout: Deploy to staging environment first
  3. Monitor Metrics: Watch conversion rates and error logs
  4. Quick Rollback: Keep previous config versions in git

Git Best Practices ​

bash
# Descriptive commit messages
git commit -m "Update market intelligence pricing from $8,500 to $9,000"

# Tag significant changes
git tag -a "services-v2.1" -m "Added premium tier services"

🎯 Strategic Insights ​

Service Lineup Strategy ​

Current Optimal Setup ✅ ​

1. Free Executive Report (Lead Magnet)
2. Market Intelligence Reports (Core Paid)
3-5. Coming Soon Services (Future Growth)

Conversion Funnel ​

  • Free Service: Demonstrates quality and builds trust
  • Mid-tier Service: Main revenue driver with clear value
  • Premium Services: High-value clients and upsells

Pricing Psychology ​

  • Anchor High: Show premium options first
  • Value Contrast: Clear differentiation between tiers
  • Deposit Strategy: Lower barrier to entry, commitment device

Market Positioning ​

  • Premium Positioning: Higher prices = perceived higher value
  • Service-Based Model: Deliverables over access/subscriptions
  • AI-Powered Differentiator: Emphasize technology advantage

📞 Support & Maintenance ​

Regular Maintenance Tasks ​

  • Monthly: Review service performance and conversion rates
  • Quarterly: Update pricing based on market conditions
  • Annually: Comprehensive service portfolio review

Getting Help ​

  • Technical Issues: Check build errors and TypeScript warnings
  • Business Strategy: Analyze service performance metrics
  • User Experience: Test customer journey from selection to payment

🎉 Conclusion ​

Your centralized service configuration system provides:

  • Flexibility: Easy updates and experiments
  • Consistency: Uniform presentation across all touchpoints
  • Scalability: Add services without code changes
  • Maintainability: Single file to manage everything

Keep this guide handy as your service offerings evolve and grow! 🚀

Last updated: 2025 | StratIQX Services Management Guide v2.0

Strategic Intelligence Hub Documentation

Copyright © 2024-present StratIQX