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

package/components/theme-editor/sections/coupon-banner-section.tsx

@@ -1,710 +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 { WithDesignerFeatures } from '../components/with-designer-features';
-import { useThemeSettingsContext } from '../theme-settings-context';
-import {
-  applyAlphaToColor,
-  getCSSStyles,
-  getResponsiveValue,
-  resolveThemeCssVariables
-} from '../utils';
-import { Section } from '../theme-section';
-
-interface CouponBannerSectionProps {
-  section: Section;
-  currentBreakpoint?: string;
-  placeholderId?: string;
-  isDesigner?: boolean;
-  selectedBlockId?: string | null;
-}
-
-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 escapeHtml = (value: string): string =>
-  value
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-
-const toHtmlText = (value: string): string => `<p>${escapeHtml(value)}</p>`;
-
-const resolveCouponBannerRole = (
-  block: Pick<Block, 'properties'>,
-  breakpoint: string
-): string => {
-  const value = getResponsiveValue(block.properties?.couponBannerRole, breakpoint, '');
-  return typeof value === 'string' ? value : '';
-};
-
-const CONTROL_LAYOUT_STYLE_KEYS = new Set([
-  'display',
-  'width',
-  'height',
-  'min-width',
-  'min-height',
-  'max-width',
-  'max-height',
-  'margin',
-  'margin-top',
-  'margin-right',
-  'margin-bottom',
-  'margin-left',
-  'padding',
-  'padding-top',
-  'padding-right',
-  'padding-bottom',
-  'padding-left',
-  'font-size',
-  'font-weight',
-  'line-height',
-  'align-items',
-  'justify-content'
-]);
-
-const cloneCouponBlock = (
-  block: Block,
-  overrides?: {
-    properties?: Record<string, unknown>;
-    value?: unknown;
-  }
-): Block => ({
-  ...block,
-  styleSourceId: block.styleSourceId || block.id,
-  value:
-    overrides && Object.prototype.hasOwnProperty.call(overrides, 'value')
-      ? overrides.value
-      : block.value,
-  properties: {
-    ...(block.properties || {}),
-    ...(overrides?.properties || {})
-  },
-  styles: { ...(block.styles || {}) },
-  blocks: block.blocks?.map((childBlock) => cloneCouponBlock(childBlock))
-});
-
-const copyToClipboard = async (value: string): Promise<boolean> => {
-  if (!value) return false;
-
-  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(value);
-      return true;
-    } catch {
-      // Fallback below.
-    }
-  }
-
-  if (typeof document === 'undefined') return false;
-
-  try {
-    const textarea = document.createElement('textarea');
-    textarea.value = value;
-    textarea.setAttribute('readonly', '');
-    textarea.style.position = 'fixed';
-    textarea.style.opacity = '0';
-    textarea.style.pointerEvents = 'none';
-
-    document.body.appendChild(textarea);
-    textarea.focus();
-    textarea.select();
-
-    const copied = document.execCommand('copy');
-    document.body.removeChild(textarea);
-
-    return copied;
-  } catch {
-    return false;
-  }
-};
-
-const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
-  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 contentBlocks = foregroundBlocks.filter(
-    (block) => !resolveCouponBannerRole(block, currentBreakpoint)
-  );
-  const couponLabelBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-label'
-  );
-  const couponCodeBoxBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-code-box'
-  );
-  const couponCodeTextBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-code-text'
-  );
-  const couponCopyButtonBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-copy-button'
-  );
-  const couponNoteBlock = foregroundBlocks.find(
-    (block) => resolveCouponBannerRole(block, currentBreakpoint) === 'coupon-note-text'
-  );
-
-  const firstButtonIndex = contentBlocks.findIndex((block) => block.type === 'button');
-
-  const leadingBlocks =
-    firstButtonIndex >= 0
-      ? contentBlocks.slice(0, firstButtonIndex)
-      : contentBlocks;
-  const trailingBlocks =
-    firstButtonIndex >= 0 ? contentBlocks.slice(firstButtonIndex) : [];
-
-  const couponCode = String(
-    getResponsiveValue(section.properties?.['coupon-code'], currentBreakpoint, 'SAVE20') ||
-      'SAVE20'
-  ).trim();
-  const couponNote = String(
-    getResponsiveValue(
-      section.properties?.['coupon-note'],
-      currentBreakpoint,
-      'One-time use per customer'
-    ) || 'One-time use per customer'
-  ).trim();
-  const copyButtonText = String(
-    getResponsiveValue(
-      section.properties?.['copy-button-text'],
-      currentBreakpoint,
-      'Copy Code'
-    ) || 'Copy Code'
-  );
-  const copiedButtonText = String(
-    getResponsiveValue(
-      section.properties?.['copied-button-text'],
-      currentBreakpoint,
-      'Copied'
-    ) || 'Copied'
-  );
-  const copiedStateDuration = clampNumber(
-    parseNumber(
-      getResponsiveValue(
-        section.properties?.['copied-state-duration'],
-        currentBreakpoint,
-        2000
-      ),
-      2000
-    ),
-    500,
-    10000
-  );
-
-  const [isCopied, setIsCopied] = useState(false);
-
-  useEffect(() => {
-    if (!isCopied) return;
-    const timer = window.setTimeout(() => setIsCopied(false), copiedStateDuration);
-    return () => window.clearTimeout(timer);
-  }, [isCopied, copiedStateDuration]);
-
-  const maxWidth = getResponsiveValue(
-    section.styles?.['max-width'],
-    currentBreakpoint,
-    'full'
-  );
-  const maxWidthClass =
-    maxWidth === 'narrow'
-      ? 'max-w-4xl'
-      : maxWidth === 'none'
-        ? ''
-        : 'max-w-7xl';
-  const hasMaxWidth = maxWidth !== 'none';
-  const rawSectionBorderRadius = getResponsiveValue(
-    section.styles?.['border-radius'],
-    currentBreakpoint,
-    '0px'
-  );
-  const normalizedSectionBorderRadius =
-    rawSectionBorderRadius === undefined || rawSectionBorderRadius === null
-      ? '0px'
-      : String(rawSectionBorderRadius);
-  const parsedSectionBorderRadius = Number.parseFloat(normalizedSectionBorderRadius);
-  const sectionBorderRadius = resolveThemeCssVariables(
-    Number.isFinite(parsedSectionBorderRadius) && parsedSectionBorderRadius === 12
-      ? '0px'
-      : normalizedSectionBorderRadius,
-    themeSettings
-  );
-
-  const filteredStyles = Object.fromEntries(
-    Object.entries(section.styles || {}).filter(
-      ([key]) =>
-        ![
-          'max-width',
-          'border-radius',
-          'overlay-color',
-          'overlay-opacity',
-          'copy-row-gap',
-          'code-background-color',
-          'code-text-color',
-          'code-border-color',
-          'code-border-radius',
-          'copy-button-background-color',
-          'copy-button-text-color',
-          'copy-button-border-color',
-          'copy-button-border-radius'
-        ].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 hasBackgroundImage = Boolean(backgroundBlock && backgroundImageSrc);
-
-  const overlayColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(section.styles?.['overlay-color'], currentBreakpoint, '#0f172a')
-    ),
-    themeSettings
-  );
-  const overlayOpacity =
-    clampNumber(
-      parseNumber(
-        getResponsiveValue(section.styles?.['overlay-opacity'], currentBreakpoint, 12),
-        12
-      ),
-      0,
-      100
-    ) / 100;
-  const overlayBackground = applyAlphaToColor(overlayColor, overlayOpacity);
-
-  const copyRowGap = clampNumber(
-    parseNumber(getResponsiveValue(section.styles?.['copy-row-gap'], currentBreakpoint, 10), 10),
-    0,
-    32
-  );
-
-  const codeBackgroundColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(section.styles?.['code-background-color'], currentBreakpoint, '#ffffff')
-    ),
-    themeSettings
-  );
-  const codeTextColor = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['code-text-color'], currentBreakpoint, '#0f172a')),
-    themeSettings
-  );
-  const codeBorderColor = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['code-border-color'], currentBreakpoint, '#cbd5e1')),
-    themeSettings
-  );
-  const codeBorderRadius = String(
-    getResponsiveValue(section.styles?.['code-border-radius'], currentBreakpoint, '10px')
-  );
-
-  const copyButtonBackgroundColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['copy-button-background-color'],
-        currentBreakpoint,
-        '#0f172a'
-      )
-    ),
-    themeSettings
-  );
-  const copyButtonTextColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(section.styles?.['copy-button-text-color'], currentBreakpoint, '#ffffff')
-    ),
-    themeSettings
-  );
-  const copyButtonBorderColor = resolveThemeCssVariables(
-    String(
-      getResponsiveValue(
-        section.styles?.['copy-button-border-color'],
-        currentBreakpoint,
-        '#0f172a'
-      )
-    ),
-    themeSettings
-  );
-  const copyButtonBorderRadius = String(
-    getResponsiveValue(section.styles?.['copy-button-border-radius'], currentBreakpoint, '10px')
-  );
-
-  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, keyOverride?: React.Key) => {
-    const actionBlockId = block.styleSourceId || block.id;
-
-    return (
-      <ThemeBlock
-        key={keyOverride || block.id}
-        block={block}
-        placeholderId={placeholderId}
-        sectionId={section.id}
-        isDesigner={isDesigner}
-        isSelected={
-          selectedBlockId === actionBlockId || selectedBlockId === block.id
-        }
-        selectedBlockId={selectedBlockId}
-        currentBreakpoint={currentBreakpoint}
-        onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', actionBlockId)}
-        onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', actionBlockId)}
-        onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', actionBlockId)}
-        onToggleVisibility={() =>
-          postBlockAction('TOGGLE_BLOCK_VISIBILITY', actionBlockId)
-        }
-        onDelete={() => postBlockAction('DELETE_BLOCK', actionBlockId)}
-        onRename={(newLabel) =>
-          postBlockAction('RENAME_BLOCK', actionBlockId, newLabel)
-        }
-      />
-    );
-  };
-
-  const renderSelectableWrapper = (
-    block: Block | undefined,
-    children: React.ReactNode,
-    options: {
-      className?: string;
-      style?: React.CSSProperties;
-      keyOverride?: string;
-    } = {}
-  ) => {
-    if (!block) {
-      return (
-        <div
-          key={options.keyOverride}
-          className={options.className}
-          style={options.style}
-        >
-          {children}
-        </div>
-      );
-    }
-
-    return (
-      <WithDesignerFeatures
-        key={options.keyOverride || block.id}
-        block={block}
-        placeholderId={placeholderId}
-        sectionId={section.id}
-        isDesigner={isDesigner}
-        isSelected={selectedBlockId === (block.styleSourceId || block.id)}
-        currentBreakpoint={currentBreakpoint}
-        className={options.className}
-        style={{
-          ...(options.style || {}),
-          ...getCSSStyles(block.styles || {}, themeSettings, currentBreakpoint)
-        }}
-        onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.styleSourceId || block.id)}
-        onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.styleSourceId || block.id)}
-        onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.styleSourceId || block.id)}
-        onToggleVisibility={() =>
-          postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.styleSourceId || block.id)
-        }
-        onDelete={() => postBlockAction('DELETE_BLOCK', block.styleSourceId || block.id)}
-        onRename={(newLabel) =>
-          postBlockAction('RENAME_BLOCK', block.styleSourceId || block.id, newLabel)
-        }
-      >
-        {children}
-      </WithDesignerFeatures>
-    );
-  };
-
-  const renderSelectableElement = (
-    block: Block | undefined,
-    children: React.ReactNode,
-    options: {
-      wrapperClassName?: string;
-      wrapperStyle?: React.CSSProperties;
-      keyOverride?: string;
-    } = {}
-  ) => {
-    if (!block) {
-      return (
-        <div
-          key={options.keyOverride}
-          className={options.wrapperClassName}
-          style={options.wrapperStyle}
-        >
-          {children}
-        </div>
-      );
-    }
-
-    return (
-      <WithDesignerFeatures
-        key={options.keyOverride || block.id}
-        block={block}
-        placeholderId={placeholderId}
-        sectionId={section.id}
-        isDesigner={isDesigner}
-        isSelected={selectedBlockId === (block.styleSourceId || block.id)}
-        currentBreakpoint={currentBreakpoint}
-        className={options.wrapperClassName}
-        style={options.wrapperStyle}
-        onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.styleSourceId || block.id)}
-        onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.styleSourceId || block.id)}
-        onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.styleSourceId || block.id)}
-        onToggleVisibility={() =>
-          postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.styleSourceId || block.id)
-        }
-        onDelete={() => postBlockAction('DELETE_BLOCK', block.styleSourceId || block.id)}
-        onRename={(newLabel) =>
-          postBlockAction('RENAME_BLOCK', block.styleSourceId || block.id, newLabel)
-        }
-      >
-        {children}
-      </WithDesignerFeatures>
-    );
-  };
-
-  const handleCopyClick = async () => {
-    const copied = await copyToClipboard(couponCode || 'SAVE20');
-    if (copied) {
-      setIsCopied(true);
-    }
-  };
-
-  const isMobileLayout = currentBreakpoint === 'mobile';
-  const fallbackBackgroundColor =
-    typeof sectionStyles.backgroundColor === 'string'
-      ? sectionStyles.backgroundColor
-      : '#f2f5fb';
-  const couponCodeBoxStyle: React.CSSProperties = {
-    backgroundColor: codeBackgroundColor,
-    color: codeTextColor,
-    border: `1px dashed ${codeBorderColor}`,
-    borderRadius: codeBorderRadius
-  };
-  const couponCopyButtonStyle: React.CSSProperties = {
-    backgroundColor: copyButtonBackgroundColor,
-    color: copyButtonTextColor,
-    border: `1px solid ${copyButtonBorderColor}`,
-    borderRadius: copyButtonBorderRadius
-  };
-  const couponCopyButtonControlStyle: React.CSSProperties = {
-    ...couponCopyButtonStyle,
-    ...(couponCopyButtonBlock
-      ? getCSSStyles(
-          Object.fromEntries(
-            Object.entries(couponCopyButtonBlock.styles || {}).filter(
-              ([styleKey]) => !CONTROL_LAYOUT_STYLE_KEYS.has(styleKey)
-            )
-          ),
-          themeSettings,
-          currentBreakpoint
-        )
-      : {})
-  };
-
-  return (
-    <div
-      className={twMerge(
-        clsx(
-          'coupon-banner relative z-10 overflow-hidden',
-          hasMaxWidth && 'mx-auto',
-          maxWidthClass
-        )
-      )}
-      style={{
-        ...sectionStyles,
-        position: 'relative',
-        borderRadius: sectionBorderRadius
-      }}
-    >
-      {hasBackgroundImage ? (
-        <div className="absolute inset-0 z-0">{renderBlock(backgroundBlock)}</div>
-      ) : (
-        <div
-          className="absolute inset-0 z-0"
-          style={{ backgroundColor: fallbackBackgroundColor }}
-        />
-      )}
-
-      {hasBackgroundImage && overlayOpacity > 0 && (
-        <div
-          className="absolute inset-0 z-10 pointer-events-none"
-          style={{ backgroundColor: overlayBackground }}
-        />
-      )}
-
-      <div
-        className={clsx(
-          'relative z-20 flex w-full gap-5',
-          isMobileLayout ? 'flex-col' : 'items-end justify-between'
-        )}
-      >
-        <div className={clsx('flex min-w-0 flex-col gap-4', !isMobileLayout && 'max-w-3xl')}>
-          {leadingBlocks.map(renderBlock)}
-          {trailingBlocks.map(renderBlock)}
-        </div>
-
-        <div
-          className={clsx(
-            'flex shrink-0 flex-col gap-2',
-            isMobileLayout ? 'w-full' : 'w-[360px] max-w-full'
-          )}
-        >
-          {couponLabelBlock ? (
-            renderBlock(couponLabelBlock)
-          ) : (
-            <div
-              className="text-xs font-semibold uppercase tracking-[0.08em]"
-              style={{ color: codeTextColor }}
-            >
-              Coupon code
-            </div>
-          )}
-          <div
-            className="inline-flex w-full flex-wrap items-stretch"
-            style={{ gap: `${copyRowGap}px` }}
-          >
-            {renderSelectableWrapper(
-              couponCodeBoxBlock,
-              couponCodeTextBlock ? (
-                renderBlock(
-                  cloneCouponBlock(couponCodeTextBlock, {
-                    value: toHtmlText(couponCode || 'SAVE20')
-                  })
-                )
-              ) : (
-                <div className="inline-flex min-h-[42px] flex-1 items-center justify-center px-4 py-2 text-sm font-semibold uppercase tracking-[0.12em]">
-                  {couponCode || 'SAVE20'}
-                </div>
-              ),
-              {
-                className:
-                  'inline-flex min-h-[42px] flex-1 items-center justify-center px-4 py-2 text-sm font-semibold uppercase tracking-[0.12em]',
-                style: couponCodeBoxStyle,
-                keyOverride: 'coupon-code-box'
-              }
-            )}
-
-            {renderSelectableElement(
-              couponCopyButtonBlock,
-              <button
-                type="button"
-                className="inline-flex min-h-[42px] items-center justify-center px-4 py-2 text-sm font-semibold"
-                style={couponCopyButtonControlStyle}
-                onClick={handleCopyClick}
-              >
-                {isCopied ? copiedButtonText : copyButtonText}
-              </button>,
-              { keyOverride: 'coupon-copy-button' }
-            )}
-          </div>
-          {couponNoteBlock ? (
-            renderBlock(
-              cloneCouponBlock(couponNoteBlock, {
-                value: toHtmlText(couponNote)
-              })
-            )
-          ) : (
-            <div
-              className="text-xs font-medium"
-              style={{
-                color: codeTextColor,
-                opacity: 0.72
-              }}
-            >
-              {couponNote}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CouponBannerSection;