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

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

@@ -1,62 +0,0 @@
-'use client';
-
-import React from 'react';
-import { getResponsiveValue, resolveThemeCssVariables } from '../utils';
-import { Section } from '../theme-section';
-import { useThemeSettingsContext } from '../theme-settings-context';
-
-interface DividerSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-}
-
-export default function DividerSection({
-  section,
-  currentBreakpoint = 'desktop'
-}: DividerSectionProps) {
-  const themeSettings = useThemeSettingsContext();
-
-  const containerStyles = {
-    paddingTop: getResponsiveValue(
-      section.styles?.['padding-top'],
-      currentBreakpoint
-    ),
-    paddingRight: getResponsiveValue(
-      section.styles?.['padding-right'],
-      currentBreakpoint
-    ),
-    paddingBottom: getResponsiveValue(
-      section.styles?.['padding-bottom'],
-      currentBreakpoint
-    ),
-    paddingLeft: getResponsiveValue(
-      section.styles?.['padding-left'],
-      currentBreakpoint
-    ),
-    position: 'relative'
-  } as React.CSSProperties;
-
-  const spanStyles = {
-    display: 'block',
-    height: getResponsiveValue(
-      section.styles?.height,
-      currentBreakpoint,
-      '1px'
-    ),
-    backgroundColor: resolveThemeCssVariables(
-      getResponsiveValue(
-        section.styles?.['background-color'],
-        currentBreakpoint,
-        '#e0e0e0'
-      ) as string,
-      themeSettings
-    ),
-    width: getResponsiveValue(section.styles?.width, currentBreakpoint, '100%')
-  } as React.CSSProperties;
-
-  return (
-    <div style={containerStyles}>
-      <span style={spanStyles} />
-    </div>
-  );
-}

package/components/theme-editor/sections/featured-product-spotlight-section.tsx

