@akinon/pz-theme 2.0.38-beta.0 → 2.0.38

package/src/blocks/payment-badges-block.tsx

@@ -0,0 +1,393 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import NextLink from 'next/link';
+import ThemeBlock, { Block } from '../theme-block';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+import {
+  findItemTemplate,
+  hasItemTemplate,
+  ItemTemplateList
+} from './item-template';
+
+interface PaymentBadge {
+  label: string;
+  image: string;
+  href: string;
+}
+
+const looksLikeUrl = (value: string) =>
+  /^(https?:)?\/\//i.test(value) ||
+  value.startsWith('/') ||
+  value.startsWith('data:image');
+
+const labelFromUrl = (url: string) => {
+  const file = url.split('?')[0].split('/').pop() || '';
+  return file.replace(/\.[a-z0-9]+$/i, '').replace(/[-_]+/g, ' ').trim();
+};
+
+const escapeRegExp = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * One badge per line (or per the entry separator, `;` by default), fields
+ * separated by the field separator (`|` by default):
+ * `Visa|https://cdn/visa.svg|https://brand/payment`. A lone URL becomes an
+ * image badge, a lone word becomes a text badge — brands ship both.
+ *
+ * Comma is deliberately NOT the default entry separator: badge images are
+ * served from transform CDNs whose paths contain commas (`/w_120,h_40,c_fit/`),
+ * and splitting on them tore a single URL into two malformed badges.
+ */
+const parseBadges = (
+  raw: string,
+  entrySeparator: string,
+  fieldSeparator: string
+): PaymentBadge[] =>
+  raw
+    // A newline always ends an entry: the field is a textarea, and a brand
+    // that changed the separator still types one badge per line.
+    .split(new RegExp(`\\r?\\n|${escapeRegExp(entrySeparator)}`))
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .map((entry) => {
+      const [first = '', second = '', third = ''] = entry
+        .split(fieldSeparator)
+        .map((part) => part.trim());
+
+      if (!second && looksLikeUrl(first)) {
+        return { label: labelFromUrl(first), image: first, href: '' };
+      }
+
+      return {
+        label: first,
+        image: looksLikeUrl(second) ? second : '',
+        href: third
+      };
+    })
+    .filter((badge) => badge.label || badge.image);
+
+/**
+ * Functional chrome block: the row of payment and trust logos in the footer.
+ * Badges are authored either as child image blocks (the richer path, which wins
+ * when present) or through the `badges` property list; a group marked as the
+ * row layout repeats the designer's own badge instead. The block owns the row
+ * layout only.
+ * Properties: badges, entrySeparator, fieldSeparator, gap, badgeHeight,
+ * grayscale, showLabels, fallbackLabel, maxBadges, openInNewTab.
+ * Parts: list, badge, image, label.
+ */
+const PaymentBadgesBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const readText = (key: string, fallback: string): string => {
+    const value = getResponsiveValue(
+      block.properties?.[key],
+      currentBreakpoint,
+      fallback
+    );
+    return value === undefined || value === null ? fallback : String(value);
+  };
+
+  const clamp = (key: string, fallback: number, min: number, max: number) => {
+    const numeric = Math.round(
+      Number(getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback))
+    );
+    if (!Number.isFinite(numeric)) return fallback;
+    return Math.min(max, Math.max(min, numeric));
+  };
+
+  const gap = clamp('gap', 12, 0, 64);
+  const badgeHeight = clamp('badgeHeight', 24, 8, 120);
+  const maxBadges = clamp('maxBadges', 0, 0, 40);
+  const grayscale = readToggle(
+    block.properties?.grayscale,
+    currentBreakpoint,
+    false
+  );
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    false
+  );
+  const openInNewTab = readToggle(
+    block.properties?.openInNewTab,
+    currentBreakpoint,
+    false
+  );
+  const fallbackLabel = readText('fallbackLabel', 'Payment method');
+  // An empty separator would explode the text character by character, so an
+  // empty value falls back to the one the block has always used.
+  const entrySeparatorValue = readText('entrySeparator', ';');
+  const entrySeparator = entrySeparatorValue.length > 0
+    ? entrySeparatorValue
+    : ';';
+  const fieldSeparatorValue = readText('fieldSeparator', '|');
+  const fieldSeparator = fieldSeparatorValue.length > 0
+    ? fieldSeparatorValue
+    : '|';
+
+  const badgesText = String(
+    getResponsiveValue(block.properties?.badges, currentBreakpoint, '')
+  );
+
+  // The row layout lives among the children, so it must not also be drawn as
+  // one of the badges.
+  const template = findItemTemplate(block, currentBreakpoint);
+  const templateId = template?.id;
+
+  const childBlocks: Block[] = useMemo(
+    () =>
+      (block.blocks || [])
+        .filter((child) => (isDesigner ? true : !child.hidden))
+        .filter((child) => !templateId || child.id !== templateId)
+        .sort((a, b) => (a.order || 0) - (b.order || 0)),
+    [block.blocks, isDesigner, templateId]
+  );
+
+  const badges = useMemo(() => {
+    const parsed = parseBadges(badgesText, entrySeparator, fieldSeparator);
+    return maxBadges > 0 ? parsed.slice(0, maxBadges) : parsed;
+  }, [badgesText, entrySeparator, fieldSeparator, maxBadges]);
+
+  // Resolved once so a designer-authored badge binds the same fields the
+  // built-in one draws — `item.image`, `item.label`, `item.url`.
+  const badgeItems = useMemo(
+    () =>
+      badges.map((badge, index) => ({
+        label: badge.label,
+        name: badge.label,
+        image: badge.image,
+        url: badge.href,
+        href: badge.href,
+        index: index + 1
+      })),
+    [badges]
+  );
+
+  const rowStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: `${gap}px`
+  };
+
+  const customRows =
+    hasItemTemplate(block, currentBreakpoint) &&
+    (badgeItems.length > 0 || isDesigner) ? (
+      <ItemTemplateList
+        block={block}
+        items={badgeItems}
+        placeholderId={placeholderId}
+        sectionId={sectionId}
+        isDesigner={isDesigner}
+        selectedBlockId={selectedBlockId}
+        currentBreakpoint={currentBreakpoint}
+        designerPlaceholderCount={4}
+      />
+    ) : null;
+
+  if (!customRows && childBlocks.length === 0 && badges.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Payment badges (no logos)"
+        attribute="data-payment-badges"
+      />
+    ) : null;
+  }
+
+  if (customRows) {
+    return (
+      <div
+        data-payment-badges=""
+        data-payment-badges-source="template"
+        {...partAttrs('list')}
+        style={rowStyle}
+      >
+        {customRows}
+      </div>
+    );
+  }
+
+  if (childBlocks.length > 0) {
+    const createActionHandler = (actionType: string, blockId?: string) => () => {
+      if (window.parent) {
+        window.parent.postMessage(
+          { type: actionType, data: { placeholderId, sectionId, blockId } },
+          '*'
+        );
+      }
+    };
+
+    // Rename is a separate message because it carries the new label; without it
+    // the toolbar exposes no way to retitle a badge block.
+    const createRenameHandler =
+      (blockId?: string) => (newLabel: string) => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: 'RENAME_BLOCK',
+              data: { placeholderId, sectionId, blockId, label: newLabel }
+            },
+            '*'
+          );
+        }
+      };
+
+    return (
+      <div
+        data-payment-badges=""
+        data-payment-badges-source="blocks"
+        {...partAttrs('list')}
+        style={rowStyle}
+      >
+        {childBlocks.map((child, index) => (
+          <div
+            key={child.id || `badge-${index}`}
+            data-payment-badge=""
+            {...partAttrs('badge')}
+          >
+            <ThemeBlock
+              block={child}
+              placeholderId={placeholderId}
+              sectionId={sectionId}
+              isDesigner={isDesigner}
+              isSelected={selectedBlockId === child.id}
+              selectedBlockId={selectedBlockId}
+              currentBreakpoint={currentBreakpoint}
+              onMoveUp={createActionHandler('MOVE_BLOCK_UP', child.id)}
+              onMoveDown={createActionHandler('MOVE_BLOCK_DOWN', child.id)}
+              onDuplicate={createActionHandler('DUPLICATE_BLOCK', child.id)}
+              onToggleVisibility={createActionHandler(
+                'TOGGLE_BLOCK_VISIBILITY',
+                child.id
+              )}
+              onDelete={createActionHandler('DELETE_BLOCK', child.id)}
+              onRename={createRenameHandler(child.id)}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-payment-badges=""
+      data-payment-badges-source="property"
+      {...partAttrs('list')}
+      style={rowStyle}
+    >
+      {badges.map((badge, index) => {
+        const image = badge.image ? (
+          // Plain img: payment marks are served from the brand's own CDN, which
+          // the next.config image allowlist does not necessarily cover.
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={badge.image}
+            alt={badge.label || fallbackLabel}
+            loading="lazy"
+            data-payment-badge-image=""
+            {...partAttrs('image')}
+            style={{
+              display: 'block',
+              // The CSS variable keeps precedence: a brand already setting it
+              // globally must not be overridden by the block's own height.
+              height: `var(--payment-badges-height, ${badgeHeight}px)`,
+              width: 'auto',
+              ...(grayscale ? { filter: 'grayscale(1)' } : null)
+            }}
+          />
+        ) : null;
+
+        const caption =
+          badge.label && (!badge.image || showLabels) ? (
+            <span
+              data-payment-badge-label=""
+              {...partAttrs('label')}
+              style={
+                badge.image
+                  ? {
+                      display: 'inline-block',
+                      fontSize: '0.85em',
+                      lineHeight: 1.4
+                    }
+                  : {
+                      display: 'inline-block',
+                      padding: '4px 8px',
+                      border: '1px solid currentColor',
+                      borderRadius: '4px',
+                      fontSize: '0.85em',
+                      lineHeight: 1.4
+                    }
+              }
+            >
+              {badge.label}
+            </span>
+          ) : null;
+
+        const content = (
+          <>
+            {image}
+            {caption}
+          </>
+        );
+
+        const badgeStyle: React.CSSProperties = {
+          display: 'inline-flex',
+          alignItems: 'center',
+          ...(image && caption ? { gap: '8px' } : null)
+        };
+
+        if (!badge.href) {
+          return (
+            <span
+              key={`${badge.label}-${index}`}
+              data-payment-badge=""
+              {...partAttrs('badge')}
+              style={badgeStyle}
+            >
+              {content}
+            </span>
+          );
+        }
+
+        return (
+          <NextLink
+            key={`${badge.label}-${index}`}
+            data-payment-badge=""
+            {...partAttrs('badge')}
+            // Navigating inside the designer iframe would drop the author out of
+            // the page they are editing, so the badges are inert there.
+            // NextLink warns when href resolves to undefined, so the value is
+            // resolved here rather than relying on the caller's guard alone.
+            href={isDesigner ? '#' : badge.href || '#'}
+            onClick={(event) => {
+              if (isDesigner) event.preventDefault();
+            }}
+            aria-label={badge.label || fallbackLabel}
+            {...(isDesigner || !openInNewTab
+              ? {}
+              : { target: '_blank', rel: 'noopener noreferrer' })}
+            style={{
+              ...badgeStyle,
+              color: 'inherit',
+              textDecoration: 'none'
+            }}
+          >
+            {content}
+          </NextLink>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PaymentBadgesBlock;

package/src/blocks/search-box-block.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { readToggle } from './product-block-utils';
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+/**
+ * Functional chrome block: site search. Renders either as an icon that
+ * expands into an overlay input (mode: 'icon', the common brand pattern)
+ * or as an always-visible inline input (mode: 'inline'). The editor owns
+ * placement, mode, every label and the styling of each piece.
+ * Properties: mode, placeholder, searchUrl, queryParam, showIcon, iconSize,
+ * showSubmit, submitLabel, submitStyle, closeLabel, triggerLabel,
+ * formMaxWidth, autoFocus, clearOnSubmit.
+ * Parts: trigger, icon, form, input, submit, panel, close.
+ */
+const SearchBoxBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [term, setTerm] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const mode = prop('mode', 'icon');
+  const placeholder = prop('placeholder', 'Search');
+  const searchUrl = prop('searchUrl', '/list');
+  const queryParam = prop('queryParam', 'search_text');
+  const closeLabel = prop('closeLabel', 'Close search');
+  const submitLabel = prop('submitLabel', 'Search');
+  const submitStyle = prop('submitStyle', 'label');
+  // Empty on purpose: the trigger has always announced itself with the
+  // placeholder, so an unset label must keep doing exactly that.
+  const triggerLabel = prop('triggerLabel', '');
+  const showIcon = readToggle(
+    block.properties?.showIcon,
+    currentBreakpoint,
+    true
+  );
+  const showSubmit = readToggle(
+    block.properties?.showSubmit,
+    currentBreakpoint,
+    false
+  );
+  const autoFocus = readToggle(
+    block.properties?.autoFocus,
+    currentBreakpoint,
+    true
+  );
+  const clearOnSubmit = readToggle(
+    block.properties?.clearOnSubmit,
+    currentBreakpoint,
+    false
+  );
+  const iconSize = clampNumber(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 22),
+    22,
+    12,
+    64
+  );
+  const formMaxWidth = clampNumber(
+    getResponsiveValue(block.properties?.formMaxWidth, currentBreakpoint, 720),
+    720,
+    240,
+    1600
+  );
+
+  useEffect(() => {
+    if (open && autoFocus) inputRef.current?.focus();
+  }, [open, autoFocus]);
+
+  const submit = (event: React.FormEvent) => {
+    event.preventDefault();
+    const value = term.trim();
+    if (!value || isDesigner) return;
+    const separator = searchUrl.includes('?') ? '&' : '?';
+    router.push(
+      `${searchUrl}${separator}${queryParam}=${encodeURIComponent(value)}`
+    );
+    if (clearOnSubmit) setTerm('');
+    setOpen(false);
+  };
+
+  const icon = (
+    <svg
+      width={iconSize}
+      height={iconSize}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      data-search-icon=""
+      {...partAttrs('icon')}
+    >
+      <circle cx="11" cy="11" r="7" />
+      <path d="M20 20l-3.5-3.5" />
+    </svg>
+  );
+
+  const submitButton = showSubmit ? (
+    <button
+      type="submit"
+      data-search-submit=""
+      {...partAttrs('submit')}
+      aria-label={submitLabel}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '6px',
+        background: 'none',
+        border: 'none',
+        color: 'inherit',
+        font: 'inherit',
+        cursor: 'pointer',
+        padding: '0 8px'
+      }}
+    >
+      {submitStyle === 'icon' ? icon : submitLabel}
+    </button>
+  ) : null;
+
+  if (mode === 'inline') {
+    return (
+      <form
+        data-search-box=""
+        {...partAttrs('form')}
+        onSubmit={submit}
+        style={{ display: 'flex' }}
+      >
+        <input
+          type="search"
+          value={term}
+          onChange={(e) => setTerm(e.target.value)}
+          placeholder={placeholder}
+          aria-label={placeholder}
+          data-search-input=""
+          {...partAttrs('input')}
+          style={{
+            width: '100%',
+            border: '1px solid currentColor',
+            borderRadius: 'inherit',
+            background: 'transparent',
+            color: 'inherit',
+            padding: '8px 12px',
+            outline: 'none'
+          }}
+        />
+        {submitButton}
+      </form>
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        data-search-box=""
+        {...partAttrs('trigger', { open })}
+        aria-label={triggerLabel || placeholder}
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          cursor: 'pointer',
+          color: 'inherit'
+        }}
+      >
+        {icon}
+      </button>
+
+      {open && (
+        <div
+          data-search-overlay=""
+          {...partAttrs('panel', { open: true })}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1000,
+            background: '#ffffff',
+            color: '#111827',
+            boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+            padding: '20px 24px'
+          }}
+        >
+          <form
+            onSubmit={submit}
+            data-search-form=""
+            {...partAttrs('form')}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
+              maxWidth: `${formMaxWidth}px`,
+              margin: '0 auto'
+            }}
+          >
+            {showIcon && icon}
+            <input
+              ref={inputRef}
+              type="search"
+              value={term}
+              onChange={(e) => setTerm(e.target.value)}
+              placeholder={placeholder}
+              aria-label={placeholder}
+              data-search-input=""
+              {...partAttrs('input')}
+              style={{
+                flex: 1,
+                border: 'none',
+                borderBottom: '1px solid #d1d5db',
+                background: 'transparent',
+                fontSize: '18px',
+                padding: '8px 0',
+                outline: 'none'
+              }}
+            />
+            {submitButton}
+            <button
+              type="button"
+              aria-label={closeLabel}
+              data-search-close=""
+              {...partAttrs('close')}
+              onClick={() => setOpen(false)}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: '4px'
+              }}
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+              >
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
+          </form>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SearchBoxBlock;