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

package/src/blocks/mini-basket-block.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+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: basket entry point with live item count.
+ * Behavior is fixed (links to the basket); the editor owns placement,
+ * labels, badge behaviour and styling.
+ * Properties: href, ariaLabel, showLabel, label, labelPosition, showIcon,
+ * iconSize, gap, showCount, showZero, maxCount, badgePosition.
+ * Parts: link, icon, label, badge (state: empty).
+ */
+const MiniBasketBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const href = prop('href', '/basket');
+  const ariaLabel = prop('ariaLabel', 'Basket');
+  const label = prop('label', 'Basket');
+  const labelPosition = prop('labelPosition', 'after');
+  const badgePosition = prop('badgePosition', 'top-right');
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    false
+  );
+  const showIcon = readToggle(
+    block.properties?.showIcon,
+    currentBreakpoint,
+    true
+  );
+  const showCount = readToggle(
+    block.properties?.showCount,
+    currentBreakpoint,
+    true
+  );
+  const showZero = readToggle(
+    block.properties?.showZero,
+    currentBreakpoint,
+    false
+  );
+  const iconSize = clampNumber(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 24),
+    24,
+    12,
+    64
+  );
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 6),
+    6,
+    0,
+    32
+  );
+  const maxCount = clampNumber(
+    getResponsiveValue(block.properties?.maxCount, currentBreakpoint, 0),
+    0,
+    0,
+    999
+  );
+
+  const { data: basket } = useGetBasketQuery(undefined as never, {
+    refetchOnMountOrArgChange: false
+  });
+
+  const quantity =
+    (basket as { total_quantity?: number } | undefined)?.total_quantity ?? 0;
+
+  const isEmpty = quantity <= 0;
+  const badgeVisible = showCount && (!isEmpty || showZero);
+  const countText =
+    maxCount > 0 && quantity > maxCount ? `${maxCount}+` : String(quantity);
+
+  const labelNode = showLabel ? (
+    <span data-mini-basket-label="" {...partAttrs('label')}>
+      {label}
+    </span>
+  ) : null;
+
+  return (
+    <NextLink
+      href={href}
+      data-mini-basket=""
+      {...partAttrs('link')}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: showLabel ? `${gap}px` : undefined,
+        color: 'inherit',
+        textDecoration: 'none'
+      }}
+      aria-label={ariaLabel}
+      // Navigating inside the designer iframe would drop the author out of the
+      // page they are editing.
+      onClick={(event) => {
+        if (isDesigner) event.preventDefault();
+      }}
+    >
+      {labelPosition === 'before' && labelNode}
+
+      {showIcon && (
+        <svg
+          width={iconSize}
+          height={iconSize}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          data-mini-basket-icon=""
+          {...partAttrs('icon')}
+        >
+          <path d="M6 7h12l-1 13H7L6 7z" />
+          <path d="M9 7a3 3 0 0 1 6 0" />
+        </svg>
+      )}
+
+      {badgeVisible && (
+        <span
+          data-mini-basket-count=""
+          {...partAttrs('badge', { empty: isEmpty })}
+          style={{
+            // The badge floats over the icon unless the brand asked for it to
+            // sit beside the icon in the flow.
+            position: badgePosition === 'inline' ? 'static' : 'absolute',
+            top: badgePosition === 'inline' ? undefined : '-6px',
+            right:
+              badgePosition === 'top-left' || badgePosition === 'inline'
+                ? undefined
+                : '-8px',
+            left: badgePosition === 'top-left' ? '-8px' : undefined,
+            minWidth: '16px',
+            height: '16px',
+            borderRadius: '8px',
+            background: 'var(--mini-basket-badge, #ef4444)',
+            color: '#fff',
+            fontSize: '10px',
+            lineHeight: '16px',
+            textAlign: 'center',
+            padding: '0 4px'
+          }}
+        >
+          {countText}
+        </span>
+      )}
+
+      {labelPosition !== 'before' && labelNode}
+    </NextLink>
+  );
+};
+
+export default MiniBasketBlock;

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

