@akinon/pz-theme 2.0.103-rc.0 → 2.0.104-beta.0

package/src/components/with-designer-features.tsx

@@ -11,6 +11,10 @@ import {
 } from '../hooks/use-block-action';
 
 import { isTrustedEditorEvent } from '../editor-bridge';
+import {
+  HOVER_SCOPE_ATTRIBUTE,
+  REVEAL_ON_HOVER_ATTRIBUTE
+} from '../utils/property-switches';
 interface WithDesignerFeaturesProps {
   block: any;
   placeholderId: string;
@@ -145,6 +149,8 @@ export function WithDesignerFeatures({
     <div
       ref={blockRef}
       data-block-id={block.styleSourceId || block.id}
+      {...(block.hoverScope ? { [HOVER_SCOPE_ATTRIBUTE]: '' } : null)}
+      {...(block.revealOnHover ? { [REVEAL_ON_HOVER_ATTRIBUTE]: '' } : null)}
       className={clsx(
         'relative',
         className,

package/src/sections/__tests__/posts-slider-row-visibility.test.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * ZERO-4829 — the brand's "GANT Seçtiklerimiz" slider card puts the plain
+ * price (black) and the sale price (red) in two texts that decide per row on
+ * `item.hasDiscount`. The slider expands its slides itself, without the
+ * section iterator, and used to apply neither per-row visibility nor the
+ * listing-row shape — so both prices printed on every slide.
+ */
+jest.mock('@akinon/next/data/client/product', () => ({
+  __esModule: true,
+  useGetProductByPkQuery: () => ({ data: undefined, isFetching: false }),
+  useGetProductByParamsQuery: () => ({ data: undefined, isFetching: false }),
+  useAddProductMutation: () => [() => ({ unwrap: () => Promise.resolve({}) }), { isLoading: false }]
+}));
+jest.mock('@akinon/next/data/client/wishlist', () => ({
+  __esModule: true,
+  useGetFavoritesQuery: () => ({ data: undefined, isFetching: false }),
+  useAddFavoriteMutation: () => [() => ({ unwrap: () => Promise.resolve({}) }), { isLoading: false }],
+  useRemoveFavoriteMutation: () => [() => ({ unwrap: () => Promise.resolve({}) }), { isLoading: false }]
+}));
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: unknown }) => (
+    <div data-testid="slide" data-block={JSON.stringify(block)} />
+  )
+}));
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>
+}));
+
+import PostsSliderSection from '../posts-slider-section';
+
+type Node = {
+  label?: string;
+  hidden?: boolean;
+  value?: unknown;
+  properties?: Record<string, unknown>;
+  blocks?: Node[];
+};
+
+const text = (label: string, binding: string, extra: Record<string, unknown> = {}): Node => ({
+  label,
+  hidden: false,
+  properties: { tag: 'p', dataBinding: binding, ...extra }
+});
+
+const ITERATOR = {
+  id: 'iter',
+  label: 'Iterator',
+  isIterator: true,
+  order: 0,
+  properties: { iteratorCount: 2 },
+  styles: {},
+  blocks: [
+    {
+      id: 'card',
+      type: 'group',
+      label: 'Product Card 1',
+      hidden: false,
+      properties: { tag: 'a', dataBinding: 'item.absolute_url' },
+      styles: {},
+      blocks: [
+        text('Retail', 'item.retail_price'),
+        text('Price', 'item.price', { visibleWhenField: 'item.hasDiscount', visibleWhenMode: 'falsy' }),
+        text('Sale Price', 'item.price', { visibleWhenField: 'item.hasDiscount', visibleWhenMode: 'truthy' }),
+        text('Chip', 'item.discount_percentage'),
+        text('Url', 'item.url'),
+        text('Badge', 'item.attributes.badge2')
+      ]
+    }
+  ]
+};
+
+const renderSlider = (products: Record<string, unknown>[], type = 'flash-deals-slider') =>
+  render(
+    <PostsSliderSection
+      {...({
+        section: {
+          id: 'sec',
+          type,
+          label: 'sec',
+          properties: { 'items-per-slide': 2 },
+          styles: {},
+          blocks: [ITERATOR],
+          dataSource: { type: 'collection', details: { collection: { products } } }
+        },
+        currentBreakpoint: 'desktop',
+        placeholderId: 'ph',
+        isDesigner: false
+      } as any)}
+    />
+  );
+
+const slides = (): Node[] =>
+  screen.getAllByTestId('slide').map((el) => JSON.parse(el.getAttribute('data-block') || '{}'));
+
+const child = (slide: Node, label: string): Node =>
+  (slide.blocks || []).find((b) => b.label === label) as Node;
+
+describe('per-row visibility on a product slide', () => {
+  it('shows the sale price on a discounted row and the plain price on the other', () => {
+    renderSlider([
+      { pk: 1, name: 'A', absolute_url: '/a/', attributes: { badge2: 'OUTLET' }, active_price: { price: '599.00', retail_price: '1999.00', currency_type: 'try' } },
+      { pk: 2, name: 'B', absolute_url: '/b/', active_price: { price: '1099.00', retail_price: '1099.00', currency_type: 'try' } }
+    ]);
+    const [discounted, plain] = slides();
+
+    expect(child(discounted, 'Sale Price').hidden).toBe(false);
+    expect(child(discounted, 'Price').hidden).toBe(true);
+    expect(child(discounted, 'Retail').hidden).toBe(false);
+    expect(child(discounted, 'Retail').value).toBe('1.999 TL');
+    expect(child(discounted, 'Chip').value).toBe('-%70');
+
+    expect(child(plain, 'Price').hidden).toBe(false);
+    expect(child(plain, 'Price').value).toBe('1.099 TL');
+    expect(child(plain, 'Sale Price').hidden).toBe(true);
+    expect(child(plain, 'Retail').hidden).toBe(true);
+    expect(child(plain, 'Chip').hidden).toBe(true);
+  });
+
+  it('publishes the slide in the listing row shape too, without touching its own fields', () => {
+    renderSlider([
+      { pk: 1, name: 'A', absolute_url: '/a/', attributes: { badge2: 'OUTLET' }, active_price: { price: '599.00', retail_price: '1999.00', currency_type: 'try' } }
+    ]);
+    const [slide] = slides();
+    expect(child(slide, 'Url').value).toBe('/a/');
+    expect(child(slide, 'Badge').value).toBe('OUTLET');
+    expect(slide.properties?.href).toBe('/a/');
+  });
+
+  it('leaves a placeholder slide (no rows yet) with every block in place', () => {
+    renderSlider([]);
+    for (const slide of slides()) {
+      expect((slide.blocks || []).every((b) => b.hidden === false)).toBe(true);
+    }
+  });
+
+  it('does not reshape the rows of a posts slider', () => {
+    renderSlider([{ pk: 1, name: 'Post', absolute_url: '/post/' }], 'posts-slider');
+    const [slide] = slides();
+    // No listing-row field derived for a blog post.
+    expect(child(slide, 'Url').value).toBeUndefined();
+  });
+});

