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

package/components/theme-editor/blocks/counter-block.tsx

@@ -0,0 +1,348 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import ThemeBlock, { Block } from '../theme-block';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { getCSSStyles, getResponsiveValue } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+type CounterUnit = 'days' | 'hours' | 'minutes' | 'seconds';
+
+type CounterValues = Record<CounterUnit, string>;
+
+type OnCompleteAction = 'none' | 'hide_section' | 'hide_self';
+
+const pad2 = (n: number) => String(Math.max(0, n)).padStart(2, '0');
+
+const parseEndAt = (raw: unknown): Date | null => {
+  if (raw === undefined || raw === null) return null;
+
+  if (raw instanceof Date) {
+    return isNaN(raw.getTime()) ? null : raw;
+  }
+
+  if (typeof raw === 'number') {
+    // Heuristic: seconds vs milliseconds
+    const ms = raw < 10_000_000_000 ? raw * 1000 : raw;
+    const d = new Date(ms);
+    return isNaN(d.getTime()) ? null : d;
+  }
+
+  if (typeof raw !== 'string') return null;
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  // If numeric string, treat as timestamp
+  if (/^\d+$/.test(trimmed)) {
+    const num = Number(trimmed);
+    if (!Number.isFinite(num)) return null;
+    const ms = num < 10_000_000_000 ? num * 1000 : num;
+    const d = new Date(ms);
+    return isNaN(d.getTime()) ? null : d;
+  }
+
+  // ISO or Date-parsable string
+  const d = new Date(trimmed);
+  return isNaN(d.getTime()) ? null : d;
+};
+
+const computeRemaining = (
+  endAt: Date | null
+): { done: boolean; values: CounterValues } => {
+  if (!endAt) {
+    return {
+      done: false,
+      values: { days: '00', hours: '00', minutes: '00', seconds: '00' }
+    };
+  }
+
+  const diffMs = endAt.getTime() - Date.now();
+  if (diffMs <= 0) {
+    return {
+      done: true,
+      values: { days: '00', hours: '00', minutes: '00', seconds: '00' }
+    };
+  }
+
+  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 {
+    done: false,
+    values: {
+      days: pad2(days),
+      hours: pad2(hours),
+      minutes: pad2(minutes),
+      seconds: pad2(seconds)
+    }
+  };
+};
+
+const cloneAndInjectCounterValues = (
+  blocks: Block[],
+  counter: CounterValues
+): Block[] => {
+  const walk = (b: Block): Block => {
+    const next: Block = {
+      ...b,
+      properties: b.properties ? { ...b.properties } : b.properties,
+      styles: b.styles ? { ...b.styles } : b.styles
+    };
+
+    const unit = next.properties?.counterUnit as CounterUnit | undefined;
+    const role = next.properties?.counterRole as string | undefined;
+
+    if (next.type === 'text' && unit && role === 'value') {
+      next.value = counter[unit];
+    }
+
+    if (next.blocks && next.blocks.length > 0) {
+      next.blocks = next.blocks.map(walk);
+    }
+
+    return next;
+  };
+
+  return blocks.map(walk);
+};
+
+const CounterBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const themeSettings = useThemeSettingsContext();
+
+  const endAtRaw = useMemo(() => {
+    const raw = getResponsiveValue(
+      block.properties?.endAt,
+      currentBreakpoint,
+      ''
+    );
+    return raw;
+  }, [block.properties?.endAt, currentBreakpoint]);
+
+  const endAt = useMemo(() => parseEndAt(endAtRaw), [endAtRaw]);
+
+  const onCompleteAction = useMemo(() => {
+    const raw = getResponsiveValue(
+      block.properties?.onCompleteAction,
+      currentBreakpoint,
+      'none'
+    );
+    return (raw as OnCompleteAction) || 'none';
+  }, [block.properties?.onCompleteAction, currentBreakpoint]);
+
+  const [{ done, values }, setRemaining] = useState(() =>
+    computeRemaining(endAt)
+  );
+  const didRunActionRef = useRef(false);
+  const didAutoShowRef = useRef(false);
+
+  useEffect(() => {
+    didRunActionRef.current = false;
+    setRemaining(computeRemaining(endAt));
+
+    if (!endAt) return;
+
+    const tick = () => setRemaining(computeRemaining(endAt));
+    const intervalId = window.setInterval(tick, 1000);
+    tick();
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [endAt]);
+
+  useEffect(() => {
+    if (!done) return;
+    if (didRunActionRef.current) return;
+
+    didRunActionRef.current = true;
+
+    if (onCompleteAction === 'hide_self') {
+      // In designer (iframe) mode: use editor's show/hide so the user can still select/manage it
+      if (isDesigner && window.parent && window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'SET_BLOCK_VISIBILITY',
+            data: {
+              placeholderId,
+              sectionId,
+              blockId: block.id,
+              hidden: true
+            }
+          },
+          '*'
+        );
+        return;
+      }
+
+      // Production: hide this block's wrapper in DOM
+      const blockEl = document.querySelector(
+        `[data-block-id="${CSS.escape(block.id)}"]`
+      ) as HTMLElement | null;
+      if (blockEl) {
+        blockEl.style.display = 'none';
+      }
+      return;
+    }
+
+    if (onCompleteAction === 'hide_section') {
+      // In designer (iframe) mode: use editor's show/hide
+      if (isDesigner && window.parent && window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: 'SET_SECTION_VISIBILITY',
+            data: {
+              placeholderId,
+              sectionId,
+              hidden: true
+            }
+          },
+          '*'
+        );
+        return;
+      }
+
+      // Production: hide section in DOM
+      const sectionEl = document.querySelector(
+        `[data-section-id="${CSS.escape(sectionId)}"]`
+      ) as HTMLElement | null;
+
+      if (sectionEl) {
+        sectionEl.style.display = 'none';
+      }
+    }
+  }, [block.id, done, isDesigner, onCompleteAction, placeholderId, sectionId]);
+
+  useEffect(() => {
+    // If the counter was hidden (likely by a previous completion), but endAt is now in the future,
+    // ensure it becomes visible again in designer mode.
+    if (!isDesigner || !window.parent || window.parent === window) return;
+    if (onCompleteAction !== 'hide_self') return;
+    if (!endAt) return;
+    if (done) {
+      didAutoShowRef.current = false;
+      return;
+    }
+
+    if (!block.hidden) {
+      didAutoShowRef.current = false;
+      return;
+    }
+
+    if (didAutoShowRef.current) return;
+    didAutoShowRef.current = true;
+
+    window.parent.postMessage(
+      {
+        type: 'SET_BLOCK_VISIBILITY',
+        data: {
+          placeholderId,
+          sectionId,
+          blockId: block.id,
+          hidden: false
+        }
+      },
+      '*'
+    );
+  }, [
+    block.hidden,
+    block.id,
+    done,
+    endAt,
+    isDesigner,
+    onCompleteAction,
+    placeholderId,
+    sectionId
+  ]);
+
+  const allStyles = getCSSStyles(
+    block.styles,
+    themeSettings,
+    currentBreakpoint
+  );
+  const { position, top, right, bottom, left, zIndex, ...innerStyles } =
+    allStyles;
+
+  if (!block.blocks || block.blocks.length === 0) {
+    return (
+      <div style={{ padding: '20px', color: '#6b7280' }}>Empty counter</div>
+    );
+  }
+
+  const renderedBlocks = cloneAndInjectCounterValues(
+    block.blocks
+      .filter((b) => !b.hidden)
+      .sort((a, b) => (a.order || 0) - (b.order || 0)),
+    values
+  );
+
+  return (
+    <div style={innerStyles}>
+      {renderedBlocks.map((childBlock) => {
+        const createActionHandler = (actionType: string) => () => {
+          if (window.parent) {
+            window.parent.postMessage(
+              {
+                type: actionType,
+                data: {
+                  placeholderId,
+                  sectionId,
+                  blockId: childBlock.id
+                }
+              },
+              '*'
+            );
+          }
+        };
+
+        const handleRename = (newLabel: string) => {
+          if (window.parent) {
+            window.parent.postMessage(
+              {
+                type: 'RENAME_BLOCK',
+                data: {
+                  placeholderId,
+                  sectionId,
+                  blockId: childBlock.id,
+                  label: newLabel
+                }
+              },
+              '*'
+            );
+          }
+        };
+
+        return (
+          <ThemeBlock
+            key={childBlock.id}
+            block={childBlock}
+            placeholderId={placeholderId}
+            sectionId={sectionId}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === childBlock.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={createActionHandler('MOVE_BLOCK_UP')}
+            onMoveDown={createActionHandler('MOVE_BLOCK_DOWN')}
+            onDuplicate={createActionHandler('DUPLICATE_BLOCK')}
+            onToggleVisibility={createActionHandler('TOGGLE_BLOCK_VISIBILITY')}
+            onDelete={createActionHandler('DELETE_BLOCK')}
+            onRename={handleRename}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default CounterBlock;

package/components/theme-editor/blocks/divider-block.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { getResponsiveValue } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+const DividerBlock = ({ block, currentBreakpoint = 'desktop' }: BlockRendererProps) => {
+  const spanStyles = {
+    display: 'block',
+    height: getResponsiveValue(block.styles?.height, currentBreakpoint, '1px'),
+    backgroundColor: getResponsiveValue(
+      block.styles?.['background-color'],
+      currentBreakpoint,
+      '#e0e0e0'
+    ),
+    width: getResponsiveValue(block.styles?.width, currentBreakpoint, '100%')
+  } as React.CSSProperties;
+
+  return <span style={spanStyles} />;
+};
+
+export default DividerBlock;

package/components/theme-editor/blocks/embed-block.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+
+// Platform-specific embed URL converters
+const getEmbedUrl = (url: string): string | null => {
+  if (!url) return null;
+
+  // Twitter/X
+  if (url.includes('twitter.com') || url.includes('x.com')) {
+    const tweetId = url.match(/status\/(\d+)/)?.[1];
+    if (tweetId) {
+      return `https://platform.twitter.com/embed/Tweet.html?id=${tweetId}`;
+    }
+  }
+
+  // Spotify
+  if (url.includes('spotify.com')) {
+    const spotifyMatch = url.match(/spotify\.com\/(track|playlist|album|episode)\/([a-zA-Z0-9]+)/);
+    if (spotifyMatch) {
+      const [, type, id] = spotifyMatch;
+      return `https://open.spotify.com/embed/${type}/${id}`;
+    }
+  }
+
+  // CodePen
+  if (url.includes('codepen.io')) {
+    const penMatch = url.match(/codepen\.io\/([^/]+)\/pen\/([^/?]+)/);
+    if (penMatch) {
+      const [, user, penId] = penMatch;
+      return `https://codepen.io/${user}/embed/${penId}?default-tab=result`;
+    }
+  }
+
+  // Instagram
+  if (url.includes('instagram.com')) {
+    const postMatch = url.match(/instagram\.com\/(p|reel)\/([^/?]+)/);
+    if (postMatch) {
+      const [, type, id] = postMatch;
+      return `https://www.instagram.com/${type}/${id}/embed`;
+    }
+  }
+
+  // TikTok
+  if (url.includes('tiktok.com')) {
+    const videoMatch = url.match(/tiktok\.com\/.*\/video\/(\d+)/);
+    if (videoMatch) {
+      const [, videoId] = videoMatch;
+      return `https://www.tiktok.com/embed/${videoId}`;
+    }
+  }
+
+  // SoundCloud
+  if (url.includes('soundcloud.com')) {
+    return `https://w.soundcloud.com/player/?url=${encodeURIComponent(url)}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`;
+  }
+
+  // Google Forms
+  if (url.includes('docs.google.com/forms')) {
+    return url.replace('/viewform', '/viewform?embedded=true');
+  }
+
+  // Google Sheets
+  if (url.includes('docs.google.com/spreadsheets')) {
+    return url.replace('/edit', '/preview');
+  }
+
+  // Figma
+  if (url.includes('figma.com')) {
+    const fileMatch = url.match(/figma\.com\/file\/([^/]+)/);
+    if (fileMatch) {
+      return `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(url)}`;
+    }
+  }
+
+  // Calendly
+  if (url.includes('calendly.com')) {
+    return url;
+  }
+
+  // Typeform
+  if (url.includes('typeform.com')) {
+    return url;
+  }
+
+  // If URL looks like an iframe src, use it directly
+  if (url.startsWith('https://') || url.startsWith('http://')) {
+    return url;
+  }
+
+  return null;
+};
+
+// Extract iframe src from raw iframe code
+const extractIframeSrc = (code: string): string | null => {
+  const srcMatch = code.match(/src=["']([^"']+)["']/);
+  return srcMatch ? srcMatch[1] : null;
+};
+
+const EmbedBlock = ({ block }: BlockRendererProps) => {
+  const embedInput =
+    typeof block.value === 'object' && block.value !== null
+      ? (block.value as Record<string, string>).en ||
+        (block.value as Record<string, string>).tr ||
+        Object.values(block.value as Record<string, string>)[0] ||
+        ''
+      : (block.value as string) || '';
+
+  const properties = block.properties || {};
+
+  const resolveValue = <T,>(val: unknown, fallback: T): T => {
+    if (val && typeof val === 'object' && 'desktop' in (val as Record<string, unknown>)) {
+      return ((val as Record<string, T>).desktop as T) ?? fallback;
+    }
+    return (val as T) ?? fallback;
+  };
+
+  const title = resolveValue<string>(properties.title, '');
+  const allowFullscreen = resolveValue<boolean>(properties.allowFullscreen, true);
+  const loading = resolveValue<string>(properties.loading, 'lazy');
+
+  // Try to extract iframe src if user pasted full iframe code
+  let embedUrl: string | null = null;
+  if (embedInput.includes('<iframe')) {
+    embedUrl = extractIframeSrc(embedInput);
+  } else {
+    embedUrl = getEmbedUrl(embedInput);
+  }
+
+  if (!embedInput) {
+    return (
+      <div
+        style={{
+          minHeight: '300px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#f5f5f5',
+          color: '#666',
+          fontSize: '14px',
+          gap: '8px'
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ opacity: 0.4 }}
+        >
+          <polyline points="16 18 22 12 16 6" />
+          <polyline points="8 6 2 12 8 18" />
+        </svg>
+        <span>Enter an embed URL or paste iframe code</span>
+        <span style={{ fontSize: '12px', opacity: 0.6 }}>
+          Supported: Twitter, Spotify, CodePen, Instagram, TikTok, Google Forms, and more
+        </span>
+      </div>
+    );
+  }
+
+  if (!embedUrl) {
+    return (
+      <div
+        style={{
+          minHeight: '300px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fef2f2',
+          color: '#dc2626',
+          fontSize: '14px',
+          gap: '8px'
+        }}
+      >
+        <span>⚠ Invalid embed URL or code</span>
+        <span style={{ fontSize: '12px', opacity: 0.8 }}>
+          Please check the URL format or paste a valid iframe code
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <iframe
+      src={embedUrl}
+      title={title || 'Embedded content'}
+      style={{
+        width: '100%',
+        height: '100%',
+        border: 'none',
+        minHeight: '300px'
+      }}
+      loading={loading as 'lazy' | 'eager' | undefined}
+      allowFullScreen={allowFullscreen}
+      referrerPolicy="no-referrer-when-downgrade"
+      sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+    />
+  );
+};
+
+export default EmbedBlock;

package/components/theme-editor/blocks/group-block.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { getResponsiveValue } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import ThemeBlock from '../theme-block';
+
+const GroupBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const tag = getResponsiveValue(block.properties?.tag, 'desktop', 'div');
+  const Tag = tag as keyof JSX.IntrinsicElements;
+  const href = tag === 'a' ? block.properties?.href : undefined;
+
+  const tagProps: Record<string, unknown> = {
+    className: 'contents'
+  };
+  if (tag === 'a' && href) {
+    tagProps.href = href;
+  }
+  if (tag === 'form') {
+    tagProps.onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+
+      const submitButton = event.currentTarget.querySelector(
+        'button[type="submit"]'
+      ) as HTMLButtonElement | null;
+
+      submitButton?.click();
+    };
+  }
+
+  const shippingRole = String(
+    getResponsiveValue(block.properties?.shippingRole, currentBreakpoint, '')
+  );
+  const isVisualUtilityGroup =
+    shippingRole === 'progress-fill' || shippingRole === 'progress-marker';
+
+  if (!block.blocks || block.blocks.length === 0) {
+    if (isVisualUtilityGroup) {
+      return <Tag {...tagProps} />;
+    }
+
+    return (
+      <div style={{ padding: '20px', color: '#6b7280' }}>Empty group block</div>
+    );
+  }
+
+  return (
+    <Tag {...tagProps}>
+      {block.blocks
+        .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .map((childBlock, index) => {
+          const createActionHandler = (actionType: string) => () => {
+            if (window.parent) {
+              window.parent.postMessage(
+                {
+                  type: actionType,
+                  data: {
+                    placeholderId,
+                    sectionId,
+                    blockId: childBlock.id
+                  }
+                },
+                '*'
+              );
+            }
+          };
+
+          const handleRename = (newLabel: string) => {
+            if (window.parent) {
+              window.parent.postMessage(
+                {
+                  type: 'RENAME_BLOCK',
+                  data: {
+                    placeholderId,
+                    sectionId,
+                    blockId: childBlock.id,
+                    label: newLabel
+                  }
+                },
+                '*'
+              );
+            }
+          };
+
+          return (
+            <ThemeBlock
+              key={childBlock.id || `block-${index}`}
+              block={childBlock}
+              placeholderId={placeholderId}
+              sectionId={sectionId}
+              isDesigner={isDesigner}
+              isSelected={selectedBlockId === childBlock.id}
+              selectedBlockId={selectedBlockId}
+              currentBreakpoint={currentBreakpoint}
+              onMoveUp={createActionHandler('MOVE_BLOCK_UP')}
+              onMoveDown={createActionHandler('MOVE_BLOCK_DOWN')}
+              onDuplicate={createActionHandler('DUPLICATE_BLOCK')}
+              onToggleVisibility={createActionHandler(
+                'TOGGLE_BLOCK_VISIBILITY'
+              )}
+              onDelete={createActionHandler('DELETE_BLOCK')}
+              onRename={handleRename}
+            />
+          );
+        })}
+    </Tag>
+  );
+};
+
+export default GroupBlock;