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

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

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