package/src/sections/posts-slider-section.tsx

@@ -10,9 +10,11 @@ import { safeDeepClone } from '../utils/safe-clone';
 import {
   getPriceWithCurrency,
   isPriceBinding,
+  normalizeCollectionRow,
   readProductCurrency,
   readProductPricePair
 } from '../utils/iterator-utils';
+import { isVisibleForItem, readRowVisibility } from '../utils/row-visibility';
 import {
   applyFirstSlideImageLoading,
   getResponsiveValue,
@@ -29,6 +31,7 @@ import {
 import SliderQuickView from './slider-quick-view';
 import {
   DESIGNER_SAMPLE_PRODUCT,
+  publishesProductSlides,
   resolveSliderRowProduct
 } from '../blocks/item-template-utils';
 import type { ThemeProduct } from '../blocks/product-block-utils';
@@ -100,6 +103,18 @@ const replaceBlockValues = (
   const isPlaceholderMode =
     !productData || Object.keys(productData).length === 0;
 
+  // Per-row visibility, as the section iterator applies it: a price text that
+  // says "only on discounted rows" (`visibleWhenField: item.hasDiscount`)
+  // hides on the others — without it a card with a black plain price and a
+  // red sale price printed both on every slide. Never in placeholder mode:
+  // with no data every field reads empty and the canvas would lose the block.
+  if (!isPlaceholderMode) {
+    const visibility = readRowVisibility(newBlock.properties);
+    if (visibility && !isVisibleForItem(visibility, productData)) {
+      newBlock.hidden = true;
+    }
+  }
+
   if (newBlock.properties?.dataBinding && !isPlaceholderMode) {
     const bindingPath = String(newBlock.properties.dataBinding).replace(
       'item.',
@@ -113,7 +128,6 @@ const replaceBlockValues = (
       const { current, retail } = readProductPricePair(productData);
       if (retail > 0 && current > 0 && retail > current) {
         newBlock.value = `-%${Math.round((1 - current / retail) * 100)}`;
-        newBlock.hidden = false;
       } else {
         newBlock.hidden = true;
       }
@@ -340,7 +354,14 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
     const actualCount = products.length > 0 ? products.length : fallbackCount;
 
     return Array.from({ length: actualCount }, (_, index) => {
-      const product = products[index] || {};
+      const raw = products[index] || {};
+      // A product slide is published in the listing row's shape on top of
+      // its own fields (`item.url`, `item.retailPrice`, `item.hasDiscount`,
+      // `item.discountPercent`, `item.attributes` keyed, `item.colors`), the
+      // way a collection repeat's row is — one card design, every host.
+      const product = publishesProductSlides(section?.type)
+        ? normalizeCollectionRow(raw, index)
+        : raw;
       const cloned = replaceBlockValues(template, product, index);
 
       return {

package/src/theme-block.tsx

@@ -3,7 +3,16 @@
 import React from 'react';
 import blockRendererRegistry from './blocks/block-renderer-registry';
 import { WithDesignerFeatures } from './components/with-designer-features';
-import { getResponsiveValue, isPublishWindowVisible } from './utils';
+import {
+  ThemeItemScopeProvider,
+  type ThemeProduct
+} from './blocks/product-block-utils';
+import { DESIGNER_SAMPLE_PRODUCT } from './blocks/item-template-utils';
+import {
+  getInnerRootInlineStyles,
+  getResponsiveValue,
+  isPublishWindowVisible
+} from './utils';
 import { devWarn } from './utils/dev-warn';
 
 /**
@@ -45,7 +54,22 @@ export interface Block {
   locked?: boolean;
   blocks?: Block[]; // Optional - only group blocks have nested blocks
   isIterator?: boolean;
+  /**
+   * Set on the clones of a repeat whose rows are products (a collection data
+   * source): the row seen as the ambient product, or null for a padding row.
+   * Never authored — written by `buildIteratorBlock`, read here to open the
+   * product scope the row's favourite / add-to-basket resolve against.
+   */
+  itemScopeProduct?: ThemeProduct | null;
   iteratorDataPath?: string;
+  /**
+   * Written by the property-switch pass (utils/property-switches.ts), never
+   * authored: this block is revealed on hover of its `hoverScope` ancestor,
+   * and this block is such an ancestor. The wrapper writes both as data
+   * attributes; the CSS lives beside the pass.
+   */
+  revealOnHover?: boolean;
+  hoverScope?: boolean;
   /**
    * Properties this clone resolved for itself from its row. One generated rule
    * serves every clone, so these are the values that have to be inlined on the
@@ -112,6 +136,25 @@ export default function ThemeBlock({
     getResponsiveValue(block.properties?.htmlId, currentBreakpoint, '')
   );
 
+  /**
+   * A group's styles land on this wrapper (its own element is
+   * `display: contents`), so a value its row resolved for it — a swatch chip's
+   * `background-image: linear-gradient({{item.color}}, …)` — has to be inlined
+   * HERE: one generated rule serves every clone and cannot carry a per-row
+   * value. Text, link and button inline theirs on their own root; an image on
+   * its own element. Read with no theme settings so only the row's keys are
+   * kept, exactly as the row resolved them.
+   */
+  const wrapperRowStyle =
+    block.type === 'group' && block.rowStyleKeys && block.rowStyleKeys.length
+      ? getInnerRootInlineStyles(
+          block.styles || {},
+          undefined,
+          currentBreakpoint,
+          block.rowStyleKeys
+        )
+      : undefined;
+
   const renderedBlock = (
     <BlockRenderer
       block={block}
@@ -130,7 +173,7 @@ export default function ThemeBlock({
     />
   );
 
-  return (
+  const rendered = (
     <WithDesignerFeatures
       block={block}
       placeholderId={placeholderId}
@@ -138,6 +181,7 @@ export default function ThemeBlock({
       isDesigner={isDesigner}
       isSelected={isSelected}
       currentBreakpoint={currentBreakpoint}
+      style={wrapperRowStyle}
       onMoveUp={onMoveUp}
       onMoveDown={onMoveDown}
       onDuplicate={onDuplicate}
@@ -179,4 +223,21 @@ export default function ThemeBlock({
       )}
     </WithDesignerFeatures>
   );
+
+  if (block.itemScopeProduct === undefined) return rendered;
+
+  // A clone of a collection repeat: the row is the ambient product for every
+  // block inside it (see `Block.itemScopeProduct`). Context only — the
+  // provider renders no element, so the markup is unchanged. The designer's
+  // padding rows get the sample product, as a product grid's do, so the card
+  // can be judged as a card and not as a set of "no product" boxes.
+  return (
+    <ThemeItemScopeProvider
+      product={
+        block.itemScopeProduct ?? (isDesigner ? DESIGNER_SAMPLE_PRODUCT : null)
+      }
+    >
+      {rendered}
+    </ThemeItemScopeProvider>
+  );
 }

package/src/theme-placeholder-client.tsx

@@ -9,6 +9,7 @@ import {
 } from './placeholder-registry';
 import { useVisibilityContext } from './hooks/use-visibility-context';
 import { applyVisibilityRulesToSections } from './utils/visibility-rules';
+import { applyPropertySwitchesToSections } from './utils/property-switches';
 import { isPublishWindowVisible } from './utils/publish-window';
 import { useThemePageContext } from './theme-page-context';
 
@@ -59,9 +60,9 @@ export default function ThemePlaceholderClient({
     pageContext,
     isDesigner: isEditing
   });
-  const renderedSections = applyVisibilityRulesToSections(
-    sections,
-    visibilityContext
+  const renderedSections = applyPropertySwitchesToSections(
+    applyVisibilityRulesToSections(sections, visibilityContext),
+    currentBreakpoint
   );
 
   useEffect(() => {

package/src/theme-placeholder-wrapper.tsx

@@ -16,12 +16,16 @@ import {
 import { useThemePageContext } from './theme-page-context';
 import { ThemePageContextProvider } from './theme-page-context';
 import { ThemeSettingsProvider } from './theme-settings-context';
-import { generateThemeCSS } from './utils';
+import { generateThemeCSS, readThemeTypographyFont } from './utils';
 import { breakpointForWidth } from './utils/breakpoints';
 import { PartStatePreview } from './components/part-state-preview';
 import { useVisibilityContext } from './hooks/use-visibility-context';
 import { createPageContextDiscovery } from './utils/page-context-discovery';
 import { applyVisibilityRulesToSections } from './utils/visibility-rules';
+import {
+  applyPropertySwitchesToSections,
+  HOVER_REVEAL_CSS
+} from './utils/property-switches';
 import { isPublishWindowVisible } from './utils/publish-window';
 import { buildClientRequestUrl } from '@akinon/next/utils';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
@@ -113,6 +117,17 @@ const injectThemeColors = (settings: Record<string, unknown>) => {
       String(settings.backgroundOpacity)
     );
   }
+  // Typography families, for the same consumers as buildThemeTypographyCss.
+  if (Array.isArray(settings.typography)) {
+    settings.typography.forEach((variant) => {
+      const key = (variant as { key?: unknown })?.key;
+      if (typeof key !== 'string' || !/^[a-z0-9-]+$/i.test(key)) return;
+      const family = readThemeTypographyFont(settings, key);
+      if (family) root.style.setProperty(`--theme-font-${key}`, family);
+      else root.style.removeProperty(`--theme-font-${key}`);
+    });
+  }
+
   if (settings.breadcrumbSeparator) {
     root.style.setProperty(
       '--theme-breadcrumb-separator',
@@ -158,6 +173,33 @@ const buildThemeBackgroundCss = (
   return `:root{--theme-background:${value}}body{background-color:${value}}`;
 };
 
+/**
+ * The theme's typography families as `--theme-font-<variant>` on `:root`,
+ * emitted with the markup for the same reason as the background above. Block
+ * styles referencing them are resolved from the settings directly
+ * (`resolveThemeCssVariables`); the variables serve everything else — a
+ * template's `customCss`, a brand's own stylesheet — and the editor's live
+ * typography edits (kept in step by `injectThemeColors`).
+ */
+export const buildThemeTypographyCss = (
+  settings: Record<string, unknown> | null
+): string => {
+  const variants = settings?.typography;
+  if (!Array.isArray(variants)) return '';
+
+  const declarations = variants
+    .map((variant) => {
+      const key = (variant as { key?: unknown })?.key;
+      if (typeof key !== 'string' || !/^[a-z0-9-]+$/i.test(key)) return '';
+      const family = readThemeTypographyFont(settings, key);
+      if (!family) return '';
+      return `--theme-font-${key}:${neutralizeStyleTagBreakout(family)}`;
+    })
+    .filter(Boolean);
+
+  return declarations.length ? `:root{${declarations.join(';')}}` : '';
+};
+
 // Helper function to load Google Font
 const loadGoogleFont = (fontFamily: string, fontWeight?: string) => {
   if (!fontFamily || fontFamily === 'inherit') return;
@@ -558,7 +600,7 @@ export default function ThemePlaceholderWrapper({
       sources: { dataUrl: string; format: string }[];
     }[];
 
-    const inject = (font: typeof customFonts[number]) => {
+    const inject = (font: (typeof customFonts)[number]) => {
       if (
         !font?.name ||
         !Array.isArray(font.sources) ||
@@ -983,7 +1025,17 @@ export default function ThemePlaceholderWrapper({
     [sections, isDesigner, currentBreakpoint]
   );
   const themeBackgroundCSS = useMemo(
-    () => buildThemeBackgroundCss(themeSettings),
+    () =>
+      [
+        buildThemeBackgroundCss(themeSettings),
+        buildThemeTypographyCss(themeSettings),
+        // Static, and tiny: the rules for blocks a property switch reveals on
+        // hover (utils/property-switches.ts). Emitted with the theme CSS so
+        // the storefront and the canvas hover the same way.
+        HOVER_REVEAL_CSS
+      ]
+        .filter(Boolean)
+        .join(''),
     [themeSettings]
   );
   const visibilityContext = useVisibilityContext(currentBreakpoint, {
@@ -991,8 +1043,12 @@ export default function ThemePlaceholderWrapper({
     isDesigner: isEditing
   });
   const renderedSections = useMemo(
-    () => applyVisibilityRulesToSections(sections, visibilityContext),
-    [sections, visibilityContext]
+    () =>
+      applyPropertySwitchesToSections(
+        applyVisibilityRulesToSections(sections, visibilityContext),
+        currentBreakpoint
+      ),
+    [sections, visibilityContext, currentBreakpoint]
   );
 
   return (