@akinon/pz-theme 2.0.82-beta.0 → 2.0.82

package/src/sections/slider-quick-view.tsx

@@ -0,0 +1,375 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+
+import { partAttrs } from '../utils';
+import { useOverlay } from '../hooks/use-overlay';
+import FavoriteButtonBlock from '../blocks/favorite-button-block';
+import {
+  ThemeItemScopeProvider,
+  pickProductField,
+  type ThemeProduct
+} from '../blocks/product-block-utils';
+import {
+  getPriceWithCurrency,
+  readProductCurrency,
+  readProductPricePair
+} from '../utils/iterator-utils';
+
+/**
+ * The panel a product slider opens instead of leaving for the product page.
+ *
+ * Some brands' designs answer a tap on a card with a look at the product
+ * rather than a navigation; others do not want it at all. So this is drawn
+ * only when the section says `show-quick-view`, and it shows exactly what
+ * such a design shows: the photo, the name, the price, a way to favourite it
+ * and a way to go to the product page after all.
+ *
+ * It renders the row the shopper clicked and asks commerce for nothing. Every
+ * field — photo, name, price, address — comes off that one row, so the panel
+ * always describes exactly the product whose card was tapped.
+ *
+ * DO NOT ADD A BY-PK FETCH HERE. It was tried and reverted, and the reason is
+ * not performance. A collection data source is snapshotted from OMNITRON, so
+ * `row.pk` is an Omnitron product id; the storefront's `/product/<pk>` is a
+ * different id space. Asking it for `row.pk` returns a real, correct, and
+ * COMPLETELY DIFFERENT product — measured on a live store: row pk 48
+ * (sku 8684464001616, a bed sheet) answered with pk 48, a glass serving plate.
+ * The panel then linked one product under another's photo. A `sku` full-text
+ * search can bridge the two spaces, but its index excludes out-of-stock and
+ * non-listable products — precisely what a flash-deals strip runs into.
+ *
+ * So a row with no `absolute_url` gets no link, and that is the honest state:
+ * the same row leaves the card itself unlinked, because the card's
+ * `item.absolute_url` binding has nothing to bind either.
+ *
+ * Rendering the storefront's OWN widget answer instead — which does carry
+ * commerce-space products with `absolute_url`, and which
+ * `load-placeholder-sections.ts` already has in hand — was built and then
+ * deliberately reverted. It linked every card, but it also made the published
+ * strip show DIFFERENT PRODUCTS than the canvas the merchandiser laid out,
+ * because the two catalogues disagree about the collection's members. A
+ * merchandiser who cannot trust the canvas has lost more than a link. Until
+ * the two catalogues agree, what the editor shows is what the site shows.
+ *
+ * The surface is hand-rolled rather than taken from `overlays/overlay-surface`
+ * on purpose. Those primitives stamp their own `data-part="overlay"` and
+ * `data-part="modal"` and overwrite a caller's markers, so the eight
+ * `quick-view-*` part groups the editor offers would style nothing. What is
+ * NOT hand-rolled is the page contract — focus, the overlay stack, the scroll
+ * lock, Escape and `aria-modal` all stay with `useOverlay`, which exists
+ * because three blocks previously grew their own incompatible copies.
+ *
+ * Parts: quick-view-backdrop, quick-view-panel, quick-view-close,
+ * quick-view-media, quick-view-name, quick-view-price, quick-view-link,
+ * quick-view-favorite.
+ */
+
+interface SliderQuickViewProps {
+  /** The clicked row, already resolved to a product (pk guaranteed). */
+  row: ThemeProduct | null;
+  open: boolean;
+  /**
+   * Draw in the flow instead of over the page. The canvas preview: a fixed
+   * overlay there would cover the workspace the author is trying to style,
+   * and every dismissal route is inert anyway while `isDesigner` is set.
+   */
+  inline?: boolean;
+  onClose: () => void;
+  openerRef?: { readonly current: HTMLElement | null };
+  /**
+   * Where focus lands when the card that opened the panel is gone by the time
+   * it closes — the carousel has moved on, or the data source refreshed. It
+   * has to be an element that OUTLIVES the panel, so it is the section band
+   * rather than anything rendered here.
+   */
+  fallbackRef?: { readonly current: HTMLElement | null };
+  isDesigner?: boolean;
+  currentBreakpoint?: string;
+  linkLabel: string;
+  closeLabel: string;
+  showFavorite: boolean;
+}
+
+/**
+ * The row's photo. Commerce leaves `image` unset on collection payloads and
+ * carries the shot in `productimage_set`, which is why the card's own binding
+ * is `item.productimage_set[0].image`; both are read here so a row of either
+ * shape draws something.
+ */
+const readRowImage = (row: ThemeProduct | null): string => {
+  const direct = pickProductField<unknown>(row, 'image');
+  if (typeof direct === 'string' && direct) return direct;
+
+  const first = (row?.productimage_set || [])[0];
+  const fromSet = first?.image || first?.url;
+
+  return typeof fromSet === 'string' ? fromSet : '';
+};
+
+const SliderQuickView = ({
+  row,
+  open,
+  inline = false,
+  onClose,
+  openerRef,
+  fallbackRef,
+  isDesigner = false,
+  currentBreakpoint = 'desktop',
+  linkLabel,
+  closeLabel,
+  showFavorite
+}: SliderQuickViewProps) => {
+  // Unconditionally, before the early return below: an overlay that mounted
+  // and unmounted its own hook would take the stack registration with it.
+  const overlay = useOverlay<HTMLDivElement>({
+    // An inline panel is not over the page: it takes no focus, claims no
+    // modality and freezes nothing.
+    open: open && !inline,
+    onClose,
+    isDesigner,
+    modal: true,
+    returnFocusRef: openerRef,
+    fallbackFocusRef: fallbackRef
+  });
+
+  if (!open || !row) return null;
+
+  const name = String(pickProductField<unknown>(row, 'name') ?? '');
+  // `pickProductField` resolves `url` under this name too, so a row of either
+  // shape is read here. Nothing else is consulted — see the note above about
+  // why there is no fetch.
+  const href = String(pickProductField<unknown>(row, 'absolute_url') ?? '');
+  const image = readRowImage(row);
+
+  const { current: amount } = readProductPricePair(row);
+  const price =
+    amount > 0 ? getPriceWithCurrency(amount, readProductCurrency(row)) : '';
+
+  /**
+   * On a storefront a piece the row cannot fill is simply not drawn — a link
+   * to nowhere and an empty image frame are both worse than their absence.
+   *
+   * In the canvas the opposite is true: the author turned the preview on
+   * precisely to style these, and the sample row the editor falls back to
+   * before a data source is attached carries neither a URL nor a photo. So
+   * the designer gets the element regardless, inert and clearly a stand-in.
+   */
+  const showLink = Boolean(href) || isDesigner;
+  const showMedia = Boolean(image) || isDesigner;
+
+  const dismiss = () => {
+    if (inline) return;
+    onClose();
+  };
+
+  return (
+    <div
+      data-slider-quick-view=""
+      {...partAttrs('quick-view-backdrop', { open: true })}
+      onClick={dismiss}
+      style={
+        inline
+          ? {
+              position: 'static',
+              marginTop: '16px',
+              display: 'flex',
+              justifyContent: 'center'
+            }
+          : {
+              position: 'fixed',
+              inset: 0,
+              zIndex: 1000,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '16px',
+              background: 'rgba(0, 0, 0, 0.5)'
+            }
+      }
+    >
+      <div
+        {...partAttrs('quick-view-panel', { open: true })}
+        role="dialog"
+        aria-label={name || closeLabel}
+        tabIndex={-1}
+        {...overlay.overlayProps}
+        // The backdrop dismisses; a click on the panel itself must not reach
+        // that handler.
+        onClick={(event) => event.stopPropagation()}
+        style={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          maxWidth: '360px',
+          maxHeight: inline ? undefined : '85vh',
+          overflow: 'auto',
+          background: '#ffffff',
+          color: '#111827',
+          textAlign: 'center'
+        }}
+      >
+        {/*
+         * Always drawn, and deliberately not behind a toggle: with the
+         * backdrop click and Escape both gone in the inline case, a panel
+         * whose close button an author could remove would be a trap.
+         */}
+        <button
+          type="button"
+          {...partAttrs('quick-view-close')}
+          aria-label={closeLabel}
+          onClick={(event) => {
+            event.stopPropagation();
+            if (!inline) onClose();
+          }}
+          style={{
+            alignSelf: 'flex-end',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '6px',
+            padding: '12px 16px',
+            border: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            cursor: 'pointer'
+          }}
+        >
+          <span style={{ textDecoration: 'underline' }}>{closeLabel}</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            aria-hidden="true"
+          >
+            <path d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        </button>
+
+        {showMedia &&
+          (image ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              {...partAttrs('quick-view-media')}
+              src={image}
+              alt={name}
+              style={{
+                width: '100%',
+                height: 'auto',
+                objectFit: 'contain',
+                display: 'block'
+              }}
+            />
+          ) : (
+            // Canvas stand-in: the same part, so the frame an author styles is
+            // the frame the shopper gets.
+            <div
+              {...partAttrs('quick-view-media', { empty: true })}
+              aria-hidden="true"
+              style={{
+                width: '100%',
+                aspectRatio: '3 / 4',
+                background: 'rgba(0, 0, 0, 0.06)'
+              }}
+            />
+          ))}
+
+        {name && (
+          <h3
+            {...partAttrs('quick-view-name')}
+            style={{
+              margin: '16px 16px 4px',
+              fontSize: '16px',
+              fontWeight: 400
+            }}
+          >
+            {name}
+          </h3>
+        )}
+
+        {price && (
+          <p
+            {...partAttrs('quick-view-price')}
+            style={{
+              margin: '0 16px 16px',
+              fontSize: '14px',
+              fontWeight: 600
+            }}
+          >
+            {price}
+          </p>
+        )}
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '16px',
+            padding: '16px',
+            borderTop: '1px solid rgba(0, 0, 0, 0.1)'
+          }}
+        >
+          {showLink && (
+            <NextLink
+              {...partAttrs('quick-view-link')}
+              // '#' is only ever reached in the canvas, where the click below
+              // is cancelled anyway.
+              href={href || '#'}
+              // A click in the canvas selects; it must not navigate the
+              // editor iframe away from the page being authored.
+              onClick={(event) => {
+                if (isDesigner) event.preventDefault();
+              }}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minWidth: '160px',
+                padding: '12px 24px',
+                border: '1px solid currentColor',
+                textDecoration: 'none',
+                color: 'inherit',
+                fontSize: '13px',
+                letterSpacing: '0.04em'
+              }}
+            >
+              {linkLabel}
+            </NextLink>
+          )}
+
+          {showFavorite && (
+            <span {...partAttrs('quick-view-favorite')}>
+              {/*
+               * The heart acts on the row the shopper clicked, not on the
+               * page's product. The scope is what every commerce block
+               * already reads through `useThemeProduct()`, so this needs no
+               * change in the button itself.
+               */}
+              <ThemeItemScopeProvider product={row}>
+                <FavoriteButtonBlock
+                  block={{
+                    id: `quick-view-favorite-${String(row.pk)}`,
+                    type: 'favorite-button',
+                    properties: {}
+                  }}
+                  placeholderId=""
+                  sectionId=""
+                  currentBreakpoint={currentBreakpoint}
+                  isDesigner={isDesigner}
+                />
+              </ThemeItemScopeProvider>
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SliderQuickView;

package/src/utils/__tests__/line-breaks.test.ts

@@ -0,0 +1,215 @@
+import {
+  LINE_BREAK_ATTRIBUTE,
+  buildLineBreakCss,
+  compositionUsesScopedLineBreaks
+} from '../line-breaks';
+import { generateThemeCSS } from '../index';
+import { DESKTOP_MIN_WIDTH, TABLET_MIN_WIDTH } from '../breakpoints';
+
+const block = (overrides: Record<string, unknown> = {}) =>
+  ({
+    id: 'b1',
+    type: 'text',
+    label: 'Text',
+    properties: {},
+    styles: {},
+    order: 0,
+    hidden: false,
+    ...overrides
+  } as any);
+
+const section = (blocks: any[], overrides: Record<string, unknown> = {}) =>
+  ({
+    id: 's1',
+    type: 'custom',
+    name: 'Custom',
+    label: 'Custom',
+    properties: {},
+    styles: {},
+    blocks,
+    order: 0,
+    hidden: false,
+    ...overrides
+  } as any);
+
+const scoped = (scope: string) =>
+  `Şehrin ritmiyle buluşan<br ${LINE_BREAK_ATTRIBUTE}="${scope}"> güneşli yaşam stili`;
+
+describe('scoped line breaks', () => {
+  describe('the emitted sheet', () => {
+    it('hides every scoped break, then shows each scope inside its own band', () => {
+      const css = buildLineBreakCss();
+
+      expect(css).toContain(`br[${LINE_BREAK_ATTRIBUTE}]{display: none !important;}`);
+      expect(css).toContain(
+        `@media (min-width: ${DESKTOP_MIN_WIDTH}px){br[${LINE_BREAK_ATTRIBUTE}~="desktop"]{display: inline !important;}}`
+      );
+      expect(css).toContain(
+        `@media (min-width: ${TABLET_MIN_WIDTH}px) and (max-width: ${
+          DESKTOP_MIN_WIDTH - 1
+        }px){br[${LINE_BREAK_ATTRIBUTE}~="tablet"]{display: inline !important;}}`
+      );
+      expect(css).toContain(
+        `@media (max-width: ${
+          TABLET_MIN_WIDTH - 1
+        }px){br[${LINE_BREAK_ATTRIBUTE}~="mobile"]{display: inline !important;}}`
+      );
+    });
+
+    it('hides before it shows, so a scope reaches the browser as an override', () => {
+      const css = buildLineBreakCss();
+      const hideAt = css.indexOf(`br[${LINE_BREAK_ATTRIBUTE}]{display: none`);
+      const firstShowAt = css.indexOf('display: inline');
+
+      expect(hideAt).toBeGreaterThanOrEqual(0);
+      expect(firstShowAt).toBeGreaterThan(hideAt);
+    });
+
+    it('leaves a plain <br> alone — every rule is attribute-qualified', () => {
+      const css = buildLineBreakCss();
+      const declarations = css.match(/br[^{]*\{/g) ?? [];
+
+      expect(declarations.length).toBeGreaterThan(0);
+      declarations.forEach((selector) => {
+        expect(selector).toContain(`[${LINE_BREAK_ATTRIBUTE}`);
+      });
+    });
+
+    it('uses DISJOINT bands: a phone scope never reaches the tablet band', () => {
+      // The theme's own MOBILE_MEDIA_QUERY is max-width 1023 and overlaps the
+      // tablet band on purpose. A break's scope is an author-written list, not a
+      // value on the fall-through chain, so "mobile" here has to stop at 767 —
+      // otherwise `mobile` alone is indistinguishable from `mobile tablet` and
+      // the tablet-only intent becomes unreachable.
+      const css = buildLineBreakCss();
+
+      expect(css).toContain(`@media (max-width: ${TABLET_MIN_WIDTH - 1}px)`);
+      expect(css).not.toContain(
+        `@media (max-width: ${DESKTOP_MIN_WIDTH - 1}px){br[`
+      );
+    });
+  });
+
+  describe('the editor canvas', () => {
+    it('resolves to the one band being drawn instead of a media query', () => {
+      const css = buildLineBreakCss('mobile');
+
+      expect(css).toContain(
+        `br[${LINE_BREAK_ATTRIBUTE}~="mobile"]{display: inline !important;}`
+      );
+      expect(css).not.toContain('@media');
+    });
+
+    it('resolves each authorable breakpoint', () => {
+      (['desktop', 'tablet', 'mobile'] as const).forEach((bp) => {
+        const css = buildLineBreakCss(bp);
+        expect(css).toContain(`br[${LINE_BREAK_ATTRIBUTE}~="${bp}"]`);
+        expect(css).not.toContain('@media');
+      });
+    });
+
+    it('falls back to the real queries on a breakpoint name it does not know', () => {
+      // Silently hiding every scoped break would make the canvas lie about the
+      // line count at a width the editor merely named differently.
+      const css = buildLineBreakCss('widescreen');
+
+      expect(css).toContain('@media');
+      expect(css).toContain(`br[${LINE_BREAK_ATTRIBUTE}~="desktop"]`);
+    });
+  });
+
+  describe('detection', () => {
+    it('finds a scoped break in a locale map', () => {
+      const sections = [
+        section([block({ value: { tr: scoped('mobile tablet'), en: 'plain' } })])
+      ];
+
+      expect(compositionUsesScopedLineBreaks(sections)).toBe(true);
+    });
+
+    it('finds a scoped break in a bare single-locale string', () => {
+      const sections = [section([block({ value: scoped('desktop') })])];
+
+      expect(compositionUsesScopedLineBreaks(sections)).toBe(true);
+    });
+
+    it('finds one nested inside a group block', () => {
+      const sections = [
+        section([
+          block({
+            id: 'group',
+            type: 'group',
+            blocks: [block({ id: 'inner', value: scoped('mobile') })]
+          })
+        ])
+      ];
+
+      expect(compositionUsesScopedLineBreaks(sections)).toBe(true);
+    });
+
+    it('finds one authored into a block property rather than its value', () => {
+      const sections = [
+        section([block({ properties: { content: scoped('tablet') } })])
+      ];
+
+      expect(compositionUsesScopedLineBreaks(sections)).toBe(true);
+    });
+
+    it('says no for a plain <br>', () => {
+      const sections = [
+        section([block({ value: 'Şehrin ritmiyle buluşan<br> güneşli' })])
+      ];
+
+      expect(compositionUsesScopedLineBreaks(sections)).toBe(false);
+    });
+
+    it('survives a section with no blocks array at all', () => {
+      const sections = [section(undefined as any)];
+
+      expect(() => compositionUsesScopedLineBreaks(sections)).not.toThrow();
+      expect(compositionUsesScopedLineBreaks(sections)).toBe(false);
+    });
+  });
+
+  describe('generateThemeCSS', () => {
+    it('emits the sheet once, ahead of the section rules', () => {
+      const sections = [
+        section([block({ value: scoped('mobile tablet') })], {
+          styles: { 'background-color': { desktop: '#fff' } }
+        })
+      ];
+
+      const css = generateThemeCSS(sections);
+      const breakAt = css.indexOf(`br[${LINE_BREAK_ATTRIBUTE}]`);
+      const sectionAt = css.indexOf('[data-section-id=');
+
+      expect(breakAt).toBeGreaterThanOrEqual(0);
+      expect(sectionAt).toBeGreaterThan(breakAt);
+      expect(
+        css.match(new RegExp(`br\\[${LINE_BREAK_ATTRIBUTE}\\]\\{`, 'g'))
+      ).toHaveLength(1);
+    });
+
+    it('emits NOTHING new for a composition that uses no scoped break', () => {
+      const sections = [
+        section([block({ value: 'plain<br>text' })], {
+          styles: { 'background-color': { desktop: '#fff' } }
+        })
+      ];
+
+      const css = generateThemeCSS(sections);
+
+      expect(css).not.toContain(LINE_BREAK_ATTRIBUTE);
+      expect(css).toContain('[data-section-id=');
+    });
+
+    it('passes the canvas breakpoint through', () => {
+      const sections = [section([block({ value: scoped('desktop') })])];
+
+      const css = generateThemeCSS(sections, 'mobile');
+
+      expect(css).toContain(`br[${LINE_BREAK_ATTRIBUTE}~="mobile"]`);
+      expect(css).not.toContain('@media');
+    });
+  });
+});

package/src/utils/index.ts

@@ -33,6 +33,10 @@ import {
   splitSectionContentWidth
 } from './section-content-width';
 import { hasCustomSectionRenderer } from '../sections/custom-renderer-section-types';
+import {
+  buildLineBreakCss,
+  compositionUsesScopedLineBreaks
+} from './line-breaks';
 
 export * from './publish-window';
 export * from './part-styles';
@@ -1456,7 +1460,14 @@ export const generateThemeCSS = (
   sections: Section[],
   targetBreakpoint?: string
 ): string => {
-  let css = '';
+  // First, and outside every section selector: the rules are global by nature
+  // (a `<br>` scoped to the phone means the same thing wherever it was typed),
+  // and they must lose a specificity tie to anything a section or block emits
+  // for itself, which source order settles. Emitted only when the composition
+  // actually carries a scoped break — see utils/line-breaks.ts.
+  let css = compositionUsesScopedLineBreaks(sections)
+    ? buildLineBreakCss(targetBreakpoint)
+    : '';
 
   sections.forEach((section) => {
     const sectionSelector = `[data-section-id="${escapeCssAttributeValue(

package/src/utils/iterator-utils.ts

@@ -457,6 +457,52 @@ const normalizeCurrencyLabel = (rawCurrency: unknown): string => {
   return normalized;
 };
 
+const parseProductPrice = (value: unknown): number => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+/**
+ * What a row costs, from either payload shape.
+ *
+ * v2 collection items publish prices under `active_price`; PDP-shaped
+ * payloads carry them at the top level. Everything that prints a row's price
+ * — the slider's own bindings and the quick view panel — has to give the same
+ * answer, so the reader lives here beside the formatter rather than once per
+ * caller. A missing figure reads as 0, which callers treat as "do not print".
+ */
+export const readProductPricePair = (
+  productData: Record<string, unknown> | null | undefined
+): { current: number; retail: number } => {
+  const activePrice = (productData as any)?.active_price as
+    | Record<string, unknown>
+    | undefined;
+
+  return {
+    current: parseProductPrice(
+      activePrice?.price ?? (productData as any)?.price
+    ),
+    retail: parseProductPrice(
+      activePrice?.retail_price ?? (productData as any)?.retail_price
+    )
+  };
+};
+
+/** The currency the row prints in, from either payload shape. */
+export const readProductCurrency = (
+  productData: Record<string, unknown> | null | undefined
+): unknown => {
+  const activePrice = (productData as any)?.active_price as
+    | Record<string, unknown>
+    | undefined;
+
+  return (
+    activePrice?.currency_type ??
+    (productData as any)?.currency_type ??
+    (productData as any)?.currency
+  );
+};
+
 export const getPriceWithCurrency = (
   value: unknown,
   currency: unknown