Preview

Overview

The Promotional Performance Form implements an e-commerce campaign metrics configuration flow. Designed for SaaS analytics platforms and retail intelligence suites, it allows performance marketers and retail analysts to select, tokenize, and calibrate up to 10 promotional indicators to evaluate their sales strategies.

Key UI & Architectural Features

1. Floating Vertical Step Navigation:

   • Left-docked steps:
     • 🏷️ Promo settings (Campaign name, promo code, discount rate, budget allocation).
     • 🛍️ Customer data (Target audience segments, geographic scope).
     • 📅 Timeframe (Campaign schedule and peak dates).
     • 📊 Indicators (Active step with dark slate #0e1e24 pill styling).
   • Fluid bidirectional navigation across the configuration wizard.

2. Tokenized Metric Search Bar:

   • Displays active selections as uppercase removable chips (e.g. AOV ×, ROI ×).
   • Supports inline metric text search (Search an indicator), clear-all trigger, and keyboard accessibility.

3. Hashtag Category Filter Chips:

   • Quick filtering by metric domain: # General Performance, # Sales, # Profitability, # Customers, and # Inventory & Logistics.

4. Interactive Metric Selection Rows:

   • Clean rows displaying metric titles (Average Order Value, Return on Investment, Sales Conversion Rate, Total Promotional Revenue, Total Gross Margin, Repeat Purchase Rate).
   • Contextual (?) tooltip popovers detailing calculation formulas and retail significance.

5. Floating Action Footer:

   • ← Back navigation button.
   • Dynamic counter badge: [ N ] / 10 indicators selected.
   • Reset and Validate buttons.