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

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

@@ -0,0 +1,373 @@
+'use client';
+
+import React from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  MoneyCurrencyDisplay,
+  MoneyCurrencyPosition,
+  MoneyDecimals,
+  MoneyStyleOptions
+} from './commerce-format';
+import {
+  DesignerPlaceholder,
+  formatPrice,
+  getPreviousPrice,
+  getVariantPriceRange,
+  parsePriceValue,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+const ALLOWED_ORDERS = ['retail-first', 'price-first'];
+const ALLOWED_DISCOUNT_MODES = ['percent', 'amount', 'both'];
+const ALLOWED_ALIGNMENTS = ['flex-start', 'center', 'flex-end'];
+const ALLOWED_DECIMALS = ['always', 'auto', 'never'];
+const ALLOWED_CURRENCY_DISPLAYS = ['', 'symbol', 'code', 'custom', 'none'];
+const ALLOWED_CURRENCY_POSITIONS = ['', 'before', 'after'];
+
+/**
+ * Functional PDP block: current price with the retail price struck through
+ * when it is actually higher, and an optional saving badge. Values stay
+ * commerce-driven; the editor owns placement, order, currency visibility,
+ * the money format, the badge wording and — through named parts — the styling.
+ *
+ * Three additions are switched off by default, so a published composition that
+ * never touched them renders exactly the markup it always did: the price
+ * history caption (showPreviousPrice), the variant price range
+ * (showPriceRange) and the percentage-plus-amount badge (discountMode: both).
+ *
+ * Parts: row, price, price-min, range-separator, price-max, retail-price,
+ * discount, discount-percent, discount-amount, history, history-caption,
+ * previous-price.
+ * Properties: showRetail, showCurrency, decimals, currencyDisplay,
+ * currencyText, currencyPosition, gap, retailColor, order, align,
+ * showDiscountBadge, discountMode, discountTemplate, discountBothTemplate,
+ * showPreviousPrice, previousPriceTemplate, showPriceRange,
+ * priceRangeSeparator.
+ */
+const ProductPriceBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+  const { locale, currency: activeCurrency } = useLocalization();
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const showRetail = readToggle(
+    block.properties?.showRetail,
+    currentBreakpoint,
+    true
+  );
+  const showCurrency = readToggle(
+    block.properties?.showCurrency,
+    currentBreakpoint,
+    true
+  );
+  // Designs are written in the brand's own money format ("1.599 TL"), which no
+  // locale produces. Every value below is validated against the list the editor
+  // offers, so a hand-edited composition cannot reach Intl with a bad option.
+  const decimalsValue = prop('decimals', 'always');
+  const currencyDisplayValue = prop('currencyDisplay', '');
+  const currencyPositionValue = prop('currencyPosition', '');
+  const money: MoneyStyleOptions = {
+    decimals: (ALLOWED_DECIMALS.includes(decimalsValue)
+      ? decimalsValue
+      : 'always') as MoneyDecimals,
+    currencyDisplay: (ALLOWED_CURRENCY_DISPLAYS.includes(currencyDisplayValue)
+      ? currencyDisplayValue
+      : '') as MoneyCurrencyDisplay,
+    currencyText: prop('currencyText', ''),
+    currencyPosition: (ALLOWED_CURRENCY_POSITIONS.includes(
+      currencyPositionValue
+    )
+      ? currencyPositionValue
+      : '') as MoneyCurrencyPosition
+  };
+  const gap = Number(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 8)
+  );
+  const retailColor = String(
+    getResponsiveValue(block.properties?.retailColor, currentBreakpoint, '')
+  );
+  const orderValue = prop('order', 'retail-first');
+  const order = ALLOWED_ORDERS.includes(orderValue)
+    ? orderValue
+    : 'retail-first';
+  const alignValue = prop('align', 'flex-start');
+  const align = ALLOWED_ALIGNMENTS.includes(alignValue)
+    ? alignValue
+    : 'flex-start';
+  const showDiscountBadge = readToggle(
+    block.properties?.showDiscountBadge,
+    currentBreakpoint,
+    false
+  );
+  const discountModeValue = prop('discountMode', 'percent');
+  const discountMode = ALLOWED_DISCOUNT_MODES.includes(discountModeValue)
+    ? discountModeValue
+    : 'percent';
+  const discountTemplate = prop('discountTemplate', '-{value}');
+  const discountBothTemplate = prop(
+    'discountBothTemplate',
+    '-{percent} ({amount})'
+  );
+  const showPreviousPrice = readToggle(
+    block.properties?.showPreviousPrice,
+    currentBreakpoint,
+    false
+  );
+  const previousPriceTemplate = prop(
+    'previousPriceTemplate',
+    'Lowest price in the last 30 days: {value}'
+  );
+  const showPriceRange = readToggle(
+    block.properties?.showPriceRange,
+    currentBreakpoint,
+    false
+  );
+  const priceRangeSeparator = prop('priceRangeSeparator', ' – ');
+
+  const priceValue = pickProductField(product, 'price');
+  const retailValue =
+    pickProductField(product, 'retailPrice') ??
+    pickProductField(product, 'retail_price');
+  // Commerce sends the currency on the product; the active currency is only
+  // the fallback, and the grid block resolves it the same way so both render
+  // the same money string for the same value.
+  const currency =
+    pickProductField<string>(product, 'currency') ??
+    pickProductField<string>(product, 'currency_type') ??
+    activeCurrency ??
+    '';
+
+  const priceText = formatPrice(
+    priceValue,
+    currency,
+    showCurrency,
+    locale,
+    money
+  );
+
+  if (!priceText) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Product price (no price)"
+        attribute="data-product-price"
+      />
+    ) : null;
+  }
+
+  const retailText = formatPrice(
+    retailValue,
+    currency,
+    showCurrency,
+    locale,
+    money
+  );
+  const priceNumber = parsePriceValue(priceValue);
+  const retailNumber = parsePriceValue(retailValue);
+  // A retail price equal to (or below) the active price is not a discount and
+  // must not be struck through — commerce sends both fields unconditionally.
+  const hasDiscount =
+    showRetail &&
+    Boolean(retailText) &&
+    priceNumber !== null &&
+    retailNumber !== null &&
+    retailNumber > priceNumber;
+
+  const safeGap = Number.isFinite(gap) && gap >= 0 ? gap : 8;
+
+  const saving =
+    showDiscountBadge && hasDiscount && priceNumber !== null && retailNumber !== null
+      ? {
+          amount: retailNumber - priceNumber,
+          percent: Math.round(
+            ((retailNumber - priceNumber) / retailNumber) * 100
+          )
+        }
+      : null;
+  // The saving is money, so it goes through the shared formatter with the
+  // explicit locale rather than being pasted together from raw numbers.
+  const savedAmountText = saving
+    ? formatPrice(saving.amount, currency, showCurrency, locale, money)
+    : null;
+  const savedPercentText = saving ? `${saving.percent}%` : null;
+  const discountText =
+    discountMode === 'amount' ? savedAmountText : savedPercentText;
+
+  const priceRange = showPriceRange ? getVariantPriceRange(product) : null;
+  const rangeMinText = priceRange
+    ? formatPrice(priceRange.min, currency, showCurrency, locale, money)
+    : null;
+  const rangeMaxText = priceRange
+    ? formatPrice(priceRange.max, currency, showCurrency, locale, money)
+    : null;
+  const hasRange = Boolean(rangeMinText && rangeMaxText);
+
+  const previousPriceText = showPreviousPrice
+    ? formatPrice(
+        getPreviousPrice(product),
+        currency,
+        showCurrency,
+        locale,
+        money
+      )
+    : null;
+
+  /**
+   * Prints a template with its placeholders swapped for their own parts, so a
+   * brand can colour the saved amount without touching the words around it.
+   * The delimiters are kept by the capture group; a template that names no
+   * placeholder simply renders as text. `textPart` names the literal words
+   * when they are stylable in their own right, as the legal caption is.
+   */
+  const renderTemplate = (
+    template: string,
+    tokens: Record<string, { text: string; part: string }>,
+    textPart?: string
+  ) =>
+    template.split(/(\{[a-z]+\})/gi).map((segment, index) => {
+      const token = tokens[segment];
+
+      if (token) {
+        return (
+          <span key={index} {...partAttrs(token.part)}>
+            {token.text}
+          </span>
+        );
+      }
+
+      if (!segment) return null;
+
+      return textPart ? (
+        <span key={index} {...partAttrs(textPart)}>
+          {segment}
+        </span>
+      ) : (
+        <React.Fragment key={index}>{segment}</React.Fragment>
+      );
+    });
+
+  // 'both' is the only mode that needs two values in one badge; 'percent' and
+  // 'amount' keep printing a single string child, which is the markup every
+  // published badge has today.
+  const badgeContent =
+    discountMode === 'both'
+      ? savedAmountText && savedPercentText
+        ? renderTemplate(discountBothTemplate, {
+            '{percent}': { text: savedPercentText, part: 'discount-percent' },
+            '{amount}': { text: savedAmountText, part: 'discount-amount' }
+          })
+        : null
+      : discountText
+      ? discountTemplate.replace(/\{value\}/g, discountText)
+      : null;
+
+  // A cleared template would otherwise drop the price out of a line whose
+  // whole purpose is to state it, so the placeholder is appended instead.
+  const historyTemplate = previousPriceTemplate.includes('{value}')
+    ? previousPriceTemplate
+    : `${previousPriceTemplate} {value}`.trim();
+
+  /**
+   * The caption joins the existing wrapping row as a full-width child rather
+   * than arriving in a new wrapper: the row already wraps, so a 100% basis
+   * puts the caption on its own line under the price — and a composition with
+   * the caption switched off keeps byte-for-byte the DOM it renders today.
+   */
+  const historyNode = previousPriceText ? (
+    <span
+      data-product-previous-price=""
+      {...partAttrs('history')}
+      style={{
+        flexBasis: '100%',
+        fontSize: '0.75em',
+        color: 'var(--product-previous-price-color, #6b7280)'
+      }}
+    >
+      {renderTemplate(
+        historyTemplate,
+        {
+          '{value}': { text: previousPriceText, part: 'previous-price' }
+        },
+        'history-caption'
+      )}
+    </span>
+  ) : showPreviousPrice && isDesigner ? (
+    // Designer-only: the toggle is on but commerce sent no price history, and
+    // an author needs to see that the caption is missing for a reason.
+    <DesignerPlaceholder
+      label="Lowest price (no price history)"
+      attribute="data-product-previous-price"
+    />
+  ) : null;
+
+  const retailNode = hasDiscount ? (
+    <span
+      data-product-retail-price=""
+      {...partAttrs('retail-price')}
+      style={{
+        textDecoration: 'line-through',
+        fontSize: '0.85em',
+        color: retailColor || 'var(--product-retail-price-color, #9ca3af)'
+      }}
+    >
+      {retailText}
+    </span>
+  ) : null;
+
+  return (
+    <div
+      data-product-price=""
+      data-product-price-discounted={hasDiscount ? 'true' : 'false'}
+      {...partAttrs('row')}
+      style={{
+        display: 'flex',
+        alignItems: 'baseline',
+        justifyContent: align,
+        flexWrap: 'wrap',
+        gap: `${safeGap}px`
+      }}
+    >
+      {order === 'retail-first' && retailNode}
+      <span data-product-current-price="" {...partAttrs('price')}>
+        {hasRange ? (
+          <>
+            <span {...partAttrs('price-min')}>{rangeMinText}</span>
+            <span {...partAttrs('range-separator')}>{priceRangeSeparator}</span>
+            <span {...partAttrs('price-max')}>{rangeMaxText}</span>
+          </>
+        ) : (
+          priceText
+        )}
+      </span>
+      {order === 'price-first' && retailNode}
+      {badgeContent && (
+        <span
+          data-product-discount-badge=""
+          {...partAttrs('discount')}
+          style={{
+            fontSize: '0.75em',
+            padding: '2px 6px',
+            borderRadius: '2px',
+            background: 'var(--product-discount-badge-bg, #dc2626)',
+            color: 'var(--product-discount-badge-color, #ffffff)'
+          }}
+        >
+          {badgeContent}
+        </span>
+      )}
+      {historyNode}
+    </div>
+  );
+};
+
+export default ProductPriceBlock;