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

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

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