@@ -1,507 +0,0 @@
-'use client';
-
-import React, { useMemo } from 'react';
-import { useGetProductByPkQuery } from '@akinon/next/data/client/product';
-
-import ThemeBlock, { Block } from '../theme-block';
-import { useThemeSettingsContext } from '../theme-settings-context';
-import { Section } from '../theme-section';
-import { getCSSStyles, getResponsiveValue } from '../utils';
-
-interface FeaturedProductSpotlightSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  placeholderId?: string;
-  isDesigner?: boolean;
-  selectedBlockId?: string | null;
-}
-
-const parseBoolean = (value: unknown, fallback: boolean): boolean => {
-  if (typeof value === 'boolean') return value;
-  if (typeof value === 'string') {
-    const normalized = value.trim().toLowerCase();
-    if (normalized === 'true') return true;
-    if (normalized === 'false') return false;
-  }
-  return fallback;
-};
-
-const resolvePath = (
-  source: Record<string, unknown> | undefined,
-  path: string
-): unknown => {
-  if (!source || !path) return undefined;
-
-  const normalizedPath = path.replace(/^item\./, '');
-  const pathParts = normalizedPath.split('.');
-  let value: unknown = source;
-
-  for (const part of pathParts) {
-    const arrayMatch = part.match(/^(.+)\[(\d+)\]$/);
-    if (arrayMatch) {
-      const [, arrayKey, indexText] = arrayMatch;
-      const arrayValue = (value as Record<string, unknown>)?.[arrayKey];
-      value = Array.isArray(arrayValue)
-        ? arrayValue[Number(indexText)]
-        : undefined;
-    } else {
-      value = (value as Record<string, unknown>)?.[part];
-    }
-
-    if (value === undefined || value === null) {
-      return undefined;
-    }
-  }
-
-  return value;
-};
-
-const parsePriceValue = (value: unknown): number | null => {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return value;
-  }
-
-  if (typeof value !== 'string') return null;
-
-  const cleaned = value.trim().replace(/[^\d,.-]/g, '');
-  if (!cleaned) return null;
-
-  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 : null;
-};
-
-const parsePositiveInt = (value: unknown): number | null => {
-  if (typeof value === 'number' && Number.isFinite(value) && value > 0) {
-    return value;
-  }
-
-  if (typeof value === 'string') {
-    const trimmed = value.trim();
-    if (!/^\d+$/.test(trimmed)) return null;
-    const parsed = Number.parseInt(trimmed, 10);
-    return parsed > 0 ? parsed : null;
-  }
-
-  return null;
-};
-
-const normalizeCurrencyLabel = (currency: unknown): string => {
-  const raw = String(currency || '').trim().toUpperCase();
-  if (!raw) return 'TL';
-
-  const map: Record<string, string> = {
-    TRY: 'TL',
-    TL: 'TL',
-    USD: 'USD',
-    EUR: 'EUR',
-    GBP: 'GBP'
-  };
-
-  return map[raw] || raw;
-};
-
-const formatPriceWithCurrency = (
-  value: unknown,
-  currency: unknown
-): string | null => {
-  if (value == null || value === '') return null;
-
-  const price = parsePriceValue(value);
-  if (price === null) {
-    const text = String(value).trim();
-    return text || null;
-  }
-
-  const hasDecimals = Math.abs(price % 1) > 0.00001;
-  const formatted = price.toLocaleString('tr-TR', {
-    minimumFractionDigits: hasDecimals ? 2 : 0,
-    maximumFractionDigits: 2
-  });
-
-  return `${formatted} ${normalizeCurrencyLabel(currency)}`;
-};
-
-const getCollectionProducts = (
-  section: Section,
-  isDesigner: boolean
-): Record<string, unknown>[] => {
-  const collectionDetails = section.dataSource?.details?.collection;
-  const staticData = section.dataSource?.details?.static?.data;
-  const isEditorMode =
-    typeof window !== 'undefined' && isDesigner && window.parent !== window;
-
-  const collectionPayload = isEditorMode
-    ? collectionDetails?.products || collectionDetails?.data
-    : collectionDetails?.data || collectionDetails?.products;
-
-  if (Array.isArray(collectionPayload)) {
-    return collectionPayload as Record<string, unknown>[];
-  }
-
-  if (Array.isArray((collectionPayload as Record<string, unknown>)?.products)) {
-    return (collectionPayload as Record<string, unknown>).products as Record<
-      string,
-      unknown
-    >[];
-  }
-
-  if (Array.isArray((collectionPayload as Record<string, unknown>)?.items)) {
-    return (collectionPayload as Record<string, unknown>).items as Record<
-      string,
-      unknown
-    >[];
-  }
-
-  if (Array.isArray(staticData)) {
-    return staticData as Record<string, unknown>[];
-  }
-
-  return [];
-};
-
-const getDiscountBadgeText = (
-  currentPrice: number | null,
-  retailPrice: number | null
-): string | null => {
-  if (
-    currentPrice === null ||
-    retailPrice === null ||
-    retailPrice <= currentPrice ||
-    retailPrice <= 0
-  ) {
-    return null;
-  }
-
-  const percentage = Math.round(((retailPrice - currentPrice) / retailPrice) * 100);
-  if (percentage <= 0) return null;
-  return `Save ${percentage}%`;
-};
-
-export default function FeaturedProductSpotlightSection({
-  section,
-  currentBreakpoint = 'desktop',
-  placeholderId = '',
-  isDesigner = false,
-  selectedBlockId = null
-}: FeaturedProductSpotlightSectionProps) {
-  const themeSettings = useThemeSettingsContext();
-
-  const maxWidth = getResponsiveValue(
-    section.styles?.['max-width'],
-    currentBreakpoint,
-    'normal'
-  );
-  const maxWidthClass =
-    maxWidth === 'narrow'
-      ? 'max-w-4xl'
-      : maxWidth === 'normal'
-        ? 'max-w-7xl'
-        : maxWidth === 'full'
-          ? 'w-full'
-          : '';
-  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
-
-  const filteredStyles = Object.fromEntries(
-    Object.entries(section.styles || {}).filter(([key]) => key !== 'max-width')
-  );
-
-  const sectionStyles = useMemo(() => {
-    const baseStyles = getCSSStyles(
-      filteredStyles,
-      themeSettings,
-      currentBreakpoint
-    );
-    const reverseLayout = parseBoolean(
-      getResponsiveValue(section.properties?.reverse, currentBreakpoint, false),
-      false
-    );
-
-    if (!reverseLayout) {
-      return baseStyles;
-    }
-
-    return {
-      ...baseStyles,
-      flexDirection: currentBreakpoint === 'mobile' ? 'column-reverse' : 'row-reverse'
-    };
-  }, [
-    currentBreakpoint,
-    filteredStyles,
-    section.properties?.reverse,
-    themeSettings
-  ]);
-
-  const products = useMemo(
-    () => getCollectionProducts(section, isDesigner),
-    [section, isDesigner]
-  );
-  const fallbackProductPk = parsePositiveInt(
-    getResponsiveValue(section.properties?.['product-pk'], currentBreakpoint, '')
-  );
-  const { data: fallbackProductResponse } = useGetProductByPkQuery(
-    fallbackProductPk as number,
-    {
-      skip: products.length > 0 || !fallbackProductPk
-    }
-  );
-  const product =
-    products[0] ||
-    ((fallbackProductResponse?.product as Record<string, unknown> | undefined) ??
-      undefined);
-
-  const activePrice =
-    ((product?.active_price as Record<string, unknown> | undefined) || {});
-  const currentPriceRaw = activePrice?.price ?? product?.price;
-  const retailPriceRaw = activePrice?.retail_price ?? product?.retail_price;
-  const currency =
-    activePrice?.currency_type ?? product?.currency_type ?? product?.currency;
-  const currentPrice = parsePriceValue(currentPriceRaw);
-  const retailPrice = parsePriceValue(retailPriceRaw);
-
-  const currentPriceText = formatPriceWithCurrency(currentPriceRaw, currency);
-  const retailPriceText = formatPriceWithCurrency(retailPriceRaw, currency);
-  const discountBadgeText = getDiscountBadgeText(currentPrice, retailPrice);
-  const hasRetailPrice =
-    Boolean(retailPriceText) &&
-    retailPrice !== null &&
-    currentPrice !== null &&
-    retailPrice > currentPrice;
-
-  const showBadge = parseBoolean(
-    getResponsiveValue(section.properties?.['show-badge'], currentBreakpoint, true),
-    true
-  );
-  const showOldPrice = parseBoolean(
-    getResponsiveValue(
-      section.properties?.['show-old-price'],
-      currentBreakpoint,
-      true
-    ),
-    true
-  );
-  const showThumbnails = parseBoolean(
-    getResponsiveValue(
-      section.properties?.['show-thumbnails'],
-      currentBreakpoint,
-      true
-    ),
-    true
-  );
-
-  const normalizedBlocks = useMemo(() => {
-    const cloneWithProduct = (block: Block): Block | null => {
-      const normalizedLabel = String(block.label || '').toLowerCase();
-
-      if (normalizedLabel === 'thumbnail row' && !showThumbnails) {
-        return null;
-      }
-
-      if (
-        normalizedLabel === 'discount badge' &&
-        (!showBadge || !discountBadgeText)
-      ) {
-        return null;
-      }
-
-      if (
-        normalizedLabel === 'old price' &&
-        (!showOldPrice || !hasRetailPrice)
-      ) {
-        return null;
-      }
-
-      const nextBlock: Block = {
-        ...block,
-        properties: block.properties ? { ...block.properties } : block.properties,
-        styles: block.styles
-          ? JSON.parse(JSON.stringify(block.styles))
-          : block.styles,
-        blocks: undefined
-      };
-
-      if (normalizedLabel === 'discount badge' && discountBadgeText) {
-        nextBlock.value = discountBadgeText;
-      } else if (normalizedLabel === 'current price' && currentPriceText) {
-        nextBlock.value = currentPriceText;
-      } else if (normalizedLabel === 'old price' && retailPriceText) {
-        nextBlock.value = retailPriceText;
-      } else if (normalizedLabel === 'primary cta' && product?.absolute_url) {
-        nextBlock.properties = {
-          ...(nextBlock.properties || {}),
-          url: product.absolute_url
-        };
-      }
-
-      const bindingPath = nextBlock.properties?.dataBinding;
-      if (bindingPath && product) {
-        const boundValue = resolvePath(product, String(bindingPath));
-
-        if (boundValue !== undefined) {
-          if (nextBlock.type === 'button') {
-            nextBlock.properties = {
-              ...(nextBlock.properties || {}),
-              url: boundValue
-            };
-          } else if (
-            nextBlock.type === 'text' &&
-            normalizedLabel !== 'current price' &&
-            normalizedLabel !== 'old price'
-          ) {
-            nextBlock.value = boundValue;
-          } else if (nextBlock.type === 'image') {
-            nextBlock.value = boundValue;
-          }
-        } else if (
-          nextBlock.type === 'image' &&
-          normalizedLabel.includes('thumbnail')
-        ) {
-          const fallbackImage = resolvePath(product, 'productimage_set[0].image');
-          if (fallbackImage !== undefined) {
-            nextBlock.value = fallbackImage;
-          }
-        }
-      }
-
-      if (block.blocks?.length) {
-        nextBlock.blocks = block.blocks
-          .map(cloneWithProduct)
-          .filter(Boolean) as Block[];
-      }
-
-      return nextBlock;
-    };
-
-    return (section.blocks || [])
-      .sort((a, b) => (a.order || 0) - (b.order || 0))
-      .map(cloneWithProduct)
-      .filter(Boolean) as Block[];
-  }, [
-    currentPriceText,
-    discountBadgeText,
-    hasRetailPrice,
-    product,
-    retailPriceText,
-    section.blocks,
-    showBadge,
-    showOldPrice,
-    showThumbnails
-  ]);
-
-  const renderBlock = (block: Block) => (
-    <ThemeBlock
-      key={block.id}
-      block={block}
-      placeholderId={placeholderId}
-      sectionId={section.id}
-      isDesigner={isDesigner}
-      isSelected={selectedBlockId === block.id}
-      selectedBlockId={selectedBlockId}
-      currentBreakpoint={currentBreakpoint}
-      onMoveUp={() => {
-        if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'MOVE_BLOCK_UP',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
-        }
-      }}
-      onMoveDown={() => {
-        if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'MOVE_BLOCK_DOWN',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
-        }
-      }}
-      onDuplicate={() => {
-        if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'DUPLICATE_BLOCK',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
-        }
-      }}
-      onToggleVisibility={() => {
-        if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'TOGGLE_BLOCK_VISIBILITY',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
-        }
-      }}
-      onDelete={() => {
-        if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'DELETE_BLOCK',
-              data: { placeholderId, sectionId: section.id, blockId: block.id }
-            },
-            '*'
-          );
-        }
-      }}
-      onRename={(newLabel) => {
-        if (window.parent) {
-          window.parent.postMessage(
-            {
-              type: 'RENAME_BLOCK',
-              data: {
-                placeholderId,
-                sectionId: section.id,
-                blockId: block.id,
-                label: newLabel
-              }
-            },
-            '*'
-          );
-        }
-      }}
-    />
-  );
-
-  return (
-    <div
-      className={
-        hasMaxWidth
-          ? `mx-auto ${maxWidthClass}`
-          : maxWidthClass || undefined
-      }
-      style={sectionStyles}
-    >
-      {normalizedBlocks
-        .filter((block) => (isDesigner ? true : !block.hidden))
-        .map(renderBlock)}
-    </div>
-  );
-}