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

package/src/blocks/stock-status-block.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  isProductInStock,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+const ALLOWED_INDICATOR_SHAPES = ['dot', 'square'];
+const ALLOWED_INDICATOR_POSITIONS = ['before', 'after'];
+
+/**
+ * Functional PDP block: availability label derived from the commerce stock
+ * fields (in_stock, falling back to the stock count). The editor owns the
+ * wording, the low-stock threshold, the indicator and — through named parts —
+ * the styling of the pill in each status.
+ * Properties: inStockLabel, outOfStockLabel, lowStockLabel, lowStockThreshold,
+ * showIndicator, indicatorShape, indicatorSize, indicatorPosition,
+ * inStockColor, outOfStockColor, lowStockColor, showCount, countTemplate.
+ */
+const StockStatusBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const inStockLabel = prop('inStockLabel', 'In Stock');
+  const outOfStockLabel = prop('outOfStockLabel', 'Out of Stock');
+  const lowStockLabel = prop('lowStockLabel', 'Low stock');
+  const inStockColor = prop('inStockColor', '');
+  const outOfStockColor = prop('outOfStockColor', '');
+  const lowStockColor = prop('lowStockColor', '');
+  const countTemplate = prop('countTemplate', '{count} left');
+  const showIndicator = readToggle(
+    block.properties?.showIndicator,
+    currentBreakpoint,
+    true
+  );
+  const showCount = readToggle(
+    block.properties?.showCount,
+    currentBreakpoint,
+    false
+  );
+  const indicatorShapeValue = prop('indicatorShape', 'dot');
+  const indicatorShape = ALLOWED_INDICATOR_SHAPES.includes(indicatorShapeValue)
+    ? indicatorShapeValue
+    : 'dot';
+  const indicatorPositionValue = prop('indicatorPosition', 'before');
+  const indicatorPosition = ALLOWED_INDICATOR_POSITIONS.includes(
+    indicatorPositionValue
+  )
+    ? indicatorPositionValue
+    : 'before';
+  const indicatorSizeValue = Number(
+    getResponsiveValue(block.properties?.indicatorSize, currentBreakpoint, 8)
+  );
+  const indicatorSize =
+    Number.isFinite(indicatorSizeValue) && indicatorSizeValue > 0
+      ? indicatorSizeValue
+      : 8;
+  const lowStockThresholdValue = Number(
+    getResponsiveValue(
+      block.properties?.lowStockThreshold,
+      currentBreakpoint,
+      0
+    )
+  );
+  const lowStockThreshold =
+    Number.isFinite(lowStockThresholdValue) && lowStockThresholdValue > 0
+      ? lowStockThresholdValue
+      : 0;
+
+  const hasProduct = Boolean(product) && pickProductField(product, 'pk') !== undefined;
+
+  if (!hasProduct) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Stock status (no product)"
+        attribute="data-stock-status"
+      />
+    ) : null;
+  }
+
+  const inStock = isProductInStock(product);
+  const stockCount = Number(pickProductField(product, 'stock'));
+  const hasCount = Number.isFinite(stockCount) && stockCount > 0;
+  // A threshold of 0 turns the third status off entirely, which is what keeps
+  // every existing composition rendering the two labels it renders today.
+  const isLowStock =
+    inStock && lowStockThreshold > 0 && hasCount && stockCount <= lowStockThreshold;
+
+  const label = !inStock
+    ? outOfStockLabel
+    : isLowStock
+    ? lowStockLabel
+    : inStockLabel;
+  const color = !inStock
+    ? outOfStockColor
+    : isLowStock
+    ? lowStockColor || inStockColor
+    : inStockColor;
+  const state = !inStock ? 'out-of-stock' : isLowStock ? 'low-stock' : 'in-stock';
+
+  if (!label) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Stock status (no label)"
+        attribute="data-stock-status"
+      />
+    ) : null;
+  }
+
+  const indicatorNode = showIndicator ? (
+    <span
+      key="indicator"
+      data-stock-indicator=""
+      {...partAttrs('indicator', { empty: !inStock })}
+      aria-hidden="true"
+      style={{
+        width: `${indicatorSize}px`,
+        height: `${indicatorSize}px`,
+        borderRadius: indicatorShape === 'square' ? '2px' : '50%',
+        flex: '0 0 auto',
+        background: inStock
+          ? color || 'var(--stock-in-color, #16a34a)'
+          : color || 'var(--stock-out-color, #dc2626)'
+      }}
+    />
+  ) : null;
+
+  return (
+    <span
+      data-stock-status=""
+      data-stock-state={state}
+      {...partAttrs('pill', { empty: !inStock })}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '6px',
+        color: color || 'inherit'
+      }}
+    >
+      {indicatorPosition === 'before' && indicatorNode}
+      <span data-stock-label="" {...partAttrs('label', { empty: !inStock })}>
+        {label}
+      </span>
+      {indicatorPosition === 'after' && indicatorNode}
+      {showCount && inStock && hasCount && (
+        <span data-stock-count="" {...partAttrs('count')}>
+          {countTemplate.replace(/\{count\}/g, String(stockCount))}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default StockStatusBlock;