@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/components/theme-editor/theme-section.tsx

@@ -0,0 +1,1224 @@
+'use client';
+
+import ThemeBlock, { Block } from './theme-block';
+import ActionToolbar from './components/action-toolbar';
+import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx';
+import { useEffect, useMemo, useRef } from 'react';
+import SectionWrapper from './sections/section-wrapper';
+import sectionRendererRegistry from './sections/section-renderer-registry';
+import { buildIteratorBlock } from './utils/iterator-utils';
+
+export interface Section {
+  id: string;
+  type: string;
+  name: string;
+  label: string;
+  properties: any;
+  styles: any;
+  blocks: Block[];
+  order: number;
+  hidden: boolean;
+  locked?: boolean;
+  dataSourceId?: string;
+  dataSource?: any;
+}
+
+interface ThemeSectionProps {
+  section: Section;
+  placeholderId: string;
+  isDesigner?: boolean;
+  isSelected?: boolean;
+  selectedBlockId?: string | null;
+  currentBreakpoint?: string;
+  onSelect?: (sectionId: string) => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDuplicate?: () => void;
+  onToggleVisibility?: () => void;
+  onDelete?: () => void;
+  onRename?: (newLabel: string) => void;
+}
+
+const applyInheritedLocksToBlocks = (
+  blocks: Block[],
+  parentLocked = false
+): Block[] =>
+  blocks.map((block) => {
+    const isLocked = parentLocked || block.locked === true;
+
+    return {
+      ...block,
+      locked: isLocked,
+      blocks: block.blocks
+        ? applyInheritedLocksToBlocks(block.blocks, isLocked)
+        : block.blocks
+    };
+  });
+
+export default function ThemeSection({
+  section,
+  placeholderId,
+  isDesigner = false,
+  isSelected = false,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  onSelect,
+  onMoveUp,
+  onMoveDown,
+  onDuplicate,
+  onToggleVisibility,
+  onDelete,
+  onRename
+}: ThemeSectionProps) {
+  const effectiveSection = useMemo(
+    () => ({
+      ...section,
+      blocks: applyInheritedLocksToBlocks(
+        section.blocks || [],
+        section.locked === true
+      )
+    }),
+    [section]
+  );
+
+  const readSectionString = (value: unknown): string => {
+    if (value == null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      const responsive = value as Record<string, unknown>;
+      const picked =
+        responsive.desktop ?? responsive.mobile ?? Object.values(responsive)[0];
+      return picked == null ? '' : String(picked);
+    }
+    return String(value);
+  };
+
+  const isNewsletterSection =
+    effectiveSection.type === 'newsletter-signup-banner';
+  const newsletterEndpoint = readSectionString(
+    effectiveSection.properties?.['api-endpoint']
+  ).trim();
+  const newsletterSuccessMessage = readSectionString(
+    effectiveSection.properties?.['success-message']
+  ).trim();
+  const newsletterErrorMessage = readSectionString(
+    effectiveSection.properties?.['error-message']
+  ).trim();
+
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!isDesigner) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      if (
+        event.data?.type === 'SCROLL_TO_SECTION' &&
+        event.data?.data?.sectionId === effectiveSection.id
+      ) {
+        sectionRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [effectiveSection.id, isDesigner]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDesigner && onSelect) {
+      e.stopPropagation();
+      onSelect(effectiveSection.id);
+
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: 'SELECT_SECTION',
+            data: {
+              placeholderId,
+              sectionId: effectiveSection.id
+            }
+          },
+          '*'
+        );
+      }
+    }
+  };
+
+  const isFrequentlyBoughtTogetherSection =
+    effectiveSection.properties?.dataSourceVariant ===
+      'frequently-bought-together' ||
+    effectiveSection.name === 'Frequently Bought Together';
+
+  const getProductsFromDataPath = (
+    dataPath?: string
+  ): Record<string, unknown>[] => {
+    if (!effectiveSection.dataSource?.details) return [];
+
+    const isEditorMode = isDesigner && window.parent !== window;
+    const collectionData = isEditorMode
+      ? effectiveSection.dataSource.details.collection?.products ||
+        effectiveSection.dataSource.details.collection?.data
+      : effectiveSection.dataSource.details.collection?.data ||
+        effectiveSection.dataSource.details.collection?.products;
+
+    if (!collectionData) return [];
+
+    if (Array.isArray(collectionData)) {
+      return collectionData;
+    }
+
+    if (Array.isArray((collectionData as any)?.products)) {
+      return (collectionData as any).products;
+    }
+
+    if (!dataPath) return [];
+
+    const pathParts = dataPath.split('.');
+    let value: unknown = collectionData;
+
+    for (const part of pathParts) {
+      value = (value as Record<string, unknown>)?.[part];
+      if (value === undefined) break;
+    }
+
+    return Array.isArray(value) ? (value as Record<string, unknown>[]) : [];
+  };
+
+  const getIteratorRenderMeta = (iteratorBlock: Block) => {
+    const dataPath =
+      (iteratorBlock.iteratorDataPath as string | undefined) ||
+      (iteratorBlock.properties?.iteratorDataPath as string | undefined);
+    const products = getProductsFromDataPath(dataPath);
+
+    const useIteratorCount =
+      iteratorBlock.properties?.useIteratorCount === true ||
+      isFrequentlyBoughtTogetherSection;
+    const iteratorCount = Number(iteratorBlock.properties?.iteratorCount) || 1;
+    const actualCount = useIteratorCount
+      ? Math.max(1, iteratorCount)
+      : products.length > 0
+      ? products.length
+      : iteratorCount;
+
+    return { products, actualCount };
+  };
+
+  const parsePriceValue = (value: unknown): number => {
+    if (typeof value === 'number' && Number.isFinite(value)) return value;
+    if (typeof value !== 'string') return 0;
+
+    const cleaned = value.trim().replace(/[^\d,.-]/g, '');
+    if (!cleaned) return 0;
+
+    let normalized = cleaned;
+    const hasComma = normalized.includes(',');
+    const hasDot = normalized.includes('.');
+
+    if (hasComma && hasDot) {
+      const lastComma = normalized.lastIndexOf(',');
+      const lastDot = normalized.lastIndexOf('.');
+      normalized =
+        lastComma > lastDot
+          ? normalized.replace(/\./g, '').replace(',', '.')
+          : normalized.replace(/,/g, '');
+    } else if (hasComma) {
+      const unsigned = normalized.replace(/^-/, '');
+      const isThousandsPattern = /^\d{1,3}(,\d{3})+$/.test(unsigned);
+      normalized = isThousandsPattern
+        ? normalized.replace(/,/g, '')
+        : normalized.replace(/,/g, '.');
+    }
+
+    const parsed = Number(normalized);
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+
+  const escapeHtml = (value: string): string =>
+    value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+
+  const formatDisplayPrice = (value: unknown): string => {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      const hasDecimals = Math.abs(value % 1) > 0.00001;
+      return value.toLocaleString('tr-TR', {
+        minimumFractionDigits: hasDecimals ? 2 : 0,
+        maximumFractionDigits: 2
+      });
+    }
+
+    if (typeof value !== 'string') return '0';
+    const raw = value.trim();
+    if (!raw) return '0';
+    if (/[A-Za-z]/.test(raw)) return raw;
+
+    const parsed = parsePriceValue(raw);
+    const hasDecimals = Math.abs(parsed % 1) > 0.00001;
+    return parsed.toLocaleString('tr-TR', {
+      minimumFractionDigits: hasDecimals ? 2 : 0,
+      maximumFractionDigits: 2
+    });
+  };
+
+  const getPriceWithCurrency = (value: unknown, currency: unknown): string => {
+    const amount = formatDisplayPrice(value);
+    const currencyLabel = normalizeCurrencyLabel(currency);
+
+    if (
+      amount.toUpperCase().includes(currencyLabel) ||
+      /[A-Za-z]{2,}/.test(amount)
+    ) {
+      return amount;
+    }
+
+    return `${amount} ${currencyLabel}`;
+  };
+
+  const buildFrequentlyBoughtPriceHtml = (
+    productData: Record<string, unknown>
+  ): string => {
+    const activePrice =
+      ((productData as any)?.active_price as
+        | Record<string, unknown>
+        | undefined) || {};
+    const currentRaw = activePrice?.price ?? (productData as any)?.price;
+    const retailRaw =
+      activePrice?.retail_price ?? (productData as any)?.retail_price;
+    const currency =
+      activePrice?.currency_type ??
+      (productData as any)?.currency_type ??
+      (productData as any)?.currency;
+
+    const currentNumeric = parsePriceValue(currentRaw);
+    const retailNumeric = parsePriceValue(retailRaw);
+
+    const currentText = escapeHtml(getPriceWithCurrency(currentRaw, currency));
+    const retailText = escapeHtml(getPriceWithCurrency(retailRaw, currency));
+
+    if (retailNumeric > 0 && retailNumeric > currentNumeric) {
+      return `<p style="margin:0;font-size:14px;line-height:1.3;"><span style='color:#94a3b8;text-decoration:line-through;margin-right:6px;'>${retailText}</span><span style='color:#0f172a;font-weight:700;'>${currentText}</span></p>`;
+    }
+
+    return `<p style="margin:0;font-size:14px;line-height:1.3;"><span style='color:#0f172a;font-weight:700;'>${currentText}</span></p>`;
+  };
+
+  const formatBundleAmount = (
+    amount: number,
+    currencyLabel: string
+  ): string => {
+    const isIntegerAmount = Math.abs(amount % 1) < 0.00001;
+    const formatted = new Intl.NumberFormat('en-US', {
+      minimumFractionDigits: isIntegerAmount ? 0 : 2,
+      maximumFractionDigits: 2
+    }).format(amount);
+    return `${formatted} ${currencyLabel}`;
+  };
+
+  const normalizeCurrencyLabel = (rawCurrency: unknown): string => {
+    if (typeof rawCurrency !== 'string') return 'TL';
+    const normalized = rawCurrency.trim().toUpperCase();
+    if (!normalized || normalized === 'TRY' || normalized === 'TL') return 'TL';
+    return normalized;
+  };
+
+  const computeFrequentlyBoughtSummary = (
+    products: Record<string, unknown>[],
+    count: number
+  ) => {
+    const selectedProducts = products.slice(0, Math.max(0, count));
+    let bundleTotal = 0;
+    let retailTotal = 0;
+    let currencyLabel = 'TL';
+
+    selectedProducts.forEach((product, index) => {
+      const activePrice =
+        ((product as any)?.active_price as
+          | Record<string, unknown>
+          | undefined) || {};
+      const currentPrice = parsePriceValue(
+        activePrice?.price ?? (product as any)?.price
+      );
+      const originalPrice = parsePriceValue(
+        activePrice?.retail_price ??
+          (product as any)?.retail_price ??
+          activePrice?.price ??
+          (product as any)?.price
+      );
+
+      if (index === 0) {
+        currencyLabel = normalizeCurrencyLabel(
+          activePrice?.currency_type ??
+            (product as any)?.currency_type ??
+            (product as any)?.currency
+        );
+      }
+
+      bundleTotal += currentPrice;
+      retailTotal += originalPrice > 0 ? originalPrice : currentPrice;
+    });
+
+    if (retailTotal < bundleTotal) {
+      retailTotal = bundleTotal;
+    }
+
+    const savingsTotal = Math.max(0, retailTotal - bundleTotal);
+    const bundleText = formatBundleAmount(bundleTotal, currencyLabel);
+    const retailText = formatBundleAmount(retailTotal, currencyLabel);
+    const savingsText = formatBundleAmount(savingsTotal, currencyLabel);
+    const showRetailPrice = retailTotal > bundleTotal;
+
+    return {
+      bundlePriceHtml: showRetailPrice
+        ? `<p style="margin:0;font-size:22px;line-height:1.2;display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;white-space:nowrap;"><span style='color:#94a3b8;text-decoration-line:line-through;text-decoration-color:#94a3b8;text-decoration-thickness:2px;font-size:16px;white-space:nowrap;display:inline-block;'>${retailText}</span><span style='color:#ffffff;font-weight:700;white-space:nowrap;display:inline-block;'>${bundleText}</span></p>`
+        : `<p style="margin:0;font-size:22px;line-height:1.2;"><span style='color:#ffffff;font-weight:700;'>${bundleText}</span></p>`,
+      savingsHtml: `<p style="margin:0;color:#22c55e;font-size:13px;font-weight:600;">You save ${savingsText}</p>`
+    };
+  };
+
+  const applyFrequentlyBoughtSummaryValues = (
+    sourceBlock: Block,
+    bundlePriceHtml: string,
+    savingsHtml: string
+  ): Block => {
+    const normalizedLabel = (sourceBlock.label || '').toLowerCase();
+    const nextBlock: Block = { ...sourceBlock };
+
+    if (sourceBlock.type === 'text') {
+      if (normalizedLabel.includes('bundle price')) {
+        nextBlock.value = bundlePriceHtml;
+      } else if (normalizedLabel.includes('savings')) {
+        nextBlock.value = savingsHtml;
+      }
+    }
+
+    if (sourceBlock.blocks && sourceBlock.blocks.length > 0) {
+      nextBlock.blocks = sourceBlock.blocks.map((childBlock) =>
+        applyFrequentlyBoughtSummaryValues(
+          childBlock,
+          bundlePriceHtml,
+          savingsHtml
+        )
+      );
+    }
+
+    return nextBlock;
+  };
+
+  const findFirstIteratorBlock = (sourceBlock: Block): Block | null => {
+    if (sourceBlock.isIterator) return sourceBlock;
+    if (!sourceBlock.blocks || sourceBlock.blocks.length === 0) return null;
+
+    for (const childBlock of sourceBlock.blocks) {
+      const found = findFirstIteratorBlock(childBlock);
+      if (found) return found;
+    }
+
+    return null;
+  };
+
+  const hasTabBlocks = effectiveSection.blocks.some(
+    (block) => block.type === 'tab'
+  );
+
+  const CustomSectionRenderer = hasTabBlocks
+    ? sectionRendererRegistry.getRenderer('tabs')
+    : sectionRendererRegistry.getRenderer(effectiveSection.type);
+
+  if (CustomSectionRenderer) {
+    return (
+      <SectionWrapper
+        section={effectiveSection}
+        placeholderId={placeholderId}
+        isDesigner={isDesigner}
+        isSelected={isSelected}
+        onSelect={onSelect}
+        onMoveUp={onMoveUp}
+        onMoveDown={onMoveDown}
+        onDuplicate={onDuplicate}
+        onToggleVisibility={onToggleVisibility}
+        onDelete={onDelete}
+        onRename={onRename}
+      >
+        <CustomSectionRenderer
+          section={effectiveSection}
+          currentBreakpoint={currentBreakpoint}
+          placeholderId={placeholderId}
+          isDesigner={isDesigner}
+          selectedBlockId={selectedBlockId}
+        />
+      </SectionWrapper>
+    );
+  }
+
+  const resolveIteratorsRecursively = (block: Block): Block => {
+    const normalizedType = String(effectiveSection.type || '').toLowerCase();
+    const normalizedVariant = String(
+      effectiveSection.properties?.dataSourceVariant || ''
+    ).toLowerCase();
+    const normalizedLabel = String(effectiveSection.label || '').toLowerCase();
+    const normalizedName = String(effectiveSection.name || '').toLowerCase();
+    const detectRelatedUpsellStructure = (blocks: Block[] = []) => {
+      let hasRelated = false;
+      let hasUpsell = false;
+      let hasGrid = false;
+
+      const walk = (items: Block[]) => {
+        items.forEach((item) => {
+          const itemLabel = String(item.label || '').toLowerCase();
+          if (itemLabel.includes('related')) hasRelated = true;
+          if (itemLabel.includes('upsell')) hasUpsell = true;
+          if (
+            item.styles &&
+            typeof item.styles === 'object' &&
+            item.styles['grid-template-columns'] !== undefined
+          ) {
+            hasGrid = true;
+          }
+          if (item.blocks && item.blocks.length > 0) {
+            walk(item.blocks);
+          }
+        });
+      };
+
+      walk(blocks);
+      return hasRelated && hasUpsell && hasGrid;
+    };
+    const hasRelatedUpsellStructure = detectRelatedUpsellStructure(
+      effectiveSection.blocks
+    );
+    const hasItemsPerColumnProperty =
+      effectiveSection.properties?.['items-per-column-desktop'] !== undefined ||
+      effectiveSection.properties?.itemsPerColumnDesktop !== undefined ||
+      effectiveSection.properties?.['items-per-column-mobile'] !== undefined ||
+      effectiveSection.properties?.itemsPerColumnMobile !== undefined ||
+      effectiveSection.properties?.['items-per-column'] !== undefined ||
+      effectiveSection.properties?.itemsPerColumn !== undefined;
+    const isRelatedUpsellSplitSection =
+      normalizedType === 'related-upsell-split' ||
+      normalizedType.includes('related-upsell') ||
+      normalizedVariant === 'related-upsell-split' ||
+      normalizedVariant.includes('related-upsell') ||
+      normalizedLabel.includes('related + upsell') ||
+      (normalizedLabel.includes('related') &&
+        normalizedLabel.includes('upsell')) ||
+      normalizedName.includes('related + upsell') ||
+      (normalizedName.includes('related') &&
+        normalizedName.includes('upsell')) ||
+      hasRelatedUpsellStructure ||
+      hasItemsPerColumnProperty;
+
+    const readSectionValue = (keys: string[], fallback: unknown) => {
+      for (const candidate of keys) {
+        const candidateValue = effectiveSection.properties?.[candidate];
+        if (candidateValue !== undefined && candidateValue !== null) {
+          return candidateValue;
+        }
+      }
+      return fallback;
+    };
+
+    const parseCount = (value: unknown, fallback: number): number => {
+      if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+      }
+      if (typeof value === 'string') {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+          return parsed;
+        }
+      }
+      if (value && typeof value === 'object' && !Array.isArray(value)) {
+        const responsive = value as Record<string, unknown>;
+        const orderedValues = [
+          responsive.desktop,
+          responsive.tablet,
+          responsive.mobile,
+          ...Object.values(responsive)
+        ];
+        for (const candidate of orderedValues) {
+          if (typeof candidate === 'number' && Number.isFinite(candidate)) {
+            return candidate;
+          }
+          if (typeof candidate === 'string') {
+            const parsed = Number(candidate);
+            if (Number.isFinite(parsed)) {
+              return parsed;
+            }
+          }
+        }
+      }
+      return fallback;
+    };
+
+    const getSplitItemsPerColumn = () => {
+      const desktopCount = Math.max(
+        1,
+        Math.min(
+          6,
+          Math.floor(
+            parseCount(
+              readSectionValue(
+                ['items-per-column-desktop', 'itemsPerColumnDesktop'],
+                readSectionValue(['items-per-column', 'itemsPerColumn'], 3)
+              ),
+              3
+            )
+          )
+        )
+      );
+      const mobileCount = Math.max(
+        1,
+        Math.min(
+          4,
+          Math.floor(
+            parseCount(
+              readSectionValue(
+                ['items-per-column-mobile', 'itemsPerColumnMobile'],
+                Math.min(desktopCount, 2)
+              ),
+              Math.min(desktopCount, 2)
+            )
+          )
+        )
+      );
+      const tabletCount = Math.max(1, Math.min(desktopCount, 2));
+      const activeCount =
+        currentBreakpoint === 'mobile' ? mobileCount : desktopCount;
+      return {
+        desktop: desktopCount,
+        tablet: tabletCount,
+        mobile: mobileCount,
+        active: activeCount
+      };
+    };
+
+    const inferSplitDataPaths = () => {
+      const collectArrayPaths = (
+        input: unknown,
+        prefix: string,
+        depth: number,
+        bucket: string[]
+      ) => {
+        if (depth > 2 || input == null) return;
+        if (Array.isArray(input)) {
+          if (prefix) bucket.push(prefix);
+          return;
+        }
+        if (typeof input !== 'object') return;
+
+        Object.entries(input as Record<string, unknown>).forEach(
+          ([key, value]) => {
+            const nextPrefix = prefix ? `${prefix}.${key}` : key;
+            if (Array.isArray(value)) {
+              bucket.push(nextPrefix);
+            } else if (value && typeof value === 'object') {
+              collectArrayPaths(value, nextPrefix, depth + 1, bucket);
+            }
+          }
+        );
+      };
+
+      const editorPayload =
+        effectiveSection.dataSource?.details?.collection?.products;
+      const runtimePayload =
+        effectiveSection.dataSource?.details?.collection?.data;
+      const samplePayload = runtimePayload ?? editorPayload;
+
+      if (Array.isArray(samplePayload)) {
+        return { relatedPath: 'products', upsellPath: 'products' };
+      }
+
+      const discoveredPaths: string[] = [];
+      collectArrayPaths(samplePayload, '', 0, discoveredPaths);
+      const uniquePaths = Array.from(new Set(discoveredPaths));
+
+      if (uniquePaths.length === 0) {
+        return { relatedPath: 'products', upsellPath: 'products' };
+      }
+
+      const pickByKeywords = (keywords: string[], exclude?: string) =>
+        uniquePaths.find((path) => {
+          if (exclude && path === exclude) return false;
+          const lower = path.toLowerCase();
+          return keywords.some((keyword) => lower.includes(keyword));
+        });
+
+      const relatedPath =
+        pickByKeywords(['related', 'similar', 'cross', 'recommend']) ||
+        (uniquePaths.includes('products') ? 'products' : uniquePaths[0]);
+      const upsellPath =
+        pickByKeywords(
+          ['upsell', 'complement', 'also', 'recommend', 'cross'],
+          relatedPath
+        ) || (uniquePaths.includes('products') ? 'products' : relatedPath);
+
+      return { relatedPath, upsellPath };
+    };
+
+    const isIteratorLike = (candidate: Block): boolean => {
+      if (candidate.isIterator) return true;
+      if (!isRelatedUpsellSplitSection) return false;
+      const normalizedLabel = (candidate.label || '').toLowerCase();
+      return (
+        normalizedLabel.includes('iterator') ||
+        Boolean(candidate.iteratorDataPath) ||
+        Boolean(candidate.properties?.iteratorDataPath) ||
+        candidate.properties?.iteratorCount !== undefined ||
+        candidate.properties?.useIteratorCount !== undefined ||
+        candidate.properties?.iteratorOffset !== undefined
+      );
+    };
+
+    const normalizeRelatedUpsellIterator = (iteratorBlock: Block): Block => {
+      if (!isRelatedUpsellSplitSection || !isIteratorLike(iteratorBlock)) {
+        return iteratorBlock;
+      }
+
+      const readString = (value: unknown, fallback: string): string => {
+        if (typeof value === 'string' && value.trim()) {
+          return value.trim();
+        }
+        return fallback;
+      };
+
+      const splitItemsPerColumn = getSplitItemsPerColumn();
+      const inferredPaths = inferSplitDataPaths();
+      const relatedDataPath = readString(inferredPaths.relatedPath, 'products');
+      const upsellDataPath = readString(
+        inferredPaths.upsellPath,
+        relatedDataPath
+      );
+
+      const isUpsellIterator = (iteratorBlock.label || '')
+        .toLowerCase()
+        .includes('upsell');
+      const isSameDataPath = relatedDataPath === upsellDataPath;
+      const nextPath = isUpsellIterator ? upsellDataPath : relatedDataPath;
+      const nextOffset =
+        isUpsellIterator && isSameDataPath ? splitItemsPerColumn.active : 0;
+
+      const existingStyles = iteratorBlock.styles || {};
+      const existingDisplay =
+        typeof existingStyles.display === 'object' &&
+        existingStyles.display !== null
+          ? existingStyles.display
+          : {};
+      const existingColumns =
+        typeof existingStyles['grid-template-columns'] === 'object' &&
+        existingStyles['grid-template-columns'] !== null
+          ? existingStyles['grid-template-columns']
+          : {};
+
+      return {
+        ...iteratorBlock,
+        isIterator: true,
+        iteratorDataPath: nextPath,
+        properties: {
+          ...(iteratorBlock.properties || {}),
+          iteratorCount: splitItemsPerColumn.active,
+          iteratorDataPath: nextPath,
+          useIteratorCount: true,
+          iteratorOffset: nextOffset
+        },
+        styles: {
+          ...existingStyles,
+          display: {
+            ...existingDisplay,
+            desktop: 'grid',
+            mobile: 'grid'
+          },
+          'grid-template-columns': {
+            ...existingColumns,
+            desktop: `repeat(${splitItemsPerColumn.desktop}, minmax(0, 1fr))`,
+            tablet:
+              existingColumns.tablet ||
+              `repeat(${splitItemsPerColumn.tablet}, minmax(0, 1fr))`,
+            mobile: `repeat(${splitItemsPerColumn.mobile}, minmax(0, 1fr))`
+          }
+        }
+      };
+    };
+
+    const normalizeRelatedUpsellStaticGrid = (gridBlock: Block): Block => {
+      if (isIteratorLike(gridBlock) || !isRelatedUpsellSplitSection) {
+        return gridBlock;
+      }
+
+      const normalizedLabel = (gridBlock.label || '').toLowerCase();
+      const hasGridTemplateColumns =
+        gridBlock.styles &&
+        typeof gridBlock.styles === 'object' &&
+        gridBlock.styles['grid-template-columns'] !== undefined;
+      const hasProductCardChildren = Boolean(
+        gridBlock.blocks?.some((child) => {
+          const childLabel = String(child.label || '').toLowerCase();
+          return child.type === 'group' && childLabel.includes('product card');
+        })
+      );
+      const isSplitGrid =
+        normalizedLabel.includes('related grid') ||
+        normalizedLabel.includes('upsell grid') ||
+        (hasGridTemplateColumns && hasProductCardChildren);
+
+      if (!isSplitGrid || !gridBlock.blocks || gridBlock.blocks.length === 0) {
+        return gridBlock;
+      }
+
+      const hasIteratorChild = gridBlock.blocks.some((child) =>
+        isIteratorLike(child)
+      );
+      if (hasIteratorChild) {
+        return gridBlock;
+      }
+
+      const splitItemsPerColumn = getSplitItemsPerColumn();
+      const itemsPerColumn = splitItemsPerColumn.active;
+
+      const cardBlocks = gridBlock.blocks
+        .filter((child) =>
+          (child.label || '').toLowerCase().includes('product card')
+        )
+        .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+      if (cardBlocks.length === 0) {
+        return gridBlock;
+      }
+
+      const cloneCard = (index: number): Block => {
+        const cloneWithIndex = (target: Block, suffix: string): Block => ({
+          ...target,
+          id: `${target.id}-preview-${suffix}`,
+          properties: target.properties
+            ? { ...target.properties }
+            : target.properties,
+          styles: target.styles
+            ? JSON.parse(JSON.stringify(target.styles))
+            : target.styles,
+          blocks: target.blocks
+            ? target.blocks.map((child, childIndex) =>
+                cloneWithIndex(child, `${suffix}-${childIndex}`)
+              )
+            : undefined
+        });
+
+        const sourceCard = cardBlocks[index % cardBlocks.length];
+        const nextCard =
+          index < cardBlocks.length
+            ? {
+                ...sourceCard,
+                properties: sourceCard.properties
+                  ? { ...sourceCard.properties }
+                  : sourceCard.properties,
+                styles: sourceCard.styles
+                  ? JSON.parse(JSON.stringify(sourceCard.styles))
+                  : sourceCard.styles,
+                blocks: sourceCard.blocks
+                  ? sourceCard.blocks.map((child, childIndex) =>
+                      cloneWithIndex(child, `${index}-${childIndex}`)
+                    )
+                  : undefined
+              }
+            : cloneWithIndex(sourceCard, `${index}`);
+
+        nextCard.order = index;
+        nextCard.hidden = false;
+        return nextCard;
+      };
+
+      const normalizedCards = Array.from(
+        { length: itemsPerColumn },
+        (_, index) => cloneCard(index)
+      );
+
+      const existingStyles = gridBlock.styles || {};
+      const existingColumns =
+        typeof existingStyles['grid-template-columns'] === 'object' &&
+        existingStyles['grid-template-columns'] !== null
+          ? existingStyles['grid-template-columns']
+          : {};
+
+      return {
+        ...gridBlock,
+        styles: {
+          ...existingStyles,
+          'grid-template-columns': {
+            ...existingColumns,
+            desktop: `repeat(${splitItemsPerColumn.desktop}, minmax(0, 1fr))`,
+            tablet:
+              existingColumns.tablet ||
+              `repeat(${splitItemsPerColumn.tablet}, minmax(0, 1fr))`,
+            mobile: `repeat(${splitItemsPerColumn.mobile}, minmax(0, 1fr))`
+          }
+        },
+        blocks: normalizedCards
+      };
+    };
+
+    const normalizedGridBlock = normalizeRelatedUpsellStaticGrid(block);
+
+    const normalizedBlock = isIteratorLike(normalizedGridBlock)
+      ? normalizeRelatedUpsellIterator(normalizedGridBlock)
+      : normalizedGridBlock;
+
+    const splitItemsPerColumn = getSplitItemsPerColumn();
+    const forcedItemsPerColumn = splitItemsPerColumn.active;
+    const inferredPathsForForce = inferSplitDataPaths();
+    const relatedDataPathRaw = String(inferredPathsForForce.relatedPath).trim();
+    const upsellDataPathRaw = String(inferredPathsForForce.upsellPath).trim();
+    const isUpsellIteratorLike = (normalizedBlock.label || '')
+      .toLowerCase()
+      .includes('upsell');
+    const forceIteratorOffset =
+      isUpsellIteratorLike && relatedDataPathRaw === upsellDataPathRaw
+        ? forcedItemsPerColumn
+        : 0;
+
+    const resolvedBlock = isIteratorLike(normalizedBlock)
+      ? buildIteratorBlock({
+          iteratorBlock: normalizedBlock,
+          sectionDataSource: effectiveSection.dataSource,
+          isDesigner,
+          forceIteratorCount: isRelatedUpsellSplitSection
+            ? forcedItemsPerColumn
+            : undefined,
+          forceIteratorOffset: isRelatedUpsellSplitSection
+            ? forceIteratorOffset
+            : undefined
+        })
+      : normalizedBlock;
+
+    if (!resolvedBlock.blocks || resolvedBlock.blocks.length === 0) {
+      return resolvedBlock;
+    }
+
+    return {
+      ...resolvedBlock,
+      blocks: resolvedBlock.blocks.map(resolveIteratorsRecursively)
+    };
+  };
+
+  return (
+    <section
+      ref={sectionRef}
+      data-section-id={effectiveSection.id}
+      data-newsletter-signup={isNewsletterSection ? 'true' : undefined}
+      data-newsletter-endpoint={
+        isNewsletterSection ? newsletterEndpoint : undefined
+      }
+      data-newsletter-success-message={
+        isNewsletterSection && newsletterSuccessMessage
+          ? newsletterSuccessMessage
+          : undefined
+      }
+      data-newsletter-error-message={
+        isNewsletterSection && newsletterErrorMessage
+          ? newsletterErrorMessage
+          : undefined
+      }
+      className={`theme-section relative ${
+        isDesigner ? 'cursor-pointer group/section' : ''
+      }`}
+      onClick={handleClick}
+    >
+      {isDesigner && (
+        <div
+          className={twMerge(
+            clsx(
+              'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
+              effectiveSection.locked
+                ? isSelected
+                  ? 'border-dashed border-amber-400 bg-amber-400/[0.12] shadow-[0_0_0_1px_rgba(251,191,36,0.4)]'
+                  : 'border-dashed border-amber-300/25 bg-amber-400/[0.03] group-hover/section:border-amber-300/55 group-hover/section:bg-amber-400/[0.07]'
+                : 'border-transparent group-hover/section:border-[#4482ff] group-hover/section:bg-[#4482ff]/10',
+              !effectiveSection.locked && isSelected && 'border-[#4482ff]'
+            )
+          )}
+        />
+      )}
+      {isDesigner && isSelected && (
+        <ActionToolbar
+          label={effectiveSection.label}
+          isLocked={effectiveSection.locked === true}
+          zIndex={20}
+          onMoveUp={onMoveUp}
+          onMoveDown={onMoveDown}
+          onDuplicate={onDuplicate}
+          onToggleVisibility={onToggleVisibility}
+          onDelete={onDelete}
+          onRename={onRename}
+        />
+      )}
+
+      <div className={twMerge(clsx('contents'))}>
+        {effectiveSection.blocks
+          .sort((a, b) => a.order - b.order)
+          .filter((block) => (isDesigner ? true : !block.hidden))
+          .map((block) => {
+            const resolvedBlock = resolveIteratorsRecursively(block);
+            const createActionHandler = (actionType: string) => () => {
+              if (window.parent) {
+                window.parent.postMessage(
+                  {
+                    type: actionType,
+                    data: {
+                      placeholderId,
+                      sectionId: effectiveSection.id,
+                      blockId: block.id
+                    }
+                  },
+                  '*'
+                );
+              }
+            };
+
+            const handleRename = (newLabel: string) => {
+              if (window.parent) {
+                window.parent.postMessage(
+                  {
+                    type: 'RENAME_BLOCK',
+                    data: {
+                      placeholderId,
+                      sectionId: effectiveSection.id,
+                      blockId: block.id,
+                      label: newLabel
+                    }
+                  },
+                  '*'
+                );
+              }
+            };
+            const renderBlockWithActions = (renderedBlock: Block) => (
+              <ThemeBlock
+                key={renderedBlock.id}
+                block={renderedBlock}
+                placeholderId={placeholderId}
+                sectionId={effectiveSection.id}
+                isDesigner={isDesigner}
+                isSelected={selectedBlockId === block.id}
+                selectedBlockId={selectedBlockId}
+                currentBreakpoint={currentBreakpoint}
+                onMoveUp={createActionHandler('MOVE_BLOCK_UP')}
+                onMoveDown={createActionHandler('MOVE_BLOCK_DOWN')}
+                onDuplicate={createActionHandler('DUPLICATE_BLOCK')}
+                onToggleVisibility={createActionHandler(
+                  'TOGGLE_BLOCK_VISIBILITY'
+                )}
+                onDelete={createActionHandler('DELETE_BLOCK')}
+                onRename={handleRename}
+              />
+            );
+
+            if (!isFrequentlyBoughtTogetherSection) {
+              return renderBlockWithActions(resolvedBlock);
+            }
+
+            const replaceFrequentlyBoughtBlockValues = (
+              blockToReplace: Block,
+              productData: Record<string, unknown>,
+              productIndex: number
+            ): Block => {
+              const newBlock = { ...blockToReplace };
+              const isPlaceholderMode =
+                !productData || Object.keys(productData).length === 0;
+
+              if (newBlock.properties?.dataBinding && !isPlaceholderMode) {
+                const bindingPath = String(
+                  newBlock.properties.dataBinding
+                ).replace('item.', '');
+                const pathParts = bindingPath.split('.');
+
+                let value: unknown = productData;
+                for (const part of pathParts) {
+                  const arrayMatch = part.match(/^(.+)\[(\d+)\]$/);
+                  if (arrayMatch) {
+                    const [, arrayName, indexStr] = arrayMatch;
+                    const obj = value as Record<string, unknown>;
+                    const arr = obj?.[arrayName];
+                    value = Array.isArray(arr)
+                      ? arr[parseInt(indexStr, 10)]
+                      : undefined;
+                  } else {
+                    value = (value as Record<string, unknown>)?.[part];
+                  }
+                  if (value === undefined) break;
+                }
+
+                if (value !== undefined) {
+                  if (
+                    newBlock.type === 'text' &&
+                    bindingPath === 'active_price.price'
+                  ) {
+                    newBlock.value =
+                      buildFrequentlyBoughtPriceHtml(productData);
+                    return newBlock;
+                  }
+
+                  if (newBlock.properties.tag === 'a') {
+                    newBlock.properties = {
+                      ...newBlock.properties,
+                      href: value
+                    };
+                  } else {
+                    newBlock.value = value;
+                  }
+                }
+              } else if (isPlaceholderMode && newBlock.type === 'image') {
+                const placeholderImages = [
+                  '/assets/images/product-placeholder-1.jpg',
+                  '/assets/images/product-placeholder-2.jpg',
+                  '/assets/images/product-placeholder-3.jpg',
+                  '/assets/images/product-placeholder-4.jpg'
+                ];
+                const placeholderIndex =
+                  productIndex % placeholderImages.length;
+
+                if (
+                  newBlock.value &&
+                  typeof newBlock.value === 'string' &&
+                  newBlock.value.includes('product-placeholder')
+                ) {
+                  newBlock.value = placeholderImages[placeholderIndex];
+                }
+              }
+
+              if (newBlock.blocks && newBlock.blocks.length > 0) {
+                newBlock.blocks = newBlock.blocks.map((childBlock) =>
+                  replaceFrequentlyBoughtBlockValues(
+                    childBlock,
+                    productData,
+                    productIndex
+                  )
+                );
+              }
+
+              return newBlock;
+            };
+
+            if (block.isIterator && block.blocks && block.blocks.length > 0) {
+              const template = block.blocks[0];
+              const { products, actualCount } = getIteratorRenderMeta(block);
+
+              const clonedBlocks = Array.from(
+                { length: actualCount },
+                (_, index) => {
+                  const product = products[index] || {};
+                  const templateCopy = {
+                    ...template,
+                    id: `${template.id}-clone-${index}`,
+                    styleSourceId: template.id,
+                    blocks: template.blocks
+                      ? [
+                          ...template.blocks.map((childBlock) => ({
+                            ...childBlock,
+                            styleSourceId: childBlock.id
+                          }))
+                        ]
+                      : undefined
+                  };
+
+                  return replaceFrequentlyBoughtBlockValues(
+                    templateCopy,
+                    product,
+                    index
+                  );
+                }
+              );
+
+              return renderBlockWithActions({
+                ...block,
+                blocks: clonedBlocks
+              });
+            }
+
+            const buildNestedIteratorClones = (
+              iteratorBlock: Block
+            ): Block[] => {
+              if (!iteratorBlock.blocks || iteratorBlock.blocks.length === 0) {
+                return iteratorBlock.blocks || [];
+              }
+
+              const template = iteratorBlock.blocks[0];
+              const { products, actualCount } =
+                getIteratorRenderMeta(iteratorBlock);
+
+              return Array.from({ length: actualCount }, (_, index) => {
+                const product = products[index] || {};
+                const templateCopy = {
+                  ...template,
+                  id: `${template.id}-clone-${index}`,
+                  styleSourceId: template.id,
+                  blocks: template.blocks
+                    ? [
+                        ...template.blocks.map((childBlock) => ({
+                          ...childBlock,
+                          styleSourceId: childBlock.id
+                        }))
+                      ]
+                    : undefined
+                };
+
+                return replaceFrequentlyBoughtBlockValues(
+                  templateCopy,
+                  product,
+                  index
+                );
+              });
+            };
+
+            const expandNestedIterators = (sourceBlock: Block): Block => {
+              if (!sourceBlock.blocks || sourceBlock.blocks.length === 0) {
+                return sourceBlock;
+              }
+
+              return {
+                ...sourceBlock,
+                blocks: sourceBlock.blocks.map((childBlock) => {
+                  if (
+                    childBlock.isIterator &&
+                    childBlock.blocks &&
+                    childBlock.blocks.length > 0
+                  ) {
+                    return {
+                      ...childBlock,
+                      blocks: buildNestedIteratorClones(childBlock)
+                    };
+                  }
+
+                  return expandNestedIterators(childBlock);
+                })
+              };
+            };
+
+            const renderedBlock = expandNestedIterators(block);
+            let finalRenderedBlock = renderedBlock;
+
+            if (effectiveSection.dataSourceId || effectiveSection.dataSource) {
+              const iteratorBlockForSummary = findFirstIteratorBlock(block);
+
+              if (iteratorBlockForSummary) {
+                const { products, actualCount } = getIteratorRenderMeta(
+                  iteratorBlockForSummary
+                );
+                const { bundlePriceHtml, savingsHtml } =
+                  computeFrequentlyBoughtSummary(products, actualCount);
+
+                finalRenderedBlock = applyFrequentlyBoughtSummaryValues(
+                  renderedBlock,
+                  bundlePriceHtml,
+                  savingsHtml
+                );
+              }
+            }
+
+            return renderBlockWithActions(finalRenderedBlock);
+          })}
+      </div>
+    </section>
+  );
+}