@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/views/header/server-settings-parser.ts

@@ -0,0 +1,1105 @@
+/**
+ * Server-side parsers for header widget settings
+ * These parse widget data fetched on the server to provide initial values
+ * to client components, avoiding the flash of default styles.
+ *
+ * Note: This file exports types that are also used by client components,
+ * but the parser functions should only be called on the server.
+ */
+
+// Block IDs matching header-icons-context.tsx
+const ICON_BLOCK_IDS = {
+  search: 'header-icon-search',
+  profile: 'header-icon-profile',
+  cart: 'header-icon-cart'
+} as const;
+
+const LOGO_BLOCK_ID = 'header-logo-image';
+
+// Default values
+const DEFAULT_ICON_SIZE = 20;
+const DEFAULT_ICON_COLOR = 'currentColor';
+const DEFAULT_LOGO_WIDTH = 120;
+const DEFAULT_LOGO_HEIGHT = 40;
+
+export interface IconSettings {
+  size: number;
+  color: string;
+}
+
+export interface HeaderIconSettings {
+  search: IconSettings;
+  profile: IconSettings;
+  cart: IconSettings;
+}
+
+export interface LogoSettings {
+  src: string;
+  width: number | string;
+  height: number | string;
+  maxWidth?: string;
+  maxHeight?: string;
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+
+const defaultIconSettings: HeaderIconSettings = {
+  search: { size: DEFAULT_ICON_SIZE, color: DEFAULT_ICON_COLOR },
+  profile: { size: DEFAULT_ICON_SIZE, color: DEFAULT_ICON_COLOR },
+  cart: { size: DEFAULT_ICON_SIZE, color: DEFAULT_ICON_COLOR }
+};
+
+const defaultLogoSettings: LogoSettings = {
+  src: '/logo.svg',
+  width: DEFAULT_LOGO_WIDTH,
+  height: DEFAULT_LOGO_HEIGHT,
+  objectFit: 'contain'
+};
+
+/**
+ * Parse icon settings from widget data (server-side)
+ */
+export function parseServerIconSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): HeaderIconSettings {
+  if (!widgetData?.attributes) {
+    return defaultIconSettings;
+  }
+
+  const result = { ...defaultIconSettings };
+  const attrs = widgetData.attributes;
+
+  Object.entries(ICON_BLOCK_IDS).forEach(([key, blockId]) => {
+    const attrData = attrs[blockId];
+    if (!attrData) return;
+
+    try {
+      const blockData =
+        typeof attrData === 'string'
+          ? JSON.parse(attrData)
+          : typeof attrData === 'object' && 'value' in attrData
+          ? JSON.parse((attrData as { value: string }).value)
+          : null;
+
+      if (blockData) {
+        // Support both old format (direct styles) and new format ({ styles, properties, value })
+        const styles = blockData.styles || blockData;
+        const properties = blockData.properties || {};
+
+        const color =
+          styles?.color?.desktop || styles?.color || DEFAULT_ICON_COLOR;
+        const sizeValue =
+          properties?.iconSize?.desktop ||
+          properties?.iconSize ||
+          DEFAULT_ICON_SIZE;
+        const size =
+          typeof sizeValue === 'string' ? parseInt(sizeValue, 10) : sizeValue;
+
+        result[key as keyof HeaderIconSettings] = {
+          size: isNaN(size) ? DEFAULT_ICON_SIZE : size,
+          color
+        };
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  });
+
+  return result;
+}
+
+/**
+ * Parse logo settings from widget data (server-side)
+ */
+export function parseServerLogoSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any,
+  fallbackSrc?: string
+): LogoSettings {
+  const result: LogoSettings = {
+    ...defaultLogoSettings,
+    src: fallbackSrc || defaultLogoSettings.src
+  };
+
+  if (!widgetData?.attributes) {
+    return result;
+  }
+
+  const blockData = widgetData.attributes[LOGO_BLOCK_ID];
+  if (!blockData) return result;
+
+  try {
+    const data =
+      typeof blockData === 'string'
+        ? JSON.parse(blockData)
+        : typeof blockData === 'object' && 'value' in blockData
+        ? JSON.parse((blockData as { value: string }).value)
+        : null;
+
+    if (!data) return result;
+
+    // Support both old format (direct styles) and new format ({ styles, properties, value })
+    const styles = data.styles || data;
+    const value = data.value;
+
+    // Get logo src from value
+    if (value) {
+      const src = typeof value === 'object' ? value.desktop : value;
+      if (src) result.src = src;
+    }
+
+    // Get styles
+    if (styles.width) {
+      result.width =
+        typeof styles.width === 'object' ? styles.width.desktop : styles.width;
+    }
+    if (styles.height) {
+      result.height =
+        typeof styles.height === 'object'
+          ? styles.height.desktop
+          : styles.height;
+    }
+    if (styles.maxWidth || styles['max-width']) {
+      const maxWidth = styles.maxWidth || styles['max-width'];
+      result.maxWidth =
+        typeof maxWidth === 'object' ? maxWidth.desktop : maxWidth;
+    }
+    if (styles.maxHeight || styles['max-height']) {
+      const maxHeight = styles.maxHeight || styles['max-height'];
+      result.maxHeight =
+        typeof maxHeight === 'object' ? maxHeight.desktop : maxHeight;
+    }
+    if (styles.objectFit || styles['object-fit']) {
+      const objectFit = styles.objectFit || styles['object-fit'];
+      result.objectFit =
+        typeof objectFit === 'object' ? objectFit.desktop : objectFit;
+    }
+  } catch {
+    // Ignore parse errors
+  }
+
+  return result;
+}
+
+// ============================================
+// Navbar Menu Settings
+// ============================================
+
+const NAVBAR_MENU_BLOCK_ID = 'header-nav-menu-item';
+
+// Default navbar menu values
+const DEFAULT_FONT_SIZE = '14px';
+const DEFAULT_NAV_COLOR = 'currentColor';
+const DEFAULT_HOVER_COLOR = '';
+const DEFAULT_FONT_WEIGHT = '400';
+
+export interface NavbarMenuSettings {
+  fontSize: string;
+  color: string;
+  hoverColor: string;
+  fontWeight: string;
+  textTransform?: string;
+  letterSpacing?: string;
+}
+
+const defaultNavbarMenuSettings: NavbarMenuSettings = {
+  fontSize: DEFAULT_FONT_SIZE,
+  color: DEFAULT_NAV_COLOR,
+  hoverColor: DEFAULT_HOVER_COLOR,
+  fontWeight: DEFAULT_FONT_WEIGHT
+};
+
+/**
+ * Parse navbar menu settings from widget data (server-side)
+ */
+export function parseServerNavbarMenuSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): NavbarMenuSettings {
+  if (!widgetData?.attributes) {
+    return defaultNavbarMenuSettings;
+  }
+
+  const result = { ...defaultNavbarMenuSettings };
+  const blockData = widgetData.attributes[NAVBAR_MENU_BLOCK_ID];
+
+  if (!blockData) return result;
+
+  try {
+    const data =
+      typeof blockData === 'string'
+        ? JSON.parse(blockData)
+        : typeof blockData === 'object' && 'value' in blockData
+        ? JSON.parse((blockData as { value: string }).value)
+        : null;
+
+    if (!data) return result;
+
+    // Support both old format (direct styles) and new format ({ styles, properties })
+    const styles = data.styles || data;
+
+    // Font size
+    if (styles.fontSize || styles['font-size']) {
+      const fontSize = styles.fontSize || styles['font-size'];
+      result.fontSize =
+        typeof fontSize === 'object' ? fontSize.desktop : fontSize;
+    }
+
+    // Color
+    if (styles.color) {
+      result.color =
+        typeof styles.color === 'object' ? styles.color.desktop : styles.color;
+    }
+
+    // Hover color
+    if (styles.hoverColor || styles['hover-color']) {
+      const hoverColor = styles.hoverColor || styles['hover-color'];
+      result.hoverColor =
+        typeof hoverColor === 'object' ? hoverColor.desktop : hoverColor;
+    }
+
+    // Font weight
+    if (styles.fontWeight || styles['font-weight']) {
+      const fontWeight = styles.fontWeight || styles['font-weight'];
+      result.fontWeight =
+        typeof fontWeight === 'object' ? fontWeight.desktop : fontWeight;
+    }
+
+    // Text transform
+    if (styles.textTransform || styles['text-transform']) {
+      const textTransform = styles.textTransform || styles['text-transform'];
+      result.textTransform =
+        typeof textTransform === 'object'
+          ? textTransform.desktop
+          : textTransform;
+    }
+
+    // Letter spacing
+    if (styles.letterSpacing || styles['letter-spacing']) {
+      const letterSpacing = styles.letterSpacing || styles['letter-spacing'];
+      result.letterSpacing =
+        typeof letterSpacing === 'object'
+          ? letterSpacing.desktop
+          : letterSpacing;
+    }
+  } catch {
+    // Ignore parse errors
+  }
+
+  return result;
+}
+
+// ============================================
+// Header Layout Settings
+// ============================================
+
+const HEADER_LAYOUT_SECTION_ID = 'header-layout';
+
+// Block IDs for header layout rows
+const HEADER_LAYOUT_BLOCK_IDS = {
+  UTILITY_ROW: 'header-utility-row',
+  MAIN_ROW: 'header-main-row',
+  TOP_ROW: 'header-top-row',
+  BOTTOM_ROW: 'header-bottom-row'
+} as const;
+
+export type HeaderLayoutType = 'default' | 'two-row';
+export type MenuPositionType = 'left' | 'center' | 'right';
+export type SearchPositionType = 'left' | 'center' | 'right';
+export type UtilityPositionType = 'left' | 'right';
+
+export interface BlockStylesMap {
+  [blockId: string]: Record<string, string>;
+}
+
+export interface HeaderLayoutSettings {
+  layout: HeaderLayoutType;
+  menuPosition: MenuPositionType;
+  searchPosition: SearchPositionType;
+  utilityPosition: UtilityPositionType;
+  sticky: boolean;
+  blockStyles: BlockStylesMap;
+}
+
+const defaultLayoutSettings: HeaderLayoutSettings = {
+  layout: 'default',
+  menuPosition: 'center',
+  searchPosition: 'center',
+  utilityPosition: 'right',
+  sticky: true,
+  blockStyles: {}
+};
+
+/**
+ * Parse header layout settings from widget data (server-side)
+ */
+export function parseServerLayoutSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): HeaderLayoutSettings {
+  if (!widgetData?.attributes) {
+    return defaultLayoutSettings;
+  }
+
+  const result: HeaderLayoutSettings = {
+    ...defaultLayoutSettings,
+    blockStyles: {}
+  };
+  const attrs = widgetData.attributes;
+
+  // Parse section-level properties
+  const sectionData = attrs[HEADER_LAYOUT_SECTION_ID];
+
+  if (sectionData) {
+    try {
+      const data =
+        typeof sectionData === 'string'
+          ? JSON.parse(sectionData)
+          : typeof sectionData === 'object' && 'value' in sectionData
+          ? JSON.parse((sectionData as { value: string }).value)
+          : null;
+
+      if (data?.properties) {
+        const properties = data.properties;
+
+        // Layout
+        if (properties.layout) {
+          const layout = properties.layout;
+          result.layout = (
+            typeof layout === 'object' ? layout.desktop : layout
+          ) as HeaderLayoutType;
+        }
+
+        // Menu position
+        if (properties.menuPosition) {
+          const menuPosition = properties.menuPosition;
+          result.menuPosition = (
+            typeof menuPosition === 'object'
+              ? menuPosition.desktop
+              : menuPosition
+          ) as MenuPositionType;
+        }
+
+        // Search position
+        if (properties.searchPosition) {
+          const searchPosition = properties.searchPosition;
+          result.searchPosition = (
+            typeof searchPosition === 'object'
+              ? searchPosition.desktop
+              : searchPosition
+          ) as SearchPositionType;
+        }
+
+        // Utility position (Language/Currency selects)
+        if (properties.utilityPosition) {
+          const utilityPosition = properties.utilityPosition;
+          result.utilityPosition = (
+            typeof utilityPosition === 'object'
+              ? utilityPosition.desktop
+              : utilityPosition
+          ) as UtilityPositionType;
+        }
+
+        // Sticky
+        if (properties.sticky !== undefined) {
+          const sticky = properties.sticky;
+          const stickyValue =
+            typeof sticky === 'object' ? sticky.desktop : sticky;
+          result.sticky = stickyValue === 'true' || stickyValue === true;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  // Parse block styles (TOP_ROW, BOTTOM_ROW, MAIN_ROW)
+  Object.values(HEADER_LAYOUT_BLOCK_IDS).forEach((blockId) => {
+    const blockData = attrs[blockId];
+    if (!blockData) return;
+
+    try {
+      const data =
+        typeof blockData === 'string'
+          ? JSON.parse(blockData)
+          : typeof blockData === 'object' && 'value' in blockData
+          ? JSON.parse((blockData as { value: string }).value)
+          : null;
+
+      if (data?.styles) {
+        // Convert responsive styles to flat styles (desktop first)
+        const flatStyles: Record<string, string> = {};
+        Object.entries(data.styles).forEach(([key, value]) => {
+          if (typeof value === 'object' && value !== null) {
+            const responsiveValue = value as Record<string, string>;
+            flatStyles[key] =
+              responsiveValue.desktop ||
+              responsiveValue.mobile ||
+              Object.values(responsiveValue)[0] ||
+              '';
+          } else if (typeof value === 'string') {
+            flatStyles[key] = value;
+          }
+        });
+
+        if (Object.keys(flatStyles).length > 0) {
+          result.blockStyles[blockId] = flatStyles;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  });
+
+  return result;
+}
+
+// ============================================================
+// SEARCH SECTION SETTINGS PARSER
+// ============================================================
+
+const HEADER_SEARCH_SECTION_ID = 'header-search';
+const HEADER_SEARCH_ICON_BLOCK_ID = 'header-search-icon';
+
+export interface SearchSectionStyles {
+  width?: string | number;
+  maxWidth?: string;
+  height?: string | number;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderRadius?: string;
+  fontSize?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+}
+
+export interface SearchIconStyles {
+  color?: string;
+  iconSize?: number;
+}
+
+export interface HeaderSearchSettings {
+  sectionStyles: SearchSectionStyles;
+  iconStyles: SearchIconStyles;
+  properties: {
+    placeholder?: string;
+    visible?: boolean;
+    width?: string | number;
+  };
+}
+
+const defaultSearchSettings: HeaderSearchSettings = {
+  sectionStyles: {},
+  iconStyles: {},
+  properties: {}
+};
+
+/**
+ * Helper to extract responsive value (desktop first)
+ */
+function extractResponsiveValue(
+  value: unknown
+): string | number | boolean | undefined {
+  if (value === null || value === undefined) return undefined;
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  )
+    return value;
+  if (typeof value === 'object' && value !== null) {
+    const obj = value as Record<string, string | number | boolean>;
+    // Use nullish coalescing to properly handle false values
+    if ('desktop' in obj) return obj.desktop;
+    if ('mobile' in obj) return obj.mobile;
+    return Object.values(obj)[0];
+  }
+  return undefined;
+}
+
+/**
+ * Parse search section settings from widget data (server-side)
+ */
+export function parseServerSearchSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): HeaderSearchSettings {
+  if (!widgetData?.attributes) {
+    return defaultSearchSettings;
+  }
+
+  const result: HeaderSearchSettings = {
+    sectionStyles: {},
+    iconStyles: {},
+    properties: {}
+  };
+
+  const attrs = widgetData.attributes;
+
+  // Parse section styles and properties
+  const sectionData = attrs[HEADER_SEARCH_SECTION_ID];
+  if (sectionData) {
+    try {
+      const data =
+        typeof sectionData === 'string'
+          ? JSON.parse(sectionData)
+          : typeof sectionData === 'object' && 'value' in sectionData
+          ? JSON.parse((sectionData as { value: string }).value)
+          : null;
+
+      if (data) {
+        // Extract properties
+        if (data.properties) {
+          const width = extractResponsiveValue(data.properties.width);
+          result.properties = {
+            placeholder: data.properties.placeholder,
+            visible: data.properties.visible,
+            width: typeof width === 'boolean' ? undefined : width
+          };
+        }
+
+        // Extract styles
+        if (data.styles) {
+          const styles = data.styles;
+          const sectionStyles: SearchSectionStyles = {};
+
+          // Map theme editor style keys to CSS properties
+          const styleKeys = [
+            'width',
+            'max-width',
+            'height',
+            'background-color',
+            'border-color',
+            'border-width',
+            'border-radius',
+            'font-size',
+            'padding-left',
+            'padding-right'
+          ];
+
+          styleKeys.forEach((key) => {
+            const value = extractResponsiveValue(styles[key]);
+            if (value !== undefined) {
+              // Convert kebab-case to camelCase for CSS-in-JS
+              const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
+                letter.toUpperCase()
+              ) as keyof SearchSectionStyles;
+              // @ts-expect-error - dynamic assignment
+              sectionStyles[camelKey] = value;
+            }
+          });
+
+          result.sectionStyles = sectionStyles;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  // Parse icon block styles
+  const iconData = attrs[HEADER_SEARCH_ICON_BLOCK_ID];
+  if (iconData) {
+    try {
+      const data =
+        typeof iconData === 'string'
+          ? JSON.parse(iconData)
+          : typeof iconData === 'object' && 'value' in iconData
+          ? JSON.parse((iconData as { value: string }).value)
+          : null;
+
+      if (data) {
+        const iconStyles: SearchIconStyles = {};
+
+        // Get color from styles
+        if (data.styles?.color) {
+          const color = extractResponsiveValue(data.styles.color);
+          if (typeof color === 'string') {
+            iconStyles.color = color;
+          }
+        }
+
+        // Get iconSize from properties
+        if (data.properties?.iconSize) {
+          const size = extractResponsiveValue(data.properties.iconSize);
+          if (size !== undefined && typeof size !== 'boolean') {
+            iconStyles.iconSize =
+              typeof size === 'string' ? parseInt(size, 10) : size;
+          }
+        }
+
+        result.iconStyles = iconStyles;
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  return result;
+}
+
+// ============================================
+// Language Select Settings
+// ============================================
+
+const HEADER_LANGUAGE_SECTION_ID = 'header-language';
+
+export interface LanguageSectionStyles {
+  [key: string]: unknown;
+  width?: string;
+  height?: string;
+  fontSize?: string;
+  color?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderRadius?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+}
+
+export interface HeaderLanguageSettings {
+  sectionStyles?: LanguageSectionStyles;
+  properties?: {
+    showIcon?: boolean;
+    visible?: boolean;
+  };
+}
+
+/**
+ * Parse language select settings from widget data (server-side)
+ */
+export function parseServerLanguageSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): HeaderLanguageSettings {
+  const result: HeaderLanguageSettings = {};
+
+  if (!widgetData?.attributes) {
+    return result;
+  }
+
+  const attrs = widgetData.attributes;
+
+  // Parse section-level styles and properties
+  const sectionData = attrs[HEADER_LANGUAGE_SECTION_ID];
+  if (sectionData) {
+    try {
+      const data =
+        typeof sectionData === 'string'
+          ? JSON.parse(sectionData)
+          : typeof sectionData === 'object' && 'value' in sectionData
+          ? JSON.parse((sectionData as { value: string }).value)
+          : null;
+
+      if (data) {
+        // Parse properties (showIcon, visible)
+        if (data.properties) {
+          const properties: HeaderLanguageSettings['properties'] = {};
+
+          if (data.properties.showIcon !== undefined) {
+            const showIcon = extractResponsiveValue(data.properties.showIcon);
+            properties.showIcon = showIcon === 'true' || Boolean(showIcon);
+          }
+
+          if (data.properties.visible !== undefined) {
+            const visible = extractResponsiveValue(data.properties.visible);
+            properties.visible = visible === 'true' || Boolean(visible);
+          }
+
+          result.properties = properties;
+        }
+
+        // Parse styles
+        if (data.styles) {
+          const styles = data.styles;
+          const sectionStyles: LanguageSectionStyles = {};
+
+          const styleKeys = [
+            'width',
+            'height',
+            'min-width',
+            'font-size',
+            'color',
+            'background-color',
+            'border-color',
+            'border-width',
+            'border-radius',
+            'padding-left',
+            'padding-right'
+          ];
+
+          styleKeys.forEach((key) => {
+            const value = extractResponsiveValue(styles[key]);
+            if (value !== undefined) {
+              const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
+                letter.toUpperCase()
+              ) as keyof LanguageSectionStyles;
+              sectionStyles[camelKey] = value;
+            }
+          });
+
+          result.sectionStyles = sectionStyles;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  return result;
+}
+
+// ============================================
+// Currency Select Settings
+// ============================================
+
+const HEADER_CURRENCY_SECTION_ID = 'header-currency';
+
+export interface CurrencySectionStyles {
+  [key: string]: unknown;
+  width?: string;
+  height?: string;
+  fontSize?: string;
+  color?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderRadius?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+}
+
+export interface HeaderCurrencySettings {
+  sectionStyles?: CurrencySectionStyles;
+  properties?: {
+    showIcon?: boolean;
+    visible?: boolean;
+  };
+}
+
+/**
+ * Parse currency select settings from widget data (server-side)
+ */
+export function parseServerCurrencySettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): HeaderCurrencySettings {
+  const result: HeaderCurrencySettings = {};
+
+  if (!widgetData?.attributes) {
+    return result;
+  }
+
+  const attrs = widgetData.attributes;
+
+  // Parse section-level styles and properties
+  const sectionData = attrs[HEADER_CURRENCY_SECTION_ID];
+  if (sectionData) {
+    try {
+      const data =
+        typeof sectionData === 'string'
+          ? JSON.parse(sectionData)
+          : typeof sectionData === 'object' && 'value' in sectionData
+          ? JSON.parse((sectionData as { value: string }).value)
+          : null;
+
+      if (data) {
+        // Parse properties (showIcon, visible)
+        if (data.properties) {
+          const properties: HeaderCurrencySettings['properties'] = {};
+
+          if (data.properties.showIcon !== undefined) {
+            const showIcon = extractResponsiveValue(data.properties.showIcon);
+            properties.showIcon = showIcon === 'true' || Boolean(showIcon);
+          }
+
+          if (data.properties.visible !== undefined) {
+            const visible = extractResponsiveValue(data.properties.visible);
+            properties.visible = visible === 'true' || Boolean(visible);
+          }
+
+          result.properties = properties;
+        }
+
+        // Parse styles
+        if (data.styles) {
+          const styles = data.styles;
+          const sectionStyles: CurrencySectionStyles = {};
+
+          const styleKeys = [
+            'width',
+            'height',
+            'font-size',
+            'color',
+            'background-color',
+            'border-color',
+            'border-width',
+            'border-radius',
+            'padding-left',
+            'padding-right'
+          ];
+
+          styleKeys.forEach((key) => {
+            const value = extractResponsiveValue(styles[key]);
+            if (value !== undefined) {
+              const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
+                letter.toUpperCase()
+              ) as keyof CurrencySectionStyles;
+              sectionStyles[camelKey] = value;
+            }
+          });
+
+          result.sectionStyles = sectionStyles;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  return result;
+}
+
+// Text Slider section ID
+const HEADER_TEXT_SLIDER_SECTION_ID = 'header-text-slider';
+
+export interface TextSliderItem {
+  text: string;
+  link?: string;
+}
+
+export interface TextSliderSectionStyles extends Record<string, unknown> {
+  fontSize?: string;
+  fontWeight?: string;
+  color?: string;
+  backgroundColor?: string;
+}
+
+export interface HeaderTextSliderSettings {
+  sectionStyles?: Record<string, unknown>;
+  properties?: {
+    visible?: boolean;
+    items?: TextSliderItem[];
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    showArrows?: boolean;
+  };
+}
+
+/**
+ * Parse text slider settings from widget data (server-side)
+ */
+export function parseServerTextSliderSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): HeaderTextSliderSettings {
+  const result: HeaderTextSliderSettings = {};
+
+  if (!widgetData?.attributes) {
+    return result;
+  }
+
+  const attrs = widgetData.attributes;
+
+  // Parse section-level styles and properties
+  const sectionData = attrs[HEADER_TEXT_SLIDER_SECTION_ID];
+  if (sectionData) {
+    try {
+      const data =
+        typeof sectionData === 'string'
+          ? JSON.parse(sectionData)
+          : typeof sectionData === 'object' && 'value' in sectionData
+          ? JSON.parse((sectionData as { value: string }).value)
+          : null;
+
+      if (data) {
+        // Parse properties
+        if (data.properties) {
+          const properties: HeaderTextSliderSettings['properties'] = {};
+
+          if (data.properties.visible !== undefined) {
+            const visible = extractResponsiveValue(data.properties.visible);
+            properties.visible = visible === 'true' || Boolean(visible);
+          }
+
+          if (data.properties.items !== undefined) {
+            properties.items = data.properties.items;
+          }
+
+          if (data.properties.autoPlay !== undefined) {
+            const autoPlay = extractResponsiveValue(data.properties.autoPlay);
+            properties.autoPlay = autoPlay === 'true' || Boolean(autoPlay);
+          }
+
+          if (data.properties.autoPlayInterval !== undefined) {
+            const interval = extractResponsiveValue(
+              data.properties.autoPlayInterval
+            );
+            properties.autoPlayInterval =
+              typeof interval === 'number'
+                ? interval
+                : parseInt(String(interval), 10) || 3000;
+          }
+
+          if (data.properties.showArrows !== undefined) {
+            const showArrows = extractResponsiveValue(
+              data.properties.showArrows
+            );
+            properties.showArrows =
+              showArrows === 'true' || Boolean(showArrows);
+          }
+
+          result.properties = properties;
+        }
+
+        // Parse styles
+        if (data.styles) {
+          const styles = data.styles;
+          const sectionStyles: TextSliderSectionStyles = {};
+
+          const styleKeys = [
+            'font-size',
+            'font-weight',
+            'color',
+            'background-color'
+          ];
+
+          styleKeys.forEach((key) => {
+            const value = extractResponsiveValue(styles[key]);
+            if (value !== undefined) {
+              const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
+                letter.toUpperCase()
+              ) as keyof TextSliderSectionStyles;
+              sectionStyles[camelKey] = value;
+            }
+          });
+
+          result.sectionStyles = sectionStyles;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  return result;
+}
+
+// ============================================
+// Announcement Bar Settings
+// ============================================
+
+const HEADER_ANNOUNCEMENT_SECTION_ID = 'header-announcement-bar';
+
+export interface HeaderAnnouncementSettings {
+  sectionStyles?: Record<string, unknown>;
+  properties?: {
+    visible?: boolean;
+    text?: string;
+    link?: string;
+    target?: string;
+  };
+}
+
+/**
+ * Parse announcement bar settings from widget data (server-side)
+ */
+export function parseServerAnnouncementSettings(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetData: any
+): HeaderAnnouncementSettings {
+  const result: HeaderAnnouncementSettings = {};
+
+  const parseAnnouncementData = (data: any) => {
+    if (!data) {
+      return;
+    }
+
+    if (data.properties) {
+      const properties: HeaderAnnouncementSettings['properties'] = {};
+
+      if (data.properties.visible !== undefined) {
+        const visible = extractResponsiveValue(data.properties.visible);
+        properties.visible = visible === 'true' || Boolean(visible);
+      }
+
+      if (data.properties.text !== undefined) {
+        const text = extractResponsiveValue(data.properties.text);
+        if (typeof text === 'string') {
+          properties.text = text;
+        }
+      }
+
+      if (data.properties.link !== undefined) {
+        const link = extractResponsiveValue(data.properties.link);
+        if (typeof link === 'string') {
+          properties.link = link;
+        }
+      }
+
+      if (data.properties.target !== undefined) {
+        const target = extractResponsiveValue(data.properties.target);
+        if (typeof target === 'string') {
+          properties.target = target;
+        }
+      }
+
+      result.properties = properties;
+    }
+
+    if (data.styles) {
+      const styles = data.styles as Record<string, unknown>;
+      const sectionStyles: Record<string, unknown> = {};
+
+      const styleKeys = [
+        'background-color',
+        'color',
+        'font-size',
+        'font-weight',
+        'text-align',
+        'padding-top',
+        'padding-bottom',
+        'padding-left',
+        'padding-right'
+      ];
+
+      styleKeys.forEach((key) => {
+        const value = extractResponsiveValue(styles[key]);
+        if (value !== undefined) {
+          const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
+            letter.toUpperCase()
+          );
+          sectionStyles[camelKey] = value;
+        }
+      });
+
+      result.sectionStyles = sectionStyles;
+    }
+  };
+
+  const attrs = widgetData?.attributes;
+  const sectionData = attrs?.[HEADER_ANNOUNCEMENT_SECTION_ID];
+
+  try {
+    const parsedAttributeData =
+      typeof sectionData === 'string'
+        ? JSON.parse(sectionData)
+        : typeof sectionData === 'object' && 'value' in sectionData
+        ? JSON.parse((sectionData as { value: string }).value)
+        : null;
+    if (parsedAttributeData) {
+      parseAnnouncementData(parsedAttributeData);
+      return result;
+    }
+  } catch {
+    // Ignore parse errors for attributes and continue with schema metadata fallback
+  }
+
+  const sectionSchemaMetadata =
+    widgetData?.widget_type?.schema?.[HEADER_ANNOUNCEMENT_SECTION_ID]?.metadata;
+  parseAnnouncementData(sectionSchemaMetadata);
+
+  return result;
+}