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

package/src/blocks/mega-menu-block.tsx

@@ -0,0 +1,712 @@
+'use client';
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import NextLink from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useGetMenuQuery } from '@akinon/next/data/client/misc';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useOverlay } from '../hooks/use-overlay';
+import { BlockRendererProps } from './block-renderer-registry';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+/** Matches the dwell the reference brand header uses before a panel opens. */
+const HOVER_OPEN_DELAY = 200;
+const HOVER_CLOSE_DELAY = 120;
+
+/** Query strings and trailing slashes are noise when matching the open page. */
+const normalizePath = (value: unknown): string => {
+  const path = String(value || '')
+    .split('?')[0]
+    .split('#')[0];
+
+  return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path;
+};
+
+interface MenuNodeLike {
+  pk?: number | string;
+  label?: string;
+  url?: string;
+  parent_pk?: number | string | null;
+  extra_context?: { attributes?: Record<string, unknown> } | null;
+  children?: MenuNodeLike[] | null;
+}
+
+interface MegaMenuNode {
+  key: string;
+  label: string;
+  url: string;
+  attributes: Record<string, unknown>;
+  children: MegaMenuNode[];
+}
+
+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));
+};
+
+const toNode = (raw: MenuNodeLike, index: number): MegaMenuNode => ({
+  key: String(raw.pk ?? `menu-${index}`),
+  label: String(raw.label ?? ''),
+  url: String(raw.url ?? ''),
+  attributes: (raw.extra_context?.attributes as Record<string, unknown>) || {},
+  children: []
+});
+
+/**
+ * The menu endpoint answers a depth>1 request with a FLAT list linked by
+ * `parent_pk`, so the columns have to be assembled here. Core's `menuGenerator`
+ * does `data[item.parent_pk].children.push(...)` unguarded and throws the whole
+ * header away when a parent falls outside the requested depth window; this
+ * version keeps those entries instead of crashing.
+ */
+const buildTree = (raw: MenuNodeLike[]): MegaMenuNode[] => {
+  if (raw.length === 0) return [];
+
+  const alreadyNested = raw.some(
+    (entry) => Array.isArray(entry.children) && entry.children.length > 0
+  );
+
+  if (alreadyNested) {
+    const walk = (entries: MenuNodeLike[]): MegaMenuNode[] =>
+      entries.map((entry, index) => ({
+        ...toNode(entry, index),
+        children: walk(Array.isArray(entry.children) ? entry.children : [])
+      }));
+
+    return walk(raw);
+  }
+
+  const nodes = new Map<string, MegaMenuNode>();
+  raw.forEach((entry, index) => {
+    const node = toNode(entry, index);
+    nodes.set(node.key, node);
+  });
+
+  const roots: MegaMenuNode[] = [];
+  const orphans: MegaMenuNode[] = [];
+
+  raw.forEach((entry, index) => {
+    const node = nodes.get(String(entry.pk ?? `menu-${index}`));
+    if (!node) return;
+
+    const parentKey =
+      entry.parent_pk === null || entry.parent_pk === undefined
+        ? ''
+        : String(entry.parent_pk);
+
+    if (!parentKey) {
+      roots.push(node);
+      return;
+    }
+
+    const parent = nodes.get(parentKey);
+    if (parent) {
+      parent.children.push(node);
+    } else {
+      orphans.push(node);
+    }
+  });
+
+  // A `parent` window that starts below the tree root has no parentless entry
+  // at all; falling back to the orphans keeps the menu visible.
+  return roots.length > 0 ? roots : orphans;
+};
+
+/**
+ * Brands hang the panel artwork off the menu item under a handful of attribute
+ * names, each with its own nesting (`kwargs.value.top_image.url`,
+ * `kwargs.url`, ...). Probing a short key list and then walking for a `url`
+ * keeps one renderer working across those payload shapes.
+ */
+const IMAGE_ATTRIBUTE_KEYS = [
+  'navigation_image',
+  'nav_sub_category_image',
+  'menu_image',
+  'image'
+];
+
+const looksLikeUrl = (value: string) =>
+  /^(https?:)?\/\//i.test(value) || value.startsWith('/');
+
+const findUrl = (value: unknown, depth = 0): string => {
+  if (depth > 5) return '';
+
+  if (typeof value === 'string') return looksLikeUrl(value) ? value : '';
+
+  if (Array.isArray(value)) {
+    for (const entry of value) {
+      const found = findUrl(entry, depth + 1);
+      if (found) return found;
+    }
+    return '';
+  }
+
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+
+    // `url` is the key commerce renders the asset under; preferring it stops a
+    // sibling link field from being picked up as the image source.
+    if (typeof record.url === 'string' && looksLikeUrl(record.url)) {
+      return record.url;
+    }
+
+    for (const entry of Object.values(record)) {
+      const found = findUrl(entry, depth + 1);
+      if (found) return found;
+    }
+  }
+
+  return '';
+};
+
+const readPromoImage = (attributes: Record<string, unknown>): string => {
+  for (const key of IMAGE_ATTRIBUTE_KEYS) {
+    const found = findUrl(attributes?.[key]);
+    if (found) return found;
+  }
+  return '';
+};
+
+/**
+ * Functional chrome block: top level menu entries that open a full width panel
+ * with the child columns and an optional promo image. Menu CONTENT stays
+ * commerce-driven (menu service, depth 2-3); the editor owns the trigger,
+ * column count, highlights and styling.
+ * Properties: depth, parent, trigger, columns, showImages, highlightLabels,
+ * highlightColor, columnGap, openDelay, closeDelay, showParentLink,
+ * parentLinkLabel, promoPosition, promoMaxWidth, activeMatch, maxItems,
+ * emptyText, loadingText.
+ * Parts: menu, item, panel, parent-link, column, column-title, column-image,
+ * submenu, submenu-item, promo.
+ */
+const MegaMenuBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const pathname = usePathname();
+  const [openKey, setOpenKey] = useState<string | null>(null);
+  const openTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const depth = clampNumber(
+    getResponsiveValue(block.properties?.depth, currentBreakpoint, 3),
+    3,
+    2,
+    3
+  );
+  const parent = String(
+    getResponsiveValue(block.properties?.parent, currentBreakpoint, '')
+  ).trim();
+  const trigger =
+    String(
+      getResponsiveValue(block.properties?.trigger, currentBreakpoint, 'hover')
+    ) === 'click'
+      ? 'click'
+      : 'hover';
+  const columns = clampNumber(
+    getResponsiveValue(block.properties?.columns, currentBreakpoint, 4),
+    4,
+    1,
+    6
+  );
+  const showImages = readToggle(
+    block.properties?.showImages,
+    currentBreakpoint,
+    true
+  );
+  const highlightColor = String(
+    getResponsiveValue(block.properties?.highlightColor, currentBreakpoint, '')
+  );
+  const highlightLabels = String(
+    getResponsiveValue(block.properties?.highlightLabels, currentBreakpoint, '')
+  )
+    .split(',')
+    .map((entry) => entry.trim().toLocaleLowerCase())
+    .filter(Boolean);
+  const columnGap = clampNumber(
+    getResponsiveValue(block.properties?.columnGap, currentBreakpoint, 24),
+    24,
+    0,
+    96
+  );
+  const openDelay = clampNumber(
+    getResponsiveValue(
+      block.properties?.openDelay,
+      currentBreakpoint,
+      HOVER_OPEN_DELAY
+    ),
+    HOVER_OPEN_DELAY,
+    0,
+    1000
+  );
+  const closeDelay = clampNumber(
+    getResponsiveValue(
+      block.properties?.closeDelay,
+      currentBreakpoint,
+      HOVER_CLOSE_DELAY
+    ),
+    HOVER_CLOSE_DELAY,
+    0,
+    1000
+  );
+  const showParentLink = readToggle(
+    block.properties?.showParentLink,
+    currentBreakpoint,
+    true
+  );
+  const parentLinkLabel = String(
+    getResponsiveValue(block.properties?.parentLinkLabel, currentBreakpoint, '')
+  );
+  const promoPosition = String(
+    getResponsiveValue(
+      block.properties?.promoPosition,
+      currentBreakpoint,
+      'end'
+    )
+  );
+  const promoMaxWidth = clampNumber(
+    getResponsiveValue(block.properties?.promoMaxWidth, currentBreakpoint, 256),
+    256,
+    80,
+    720
+  );
+  const activeMatch = String(
+    getResponsiveValue(
+      block.properties?.activeMatch,
+      currentBreakpoint,
+      'exact'
+    )
+  );
+  const maxItems = clampNumber(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
+    0,
+    0,
+    40
+  );
+  const emptyText = String(
+    getResponsiveValue(
+      block.properties?.emptyText,
+      currentBreakpoint,
+      'Mega menu (no items)'
+    )
+  );
+  const loadingText = String(
+    getResponsiveValue(
+      block.properties?.loadingText,
+      currentBreakpoint,
+      'Mega menu (loading)'
+    )
+  );
+
+  const { data: menu, isLoading } = useGetMenuQuery({
+    depth,
+    ...(parent ? { parent } : {})
+  } as Parameters<typeof useGetMenuQuery>[0]);
+
+  const allItems = useMemo(
+    () => buildTree(Array.isArray(menu) ? (menu as MenuNodeLike[]) : []),
+    [menu]
+  );
+  const items = maxItems > 0 ? allItems.slice(0, maxItems) : allItems;
+
+  const clearTimers = useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  }, []);
+
+  const closeNow = useCallback(() => {
+    clearTimers();
+    setOpenKey(null);
+  }, [clearTimers]);
+
+  useEffect(() => clearTimers, [clearTimers]);
+
+  /**
+   * Escape is page-wide state, so the shared overlay stack decides whose it
+   * is. This panel used to answer it from its own document listener, which
+   * meant an Escape aimed at a modal opened over the header collapsed the menu
+   * underneath at the same time.
+   *
+   * Nothing else moves to the primitive: the panel hangs off the header in
+   * flow behind no backdrop, so `modal: false` (no `aria-modal`, no focus
+   * trap) and `manageFocus: false` — the item's own focus and blur handlers
+   * already drive this menu open and closed.
+   */
+  useOverlay({
+    open: Boolean(openKey),
+    onClose: closeNow,
+    isDesigner,
+    modal: false,
+    manageFocus: false
+  });
+
+  const scheduleOpen = (key: string) => {
+    clearTimers();
+    openTimer.current = setTimeout(() => setOpenKey(key), openDelay);
+  };
+
+  const scheduleClose = () => {
+    clearTimers();
+    closeTimer.current = setTimeout(() => setOpenKey(null), closeDelay);
+  };
+
+  const isHighlighted = (label: string) =>
+    Boolean(
+      label &&
+        highlightLabels.some((entry) =>
+          label.toLocaleLowerCase().includes(entry)
+        )
+    );
+
+  // The entry for the page the shopper is on carries `selected` so a part
+  // style can address it without the brand hand-listing every label.
+  const isCurrent = (url: string) => {
+    const target = normalizePath(url);
+    const current = normalizePath(pathname);
+
+    if (!target || target === '#' || !current) return false;
+    if (activeMatch === 'section' && target !== '/') {
+      return current === target || current.startsWith(`${target}/`);
+    }
+
+    return current === target;
+  };
+
+  // Navigating inside the designer iframe would drop the author out of the page
+  // they are editing, so every link in the menu is inert there.
+  const guard = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  const linkHref = (url: string) => (isDesigner ? '#' : url || '#');
+
+  if (items.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label={isLoading ? loadingText : emptyText}
+        attribute="data-mega-menu"
+      />
+    ) : null;
+  }
+
+  const renderPanel = (item: MegaMenuNode) => {
+    const promoImage = showImages ? readPromoImage(item.attributes) : '';
+    if (item.children.length === 0 && !promoImage) return null;
+
+    // A designer who marked a child as the column layout gets that layout
+    // repeated per column; otherwise the built-in columns render unchanged.
+    const customColumns = hasItemTemplate(block, currentBreakpoint) ? (
+      <ItemTemplateList
+        block={block}
+        items={item.children.map((column) => ({
+          key: column.key,
+          name: column.label,
+          label: column.label,
+          url: column.url,
+          image: showImages ? readPromoImage(column.attributes) : ''
+        }))}
+        placeholderId={placeholderId}
+        sectionId={sectionId}
+        isDesigner={isDesigner}
+        selectedBlockId={selectedBlockId}
+        currentBreakpoint={currentBreakpoint}
+        designerPlaceholderCount={4}
+      />
+    ) : null;
+
+    const promo = promoImage ? (
+      <NextLink
+        href={linkHref(item.url)}
+        data-mega-menu-promo=""
+        {...partAttrs('promo')}
+        onClick={guard}
+        style={{
+          flex: '0 0 auto',
+          display: 'block',
+          maxWidth: `${promoMaxWidth}px`
+        }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={promoImage}
+          alt={item.label}
+          loading="lazy"
+          data-mega-menu-promo-image=""
+          {...partAttrs('promo-image')}
+          style={{ display: 'block', width: '100%', height: 'auto' }}
+        />
+      </NextLink>
+    ) : null;
+
+    return (
+      <div
+        data-mega-menu-panel=""
+        {...partAttrs('panel', { open: true })}
+        onMouseEnter={() => {
+          if (trigger === 'hover') clearTimers();
+        }}
+        onMouseLeave={() => {
+          if (trigger === 'hover') scheduleClose();
+        }}
+        style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          minWidth: '100%',
+          maxWidth: '100vw',
+          zIndex: 60,
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: '32px',
+          padding: 'var(--mega-menu-panel-padding, 24px)',
+          background: 'var(--mega-menu-panel-bg, #ffffff)',
+          color: 'var(--mega-menu-panel-color, #111827)',
+          boxShadow: '0 12px 24px rgba(0,0,0,0.12)',
+          textAlign: 'left'
+        }}
+      >
+        {promoPosition === 'start' && promo}
+
+        {item.children.length > 0 && (
+          <div
+            data-mega-menu-columns=""
+            {...partAttrs('column-list')}
+            style={{
+              flex: '1 1 auto',
+              display: 'grid',
+              gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+              // The CSS variable stays the outer fallback: brands that already
+              // set it keep the value they shipped with.
+              gap: `var(--mega-menu-column-gap, ${columnGap}px)`
+            }}
+          >
+            {trigger === 'click' && showParentLink && (
+              // In click mode the top level entry is a disclosure button, so the
+              // parent page would otherwise be unreachable from the panel.
+              <NextLink
+                href={linkHref(item.url)}
+                data-mega-menu-parent-link=""
+                {...partAttrs('parent-link')}
+                onClick={guard}
+                style={{
+                  gridColumn: '1 / -1',
+                  color: 'inherit',
+                  textDecoration: 'underline',
+                  fontSize: '0.9em'
+                }}
+              >
+                {parentLinkLabel || item.label}
+              </NextLink>
+            )}
+
+            {customColumns ??
+              item.children.map((column) => {
+                const columnImage = showImages
+                  ? readPromoImage(column.attributes)
+                  : '';
+
+                return (
+                  <div
+                    key={column.key}
+                    data-mega-menu-column=""
+                    {...partAttrs('column')}
+                  >
+                    <NextLink
+                      href={linkHref(column.url)}
+                      data-mega-menu-column-title=""
+                      {...partAttrs('column-title', {
+                        selected: isCurrent(column.url)
+                      })}
+                      onClick={guard}
+                      style={{
+                        display: 'block',
+                        marginBottom: '10px',
+                        color: 'inherit',
+                        textDecoration: 'none',
+                        fontWeight: 600
+                      }}
+                    >
+                      {column.label}
+                    </NextLink>
+
+                    {columnImage && (
+                      // Plain img: menu artwork comes from arbitrary commerce CDNs
+                      // that the brand next.config may not allow through next/image.
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={columnImage}
+                        alt={column.label}
+                        loading="lazy"
+                        data-mega-menu-column-image=""
+                        {...partAttrs('column-image')}
+                        style={{
+                          display: 'block',
+                          width: '100%',
+                          height: 'auto',
+                          marginBottom: '10px'
+                        }}
+                      />
+                    )}
+
+                    {column.children.length > 0 && (
+                      <ul
+                        data-mega-menu-submenu=""
+                        {...partAttrs('submenu')}
+                        style={{
+                          listStyle: 'none',
+                          margin: 0,
+                          padding: 0,
+                          display: 'flex',
+                          flexDirection: 'column',
+                          gap: '6px'
+                        }}
+                      >
+                        {column.children.map((leaf) => (
+                          <li key={leaf.key}>
+                            <NextLink
+                              href={linkHref(leaf.url)}
+                              data-mega-menu-link=""
+                              {...partAttrs('submenu-item', {
+                                selected: isCurrent(leaf.url)
+                              })}
+                              onClick={guard}
+                              style={{
+                                color: 'inherit',
+                                textDecoration: 'none',
+                                opacity: 0.85,
+                                fontSize: '0.92em'
+                              }}
+                            >
+                              {leaf.label}
+                            </NextLink>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                );
+              })}
+          </div>
+        )}
+
+        {promoPosition !== 'start' && promo}
+      </div>
+    );
+  };
+
+  return (
+    <nav
+      data-mega-menu=""
+      data-mega-menu-trigger={trigger}
+      {...partAttrs('menu')}
+      onMouseLeave={() => {
+        if (trigger === 'hover') scheduleClose();
+      }}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--mega-menu-gap, 24px)'
+      }}
+    >
+      <ul
+        data-mega-menu-list=""
+        {...partAttrs('item-list')}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'inherit',
+          listStyle: 'none',
+          margin: 0,
+          padding: 0
+        }}
+      >
+        {items.map((item) => {
+          const open = openKey === item.key;
+          const highlighted = isHighlighted(item.label);
+          const current = isCurrent(item.url);
+          const entryStyle: React.CSSProperties = {
+            color: highlighted && highlightColor ? highlightColor : 'inherit',
+            fontWeight: highlighted ? 600 : 'inherit',
+            textDecoration: 'none',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            font: trigger === 'click' ? 'inherit' : undefined,
+            cursor: 'pointer'
+          };
+
+          return (
+            <li
+              key={item.key}
+              data-mega-menu-item={highlighted ? 'highlighted' : 'default'}
+              data-mega-menu-open={open ? 'true' : 'false'}
+              onMouseEnter={() => {
+                if (trigger === 'hover') scheduleOpen(item.key);
+              }}
+              onFocus={() => {
+                // Keyboard users never fire mouseenter, so focus opens the panel
+                // in both trigger modes.
+                clearTimers();
+                setOpenKey(item.key);
+              }}
+              onBlur={(event) => {
+                if (
+                  !event.currentTarget.contains(event.relatedTarget as Node)
+                ) {
+                  closeNow();
+                }
+              }}
+              style={{ display: 'flex', alignItems: 'center' }}
+            >
+              {trigger === 'click' ? (
+                <button
+                  type="button"
+                  aria-expanded={open}
+                  {...partAttrs('item', { open, selected: current })}
+                  onClick={() => setOpenKey(open ? null : item.key)}
+                  style={entryStyle}
+                >
+                  {item.label}
+                </button>
+              ) : (
+                <NextLink
+                  href={linkHref(item.url)}
+                  aria-expanded={open}
+                  {...partAttrs('item', { open, selected: current })}
+                  onClick={guard}
+                  style={entryStyle}
+                >
+                  {item.label}
+                </NextLink>
+              )}
+
+              {open && renderPanel(item)}
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};
+
+export default MegaMenuBlock;