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

package/components/theme-editor/sections/countdown-campaign-banner-section.tsx

@@ -1,433 +0,0 @@
-'use client';
-
-import React, { useEffect, useMemo, useState } from 'react';
-import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-import ThemeBlock, { Block } from '../theme-block';
-import { useThemeSettingsContext } from '../theme-settings-context';
-import {
-  applyAlphaToColor,
-  getCSSStyles,
-  getResponsiveValue,
-  resolveThemeCssVariables
-} from '../utils';
-import { Section } from '../theme-section';
-
-interface CountdownCampaignBannerSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  placeholderId?: string;
-  isDesigner?: boolean;
-  selectedBlockId?: string | null;
-}
-
-type CountdownUnit = 'days' | 'hours' | 'minutes' | 'seconds';
-
-type CountdownValues = Record<CountdownUnit, string>;
-
-const pickImageSource = (value: unknown, breakpoint: string): string => {
-  if (typeof value === 'string') {
-    return value.trim();
-  }
-
-  if (typeof value === 'object' && value !== null) {
-    const objectValue = value as Record<string, unknown>;
-    if (typeof objectValue.url === 'string') {
-      return objectValue.url.trim();
-    }
-
-    const responsiveValue = getResponsiveValue(value, breakpoint, '');
-    if (typeof responsiveValue === 'string') {
-      return responsiveValue.trim();
-    }
-
-    const firstStringValue = Object.values(objectValue).find(
-      (item) => typeof item === 'string'
-    );
-    if (typeof firstStringValue === 'string') {
-      return firstStringValue.trim();
-    }
-  }
-
-  return '';
-};
-
-const normalizeImageSource = (src: string): string => {
-  if (!src) return '';
-  if (src.startsWith('data:image')) return src;
-  if (src.startsWith('/')) return src;
-  if (src.startsWith('//')) return src;
-  if (src.startsWith('http://') || src.startsWith('https://')) return src;
-
-  const cloudName = process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME?.trim();
-  if (!cloudName) return '';
-
-  return `https://${cloudName}/${src.replace(/^\/+/, '')}`;
-};
-
-const hasValidImageSource = (src: string): boolean => {
-  if (!src) return false;
-  if (src.startsWith('data:image')) return true;
-
-  try {
-    new URL(src, 'http://localhost');
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-const parseNumber = (value: unknown, fallback: number): number => {
-  if (value === undefined || value === null || value === '') return fallback;
-  const parsed = typeof value === 'string' ? Number(value) : Number(value);
-  return Number.isFinite(parsed) ? parsed : fallback;
-};
-
-const clampNumber = (value: number, min: number, max: number) =>
-  Math.min(Math.max(value, min), max);
-
-const formatTwoDigits = (value: number) => String(Math.max(0, value)).padStart(2, '0');
-
-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 parseEndDate = (value: unknown): Date | null => {
-  if (value === undefined || value === null || value === '') return null;
-
-  if (value instanceof Date) {
-    return Number.isNaN(value.getTime()) ? null : value;
-  }
-
-  if (typeof value === 'number') {
-    const timestamp = value < 10_000_000_000 ? value * 1000 : value;
-    const date = new Date(timestamp);
-    return Number.isNaN(date.getTime()) ? null : date;
-  }
-
-  if (typeof value !== 'string') return null;
-
-  const trimmed = value.trim();
-  if (!trimmed) return null;
-
-  if (/^\d+$/.test(trimmed)) {
-    const numeric = Number(trimmed);
-    if (!Number.isFinite(numeric)) return null;
-    const timestamp = numeric < 10_000_000_000 ? numeric * 1000 : numeric;
-    const date = new Date(timestamp);
-    return Number.isNaN(date.getTime()) ? null : date;
-  }
-
-  const parsed = new Date(trimmed);
-  return Number.isNaN(parsed.getTime()) ? null : parsed;
-};
-
-const getRemainingTime = (
-  endDate: Date | null
-): { isExpired: boolean; values: CountdownValues } => {
-  const empty = {
-    days: '00',
-    hours: '00',
-    minutes: '00',
-    seconds: '00'
-  };
-
-  if (!endDate) {
-    return { isExpired: false, values: empty };
-  }
-
-  const diffMs = endDate.getTime() - Date.now();
-  if (diffMs <= 0) {
-    return { isExpired: true, values: empty };
-  }
-
-  const totalSeconds = Math.floor(diffMs / 1000);
-  const days = Math.floor(totalSeconds / (60 * 60 * 24));
-  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
-  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
-  const seconds = totalSeconds % 60;
-
-  return {
-    isExpired: false,
-    values: {
-      days: formatTwoDigits(days),
-      hours: formatTwoDigits(hours),
-      minutes: formatTwoDigits(minutes),
-      seconds: formatTwoDigits(seconds)
-    }
-  };
-};
-
-const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionProps> = ({
-  section,
-  currentBreakpoint = 'desktop',
-  placeholderId = '',
-  isDesigner = false,
-  selectedBlockId = null
-}) => {
-  const themeSettings = useThemeSettingsContext();
-
-  const sortedBlocks = [...(section.blocks || [])]
-    .sort((a, b) => (a.order || 0) - (b.order || 0))
-    .filter((block) => (isDesigner ? true : !block.hidden));
-
-  const backgroundBlock = sortedBlocks.find((block) => block.type === 'image');
-  const foregroundBlocks = backgroundBlock
-    ? sortedBlocks.filter((block) => block.id !== backgroundBlock.id)
-    : sortedBlocks;
-
-  const firstButtonIndex = foregroundBlocks.findIndex(
-    (block) => block.type === 'button'
-  );
-
-  const leadingBlocks =
-    firstButtonIndex >= 0
-      ? foregroundBlocks.slice(0, firstButtonIndex)
-      : foregroundBlocks;
-  const trailingBlocks =
-    firstButtonIndex >= 0 ? foregroundBlocks.slice(firstButtonIndex) : [];
-
-  const endDateRaw = getResponsiveValue(
-    section.properties?.['end-date'],
-    currentBreakpoint,
-    ''
-  );
-  const endDate = useMemo(() => parseEndDate(endDateRaw), [endDateRaw]);
-
-  const showSeconds = parseBoolean(
-    getResponsiveValue(section.properties?.['show-seconds'], currentBreakpoint, true),
-    true
-  );
-
-  const expiredMessage = String(
-    getResponsiveValue(
-      section.properties?.['expired-message'],
-      currentBreakpoint,
-      'Campaign ended'
-    ) || 'Campaign ended'
-  );
-
-  const [countdown, setCountdown] = useState(() => getRemainingTime(endDate));
-
-  useEffect(() => {
-    const tick = () => setCountdown(getRemainingTime(endDate));
-    tick();
-
-    if (!endDate) return;
-
-    const intervalId = window.setInterval(tick, 1000);
-    return () => window.clearInterval(intervalId);
-  }, [endDate]);
-
-  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',
-          'overlay-color',
-          'overlay-opacity',
-          'timer-background-color',
-          'timer-text-color',
-          'timer-label-color',
-          'timer-border-radius',
-          'timer-gap'
-        ].includes(key)
-    )
-  );
-
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
-  const backgroundImageSrc = useMemo(() => {
-    if (!backgroundBlock) return '';
-    const raw = pickImageSource(backgroundBlock.value, currentBreakpoint);
-    const normalized = normalizeImageSource(raw);
-    return hasValidImageSource(normalized) ? normalized : '';
-  }, [backgroundBlock, currentBreakpoint]);
-
-  const overlayColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(section.styles?.['overlay-color'], currentBreakpoint, '#0f172a')
-    ),
-    themeSettings
-  );
-  const overlayOpacity =
-    clampNumber(
-      parseNumber(
-        getResponsiveValue(section.styles?.['overlay-opacity'], currentBreakpoint, 45),
-        45
-      ),
-      0,
-      100
-    ) / 100;
-  const overlayBackground = applyAlphaToColor(overlayColor, overlayOpacity);
-
-  const timerBackgroundColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['timer-background-color'],
-        currentBreakpoint,
-        '#ffffff'
-      )
-    ),
-    themeSettings
-  );
-  const timerTextColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(section.styles?.['timer-text-color'], currentBreakpoint, '#0f172a')
-    ),
-    themeSettings
-  );
-  const timerLabelColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(section.styles?.['timer-label-color'], currentBreakpoint, '#64748b')
-    ),
-    themeSettings
-  );
-  const timerBorderRadius = String(
-    getResponsiveValue(section.styles?.['timer-border-radius'], currentBreakpoint, '10px')
-  );
-  const timerGap = clampNumber(
-    parseNumber(getResponsiveValue(section.styles?.['timer-gap'], currentBreakpoint, 10), 10),
-    0,
-    32
-  );
-
-  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)}
-    />
-  );
-
-  const timerUnits: Array<{ key: CountdownUnit; label: string }> = showSeconds
-    ? [
-        { key: 'days', label: 'Days' },
-        { key: 'hours', label: 'Hours' },
-        { key: 'minutes', label: 'Minutes' },
-        { key: 'seconds', label: 'Seconds' }
-      ]
-    : [
-        { key: 'days', label: 'Days' },
-        { key: 'hours', label: 'Hours' },
-        { key: 'minutes', label: 'Minutes' }
-      ];
-
-  return (
-    <div
-      className={twMerge(
-        clsx(
-          'countdown-campaign-banner relative z-10 w-full overflow-hidden',
-          hasMaxWidth && 'mx-auto',
-          maxWidthClass
-        )
-      )}
-      style={{ ...sectionStyles, position: 'relative' }}
-    >
-      {backgroundBlock && backgroundImageSrc ? (
-        <div className="absolute inset-0 z-0">{renderBlock(backgroundBlock)}</div>
-      ) : (
-        <div className="absolute inset-0 z-0 bg-slate-600" />
-      )}
-
-      <div
-        className="absolute inset-0 z-10 pointer-events-none"
-        style={{ backgroundColor: overlayBackground }}
-      />
-
-      <div className="relative z-20 flex w-full max-w-3xl flex-col gap-4">
-        {leadingBlocks.map(renderBlock)}
-
-        {countdown.isExpired ? (
-          <div
-            className="inline-flex w-fit items-center justify-center px-4 py-2 text-sm font-semibold"
-            style={{
-              color: timerTextColor,
-              backgroundColor: timerBackgroundColor,
-              borderRadius: timerBorderRadius
-            }}
-          >
-            {expiredMessage}
-          </div>
-        ) : (
-          <div className="flex flex-wrap items-stretch" style={{ gap: `${timerGap}px` }}>
-            {timerUnits.map((unit) => (
-              <div
-                key={unit.key}
-                className="min-w-[64px] px-3 py-2 text-center"
-                style={{
-                  backgroundColor: timerBackgroundColor,
-                  borderRadius: timerBorderRadius
-                }}
-              >
-                <div
-                  className="text-lg font-semibold leading-none"
-                  style={{ color: timerTextColor }}
-                >
-                  {countdown.values[unit.key]}
-                </div>
-                <div
-                  className="mt-1 text-[11px] font-medium uppercase tracking-[0.04em] leading-none"
-                  style={{ color: timerLabelColor }}
-                >
-                  {unit.label}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {trailingBlocks.map(renderBlock)}
-      </div>
-    </div>
-  );
-};
-
-export default CountdownCampaignBannerSection;