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

package/src/hooks/use-overlay.ts

@@ -0,0 +1,538 @@
+'use client';
+
+import { useEffect, useId, useMemo, useRef, useSyncExternalStore } from 'react';
+
+/**
+ * One contract for every block that puts a panel over the page.
+ *
+ * Three blocks grew their own copy of this and each got the same thing wrong:
+ * a DOCUMENT-level `focusin` listener that yanks focus back into its OWN panel
+ * whenever focus lands anywhere else. Two such panels on one page — an
+ * ordinary composition, since a picker legitimately appears twice, a desktop
+ * one and a mobile one — each read the other's focus as "outside" and pull
+ * against each other until the tab dies:
+ *
+ *     RangeError: Maximum call stack size exceeded
+ *         at focusFirst (variant-selector-block.tsx:476:24)
+ *         at Document.handleFocusIn (variant-selector-block.tsx:508:7)
+ *
+ * The answer is not a smarter listener, it is a stack. Overlays queue, and
+ * only the one on top traps focus and claims `aria-modal`; the ones beneath
+ * stay mounted and intact and simply stop reaching for the page. The same
+ * stack makes the other page-wide state honest — one reference-counted scroll
+ * lock instead of one per block, and one `aria-modal` claim instead of two
+ * dialogs each telling assistive tech the other is hidden.
+ *
+ * Consumers need to know three things and no more: pass `open`, attach
+ * `overlayProps` to the element that IS the overlay, and hand back a trigger
+ * to return focus to.
+ *
+ *     const overlay = useOverlay<HTMLDivElement>({
+ *       open: isPanelOpen,
+ *       onClose: () => setIsPanelOpen(false),
+ *       isDesigner,
+ *       modal: displayMode === 'trigger',
+ *       returnFocusRef: triggerRef,
+ *       fallbackFocusRef: blockRootRef
+ *     });
+ *
+ *     <div {...overlay.overlayProps} role="dialog" tabIndex={-1} />
+ *
+ * `tabIndex={-1}` stays the caller's because it is markup, but it is not
+ * optional: it is what lets a panel with nothing focusable inside it hold
+ * focus instead of quietly leaving it on the page behind.
+ */
+
+/**
+ * Every overlay currently holding the page, oldest first. Module state on
+ * purpose: two overlays in unrelated blocks have to see one queue, which is
+ * exactly what per-block copies could not do.
+ */
+const overlayStack: string[] = [];
+const stackListeners = new Set<() => void>();
+
+const notifyStack = () => {
+  stackListeners.forEach((listener) => listener());
+};
+
+const subscribeToStack = (listener: () => void) => {
+  stackListeners.add(listener);
+
+  return () => {
+    stackListeners.delete(listener);
+  };
+};
+
+const topmostOverlay = () => overlayStack[overlayStack.length - 1];
+
+/**
+ * Whether `id` may CLAIM the page: it is on top, or it is opening and has not
+ * been queued yet.
+ *
+ * Queueing happens in an effect, so the render that OPENS an overlay runs
+ * before its own push and would answer "not on top" for that one render. That
+ * put `aria-modal` on the commit AFTER the panel appeared — a beat late for
+ * assistive tech, and, because the DOM appends an attribute that first shows
+ * up on a later commit, enough to move the serialized markup of every panel
+ * carrying it, under goldens that were never about modality.
+ *
+ * Reading "not queued yet" as "about to be on top" is not a guess: `push`
+ * appends, so an opening overlay always lands on top. An overlay that is not
+ * opening and not in the stack is simply closed, and claims nothing.
+ *
+ * Only the CLAIM runs ahead like this. Installing the trap waits for the
+ * settled stack (`isTopmost` below): two overlays opening in the same commit
+ * have not sorted themselves out yet, and two live traps — even for the one
+ * commit before the stack settles — is the very thing this file exists to
+ * stop.
+ */
+const mayClaimPage = (id: string, opening: boolean): boolean => {
+  const index = overlayStack.indexOf(id);
+
+  return index === -1 ? opening : index === overlayStack.length - 1;
+};
+
+const pushOverlay = (id: string) => {
+  if (overlayStack.includes(id)) return;
+
+  overlayStack.push(id);
+  notifyStack();
+};
+
+const popOverlay = (id: string) => {
+  const index = overlayStack.indexOf(id);
+  if (index === -1) return;
+
+  overlayStack.splice(index, 1);
+  notifyStack();
+};
+
+/** Nothing is on top of a page that has not been rendered yet. */
+const noOverlayOnServer = () => false;
+
+/**
+ * The page's own overflow, held by whoever locked first and written back only
+ * when the last holder leaves. Each block used to keep its own counter, so the
+ * second block to open captured `hidden` as "the page's own value" and the
+ * page stayed frozen after every panel had closed.
+ */
+let scrollLockHolders = 0;
+let scrollLockPreviousOverflow = '';
+
+const acquireScrollLock = () => {
+  if (typeof document === 'undefined') return;
+
+  if (scrollLockHolders === 0) {
+    scrollLockPreviousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+
+  scrollLockHolders += 1;
+};
+
+const releaseScrollLock = () => {
+  if (typeof document === 'undefined' || scrollLockHolders === 0) return;
+
+  scrollLockHolders -= 1;
+
+  if (scrollLockHolders === 0) {
+    document.body.style.overflow = scrollLockPreviousOverflow;
+    scrollLockPreviousOverflow = '';
+  }
+};
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])'
+].join(',');
+
+const focusablesIn = (panel: HTMLElement): HTMLElement[] =>
+  Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+
+/**
+ * Focus the panel's first control, or the panel itself when it has none — so
+ * give the panel `tabIndex={-1}`, otherwise a panel with nothing focusable in
+ * it silently leaves focus outside.
+ */
+const focusFirstIn = (panel: HTMLElement | null) => {
+  if (!panel) return;
+
+  const [first] = focusablesIn(panel);
+  (first || panel).focus();
+};
+
+/**
+ * Reports whether focus actually landed, not merely that `focus()` was called:
+ * an element can be connected and still refuse focus, and a caller that
+ * believes the handover happened stops looking for somewhere else to put it.
+ */
+const focusIfConnected = (element: HTMLElement | null | undefined) => {
+  if (!element || !element.isConnected || typeof element.focus !== 'function') {
+    return false;
+  }
+
+  element.focus();
+
+  return document.activeElement === element;
+};
+
+export interface OverlayPointerPoint {
+  x: number;
+  y: number;
+}
+
+/** The shape both React and native pointer events already satisfy. */
+export interface TrackablePointerEvent {
+  pointerId: number;
+  clientX: number;
+  clientY: number;
+  currentTarget?: EventTarget | null;
+}
+
+/**
+ * The pointers currently down on the overlay, with the capture each one took.
+ *
+ * A gesture surface has to count the fingers still down to tell a two-finger
+ * pinch from a one-finger drag, and a finger that is still down when the
+ * overlay unmounts is never followed by a `pointerup` — the id stays booked
+ * for the rest of the session and every later swipe is read as the second
+ * finger of a pinch that never started. The overlay clears the book on close,
+ * so no block has to remember to.
+ */
+export interface OverlayPointerBook {
+  /** Remember a pointer, taking capture the first time it is seen so a fast
+   *  drag that leaves the panel keeps reporting. Safe to call on every move. */
+  track: (event: TrackablePointerEvent) => void;
+  /** Forget one pointer and hand its capture back (pointerup / pointercancel). */
+  release: (pointerId: number) => void;
+  /** Forget every pointer and hand back every capture. */
+  clear: () => void;
+  has: (pointerId: number) => boolean;
+  /** The live positions, in the order the fingers landed. */
+  points: () => OverlayPointerPoint[];
+  size: () => number;
+}
+
+interface BookedPointer extends OverlayPointerPoint {
+  capture: Element | null;
+}
+
+type CapturingElement = Element & {
+  setPointerCapture?: (pointerId: number) => void;
+  releasePointerCapture?: (pointerId: number) => void;
+  hasPointerCapture?: (pointerId: number) => boolean;
+};
+
+const handBackCapture = (capture: Element | null, pointerId: number) => {
+  const element = capture as CapturingElement | null;
+  if (!element || typeof element.releasePointerCapture !== 'function') return;
+
+  // A capture the browser already dropped makes `releasePointerCapture` throw,
+  // and a throw mid-clear would strand every pointer after it in the book.
+  try {
+    if (element.hasPointerCapture?.(pointerId) === false) return;
+    element.releasePointerCapture(pointerId);
+  } catch {
+    // Already handed back; nothing to undo.
+  }
+};
+
+const createPointerBook = (): OverlayPointerBook => {
+  const booked = new Map<number, BookedPointer>();
+
+  return {
+    track: (event) => {
+      const existing = booked.get(event.pointerId);
+      let capture = existing ? existing.capture : null;
+
+      if (!existing) {
+        const target = (event.currentTarget || null) as CapturingElement | null;
+
+        if (target && typeof target.setPointerCapture === 'function') {
+          try {
+            target.setPointerCapture(event.pointerId);
+            capture = target;
+          } catch {
+            // The pointer ended before capture could be taken.
+          }
+        }
+      }
+
+      booked.set(event.pointerId, {
+        x: event.clientX,
+        y: event.clientY,
+        capture
+      });
+    },
+    release: (pointerId) => {
+      const entry = booked.get(pointerId);
+      if (!entry) return;
+
+      booked.delete(pointerId);
+      handBackCapture(entry.capture, pointerId);
+    },
+    clear: () => {
+      booked.forEach((entry, pointerId) =>
+        handBackCapture(entry.capture, pointerId)
+      );
+      booked.clear();
+    },
+    has: (pointerId) => booked.has(pointerId),
+    points: () => Array.from(booked.values(), ({ x, y }) => ({ x, y })),
+    size: () => booked.size
+  };
+};
+
+/** Accepts a ref from any React version, mutable or not. */
+interface OverlayFocusRef {
+  readonly current: HTMLElement | null;
+}
+
+export interface UseOverlayOptions {
+  /** Whether the overlay is showing. Everything below hangs off this. */
+  open: boolean;
+  /** Asked to close — Escape today. */
+  onClose?: () => void;
+  /**
+   * The designer canvas is the author's workspace, not a shopper viewport, so
+   * an overlay there is fully inert: it never steals focus into the canvas,
+   * never freezes the page the author is styling, never claims `aria-modal`,
+   * and never closes itself out from under an author who pressed Escape.
+   */
+  isDesigner?: boolean;
+  /**
+   * True when the overlay really covers the page behind a backdrop. Only a
+   * modal overlay traps focus and claims `aria-modal`: with no backdrop the
+   * page underneath is deliberately usable and the claim would be a lie.
+   */
+  modal?: boolean;
+  /** Freeze the page behind the overlay. Defaults to `modal`. */
+  lockScroll?: boolean;
+  closeOnEscape?: boolean;
+  /**
+   * Move focus in on open, hold it while topmost, hand it back on close.
+   * Defaults to `modal` — an inline panel sits next in reading order and needs
+   * no help.
+   */
+  manageFocus?: boolean;
+  /** Where focus goes on close. Defaults to whatever had it when the overlay opened. */
+  returnFocusRef?: OverlayFocusRef;
+  /** Where focus goes when that trigger is gone by the time the overlay closes. */
+  fallbackFocusRef?: OverlayFocusRef;
+  /** Ran once per open-to-closed transition, unmount included. */
+  onDeactivate?: () => void;
+}
+
+export interface OverlayHandle<T extends HTMLElement = HTMLElement> {
+  /** Attach to the element that IS the overlay. */
+  panelRef: { current: T | null };
+  /** True while this overlay is the one on top of the stack. */
+  isTopmost: boolean;
+  /** `'true'` only where the claim is honest, `undefined` otherwise. */
+  ariaModal: 'true' | undefined;
+  /** Spread onto the overlay element; the role, label and tabIndex stay the
+   *  caller's, since only the block knows what its panel is. */
+  overlayProps: {
+    ref: { current: T | null };
+    'aria-modal': 'true' | undefined;
+  };
+  /** Cleared, captures and all, when the overlay closes. */
+  pointers: OverlayPointerBook;
+}
+
+export function useOverlay<T extends HTMLElement = HTMLElement>(
+  options: UseOverlayOptions
+): OverlayHandle<T> {
+  const {
+    open,
+    isDesigner = false,
+    modal = true,
+    lockScroll = modal,
+    closeOnEscape = true,
+    manageFocus = modal
+  } = options;
+
+  const id = useId();
+  const panelRef = useRef<T | null>(null);
+  const openerRef = useRef<HTMLElement | null>(null);
+
+  // A ref rather than a memo: the book has to be the same object for the life
+  // of the overlay, and a memo is free to be thrown away and rebuilt.
+  const bookRef = useRef<OverlayPointerBook | null>(null);
+  if (!bookRef.current) bookRef.current = createPointerBook();
+  const pointers = bookRef.current;
+
+  const active = open && !isDesigner;
+
+  // Subscribed before anything registers, so the very first push is heard.
+  const isTopmost = useSyncExternalStore(
+    subscribeToStack,
+    () => topmostOverlay() === id,
+    noOverlayOnServer
+  );
+
+  // The same question asked a beat earlier — see `mayClaimPage`.
+  const claimsPage = useSyncExternalStore(
+    subscribeToStack,
+    () => mayClaimPage(id, active),
+    noOverlayOnServer
+  );
+
+  /**
+   * Callbacks, refs and the resolved defaults are read when something happens
+   * rather than when the effect was set up, so a consumer re-rendering does not
+   * re-run the trap or move focus a second time.
+   */
+  const settingsRef = useRef({ ...options, manageFocus });
+  useEffect(() => {
+    settingsRef.current = { ...options, manageFocus };
+  });
+
+  /**
+   * Declared before the stack registration below so that on the way out this
+   * runs while the overlay is still in the stack and can ask whether it is the
+   * one that owns focus.
+   */
+  useEffect(() => {
+    if (!active) return undefined;
+
+    openerRef.current = document.activeElement as HTMLElement | null;
+
+    if (settingsRef.current.manageFocus) focusFirstIn(panelRef.current);
+
+    return () => {
+      // A finger still down when the panel goes away is never followed by a
+      // pointerup, so the book has to be emptied here rather than waiting for
+      // an event that will not arrive.
+      pointers.clear();
+
+      const {
+        manageFocus: managed,
+        onDeactivate,
+        returnFocusRef,
+        fallbackFocusRef
+      } = settingsRef.current;
+
+      onDeactivate?.();
+
+      // Only the overlay that owns focus hands it back. One closing underneath
+      // a modal that is still up must not drag focus out of it.
+      if (!managed || topmostOverlay() !== id) return;
+
+      if (focusIfConnected(returnFocusRef?.current)) return;
+      if (focusIfConnected(openerRef.current)) return;
+      // The trigger was removed while the overlay was up — a row that
+      // re-rendered away under it, say. Landing on the block it belonged to
+      // beats dropping a keyboard shopper at the top of the document.
+      if (focusIfConnected(fallbackFocusRef?.current)) return;
+
+      // Nowhere left to go, and a panel that is merely hidden rather than
+      // unmounted would otherwise keep focus a shopper cannot see.
+      const stranded = document.activeElement as HTMLElement | null;
+      if (stranded && stranded !== document.body) stranded.blur?.();
+    };
+  }, [active, id, pointers]);
+
+  useEffect(() => {
+    if (!active) return undefined;
+
+    pushOverlay(id);
+
+    return () => popOverlay(id);
+  }, [active, id]);
+
+  const trapping = active && modal && isTopmost;
+
+  useEffect(() => {
+    if (!trapping) return undefined;
+
+    const panel = panelRef.current;
+    if (!panel) return undefined;
+
+    // Backs the `aria-modal` claim: while the rest of the page is declared
+    // hidden, Tab must not walk out into it.
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      const items = focusablesIn(panel);
+
+      if (items.length === 0) {
+        event.preventDefault();
+        panel.focus();
+
+        return;
+      }
+
+      const first = items[0];
+      const last = items[items.length - 1];
+      const activeElement = document.activeElement;
+
+      if (
+        event.shiftKey &&
+        (activeElement === first || activeElement === panel)
+      ) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    // Tab is not the only way out — the browser's own focus moves land here
+    // too, so the trap watches where focus actually ends up. This listener is
+    // the one that used to fight its twin; the `trapping` gate above is what
+    // guarantees there is never more than one of it on the page.
+    const handleFocusIn = (event: FocusEvent) => {
+      if (panel.contains(event.target as Node)) return;
+
+      focusFirstIn(panel);
+    };
+
+    panel.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('focusin', handleFocusIn);
+
+    return () => {
+      panel.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('focusin', handleFocusIn);
+    };
+  }, [trapping]);
+
+  useEffect(() => {
+    if (!active || !lockScroll) return undefined;
+
+    acquireScrollLock();
+
+    return releaseScrollLock;
+  }, [active, lockScroll]);
+
+  useEffect(() => {
+    // Escape belongs to the overlay on top; the ones beneath stay open.
+    if (!active || !closeOnEscape || !isTopmost) return undefined;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+
+      settingsRef.current.onClose?.();
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [active, closeOnEscape, isTopmost]);
+
+  const ariaModal = active && modal && claimsPage ? ('true' as const) : undefined;
+
+  const overlayProps = useMemo(
+    () => ({ ref: panelRef, 'aria-modal': ariaModal }),
+    [ariaModal]
+  );
+
+  return { panelRef, isTopmost, ariaModal, overlayProps, pointers };
+}
+
+export default useOverlay;

package/src/hooks/use-visibility-context.ts

@@ -5,7 +5,17 @@ import { useSession } from 'next-auth/react';
 
 import { useLocalization } from '@akinon/next/hooks/use-localization';
 
-export const useVisibilityContext = (currentBreakpoint = 'desktop') => {
+interface VisibilityContextOptions {
+  /** What the page is about; only data conditions read it. */
+  pageContext?: Record<string, unknown> | null;
+  isDesigner?: boolean;
+}
+
+export const useVisibilityContext = (
+  currentBreakpoint = 'desktop',
+  // Optional so every existing caller keeps the exact context it built before.
+  options: VisibilityContextOptions = {}
+) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const { status } = useSession();
@@ -22,6 +32,8 @@ export const useVisibilityContext = (currentBreakpoint = 'desktop') => {
     locale: String(locale || ''),
     currency: String(currency || ''),
     pathname: String(pathname || ''),
-    searchParams
+    searchParams,
+    pageContext: options.pageContext ?? null,
+    isDesigner: options.isDesigner === true
   };
 };

package/src/sections/__tests__/divider-section.test.tsx

@@ -147,7 +147,12 @@ describe('DividerSection', () => {
       expect(getSpan(container).style.height).toBe('6px');
     });
 
-    it('falls back to 1px when responsive object has no matching or desktop key', () => {
+    // A tablet with nothing authored for it reads the mobile value, because
+    // the mobile media query is what covers 768-1023 on the device. This used
+    // to assert 1px, from back when 'tablet' was merely an unrecognised string:
+    // the renderer said 1px while the stylesheet on that same band said 2px,
+    // which is exactly the disagreement the fall-through chain exists to end.
+    it('reads the mobile value at tablet when no tablet value is authored', () => {
       const { container } = renderDivider(
         {
           id: 's14',
@@ -155,6 +160,28 @@ describe('DividerSection', () => {
         },
         { currentBreakpoint: 'tablet' }
       );
+      expect(getSpan(container).style.height).toBe('2px');
+    });
+
+    it('prefers the tablet value over the mobile one when authored', () => {
+      const { container } = renderDivider(
+        {
+          id: 's15',
+          styles: { height: { desktop: '6px', tablet: '4px', mobile: '2px' } }
+        },
+        { currentBreakpoint: 'tablet' }
+      );
+      expect(getSpan(container).style.height).toBe('4px');
+    });
+
+    it('falls back to 1px when there is nothing to fall through to', () => {
+      const { container } = renderDivider(
+        {
+          id: 's16',
+          styles: { height: { tablet: '4px' } }
+        },
+        { currentBreakpoint: 'mobile' }
+      );
       expect(getSpan(container).style.height).toBe('1px');
     });
   });

package/src/sections/contact-form-section.tsx

@@ -14,6 +14,7 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 import { Section } from '../theme-section';
 import { Modal } from '@akinon/next/components/modal';
 import {
@@ -74,6 +75,8 @@ const readProperty = (
     const responsive = raw as Record<string, unknown>;
     const picked =
       responsive[breakpoint] ??
+      // A tablet inherits mobile before desktop, matching the emitted cascade.
+      (breakpoint === 'tablet' ? responsive.mobile : undefined) ??
       responsive.desktop ??
       Object.values(responsive)[0];
     return picked == null ? fallback : String(picked);
@@ -449,7 +452,7 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
     setSelectedSubject(e.target.value);
   };
 
-  const isMobile = currentBreakpoint === 'mobile';
+  const isMobile = isNarrowBreakpoint(currentBreakpoint);
 
   const errorStyle: React.CSSProperties = {
     color: '#ef4444',

package/src/sections/coupon-banner-section.tsx

@@ -13,6 +13,7 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 import { Section } from '../theme-section';
 
 import { postToEditor } from '../editor-bridge';
@@ -650,7 +651,7 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
     }
   };
 
-  const isMobileLayout = currentBreakpoint === 'mobile';
+  const isMobileLayout = isNarrowBreakpoint(currentBreakpoint);
   const fallbackBackgroundColor =
     typeof sectionStyles.backgroundColor === 'string'
       ? sectionStyles.backgroundColor

package/src/sections/featured-product-spotlight-section.tsx

@@ -8,6 +8,7 @@ import { useThemeSettingsContext } from '../theme-settings-context';
 import { Section } from '../theme-section';
 import { safeDeepClone } from '../utils/safe-clone';
 import { getCSSStyles, getResponsiveValue } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 
 import { postToEditor } from '../editor-bridge';
 interface FeaturedProductSpotlightSectionProps {
@@ -247,10 +248,9 @@ export default function FeaturedProductSpotlightSection({
 
     return {
       ...baseStyles,
-      flexDirection:
-        currentBreakpoint === 'mobile'
-          ? ('column-reverse' as const)
-          : ('row-reverse' as const)
+      flexDirection: isNarrowBreakpoint(currentBreakpoint)
+        ? ('column-reverse' as const)
+        : ('row-reverse' as const)
     };
   }, [
     currentBreakpoint,

package/src/sections/find-in-store-section.tsx

@@ -27,6 +27,7 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
@@ -1222,7 +1223,7 @@ export default function FindInStoreSection({
     () => ((stockResponse || []) as StoreStockItem[]).slice(0, maxResults),
     [maxResults, stockResponse]
   );
-  const isMobile = currentBreakpoint === 'mobile';
+  const isMobile = isNarrowBreakpoint(currentBreakpoint);
   const isProductResolved = !!activeProductPk && !!product;
 
   const displayProductName = isProductResolved