@@ -0,0 +1,309 @@
+'use client';
+
+import React, { 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 { BlockRendererProps } from './block-renderer-registry';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readToggle } from './product-block-utils';
+
+interface MenuItemLike {
+  pk?: number | string;
+  label?: string;
+  url?: string;
+  extra_context?: { attributes?: Record<string, unknown> };
+  children?: MenuItemLike[];
+}
+
+/** 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;
+};
+
+/**
+ * Functional chrome block: renders the commerce navigation menu. The
+ * menu CONTENT stays commerce-driven (menu service); the editor owns
+ * placement, wording of the editor-only states, the optional submenu and
+ * styling.
+ * Properties: depth, parent, orientation, highlight*, showSubmenu,
+ * submenuTrigger, activeMatch, maxItems, emptyText, loadingText.
+ * Parts: menu, item (hover/focus/selected), submenu, submenu-item.
+ */
+const NavMenuBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const pathname = usePathname();
+  const [openKey, setOpenKey] = useState<string | null>(null);
+
+  const depth = Number(
+    getResponsiveValue(block.properties?.depth, currentBreakpoint, 1)
+  );
+  const parent = block.properties?.parent
+    ? String(getResponsiveValue(block.properties.parent, currentBreakpoint, ''))
+    : undefined;
+  const orientation = String(
+    getResponsiveValue(
+      block.properties?.orientation,
+      currentBreakpoint,
+      'horizontal'
+    )
+  );
+
+  // Brands routinely accent a couple of menu entries (sale, outlet, gift
+  // guide). Rather than forcing a separate manual link block, the editor
+  // names those entries and gives them their own colour/weight.
+  const highlightLabels = String(
+    getResponsiveValue(block.properties?.highlightLabels, currentBreakpoint, '')
+  )
+    .split(',')
+    .map((entry) => entry.trim().toLocaleLowerCase())
+    .filter(Boolean);
+  const highlightColor = String(
+    getResponsiveValue(block.properties?.highlightColor, currentBreakpoint, '')
+  );
+  const highlightWeight = String(
+    getResponsiveValue(block.properties?.highlightWeight, currentBreakpoint, '')
+  );
+
+  const showSubmenu = readToggle(
+    block.properties?.showSubmenu,
+    currentBreakpoint,
+    false
+  );
+  const submenuTrigger =
+    String(
+      getResponsiveValue(
+        block.properties?.submenuTrigger,
+        currentBreakpoint,
+        'hover'
+      )
+    ) === 'click'
+      ? 'click'
+      : 'hover';
+  const activeMatch = String(
+    getResponsiveValue(
+      block.properties?.activeMatch,
+      currentBreakpoint,
+      'exact'
+    )
+  );
+  const maxItems = Number(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0)
+  );
+  const emptyText = String(
+    getResponsiveValue(
+      block.properties?.emptyText,
+      currentBreakpoint,
+      'Navigation menu (no items)'
+    )
+  );
+  const loadingText = String(
+    getResponsiveValue(block.properties?.loadingText, currentBreakpoint, '…')
+  );
+
+  const isHighlighted = (label?: string) =>
+    Boolean(
+      label &&
+        highlightLabels.some((entry) =>
+          String(label).toLocaleLowerCase().includes(entry)
+        )
+    );
+
+  // The entry for the page the shopper is on is what a brand reaches for first
+  // after colour; it carries `selected` so a part style can address it.
+  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;
+  };
+
+  const { data: menu, isLoading } = useGetMenuQuery({
+    depth: Number.isFinite(depth) && depth > 0 ? depth : 1,
+    ...(parent ? { parent } : {})
+  } as Parameters<typeof useGetMenuQuery>[0]);
+
+  const allItems: MenuItemLike[] = Array.isArray(menu) ? menu : [];
+  const items =
+    Number.isFinite(maxItems) && maxItems > 0
+      ? allItems.slice(0, Math.round(maxItems))
+      : allItems;
+
+  // A designer who marked a child as the row layout gets that layout repeated
+  // per menu entry; otherwise the built-in links render unchanged.
+  const customItems = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={items.map((item, index) => ({
+        key: String(item.pk ?? index),
+        name: String(item.label ?? ''),
+        label: String(item.label ?? ''),
+        url: String(item.url ?? ''),
+        hasChildren: (item.children || []).length > 0
+      }))}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  if (isLoading && isDesigner && !customItems) {
+    return (
+      <span data-nav-menu="" data-nav-menu-loading="">
+        {loadingText}
+      </span>
+    );
+  }
+
+  if (items.length === 0 && isDesigner && !customItems) {
+    return <span data-nav-menu="">{emptyText}</span>;
+  }
+
+  const submenuPanel = (item: MenuItemLike, key: string) => {
+    const children = item.children || [];
+    if (!showSubmenu || children.length === 0 || openKey !== key) return null;
+
+    return (
+      <div
+        data-nav-submenu=""
+        {...partAttrs('submenu', { open: true })}
+        style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          zIndex: 60,
+          minWidth: '200px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          padding: '12px 16px',
+          background: '#ffffff',
+          color: '#111827',
+          boxShadow: '0 12px 24px rgba(0,0,0,0.12)',
+          textAlign: 'left'
+        }}
+      >
+        {children.map((child, childIndex) => (
+          <NextLink
+            key={child.pk ?? childIndex}
+            href={isDesigner ? '#' : child.url || '#'}
+            data-nav-submenu-item=""
+            {...partAttrs('submenu-item', {
+              selected: isCurrent(child.url)
+            })}
+            onClick={(event) => {
+              // Navigating inside the designer iframe would drop the author
+              // out of the page they are editing.
+              if (isDesigner) event.preventDefault();
+              setOpenKey(null);
+            }}
+            style={{
+              color: 'inherit',
+              textDecoration: 'none',
+              fontSize: '0.92em'
+            }}
+          >
+            {child.label}
+          </NextLink>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <nav
+      data-nav-menu=""
+      {...partAttrs('menu')}
+      style={{
+        display: 'flex',
+        flexDirection: orientation === 'vertical' ? 'column' : 'row',
+        alignItems: 'center',
+        gap: 'var(--nav-menu-gap, 24px)',
+        flexWrap: 'wrap'
+      }}
+    >
+      {customItems ??
+        items.map((item, index) => {
+          const highlighted = isHighlighted(item.label);
+          const key = String(item.pk ?? index);
+          const current = isCurrent(item.url);
+          const hasChildren = (item.children || []).length > 0;
+
+          const link = (
+            <NextLink
+              key={key}
+              href={item.url || '#'}
+              data-nav-item={highlighted ? 'highlighted' : 'default'}
+              aria-current={current ? 'page' : undefined}
+              {...partAttrs('item', {
+                selected: current,
+                open: showSubmenu && hasChildren && openKey === key
+              })}
+              onClick={(event) => {
+                if (isDesigner) event.preventDefault();
+                if (showSubmenu && hasChildren && submenuTrigger === 'click') {
+                  event.preventDefault();
+                  setOpenKey(openKey === key ? null : key);
+                }
+              }}
+              style={{
+                textDecoration: 'none',
+                color:
+                  highlighted && highlightColor ? highlightColor : 'inherit',
+                fontWeight:
+                  highlighted && highlightWeight ? highlightWeight : 'inherit'
+              }}
+            >
+              {item.label}
+            </NextLink>
+          );
+
+          // Without a submenu the entry stays a bare link, exactly as it has
+          // always rendered — the positioning wrapper only appears when a panel
+          // actually needs somewhere to anchor.
+          if (!showSubmenu || !hasChildren) return link;
+
+          return (
+            <span
+              key={key}
+              data-nav-item-wrapper=""
+              onMouseEnter={() => {
+                if (submenuTrigger === 'hover') setOpenKey(key);
+              }}
+              onMouseLeave={() => {
+                if (submenuTrigger === 'hover') setOpenKey(null);
+              }}
+              style={{
+                position: 'relative',
+                display: 'inline-flex',
+                alignItems: 'center'
+              }}
+            >
+              {link}
+              {submenuPanel(item, key)}
+            </span>
+          );
+        })}
+    </nav>
+  );
+};
+
+export default NavMenuBlock;

package/src/blocks/newsletter-form-block.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useEmailSubscriptionMutation } from '@akinon/next/data/client/misc';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/** The wording the block has always shipped with; every label is editable. */
+const DEFAULT_ERROR_MESSAGE = 'Subscription failed. Please try again.';
+
+const isEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+
+/**
+ * Functional chrome block: newsletter capture. The submit is real — it posts to
+ * the commerce email subscription endpoint through
+ * `useEmailSubscriptionMutation`, the same mutation the brand footer forms use.
+ * The editor owns the wording and whether the field and button sit on one row.
+ * Properties: placeholder, inputLabel, submitLabel, loadingLabel, successLabel,
+ * successBehavior, errorLabel, invalidLabel, layout.
+ * Parts: form, input, submit, success, error.
+ */
+const NewsletterFormBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const [email, setEmail] = useState('');
+  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  // Kept beside `status` rather than folded into it so the root
+  // `data-newsletter-form-state` keeps the four values it has always had.
+  const [errorKind, setErrorKind] = useState<'invalid' | 'request'>('request');
+  const [subscribe, { isLoading }] = useEmailSubscriptionMutation();
+
+  const prop = (key: string, fallback: string) => {
+    const value = getResponsiveValue(
+      block.properties?.[key],
+      currentBreakpoint,
+      fallback
+    );
+    return value === undefined || value === null ? fallback : String(value);
+  };
+
+  const placeholder = prop('placeholder', 'Your email address');
+  const inputLabel = prop('inputLabel', '');
+  const submitLabel = prop('submitLabel', 'Subscribe');
+  const loadingLabel = prop('loadingLabel', '');
+  const successLabel = prop('successLabel', 'Thanks for subscribing.');
+  const errorLabel = prop('errorLabel', DEFAULT_ERROR_MESSAGE);
+  const invalidLabel = prop('invalidLabel', '');
+  const layout = prop('layout', 'inline') === 'stacked' ? 'stacked' : 'inline';
+  const keepFormOnSuccess = prop('successBehavior', 'replace') === 'keep';
+
+  const errorMessage =
+    errorKind === 'invalid' && invalidLabel ? invalidLabel : errorLabel;
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    // A submit inside the designer must never reach the brand's subscriber list.
+    if (isDesigner || isLoading) return;
+
+    const value = email.trim();
+    if (!isEmail(value)) {
+      setErrorKind('invalid');
+      setStatus('error');
+      return;
+    }
+
+    try {
+      // `subscribe_contract` is a required field on the commerce payload; the
+      // form itself is the consent, so it is always sent as true.
+      await subscribe({ email: value, subscribe_contract: true }).unwrap();
+      setStatus('success');
+      setEmail('');
+    } catch {
+      setErrorKind('request');
+      setStatus('error');
+    }
+  };
+
+  const succeeded = status === 'success';
+  const showFields = !succeeded || keepFormOnSuccess;
+
+  const successNode = (
+    <span
+      data-newsletter-success=""
+      {...partAttrs('success')}
+      role="status"
+      // Only when the fields stay: the message then needs its own line instead
+      // of squeezing in beside the input. Replacing the fields keeps the
+      // unstyled span the block has always rendered.
+      style={keepFormOnSuccess ? { flex: '1 1 100%' } : undefined}
+    >
+      {successLabel}
+    </span>
+  );
+
+  return (
+    <form
+      data-newsletter-form=""
+      data-newsletter-form-state={isLoading ? 'busy' : status}
+      {...partAttrs('form', { loading: isLoading, invalid: status === 'error' })}
+      onSubmit={handleSubmit}
+      noValidate
+      style={{
+        display: 'flex',
+        flexDirection: layout === 'stacked' ? 'column' : 'row',
+        alignItems: layout === 'stacked' ? 'stretch' : 'center',
+        gap: 'var(--newsletter-form-gap, 8px)',
+        width: '100%'
+      }}
+    >
+      {succeeded && !keepFormOnSuccess ? successNode : null}
+
+      {showFields && (
+        <>
+          <input
+            type="email"
+            value={email}
+            onChange={(event) => {
+              setEmail(event.target.value);
+              if (status === 'error') setStatus('idle');
+            }}
+            placeholder={placeholder}
+            aria-label={inputLabel || placeholder}
+            aria-invalid={status === 'error'}
+            data-newsletter-input=""
+            {...partAttrs('input', { invalid: status === 'error' })}
+            style={{
+              flex: layout === 'stacked' ? '0 0 auto' : '1 1 auto',
+              minWidth: 0,
+              border: '1px solid currentColor',
+              borderRadius: 'inherit',
+              background: 'transparent',
+              color: 'inherit',
+              font: 'inherit',
+              padding: '10px 12px',
+              outline: 'none'
+            }}
+          />
+
+          <button
+            type="submit"
+            data-newsletter-submit=""
+            {...partAttrs('submit', {
+              loading: isLoading,
+              disabled: isLoading
+            })}
+            disabled={isLoading}
+            aria-busy={isLoading}
+            style={{
+              flex: '0 0 auto',
+              border: '1px solid currentColor',
+              borderRadius: 'inherit',
+              background: 'transparent',
+              color: 'inherit',
+              font: 'inherit',
+              padding: '10px 16px',
+              cursor: isLoading ? 'not-allowed' : 'pointer',
+              opacity: isLoading ? 0.7 : 1
+            }}
+          >
+            {isLoading && loadingLabel ? loadingLabel : submitLabel}
+          </button>
+        </>
+      )}
+
+      {succeeded && keepFormOnSuccess ? successNode : null}
+
+      {status === 'error' && (
+        <span
+          data-newsletter-error=""
+          {...partAttrs('error', { invalid: true })}
+          role="alert"
+          style={{ flex: '1 1 100%', fontSize: '0.85em', opacity: 0.85 }}
+        >
+          {errorMessage}
+        </span>
+      )}
+    </form>
+  );
+};
+
+export default NewsletterFormBlock;