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

package/src/blocks/image-block.tsx

@@ -19,6 +19,7 @@ import {
   useValueLocale
 } from '../utils/localized-value';
 import { BlockRendererProps } from './block-renderer-registry';
+import { CardZoom } from '../components/card-zoom';
 
 /** "No breakpoint answered", which '' cannot express (see `pickImageSource`). */
 const NO_RESPONSIVE_VALUE = Symbol('no-responsive-value');
@@ -364,6 +365,29 @@ const ImageBlock = ({
     />
   );
 
+  /*
+   * The card's picture zooming in on hover (ZERO-5173): the property-switch
+   * pass wrote `cardZoom` because the card or the list around it asked for
+   * it. The frame takes the box the picture had and clips the enlarged one,
+   * so the card around it does not move; without the setting the element is
+   * the one this block always emitted.
+   */
+  const withZoom = (picture: React.ReactElement): React.ReactElement =>
+    block.cardZoom && src ? (
+      <CardZoom
+        style={{
+          width: boxWidth,
+          height: boxHeight,
+          borderRadius: borderRadius ?? '0px',
+          aspectRatio: boxAspectRatio
+        }}
+      >
+        {picture}
+      </CardZoom>
+    ) : (
+      picture
+    );
+
   /*
    * No override, or the canvas: emit exactly what this block emitted before
    * this feature existed. Every block published to date takes this path, so its
@@ -372,7 +396,7 @@ const ImageBlock = ({
    * snapshot and every brand's CSS that targets `[data-block-id] > img`.
    */
   if (!src || isDesigner || pictureSources.length === 0) {
-    return content;
+    return withZoom(content);
   }
 
   /*
@@ -387,7 +411,7 @@ const ImageBlock = ({
    * keeping the element, which is exactly what is wanted: the <source> list is
    * markup, not layout.
    */
-  return (
+  return withZoom(
     <picture style={{ display: 'contents' }}>
       {pictureSources.map((source) => (
         <source

package/src/blocks/listing-context.ts

@@ -167,8 +167,11 @@ export const resolveListingContext = (
   const source = findListingSource(context);
   if (!source) return null;
 
-  const products = toArray(source.products)
-    .map((entry, index) => normalizeListingProduct(entry, index, options))
+  const rows = toArray(source.products);
+  const products = rows
+    .map((entry, index) =>
+      normalizeListingProduct(entry, index, { ...options, rows })
+    )
     .filter((product): product is ListingProduct => product !== null);
 
   const pagination = toRecord(source.pagination);

package/src/blocks/listing-row.ts

@@ -12,6 +12,7 @@
  * module and the iterator is walked on both sides of hydration.
  */
 
+import { resolveSwatchColor } from '../utils/swatch-colors';
 import { formatMoney, MoneyStyleOptions, parseAmount } from './commerce-format';
 
 export type { MoneyStyleOptions };
@@ -60,7 +61,8 @@ export interface ListingProductColor {
   /**
    * Hex a circular swatch can be filled with. Commerce sends the colour as a
    * bare value ("kirmizi") and no colour at all, so this is only present when
-   * the author mapped that value in `lookups.swatch`.
+   * the author mapped that value in `lookups.swatch`, or the brand resolved it
+   * through its registered swatch colours (utils/swatch-colors).
    */
   color?: string;
 }
@@ -163,6 +165,8 @@ export interface ListingBasketOffer {
   price?: string;
 }
 
+export type ListingPriceNote = 'lowest' | 'advantageous';
+
 export interface ListingProduct {
   key: string;
   /**
@@ -214,6 +218,16 @@ export interface ListingProduct {
    * the payload would move published cards.
    */
   discountPercentFromPrevious?: number;
+  /**
+   * Which price-history caption a discounted row may carry (EU Omnibus; the
+   * listing's "Son 10 günün en düşük fiyatı"). `lowest`: the selling price is
+   * the lowest of the period — no `previousPrice`, or one at or above it.
+   * `advantageous`: commerce's price-history figure is BELOW the selling
+   * price, so a "lowest price" claim would be false and the listing says
+   * "Avantajlı Fiyat" instead. Absent on a row with no discount. Which words
+   * are printed is the card's: it binds a text to each value.
+   */
+  priceNote?: ListingPriceNote;
   /**
    * A raw commerce value resolved through the author's lookup table (see
    * `ListingBadgeLookup`). Absent when no table was authored, when the product
@@ -245,6 +259,12 @@ export interface ListingLocalizationOptions {
    * row stays absent, which is the shape the row has always had.
    */
   lookups?: ListingValueLookups;
+  /**
+   * The list's rows as commerce sent them, for a brand's swatch colours that
+   * read a colour off the row's neighbours (utils/swatch-colors). Absent = the
+   * row alone.
+   */
+  rows?: unknown[];
 }
 
 
@@ -511,7 +531,8 @@ const isColorAttributeKey = (key: string): boolean => {
 
 const normalizeProductColors = (
   product: UnknownRecord,
-  swatch?: Record<string, string>
+  swatch?: Record<string, string>,
+  listRows?: unknown[]
 ): ListingProductColor[] | undefined => {
   const groups = toArray(toRecord(product.extra_data).variants);
   // A known key wins over the loose suffix match: a payload carrying both
@@ -528,6 +549,13 @@ const normalizeProductColors = (
 
   if (!group) return undefined;
 
+  const rows = listRows
+    ? listRows.filter(
+        (row): row is UnknownRecord =>
+          Boolean(row) && typeof row === 'object' && !Array.isArray(row)
+      )
+    : [product];
+
   // Reshaped once rather than per option, so this table gets the same
   // case-insensitive matching the badge table gets.
   const swatchEntries = swatch
@@ -557,7 +585,17 @@ const normalizeProductColors = (
       // (GANT's `integration_renk` group) carry the code as the option's LABEL
       // and no value at all, so the label is the key there — the same string
       // the swatch table is authored against.
-      const hex = resolveLookupEntry(swatchEntries, value || label)?.color;
+      const hex =
+        resolveLookupEntry(swatchEntries, value || label)?.color ??
+        // Nothing authored for this colour: the brand's own resolution, the
+        // one its listing paints with, when it registered one.
+        resolveSwatchColor({
+          key: value || label,
+          label,
+          product,
+          variant,
+          rows
+        });
 
       return {
         label,
@@ -588,6 +626,23 @@ const readInStock = (product: UnknownRecord): boolean | undefined => {
   return undefined;
 };
 
+/**
+ * The listing's price rule (the old storefront's SHOP-88144, shared by its
+ * product item, PDP and basket): only a discounted product carries a caption,
+ * and it may only claim the lowest price when commerce's price-history figure
+ * is not below the selling price.
+ */
+const readPriceNote = (
+  hasDiscount: boolean,
+  price: number | null,
+  previous: number | null
+): ListingPriceNote | undefined => {
+  if (!hasDiscount) return undefined;
+  return price !== null && previous !== null && price > previous
+    ? 'advantageous'
+    : 'lowest';
+};
+
 const normalizeProduct = (
   entry: unknown,
   index: number,
@@ -631,7 +686,11 @@ const normalizeProduct = (
   const rawPreviousPrice = toRecord(product.price_extra_field).previous_price;
   const numericPrevious = parsePriceValue(rawPreviousPrice);
   const numericPk = Number(product.pk);
-  const colors = normalizeProductColors(product, options.lookups?.swatch);
+  const colors = normalizeProductColors(
+    product,
+    options.lookups?.swatch,
+    options.rows
+  );
   const attributes = normalizeProductAttributes(product);
   const percentFromRetail = percentOff(numericRetail, numericPrice);
 
@@ -663,6 +722,7 @@ const normalizeProduct = (
     discountPercent: percentFromRetail,
     discountPercentFromRetail: percentFromRetail,
     discountPercentFromPrevious: percentOff(numericPrevious, numericPrice),
+    priceNote: readPriceNote(hasDiscount, numericPrice, numericPrevious),
     inStock: readInStock(product),
     attributes,
     badge: resolveBadge(attributes, options.lookups?.badge),

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

@@ -12,6 +12,13 @@ import {
   TABLET_MEDIA_QUERY_COMPACT
 } from '../utils/breakpoints';
 import { neutralizeStyleTagBreakout } from '../utils/css-safety';
+import {
+  resolveOwnCardsSlider,
+  resolveOwnCardZoom
+} from '../utils/property-switches';
+import { CardListSlider, readListGap } from '../components/card-list-slider';
+import { postBlockSelection } from '../hooks/use-designer-features';
+import { CardZoom } from '../components/card-zoom';
 import ThemeBlock, { Block } from '../theme-block';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -284,13 +291,18 @@ const readOption = <T extends string>(
  * so a published grid renders exactly what it rendered before.
  *
  * Parts: list, card, image, name, price, sale-price, list-price, badge,
- * density, density-label, density-option, density-icon, insert, empty.
+ * density, density-label, density-option, density-icon, insert, empty,
+ * slider, slider-header, slider-arrow.
  * Properties: columnsDesktop, columnsMobile, limit, showName, nameLines,
  * imageRatio, imageFit, showPrice, showRetailPrice, showDiscountBadge,
  * discountBadgeTemplate, badgePosition, decimals, currencyDisplay,
  * currencyText, currencyPosition, showDensitySwitcher, densityOptions,
  * densityStyle, densityPosition, densityLabel, densityAriaLabel,
- * previewEmptyState, badgeAttribute, badgeMap, swatchMap.
+ * previewEmptyState, badgeAttribute, badgeMap, swatchMap, cardsSlider,
+ * cardsSliderShowTitle, cardsSliderTitle, cardsSliderTitleColor,
+ * cardsSliderTitleSize, cardsSliderTitleWeight, cardsSliderTitleFont,
+ * cardsSliderTitleTransform, cardsPerView, cardsPerViewMobile,
+ * cardsSliderArrows, cardImageHoverZoom.
  * Child properties (on a `grid-insertion` child): insertPosition,
  * insertColumnSpan, insertRowSpan, insertPages.
  */
@@ -436,6 +448,15 @@ const ProductGridBlock = ({
   const badgePosition = String(
     getResponsiveValue(block.properties?.badgePosition, currentBreakpoint, 'inline')
   );
+  // The grid's "Cards:" slider and zoom (ZERO-5173). The slider is the grid's
+  // own layout, so it is read here; the zoom reaches a designer-authored card
+  // through the property-switch pass, and the built-in card, drawn here,
+  // reads it off the grid directly.
+  const cardsSlider = resolveOwnCardsSlider(
+    block.properties,
+    currentBreakpoint
+  );
+  const builtInZoom = resolveOwnCardZoom(block.properties, currentBreakpoint);
 
   const showDensitySwitcher = readToggle(
     block.properties?.showDensitySwitcher,
@@ -741,7 +762,29 @@ const ProductGridBlock = ({
             : null)
         }}
       >
-        {product.image ? (
+        {product.image && builtInZoom ? (
+          <CardZoom
+            attributes={{
+              'data-product-card-image': '',
+              ...partAttrs('image')
+            }}
+            style={
+              imageRatio !== 'auto' ? { aspectRatio: imageRatio } : undefined
+            }
+          >
+            <img
+              src={product.image}
+              alt={product.name}
+              loading="lazy"
+              style={{
+                width: '100%',
+                height: imageRatio !== 'auto' ? '100%' : 'auto',
+                display: 'block',
+                objectFit: imageFit as React.CSSProperties['objectFit']
+              }}
+            />
+          </CardZoom>
+        ) : product.image ? (
           <img
             src={product.image}
             alt={product.name}
@@ -839,6 +882,43 @@ const ProductGridBlock = ({
       interleaveCells(builtInCards, insertionTiles, placedInsertions)
     );
 
+  // ZERO-5173: with the slider on, the same cards — built-in or authored, and
+  // any merchandising tile among them — go into one sliding row instead of
+  // the grid. The column template, the tiles' cell pins and the density
+  // switcher belong to the grid; the row counts its own cards in view per side
+  // of the 1024px line, keeps the gap the grid was authored with, and draws
+  // the grid's slider title beside its arrows.
+  if (cardsSlider) {
+    return (
+      <div
+        data-product-grid=""
+        data-product-grid-id={gridId}
+        data-product-grid-slider=""
+      >
+        <CardListSlider
+          sliderId={`grid-${gridId}`}
+          settings={cardsSlider}
+          gap={readListGap(block.styles?.['list/gap'])}
+          defaultGap="var(--product-grid-gap, 16px)"
+          isDesigner={isDesigner}
+          currentBreakpoint={currentBreakpoint}
+          trackAttributes={partAttrs('list')}
+          onTitleSelect={() =>
+            postBlockSelection({
+              placeholderId,
+              sectionId,
+              blockId: block.id,
+              blockType: block.type,
+              blockLabel: block.label
+            })
+          }
+        >
+          {gridChildren}
+        </CardListSlider>
+      </div>
+    );
+  }
+
   const grid = (
     <div
       data-product-grid=""