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

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

@@ -0,0 +1,307 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import {
+  DesignerPlaceholder,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+interface ProductAttributeRow {
+  key: string;
+  label: string;
+  value: string;
+  /**
+   * What `data-product-attribute` has always carried. The commerce key only
+   * became available when the page context stopped dropping it, and swapping
+   * the emitted value would rename an attribute brands may already style.
+   */
+  domKey: string;
+}
+
+const ALLOWED_SORTS = ['default', 'label-asc', 'label-desc'];
+
+const humanizeKey = (key: string) =>
+  key
+    .replace(/[_-]+/g, ' ')
+    .trim()
+    .replace(/^./, (first) => first.toUpperCase());
+
+const toText = (value: unknown): string => {
+  if (typeof value === 'string') return value.trim();
+  if (typeof value === 'number' && Number.isFinite(value)) return String(value);
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  return '';
+};
+
+/**
+ * The page context normalizes `attributes_kwargs` into `[{ label, value }]`,
+ * but a brand that publishes its own product context can still hand over the
+ * raw commerce record (`{ key: { label, value } }` or `{ key: value }`).
+ * Both shapes are accepted so the block does not depend on which builder ran.
+ */
+const toRows = (raw: unknown): ProductAttributeRow[] => {
+  if (Array.isArray(raw)) {
+    return raw
+      .map((entry, index) => {
+        if (!entry || typeof entry !== 'object') return null;
+
+        const record = entry as Record<string, unknown>;
+        const label = toText(record.label) || toText(record.name);
+        if (!label) return null;
+
+        return {
+          key: toText(record.key) || `attribute-${index}`,
+          label,
+          value: toText(record.value),
+          domKey: `attribute-${index}`
+        };
+      })
+      .filter((row): row is ProductAttributeRow => row !== null);
+  }
+
+  if (raw && typeof raw === 'object') {
+    return Object.entries(raw as Record<string, unknown>)
+      .map(([key, entry]) => {
+        if (entry && typeof entry === 'object' && !Array.isArray(entry)) {
+          const record = entry as Record<string, unknown>;
+          const label = toText(record.label) || toText(record.name);
+
+          return {
+            key,
+            label: label || humanizeKey(key),
+            value: toText(record.value),
+            // A keyed record was always emitted under its own key.
+            domKey: key
+          };
+        }
+
+        const value = toText(entry);
+        // Nested/opaque values (objects, arrays) flatten to '' and are treated
+        // exactly like an empty attribute rather than printed as [object].
+        return { key, label: humanizeKey(key), value, domKey: key };
+      })
+      .filter((row) => Boolean(row.label));
+  }
+
+  return [];
+};
+
+/** Comma/space separated attribute keys, lowercased for a forgiving match. */
+const parseKeyList = (raw: string): string[] =>
+  raw
+    .split(/[,\s]+/)
+    .map((entry) => entry.trim().toLowerCase())
+    .filter(Boolean);
+
+/**
+ * Functional PDP block: the product attribute table (material, colour code,
+ * fabric, …). Attribute CONTENT is commerce-driven — it comes from the product
+ * on the page context — and the editor owns the layout, which attributes are
+ * printed, their order, an optional custom row layout and the styling.
+ * Properties: layout, hideEmpty, showLabel, separator, limit, sort,
+ * includeKeys, excludeKeys, gap.
+ */
+const ProductAttributesBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const layoutValue = String(
+    getResponsiveValue(block.properties?.layout, currentBreakpoint, 'table')
+  );
+  const layout = layoutValue === 'list' ? 'list' : 'table';
+  const hideEmpty = readToggle(
+    block.properties?.hideEmpty,
+    currentBreakpoint,
+    true
+  );
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    true
+  );
+  const separator = prop('separator', '');
+  const sortValue = prop('sort', 'default');
+  const sort = ALLOWED_SORTS.includes(sortValue) ? sortValue : 'default';
+  const includeKeys = parseKeyList(prop('includeKeys', ''));
+  const excludeKeys = parseKeyList(prop('excludeKeys', ''));
+  const limitValue = Number(
+    getResponsiveValue(block.properties?.limit, currentBreakpoint, 0)
+  );
+  const limit =
+    Number.isFinite(limitValue) && limitValue > 0 ? Math.round(limitValue) : 0;
+  const gapValue = Number(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 8)
+  );
+  const gap = Number.isFinite(gapValue) && gapValue >= 0 ? gapValue : 8;
+
+  const allRows = toRows(pickProductField(product, 'attributes')).filter((row) =>
+    hideEmpty ? Boolean(row.value) : true
+  );
+
+  const filteredRows = allRows.filter((row) => {
+    const key = row.key.toLowerCase();
+    if (includeKeys.length > 0 && !includeKeys.includes(key)) return false;
+    return !excludeKeys.includes(key);
+  });
+
+  // Compared without a locale on purpose: a locale-aware collation resolves
+  // differently on the server and in the browser, which would reorder the
+  // rows during hydration.
+  const sortedRows =
+    sort === 'default'
+      ? filteredRows
+      : filteredRows.slice().sort((a, b) => {
+          const left = a.label.toLowerCase();
+          const right = b.label.toLowerCase();
+          if (left === right) return 0;
+          const ascending = left < right ? -1 : 1;
+          return sort === 'label-desc' ? -ascending : ascending;
+        });
+
+  const rows = limit > 0 ? sortedRows.slice(0, limit) : sortedRows;
+
+  const hasCustomRows = hasItemTemplate(block, currentBreakpoint);
+  // Concatenated rather than rendered as two children: React's SSR puts a
+  // `<!-- -->` marker between adjacent text nodes, which would change the
+  // markup of every composition that leaves the separator empty.
+  const labelText = (label: string) =>
+    separator ? `${label}${separator}` : label;
+
+  if (rows.length === 0 && !hasCustomRows) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Product attributes (no attribute data)"
+        attribute="data-product-attributes"
+      />
+    ) : null;
+  }
+
+  // A designer-authored row cannot live inside <table>/<dl> markup, so the
+  // custom layout gets a plain flow container of its own.
+  if (hasCustomRows) {
+    return (
+      <div
+        data-product-attributes=""
+        data-product-attributes-layout="custom"
+        {...partAttrs('list')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: `var(--product-attributes-gap, ${gap}px)`
+        }}
+      >
+        <ItemTemplateList
+          block={block}
+          items={rows.map((row) => ({
+            key: row.key,
+            label: row.label,
+            // `name` is the binding a designer reaches for first; it mirrors
+            // the label rather than introducing a second vocabulary.
+            name: row.label,
+            value: row.value
+          }))}
+          placeholderId={placeholderId}
+          sectionId={sectionId}
+          isDesigner={isDesigner}
+          selectedBlockId={selectedBlockId}
+          currentBreakpoint={currentBreakpoint}
+        />
+      </div>
+    );
+  }
+
+  if (layout === 'list') {
+    return (
+      <dl
+        data-product-attributes=""
+        data-product-attributes-layout="list"
+        {...partAttrs('list')}
+        style={{
+          margin: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: `var(--product-attributes-gap, ${gap}px)`
+        }}
+      >
+        {rows.map((row) => (
+          <div
+            key={row.key}
+            data-product-attribute={row.domKey}
+            {...partAttrs('row')}
+            style={{ display: 'flex', gap: '8px' }}
+          >
+            {showLabel && (
+              <dt {...partAttrs('label')} style={{ opacity: 0.7 }}>
+                {labelText(row.label)}
+              </dt>
+            )}
+            <dd {...partAttrs('value')} style={{ margin: 0 }}>
+              {row.value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    );
+  }
+
+  return (
+    <table
+      data-product-attributes=""
+      data-product-attributes-layout="table"
+      {...partAttrs('list')}
+      style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}
+    >
+      <tbody>
+        {rows.map((row) => (
+          <tr
+          key={row.key}
+          data-product-attribute={row.domKey}
+          {...partAttrs('row')}
+        >
+            {showLabel && (
+              <th
+                scope="row"
+                {...partAttrs('label')}
+                style={{
+                  padding: 'var(--product-attributes-cell-padding, 6px 0)',
+                  fontWeight: 'inherit',
+                  opacity: 0.7,
+                  verticalAlign: 'top'
+                }}
+              >
+                {labelText(row.label)}
+              </th>
+            )}
+            <td
+              {...partAttrs('value')}
+              style={{
+                padding: 'var(--product-attributes-cell-padding, 6px 0)',
+                verticalAlign: 'top'
+              }}
+            >
+              {row.value}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default ProductAttributesBlock;