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

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

@@ -0,0 +1,62 @@
+'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

@@ -0,0 +1,507 @@
+'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>
+  );
+}