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

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

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