@akinon/pz-theme 2.0.37-rc.0 → 2.0.37

package/src/blocks/product-breadcrumb-block.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useThemePageContext } from '../theme-page-context';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  getProductName,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+interface ProductCrumb {
+  label: string;
+  url: string;
+}
+
+const toRecord = (value: unknown): Record<string, unknown> =>
+  value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+
+const toText = (value: unknown): string =>
+  typeof value === 'string'
+    ? value
+    : typeof value === 'number' && Number.isFinite(value)
+    ? String(value)
+    : '';
+
+const normalizeCrumb = (entry: unknown): ProductCrumb | null => {
+  // Category payloads are sometimes a bare name with no URL behind it.
+  if (typeof entry === 'string') {
+    return entry.trim() ? { label: entry.trim(), url: '' } : null;
+  }
+
+  const crumb = toRecord(entry);
+  const label =
+    toText(crumb.label) || toText(crumb.name) || toText(crumb.text) || '';
+  if (!label) return null;
+
+  return {
+    label,
+    url: toText(crumb.url) || toText(crumb.absolute_url)
+  };
+};
+
+const collectCrumbs = (entries: unknown): ProductCrumb[] =>
+  Array.isArray(entries)
+    ? entries
+        .map((entry) => normalizeCrumb(entry))
+        .filter((crumb): crumb is ProductCrumb => crumb !== null)
+    : [];
+
+/**
+ * Functional PDP block: the breadcrumb trail of the product page. Unlike the
+ * listing page context, `buildProductPageContext()` publishes no breadcrumb
+ * array, so the trail is assembled from whatever the payload does carry —
+ * an explicit trail when a brand adds one, otherwise the product categories —
+ * and the product itself always closes the trail as the current page.
+ * Properties: separator, ariaLabel, gap, showHome, homeLabel, homeHref,
+ * showCurrent, maxLabelLength.
+ */
+const ProductBreadcrumbBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+  const pageContext = useThemePageContext();
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const separator = prop('separator', '/');
+  const ariaLabel = prop('ariaLabel', 'Breadcrumb');
+  const homeLabel = prop('homeLabel', 'Home');
+  const homeHref = prop('homeHref', '/');
+  const showHome = readToggle(
+    block.properties?.showHome,
+    currentBreakpoint,
+    false
+  );
+  const showCurrent = readToggle(
+    block.properties?.showCurrent,
+    currentBreakpoint,
+    true
+  );
+  const gapValue = Number(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 8)
+  );
+  const gap = Number.isFinite(gapValue) && gapValue >= 0 ? gapValue : 8;
+  const maxLabelLengthValue = Number(
+    getResponsiveValue(block.properties?.maxLabelLength, currentBreakpoint, 0)
+  );
+  const maxLabelLength =
+    Number.isFinite(maxLabelLengthValue) && maxLabelLengthValue > 0
+      ? Math.round(maxLabelLengthValue)
+      : 0;
+
+  const title = getProductName(product);
+
+  // Probed in order of specificity: an explicit trail on the product wins over
+  // a page-level one, and categories are only a fallback shape.
+  const trail = collectCrumbs(pickProductField(product, 'breadcrumbs'));
+  const contextTrail = collectCrumbs(
+    (pageContext as Record<string, unknown> | null)?.breadcrumbs
+  );
+  const categoryTrail = collectCrumbs(pickProductField(product, 'categories'));
+
+  const resolvedParents = trail.length
+    ? trail
+    : contextTrail.length
+    ? contextTrail
+    : categoryTrail;
+
+  const parents = showHome
+    ? [{ label: homeLabel, url: homeHref }].concat(resolvedParents)
+    : resolvedParents;
+
+  if (!product || (!title && parents.length === 0)) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Product breadcrumb (no product data)"
+        attribute="data-product-breadcrumb"
+      />
+    ) : null;
+  }
+
+  // The product is the current page, so it must not be duplicated when the
+  // resolved trail already ends on it.
+  const lastLabel = parents.length ? parents[parents.length - 1].label : '';
+  const items =
+    showCurrent && title && lastLabel !== title
+      ? parents.concat({ label: title, url: '' })
+      : parents;
+
+  const displayLabel = (label: string) =>
+    maxLabelLength > 0 && label.length > maxLabelLength
+      ? `${label.slice(0, maxLabelLength).trimEnd()}…`
+      : label;
+
+  return (
+    <nav data-product-breadcrumb="" aria-label={ariaLabel}>
+      <ol
+        {...partAttrs('list')}
+        style={{
+          listStyle: 'none',
+          margin: 0,
+          padding: 0,
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: `var(--product-breadcrumb-gap, ${gap}px)`
+        }}
+      >
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <li
+              key={`${item.label}-${index}`}
+              data-breadcrumb-item={isLast ? 'current' : 'link'}
+              {...partAttrs('item', { selected: isLast })}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '8px'
+              }}
+            >
+              {isLast || !item.url ? (
+                <span
+                  {...partAttrs('label', { selected: isLast })}
+                  aria-current={isLast ? 'page' : undefined}
+                >
+                  {displayLabel(item.label)}
+                </span>
+              ) : (
+                <NextLink
+                  // NextLink warns when href resolves to undefined, so a crumb
+                  // whose url the payload omitted still gets a resolved value.
+                  href={isDesigner ? '#' : item.url || '#'}
+                  {...partAttrs('link')}
+                  // Navigating inside the designer iframe would drop the author
+                  // out of the page they are editing, so crumbs are inert there.
+                  onClick={(event) => {
+                    if (isDesigner) event.preventDefault();
+                  }}
+                  style={{ color: 'inherit', textDecoration: 'none' }}
+                >
+                  {displayLabel(item.label)}
+                </NextLink>
+              )}
+              {!isLast && (
+                <span
+                  data-breadcrumb-separator=""
+                  {...partAttrs('separator')}
+                  aria-hidden="true"
+                >
+                  {separator}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default ProductBreadcrumbBlock;

package/src/blocks/product-description-block.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useState } from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  pickProductField,
+  readToggle,
+  stripHtml,
+  useThemeProduct
+} from './product-block-utils';
+
+/**
+ * Same word-boundary rule as the shared helper, with the ellipsis authored
+ * instead of baked in — the character differs per language and per brand.
+ */
+const truncate = (text: string, maxLength: number, suffix: string): string => {
+  if (!text || text.length <= maxLength) return text;
+
+  const sliced = text.slice(0, maxLength);
+  const lastSpace = sliced.lastIndexOf(' ');
+  const safe = lastSpace > maxLength * 0.6 ? sliced.slice(0, lastSpace) : sliced;
+
+  return `${safe.trimEnd()}${suffix}`;
+};
+
+/**
+ * Functional PDP block: the product description coming from commerce. Full
+ * mode keeps the merchandiser's markup, excerpt mode flattens it to plain
+ * text so a teaser never leaks half-open tags. The editor owns mode, length,
+ * the optional read-more toggle and — through named parts — the styling.
+ * Properties: mode, excerptLength, ellipsis, showToggle, collapsedLines,
+ * moreLabel, lessLabel.
+ */
+const ProductDescriptionBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const modeValue = String(
+    getResponsiveValue(block.properties?.mode, currentBreakpoint, 'full')
+  );
+  const mode = modeValue === 'excerpt' ? 'excerpt' : 'full';
+  const excerptLength = Number(
+    getResponsiveValue(block.properties?.excerptLength, currentBreakpoint, 160)
+  );
+  const ellipsis = prop('ellipsis', '…');
+  const showToggle = readToggle(
+    block.properties?.showToggle,
+    currentBreakpoint,
+    false
+  );
+  const moreLabel = prop('moreLabel', 'Read more');
+  const lessLabel = prop('lessLabel', 'Read less');
+  const collapsedLinesValue = Number(
+    getResponsiveValue(block.properties?.collapsedLines, currentBreakpoint, 4)
+  );
+  const collapsedLines =
+    Number.isFinite(collapsedLinesValue) && collapsedLinesValue > 0
+      ? Math.round(collapsedLinesValue)
+      : 4;
+
+  const description = String(
+    pickProductField<string>(product, 'description') || ''
+  ).trim();
+
+  if (!description) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Product description (empty)"
+        attribute="data-product-description"
+      />
+    ) : null;
+  }
+
+  const toggleNode = showToggle ? (
+    <button
+      type="button"
+      data-product-description-toggle=""
+      {...partAttrs('toggle', { open: isExpanded })}
+      aria-expanded={isExpanded}
+      onClick={() => setIsExpanded((current) => !current)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        marginTop: '8px',
+        padding: 0,
+        border: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        font: 'inherit',
+        textDecoration: 'underline',
+        cursor: 'pointer'
+      }}
+    >
+      {isExpanded ? lessLabel : moreLabel}
+    </button>
+  ) : null;
+
+  if (mode === 'excerpt') {
+    const safeLength =
+      Number.isFinite(excerptLength) && excerptLength > 0 ? excerptLength : 160;
+    const plain = stripHtml(description);
+    // With the toggle on, "expanded" means the whole text — truncating an
+    // expanded excerpt would make the control look broken.
+    const excerpt =
+      showToggle && isExpanded ? plain : truncate(plain, safeLength, ellipsis);
+
+    if (!excerpt) {
+      return isDesigner ? (
+        <DesignerPlaceholder
+          label="Product description (empty)"
+          attribute="data-product-description"
+        />
+      ) : null;
+    }
+
+    return (
+      <>
+        <div
+          data-product-description=""
+          data-product-description-mode="excerpt"
+          {...partAttrs('content', { open: showToggle && isExpanded })}
+        >
+          {excerpt}
+        </div>
+        {toggleNode}
+      </>
+    );
+  }
+
+  // The clamp is only added once a brand asked for a toggle, so an unclamped
+  // description keeps exactly the box it renders today.
+  const clampStyle: React.CSSProperties =
+    showToggle && !isExpanded
+      ? {
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: collapsedLines,
+          overflow: 'hidden'
+        }
+      : {};
+
+  return (
+    <>
+      <div
+        data-product-description=""
+        data-product-description-mode="full"
+        {...partAttrs('content', { open: showToggle && isExpanded })}
+        {...(showToggle ? { style: clampStyle } : {})}
+        // Same trust boundary as text-block: the markup is merchandiser-authored
+        // commerce content, not shopper input.
+        dangerouslySetInnerHTML={{ __html: description }}
+      />
+      {toggleNode}
+    </>
+  );
+};
+
+export default ProductDescriptionBlock;