@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/preview/NotificationContainer.js

@@ -0,0 +1,294 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import chromeIcon from './assets/chrome-icon.png';
+import AndroidMobileChromeHeader from './components/AndroidMobileChromeHeader';
+import AndroidMobileExpanded from './components/AndroidMobileExpanded';
+import NotificationExpandedContent from './components/NotificationExpandedContent';
+import NotificationHeader from './components/NotificationHeader';
+import WindowsChromeExpanded from './components/WindowsChromeExpanded';
+import IOSHeader from './components/IOSHeader';
+import {
+  OS_MACOS,
+  OS_IOS,
+  OS_IPADOS,
+  OS_WINDOWS,
+  OS_ANDROID_MOBILE,
+  OS_ANDROID_TABLET,
+  BROWSER_CHROME,
+  BROWSER_FIREFOX,
+  BROWSER_EDGE,
+  BROWSER_OPERA,
+  BRAND_ICON_SUPPORTED_BROWSERS,
+  BROWSER_DISPLAY_NAMES,
+  NOTIFICATION_STATE_COLLAPSED,
+  NOTIFICATION_STATE_EXPANDED,
+} from './constants';
+import {
+  getNotificationContainerClassName,
+  formatUrlForPreview,
+  transformButtonsForPreview,
+} from '../utils/previewUtils';
+
+/**
+ * NotificationContainer Component
+ * 
+ * Standalone notification container component that renders the actual notification UI.
+ * This component is decoupled from any wrapper containers and can be used
+ * in different contexts (main preview, device frame preview, etc.).
+ * 
+ * The component renders the notification-container div with all its content:
+ * - Notification header (icon, title, URL, body)
+ * - Expanded content (media image, CTA buttons) when state is 'Expanded'
+ * 
+ * @param {string} notificationTitle - Title of the notification
+ * @param {string} notificationBody - Body text of the notification
+ * @param {string} url - URL for the notification
+ * @param {string} selectedOS - Operating system name
+ * @param {string} selectedBrowser - Browser name
+ * @param {string} notificationState - 'Collapsed' or 'Expanded' (default: 'Collapsed')
+ * @param {string} className - Additional CSS classes to apply to the container
+ * @param {string} icon - Icon asset for the browser (defaults to Chrome)
+ * @param {boolean} supportsExpanded - Whether Expanded state is supported for this variant
+ * @param {boolean} enableMedia - Whether to render media section when expanded
+ * @param {boolean} enableCtas - Whether to render CTA buttons when expanded
+ * @param {string} imageSrc - Media/banner image source URL
+ * @param {string} brandIconSrc - Brand icon image source URL
+ */
+const NotificationContainer = ({
+  notificationTitle,
+  notificationBody,
+  url,
+  selectedOS,
+  selectedBrowser,
+  notificationState = NOTIFICATION_STATE_COLLAPSED,
+  className = '',
+  icon = chromeIcon,
+  supportsExpanded = true,
+  enableMedia = true,
+  enableCtas = true,
+  brandIcon = '',
+  enableBrandIconPreview = true,
+  imageSrc = '',
+  brandIconSrc = '',
+  buttons = [],
+  showSeparateIOSCTAs = false,
+}) => {
+  // Force expanded UI for Windows when Collapsed state is selected
+  // Windows only supports expanded preview - when Windows + Collapsed is selected, render expanded UI
+  // Note: If Windows needs separate Collapsed/Expanded states later, remove the second condition
+  const isExpanded = (supportsExpanded && notificationState === NOTIFICATION_STATE_EXPANDED) || 
+                     (selectedOS === OS_WINDOWS && notificationState === NOTIFICATION_STATE_COLLAPSED);
+  const notificationContainerClass = getNotificationContainerClassName(selectedOS, selectedBrowser);
+  const stateClass = isExpanded ? 'expanded' : 'collapsed';
+  const selectedBrowserLower = (selectedBrowser || '').toLowerCase();
+
+  // Platform detection object - provides clean access to all platform/browser checks
+  const platform = {
+    parts: notificationContainerClass.split('-'),
+    get os() { return this.parts[0]; },
+    get browser() { return this.parts.length === 3 ? this.parts[2] : this.parts[1]; },
+    get isMacOs() { return selectedOS === OS_MACOS; },
+    get isIOS() { return selectedOS === OS_IOS; },
+    get isIPadOS() { return selectedOS === OS_IPADOS; },
+    get isAndroidMobile() { return this.os === 'android' && this.parts[1] === 'mobile'; },
+    get isAndroidTablet() { return this.os === 'android' && this.parts[1] === 'tablet'; },
+    get isIOSBrowser() { return this.os === 'ios'; },
+    get isIPadOSBrowser() { return this.os === 'ipados'; },
+    get isWindows() { return this.os === 'windows'; },
+    get supportsBrandIcon() { return BRAND_ICON_SUPPORTED_BROWSERS.includes(selectedBrowserLower); },
+    get isMacOsBrandIconBrowser() { return this.isMacOs && this.supportsBrandIcon; },
+    get isWindowsExpanded() { return this.isWindows && isExpanded; },
+    get isMacOsExpandedBrand() { return this.isMacOs && isExpanded && this.supportsBrandIcon; },
+  };
+
+  const displayUrl = formatUrlForPreview(url) || url || '';
+  // Use real media image from form/props
+  const mediaImageUrl = imageSrc || '';
+  // Use real brand icon from form/props, fallback to prop if provided for backward compatibility
+  const actualBrandIcon = brandIconSrc || brandIcon || '';
+  const shouldShowBrandIconAndroidExpanded =
+    (platform.isAndroidMobile || platform.isAndroidTablet) && isExpanded && enableBrandIconPreview && Boolean(actualBrandIcon);
+  const ctaButtons = transformButtonsForPreview(buttons);
+
+  // Brand icon preview toggle (set enableBrandIconPreview to false to see no-brand state)
+  const shouldShowBrandIcon = (() => {
+    // iOS/iPadOS NEVER show brand icons - they use a simple notification style
+    if (platform.isIOSBrowser || platform.isIPadOSBrowser) return false;
+    
+    if (!enableBrandIconPreview || !actualBrandIcon) return false;
+    if (platform.isAndroidMobile && !isExpanded) return true;
+    if (platform.isAndroidTablet && !isExpanded) return true;
+    // macOS: show brand icon for all browsers in collapsed state
+    if (platform.isMacOs && !isExpanded) return true;
+    // Windows browsers: show brand icon in collapsed state (same as macOS Chrome)
+    if (platform.isWindows && !isExpanded) return true;
+    return false;
+  })();
+
+  const shouldShowBrandIconInExpandedMac = (() => {
+    if (!platform.isMacOsExpandedBrand) return false;
+    if (!enableBrandIconPreview || !actualBrandIcon) return false;
+    return true;
+  })();
+
+  const shouldRenderExpandedMedia = (() => {
+    if (!enableMedia) return false;
+    if (platform.isMacOsExpandedBrand) {
+      // For macOS brand browsers, only render if brand icon is available.
+      return shouldShowBrandIconInExpandedMac;
+    }
+    return Boolean(mediaImageUrl);
+  })();
+
+  const containerClasses = [
+    'notification-container',
+    notificationContainerClass,
+    stateClass,
+    className,
+    platform.isWindowsExpanded ? 'windows-chrome-expanded' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+
+  // Get browser display name for Windows expanded notifications
+  const getBrowserDisplayName = (browser) => {
+    return BROWSER_DISPLAY_NAMES[browser] || browser;
+  };
+
+  // Check if we need to render separate CTA container for iOS + Collapsed
+  const shouldRenderSeparateIOSCTAs = 
+    showSeparateIOSCTAs &&
+    platform.isIOSBrowser && 
+    !isExpanded && 
+    enableCtas && 
+    ctaButtons && 
+    ctaButtons.length > 0;
+
+  const notificationContent = (
+    <div className={containerClasses}>
+      {platform.isWindowsExpanded ? (
+        <WindowsChromeExpanded
+          icon={icon}
+          brandIcon={actualBrandIcon}
+          enableBrandIconPreview={enableBrandIconPreview}
+          notificationTitle={notificationTitle}
+          notificationBody={notificationBody}
+          displayUrl={displayUrl}
+          browserName={getBrowserDisplayName(selectedBrowser)}
+          mediaImageUrl={mediaImageUrl}
+          enableCtas={enableCtas}
+          ctaButtons={ctaButtons}
+        />
+      ) : (platform.isAndroidMobile || platform.isAndroidTablet) && isExpanded ? (
+        <AndroidMobileExpanded
+          icon={icon}
+          selectedBrowser={selectedBrowser}
+          notificationTitle={notificationTitle}
+          notificationBody={notificationBody}
+          displayUrl={displayUrl}
+          brandIcon={actualBrandIcon}
+          shouldShowBrandIcon={shouldShowBrandIcon}
+          shouldShowBrandIconExpanded={shouldShowBrandIconAndroidExpanded}
+          mediaImageUrl={mediaImageUrl}
+          enableCtas={enableCtas}
+          ctaButtons={ctaButtons}
+        />
+      ) : (
+        <>
+          {(platform.isAndroidMobile || platform.isAndroidTablet) && !isExpanded ? (
+            <AndroidMobileChromeHeader
+              icon={icon}
+              selectedBrowser={selectedBrowser}
+              notificationTitle={notificationTitle}
+              notificationBody={notificationBody}
+              brandIcon={actualBrandIcon}
+              shouldShowBrandIcon={shouldShowBrandIcon}
+            />
+          ) : (platform.isIOSBrowser || platform.isIPadOSBrowser) ? (
+            <IOSHeader
+              icon={icon}
+              selectedBrowser={selectedBrowser}
+              notificationTitle={notificationTitle}
+              notificationBody={notificationBody}
+            />
+          ) : (
+            <NotificationHeader
+              icon={icon}
+              selectedBrowser={selectedBrowser}
+              notificationTitle={notificationTitle}
+              displayUrl={displayUrl}
+              notificationBody={notificationBody}
+              shouldShowBrandIcon={shouldShowBrandIcon}
+              brandIcon={actualBrandIcon}
+              isExpanded={isExpanded}
+            />
+          )}
+
+          {isExpanded && (
+            <NotificationExpandedContent
+              shouldRenderExpandedMedia={shouldRenderExpandedMedia}
+              shouldShowBrandIconInExpandedMac={shouldShowBrandIconInExpandedMac}
+              brandIcon={actualBrandIcon}
+              mediaImageUrl={mediaImageUrl}
+              enableCtas={enableCtas}
+              ctaButtons={ctaButtons}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+
+  // For iOS + Collapsed with CTAs, render notification and separate CTA container
+  if (shouldRenderSeparateIOSCTAs) {
+    return (
+      <div className="ios-notification-wrapper">
+        {notificationContent}
+        <div className="ios-cta-container">
+          {ctaButtons.map((button) => (
+            <button
+              key={button.id}
+              type="button"
+              className="ios-cta-button"
+            >
+              {button.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Default: return just the notification container
+  return notificationContent;
+};
+
+NotificationContainer.propTypes = {
+  notificationTitle: PropTypes.string,
+  notificationBody: PropTypes.string,
+  url: PropTypes.string,
+  selectedOS: PropTypes.string.isRequired,
+  selectedBrowser: PropTypes.string.isRequired,
+  notificationState: PropTypes.oneOf([NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED]),
+  className: PropTypes.string,
+  icon: PropTypes.string,
+  supportsExpanded: PropTypes.bool,
+  enableMedia: PropTypes.bool,
+  enableCtas: PropTypes.bool,
+  brandIcon: PropTypes.string,
+  enableBrandIconPreview: PropTypes.bool,
+  imageSrc: PropTypes.string,
+  brandIconSrc: PropTypes.string,
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      url: PropTypes.string,
+      type: PropTypes.string,
+    })
+  ),
+  showSeparateIOSCTAs: PropTypes.bool,
+};
+
+export default NotificationContainer;
+

package/v2Containers/WebPush/Create/preview/PreviewContent.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NotificationContainer from './NotificationContainer';
+import { getResolvedVariant } from './config/notificationMappings';
+import { NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED } from './constants';
+import './preview.scss';
+
+/**
+ * PreviewContent Component
+ * 
+ * Renders the preview area for web push notification.
+ * Displays actual notification preview for macOS + Chrome combination.
+ * For other OS/Browser combinations, shows the selection text.
+ * 
+ * This component wraps the NotificationContainer in a preview-specific
+ * container (notification-preview) for the main preview area.
+ * 
+ * @param {string} notificationState - NOTIFICATION_STATE_COLLAPSED or NOTIFICATION_STATE_EXPANDED (default: NOTIFICATION_STATE_COLLAPSED)
+ */
+
+const PreviewContent = ({
+  notificationTitle,
+  notificationBody,
+  url,
+  selectedOS,
+  selectedBrowser,
+  notificationState = NOTIFICATION_STATE_COLLAPSED,
+  imageSrc,
+  brandIconSrc,
+  buttons = [],
+}) => {
+  const resolvedVariant = getResolvedVariant(selectedOS, selectedBrowser, notificationState);
+
+  return (
+    <div className="preview-content">
+      <div className="preview-content-wrapper">
+        <div className={`notification-preview ${resolvedVariant ? '' : 'preview-unavailable'}`.trim()}>
+          {resolvedVariant && (
+            <NotificationContainer
+              notificationTitle={notificationTitle}
+              notificationBody={notificationBody}
+              url={url}
+              selectedOS={selectedOS}
+              selectedBrowser={selectedBrowser}
+              notificationState={resolvedVariant.stateKey}
+              icon={resolvedVariant.variant.icon}
+              supportsExpanded={resolvedVariant.stateConfig.supportsExpanded}
+              enableMedia={resolvedVariant.stateConfig.showMedia}
+              enableCtas={buttons.length > 0}
+              className={resolvedVariant.variant.notificationClassName}
+              imageSrc={imageSrc}
+              brandIconSrc={brandIconSrc}
+              buttons={buttons}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PreviewContent.propTypes = {
+  notificationTitle: PropTypes.string,
+  notificationBody: PropTypes.string,
+  url: PropTypes.string,
+  selectedOS: PropTypes.string.isRequired,
+  selectedBrowser: PropTypes.string.isRequired,
+  notificationState: PropTypes.oneOf([NOTIFICATION_STATE_COLLAPSED, NOTIFICATION_STATE_EXPANDED]),
+  imageSrc: PropTypes.string,
+  brandIconSrc: PropTypes.string,
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      url: PropTypes.string,
+      type: PropTypes.string,
+    })
+  ),
+};
+
+PreviewContent.defaultProps = {
+  notificationTitle: '',
+  notificationBody: '',
+  url: '',
+  imageSrc: '',
+  brandIconSrc: '',
+  buttons: [],
+};
+
+export default PreviewContent;
+

package/v2Containers/WebPush/Create/preview/PreviewControls.js

@@ -0,0 +1,305 @@
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import { LAYOUT_MODE, SELECT_WIDTH, STATE_OPTIONS } from './constants';
+import { getBrowserOptionsForOS, getSupportedStates } from './config/notificationMappings';
+import messages from '../messages';
+import './preview.scss';
+
+/**
+ * PreviewControls Component
+ * 
+ * Renders dropdown controls for selecting Operating System, Browser, and State
+ * for the web push notification preview.
+ * 
+ * Implements cascading dropdown reset behavior:
+ * - When OS changes, Browser and State reset to first available option
+ * - When Browser changes, State resets to first available option
+ * 
+ * @param {string} layoutMode - 'inline', 'newRow', or 'compact' (default: 'newRow')
+ * @param {boolean} showStateDropdown - Whether to show the State dropdown (default: true)
+ * @param {boolean|function} stateDropdownDisabled - Controls State dropdown disabled state.
+ *   - If boolean: directly sets disabled state
+ *   - If function: receives (selectedOS, selectedBrowser, stateOptions) and returns boolean
+ *   - Note: Can be extended to accept object { disabled: boolean, tooltip?: string } for tooltip support
+ */
+const PreviewControls = ({
+  selectedOS,
+  selectedBrowser,
+  selectedState,
+  osOptions,
+  browserOptions,
+  stateOptions,
+  onOSChange,
+  onBrowserChange,
+  onStateChange,
+  layoutMode = LAYOUT_MODE.NEW_ROW,
+  showStateDropdown = true,
+  stateDropdownDisabled = false,
+}) => {
+  const selectWidth = layoutMode === LAYOUT_MODE.COMPACT ? SELECT_WIDTH.COMPACT : SELECT_WIDTH.FULL;
+
+  // Determine if State dropdown should be disabled
+  // Supports boolean or function for extensibility
+  // Note: Can be extended to support object { disabled: boolean, tooltip?: string } for tooltip messages
+  const isStateDropdownDisabled = useMemo(() => {
+    // Disable State dropdown for Windows (only Collapsed state is supported)
+    if (selectedOS === 'Windows') {
+      return true;
+    }
+    return typeof stateDropdownDisabled === 'function'
+      ? stateDropdownDisabled(selectedOS, selectedBrowser, stateOptions)
+      : stateDropdownDisabled;
+  }, [stateDropdownDisabled, selectedOS, selectedBrowser, stateOptions]);
+
+  // Memoized State dropdown content to avoid recreating on every render
+  const stateDropdownContent = useMemo(() => (
+    <>
+      <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
+        <FormattedMessage {...messages.state} />
+      </CapLabel>
+      <CapSelect.CapCustomSelect
+        width={selectWidth}
+        options={stateOptions}
+        value={selectedState}
+        onChange={onStateChange}
+        // Note: Add tooltip prop here when tooltip mechanism is implemented
+        // tooltip={tooltipMessage ? tooltipMessage : undefined}
+      />
+    </>
+  ), [selectWidth, stateOptions, selectedState, onStateChange]);
+
+  // Memoized State dropdown renderer with disabled wrapper
+  const renderStateDropdown = useMemo(() => {
+    if (isStateDropdownDisabled) {
+      return (
+        <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
+          {stateDropdownContent}
+        </div>
+      );
+    }
+    return stateDropdownContent;
+  }, [isStateDropdownDisabled, stateDropdownContent]);
+
+  /**
+   * Cascading dropdown reset handler for OS changes
+   * Resets Browser and State to first available option when OS changes
+   * 
+   * This implements cascading dropdown behavior: when a parent dropdown (OS) changes,
+   * dependent dropdowns (Browser, State) reset to their first available option.
+   */
+  const handleOSChangeWithCascade = useCallback((value) => {
+    onOSChange(value);
+    
+    // Get browser options for the new OS to ensure we reset to a valid option
+    const newBrowserOptions = getBrowserOptionsForOS(value);
+    
+    // Reset Browser to first available option for the new OS
+    const newBrowserValue = newBrowserOptions && newBrowserOptions.length > 0 
+      ? newBrowserOptions[0].value 
+      : null;
+    
+    if (newBrowserValue && onBrowserChange) {
+      onBrowserChange(newBrowserValue);
+    }
+    
+    // Compute fresh state options based on new OS and Browser combination
+    // Only reset state if stateOptions is provided and not empty
+    if (showStateDropdown && newBrowserValue && onStateChange && stateOptions && stateOptions.length > 0) {
+      // For Windows, always reset to "Collapsed" (only supported state)
+      if (value === 'Windows') {
+        onStateChange('Collapsed');
+      } else {
+        const newSupportedStates = getSupportedStates(value, newBrowserValue);
+        const newStateOptions = newSupportedStates.length > 0
+          ? newSupportedStates.map((state) => ({ value: state, label: state }))
+          : STATE_OPTIONS;
+        
+        if (newStateOptions.length > 0) {
+          onStateChange(newStateOptions[0].value);
+        }
+      }
+    }
+  }, [onOSChange, onBrowserChange, onStateChange, stateOptions, showStateDropdown]);
+
+  /**
+   * Cascading dropdown reset handler for Browser changes
+   * Resets State to first available option when Browser changes
+   */
+  const handleBrowserChangeWithCascade = useCallback((value) => {
+    onBrowserChange(value);
+    
+    // Compute fresh state options based on current OS and new Browser combination
+    // Only reset state if stateOptions is provided and not empty
+    if (showStateDropdown && onStateChange && stateOptions && stateOptions.length > 0) {
+      const newSupportedStates = getSupportedStates(selectedOS, value);
+      const newStateOptions = newSupportedStates.length > 0
+        ? newSupportedStates.map((state) => ({ value: state, label: state }))
+        : STATE_OPTIONS;
+      
+      if (newStateOptions.length > 0) {
+        onStateChange(newStateOptions[0].value);
+      }
+    }
+  }, [onBrowserChange, onStateChange, selectedOS, stateOptions, showStateDropdown]);
+
+  const controls = [
+    {
+      key: 'os',
+      label: 'operatingSystem',
+      value: selectedOS,
+      options: osOptions,
+      onChange: handleOSChangeWithCascade,
+      className: 'preview-control-os',
+    },
+    {
+      key: 'browser',
+      label: 'browser',
+      value: selectedBrowser,
+      options: browserOptions,
+      onChange: handleBrowserChangeWithCascade,
+      className: 'preview-control-browser',
+    },
+  ];
+
+  if (showStateDropdown) {
+    controls.push({
+      key: 'state',
+      label: 'state',
+      value: selectedState,
+      options: stateOptions,
+      onChange: onStateChange,
+      className: 'preview-control-state',
+      disabled: isStateDropdownDisabled,
+    });
+  }
+
+  const renderControl = useCallback(({ key, label, value, options, onChange, className, disabled }) => {
+    // Special handling for state dropdown - use memoized renderer
+    if (key === 'state') {
+      return (
+        <div key={key} className={`preview-control ${className}`}>
+          {renderStateDropdown}
+        </div>
+      );
+    }
+
+    const controlContent = (
+      <>
+        <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
+          <FormattedMessage {...messages[label]} />
+        </CapLabel>
+        <CapSelect.CapCustomSelect
+          width={selectWidth}
+          options={options}
+          value={value}
+          onChange={onChange}
+        />
+      </>
+    );
+
+    return (
+      <div key={key} className={`preview-control ${className}`}>
+        {disabled ? (
+          <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
+            {controlContent}
+          </div>
+        ) : (
+          controlContent
+        )}
+      </div>
+    );
+  }, [selectWidth, renderStateDropdown]);
+
+  if (layoutMode === LAYOUT_MODE.COMPACT) {
+    return (
+      <div className="preview-controls preview-controls-compact">
+        {controls.map(renderControl)}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <CapRow className="preview-controls">
+        <CapColumn span={12} className="preview-control-os">
+          <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
+            <FormattedMessage {...messages.operatingSystem} />
+          </CapLabel>
+          <CapSelect.CapCustomSelect
+            width={selectWidth}
+            options={osOptions}
+            value={selectedOS}
+            onChange={handleOSChangeWithCascade}
+          />
+        </CapColumn>
+        <CapColumn span={12} className="preview-control-browser">
+          <CapLabel type="label1" className="preview-control-label" fontWeight="bold">
+            <FormattedMessage {...messages.browser} />
+          </CapLabel>
+          <CapSelect.CapCustomSelect
+            width={selectWidth}
+            options={browserOptions}
+            value={selectedBrowser}
+            onChange={handleBrowserChangeWithCascade}
+          />
+        </CapColumn>
+      </CapRow>
+      {showStateDropdown && layoutMode === LAYOUT_MODE.NEW_ROW && (
+        <CapRow className="preview-controls-state">
+          <CapColumn span={12} className="preview-control-state">
+            {renderStateDropdown}
+          </CapColumn>
+        </CapRow>
+      )}
+      {showStateDropdown && layoutMode === LAYOUT_MODE.INLINE && (
+        <CapRow className="preview-controls">
+          <CapColumn span={12} className="preview-control-state">
+            {renderStateDropdown}
+          </CapColumn>
+        </CapRow>
+      )}
+    </>
+  );
+};
+
+PreviewControls.propTypes = {
+  selectedOS: PropTypes.string.isRequired,
+  selectedBrowser: PropTypes.string.isRequired,
+  selectedState: PropTypes.string,
+  osOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  browserOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  stateOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    }),
+  ),
+  onOSChange: PropTypes.func.isRequired,
+  onBrowserChange: PropTypes.func.isRequired,
+  onStateChange: PropTypes.func,
+  layoutMode: PropTypes.oneOf([LAYOUT_MODE.INLINE, LAYOUT_MODE.NEW_ROW, LAYOUT_MODE.COMPACT]),
+  showStateDropdown: PropTypes.bool,
+  stateDropdownDisabled: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.func, // (selectedOS, selectedBrowser, stateOptions) => boolean
+    // Note: Can add PropTypes.shape({ disabled: PropTypes.bool, tooltip: PropTypes.string }) for tooltip support
+  ]),
+};
+
+export default PreviewControls;
+