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

package/components/theme-editor/sections/shipping-threshold-progress-section.tsx

@@ -1,586 +0,0 @@
-'use client';
-
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { useGetBasketQuery } from '@akinon/next/data/client/basket';
-
-import ThemeBlock, { Block } from '../theme-block';
-import { Section } from '../theme-section';
-import { useThemeSettingsContext } from '../theme-settings-context';
-import {
-  getCSSStyles,
-  getResponsiveValue,
-  resolveThemeCssVariables
-} from '../utils';
-
-interface ShippingThresholdProgressSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  placeholderId?: string;
-  isDesigner?: boolean;
-  selectedBlockId?: string | null;
-}
-
-const parseAmount = (value: unknown, fallback: number): number => {
-  if (value === undefined || value === null || value === '') return fallback;
-
-  if (typeof value === 'number') {
-    return Number.isFinite(value) ? value : fallback;
-  }
-
-  if (typeof value !== 'string') return fallback;
-
-  const trimmed = value.trim();
-  if (!trimmed) return fallback;
-
-  const directParsed = Number(trimmed);
-  if (Number.isFinite(directParsed)) return directParsed;
-
-  let normalized = trimmed.replace(/[^\d.,-]/g, '');
-  if (!normalized) return fallback;
-
-  const hasComma = normalized.includes(',');
-  const hasDot = normalized.includes('.');
-
-  if (hasComma && hasDot) {
-    const lastComma = normalized.lastIndexOf(',');
-    const lastDot = normalized.lastIndexOf('.');
-
-    if (lastComma > lastDot) {
-      // Example: 1.234,56 -> 1234.56
-      normalized = normalized.replace(/\./g, '').replace(',', '.');
-    } else {
-      // Example: 1,234.56 -> 1234.56
-      normalized = normalized.replace(/,/g, '');
-    }
-  } else if (hasComma && !hasDot) {
-    const parts = normalized.split(',');
-    if (parts.length === 2 && parts[1].length <= 2) {
-      normalized = `${parts[0]}.${parts[1]}`;
-    } else {
-      normalized = normalized.replace(/,/g, '');
-    }
-  }
-
-  const parsed = Number(normalized);
-  return Number.isFinite(parsed) ? parsed : fallback;
-};
-
-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;
-  }
-  if (typeof value === 'number') return value !== 0;
-  return fallback;
-};
-
-const formatAmount = (value: number): string => {
-  const hasDecimal = Math.abs(value - Math.round(value)) >= 0.001;
-
-  return value.toLocaleString(undefined, {
-    minimumFractionDigits: hasDecimal ? 2 : 0,
-    maximumFractionDigits: hasDecimal ? 2 : 0
-  });
-};
-
-const replaceTokens = (
-  input: string,
-  tokens: Record<string, string>
-): string => {
-  let output = input;
-
-  Object.entries(tokens).forEach(([key, value]) => {
-    output = output.split(`{{${key}}}`).join(value);
-  });
-
-  return output;
-};
-
-const replaceTokensInUnknown = (
-  value: unknown,
-  tokens: Record<string, string>
-): unknown => {
-  if (typeof value === 'string') {
-    return replaceTokens(value, tokens);
-  }
-
-  if (Array.isArray(value)) {
-    return value.map((item) => replaceTokensInUnknown(item, tokens));
-  }
-
-  if (typeof value === 'object' && value !== null) {
-    return Object.fromEntries(
-      Object.entries(value).map(([key, nestedValue]) => [
-        key,
-        replaceTokensInUnknown(nestedValue, tokens)
-      ])
-    );
-  }
-
-  return value;
-};
-
-const toResponsiveStyle = (
-  existing: unknown,
-  nextValue: string
-): Record<string, string> => {
-  if (typeof existing === 'object' && existing !== null && !Array.isArray(existing)) {
-    const existingObject = existing as Record<string, unknown>;
-    const responsiveKeys = Object.keys(existingObject).filter((key) =>
-      ['desktop', 'tablet', 'mobile'].includes(key)
-    );
-
-    if (responsiveKeys.length > 0) {
-      return Object.fromEntries(responsiveKeys.map((key) => [key, nextValue]));
-    }
-  }
-
-  return {
-    desktop: nextValue,
-    tablet: nextValue,
-    mobile: nextValue
-  };
-};
-
-const resolveResponsiveString = (
-  value: unknown,
-  breakpoint: string
-): string => {
-  if (typeof value === 'string') return value;
-
-  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-    const responsiveValue = getResponsiveValue(value, breakpoint, '');
-    if (typeof responsiveValue === 'string') return responsiveValue;
-  }
-
-  return '';
-};
-
-const getShippingRole = (
-  block: Pick<Block, 'label' | 'properties'>,
-  breakpoint: string
-): string => {
-  const roleFromProperties = resolveResponsiveString(
-    block.properties?.shippingRole,
-    breakpoint
-  );
-  const normalizedLabel = (block.label || '').toLowerCase();
-
-  return (
-    roleFromProperties ||
-    (normalizedLabel.includes('progress fill')
-      ? 'progress-fill'
-      : normalizedLabel.includes('progress marker')
-      ? 'progress-marker'
-      : normalizedLabel.includes('progress wrapper')
-      ? 'progress-wrapper'
-      : normalizedLabel.includes('start label')
-      ? 'start-label'
-      : '')
-  );
-};
-
-const findProgressBlockIds = (
-  blocks: Block[],
-  breakpoint: string
-): {
-  fillBlockId: string | null;
-  markerBlockId: string | null;
-  wrapperBlockId: string | null;
-  startLabelBlockId: string | null;
-} => {
-  let fillBlockId: string | null = null;
-  let markerBlockId: string | null = null;
-  let wrapperBlockId: string | null = null;
-  let startLabelBlockId: string | null = null;
-
-  const walk = (block: Block) => {
-    const role = getShippingRole(block, breakpoint);
-
-    if (role === 'progress-wrapper') {
-      wrapperBlockId = block.id;
-    }
-
-    if (role === 'progress-fill') {
-      fillBlockId = block.id;
-    }
-
-    if (role === 'progress-marker') {
-      markerBlockId = block.id;
-    }
-
-    if (role === 'start-label') {
-      startLabelBlockId = block.id;
-    }
-
-    if (block.blocks && block.blocks.length > 0) {
-      block.blocks.forEach(walk);
-    }
-  };
-
-  blocks.forEach(walk);
-
-  return { fillBlockId, markerBlockId, wrapperBlockId, startLabelBlockId };
-};
-
-const escapeCssAttributeValue = (value: string): string => {
-  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-};
-
-const injectDynamicState = (
-  blocks: Block[],
-  tokens: Record<string, string>,
-  currentBreakpoint: string,
-  progressPercent: number
-): Block[] => {
-  const walk = (block: Block): Block => {
-    const cloned: Block = {
-      ...block,
-      properties: block.properties ? { ...block.properties } : block.properties,
-      styles: block.styles ? { ...block.styles } : block.styles,
-      value: replaceTokensInUnknown(block.value, tokens) as Block['value']
-    };
-
-    const role = getShippingRole(cloned, currentBreakpoint);
-
-    if (role === 'progress-fill') {
-      cloned.styles = {
-        ...cloned.styles,
-        width: toResponsiveStyle(
-          cloned.styles?.width,
-          `${Math.max(0, Math.min(progressPercent, 100)).toFixed(2)}%`
-        )
-      };
-    }
-
-    if (cloned.blocks && cloned.blocks.length > 0) {
-      cloned.blocks = cloned.blocks.map(walk);
-    }
-
-    return cloned;
-  };
-
-  return blocks.map(walk);
-};
-
-const ShippingThresholdProgressSection: React.FC<
-  ShippingThresholdProgressSectionProps
-> = ({
-  section,
-  currentBreakpoint = 'desktop',
-  placeholderId = '',
-  isDesigner = false,
-  selectedBlockId = null
-}) => {
-  const themeSettings = useThemeSettingsContext();
-
-  const sortedBlocks = useMemo(
-    () =>
-      [...(section.blocks || [])]
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
-        .filter((block) => (isDesigner ? true : !block.hidden)),
-    [section.blocks, isDesigner]
-  );
-
-  const useLiveBasket = parseBoolean(
-    getResponsiveValue(section.properties?.['use-live-basket'], currentBreakpoint, true),
-    true
-  );
-
-  const { data: basketData } = useGetBasketQuery(undefined, {
-    skip: !useLiveBasket
-  });
-
-  const targetAmount = Math.max(
-    parseAmount(
-      getResponsiveValue(section.properties?.['target-amount'], currentBreakpoint, 1000),
-      1000
-    ),
-    1
-  );
-
-  const fallbackCurrentAmount = Math.max(
-    parseAmount(
-      getResponsiveValue(
-        section.properties?.['fallback-current-amount'],
-        currentBreakpoint,
-        760
-      ),
-      760
-    ),
-    0
-  );
-
-  const liveBasketAmount = parseAmount(basketData?.total_amount, Number.NaN);
-  const currentAmount =
-    useLiveBasket && Number.isFinite(liveBasketAmount)
-      ? Math.max(0, liveBasketAmount)
-      : fallbackCurrentAmount;
-
-  const remainingAmount = Math.max(targetAmount - currentAmount, 0);
-  const progressPercent = Math.min((currentAmount / targetAmount) * 100, 100);
-
-  const currencySymbol =
-    String(
-      getResponsiveValue(section.properties?.['currency-symbol'], currentBreakpoint, 'TL') ||
-        'TL'
-    ).trim() || 'TL';
-
-  const tokenContext = {
-    current: formatAmount(currentAmount),
-    remaining: formatAmount(remainingAmount),
-    target: formatAmount(targetAmount),
-    currency: currencySymbol,
-    progress_percent: progressPercent.toFixed(2),
-    marker_right_percent: (100 - progressPercent).toFixed(2)
-  };
-
-  const remainingMessageTemplate = String(
-    getResponsiveValue(
-      section.properties?.['remaining-message-template'],
-      currentBreakpoint,
-      'Add {{remaining}} {{currency}} more for free shipping'
-    ) || 'Add {{remaining}} {{currency}} more for free shipping'
-  );
-
-  const unlockedMessageTemplate = String(
-    getResponsiveValue(
-      section.properties?.['unlocked-message-template'],
-      currentBreakpoint,
-      'Free shipping unlocked'
-    ) || 'Free shipping unlocked'
-  );
-
-  const summaryTemplate = String(
-    getResponsiveValue(
-      section.properties?.['summary-template'],
-      currentBreakpoint,
-      '{{current}} {{currency}} / {{target}} {{currency}}'
-    ) || '{{current}} {{currency}} / {{target}} {{currency}}'
-  );
-
-  const ctaIncompleteText = String(
-    getResponsiveValue(
-      section.properties?.['cta-incomplete-text'],
-      currentBreakpoint,
-      'Add products to unlock'
-    ) || 'Add products to unlock'
-  );
-
-  const ctaCompleteText = String(
-    getResponsiveValue(
-      section.properties?.['cta-complete-text'],
-      currentBreakpoint,
-      'Continue to checkout'
-    ) || 'Continue to checkout'
-  );
-  const showStartLabel = parseBoolean(
-    getResponsiveValue(section.properties?.['show-start-label'], currentBreakpoint, false),
-    false
-  );
-
-  const progressTrackColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(section.styles?.['progress-track-color'], currentBreakpoint, '#e2e8f0')
-    ),
-    themeSettings
-  );
-  const progressFillStartColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['progress-fill-start-color'],
-        currentBreakpoint,
-        '#22c55e'
-      )
-    ),
-    themeSettings
-  );
-  const progressFillEndColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['progress-fill-end-color'],
-        currentBreakpoint,
-        '#84cc16'
-      )
-    ),
-    themeSettings
-  );
-  const progressBarHeight = Math.min(
-    Math.max(
-      parseAmount(
-        getResponsiveValue(section.styles?.['progress-bar-height'], currentBreakpoint, 14),
-        14
-      ),
-      8
-    ),
-    28
-  );
-  const progressBarRadius = String(
-    getResponsiveValue(
-      section.styles?.['progress-bar-radius'],
-      currentBreakpoint,
-      '999px'
-    ) || '999px'
-  );
-
-  const remainingMessage = replaceTokens(
-    remainingAmount > 0 ? remainingMessageTemplate : unlockedMessageTemplate,
-    tokenContext
-  );
-
-  const summaryMessage = replaceTokens(summaryTemplate, tokenContext);
-
-  const effectiveTokens: Record<string, string> = {
-    ...tokenContext,
-    remaining_message: remainingMessage,
-    summary_message: summaryMessage,
-    cta_text: remainingAmount > 0 ? ctaIncompleteText : ctaCompleteText
-  };
-
-  const renderedBlocks = injectDynamicState(
-    sortedBlocks,
-    effectiveTokens,
-    currentBreakpoint,
-    progressPercent
-  );
-
-  const { fillBlockId, markerBlockId, wrapperBlockId, startLabelBlockId } = useMemo(
-    () => findProgressBlockIds(sortedBlocks, currentBreakpoint),
-    [sortedBlocks, currentBreakpoint]
-  );
-
-  const dynamicProgressCss = useMemo(() => {
-    const rules: string[] = [];
-
-    if (wrapperBlockId) {
-      const escapedWrapperId = escapeCssAttributeValue(wrapperBlockId);
-      rules.push(
-        `[data-block-id="${escapedWrapperId}"]{position:relative !important;height:${progressBarHeight}px !important;background-color:${progressTrackColor} !important;border-radius:${progressBarRadius} !important;overflow:visible !important;}`
-      );
-    }
-
-    if (fillBlockId) {
-      const escapedFillId = escapeCssAttributeValue(fillBlockId);
-      rules.push(
-        `[data-block-id="${escapedFillId}"]{width:${Math.max(
-          0,
-          Math.min(progressPercent, 100)
-        ).toFixed(
-          2
-        )}% !important;position:absolute !important;top:0 !important;left:0 !important;height:100% !important;background:linear-gradient(90deg, ${progressFillStartColor} 0%, ${progressFillEndColor} 100%) !important;border-radius:${progressBarRadius} !important;padding:0 !important;min-height:0 !important;font-size:0 !important;line-height:0 !important;color:transparent !important;box-sizing:border-box !important;overflow:hidden !important;}`
-      );
-    }
-
-    if (markerBlockId) {
-      const escapedMarkerId = escapeCssAttributeValue(markerBlockId);
-      rules.push(`[data-block-id="${escapedMarkerId}"]{display:none !important;}`);
-    }
-
-    if (startLabelBlockId && !showStartLabel) {
-      const escapedStartLabelId = escapeCssAttributeValue(startLabelBlockId);
-      rules.push(`[data-block-id="${escapedStartLabelId}"]{display:none !important;}`);
-    }
-
-    return rules.join('');
-  }, [
-    fillBlockId,
-    markerBlockId,
-    wrapperBlockId,
-    startLabelBlockId,
-    progressPercent,
-    progressTrackColor,
-    progressFillStartColor,
-    progressFillEndColor,
-    progressBarHeight,
-    progressBarRadius,
-    showStartLabel
-  ]);
-
-  const maxWidth = getResponsiveValue(
-    section.styles?.['max-width'],
-    currentBreakpoint,
-    'normal'
-  );
-  const maxWidthClass =
-    maxWidth === 'narrow'
-      ? 'max-w-4xl'
-      : maxWidth === 'normal'
-      ? 'max-w-7xl'
-      : '';
-  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
-
-  const filteredStyles = Object.fromEntries(
-    Object.entries(section.styles || {}).filter(
-      ([key]) =>
-        ![
-          'max-width',
-          'progress-track-color',
-          'progress-fill-start-color',
-          'progress-fill-end-color',
-          'progress-bar-height',
-          'progress-bar-radius'
-        ].includes(key)
-    )
-  );
-
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
-
-  const postBlockAction = (type: string, blockId: string, label?: string) => {
-    if (!window.parent) return;
-    window.parent.postMessage(
-      {
-        type,
-        data: {
-          placeholderId,
-          sectionId: section.id,
-          blockId,
-          ...(label ? { label } : {})
-        }
-      },
-      '*'
-    );
-  };
-
-  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={() => postBlockAction('MOVE_BLOCK_UP', block.id)}
-      onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.id)}
-      onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.id)}
-      onToggleVisibility={() => postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)}
-      onDelete={() => postBlockAction('DELETE_BLOCK', block.id)}
-      onRename={(newLabel) => postBlockAction('RENAME_BLOCK', block.id, newLabel)}
-    />
-  );
-
-  return (
-    <div
-      className={twMerge(
-        clsx(
-          'shipping-threshold-progress-section relative z-10 w-full',
-          hasMaxWidth && 'mx-auto',
-          maxWidthClass
-        )
-      )}
-      style={sectionStyles}
-    >
-      {dynamicProgressCss ? (
-        <style dangerouslySetInnerHTML={{ __html: dynamicProgressCss }} />
-      ) : null}
-      {renderedBlocks.map(renderBlock)}
-    </div>
-  );
-};
-
-export default ShippingThresholdProgressSection;