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

package/CHANGELOG.md

@@ -1,11 +1,11 @@
 # @akinon/pz-theme
 
-## 2.0.26-beta.0
+## 2.0.26
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.26-beta.0
+- 40bc4a3: ZERO-4545: Refactor product query hooks to use currentData for better state management across args
+  - @akinon/next@2.0.26
 
 ## 2.0.25
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.26-beta.0",
+  "version": "2.0.26",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {
-    "@akinon/next": "2.0.26-beta.0",
+    "@akinon/next": "2.0.26",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -15,7 +15,7 @@
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.26-beta.0",
+    "@akinon/next": "2.0.26",
     "@types/node": "^18.7.8",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",

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

@@ -257,7 +257,9 @@ export default function FeaturedProductSpotlightSection({
   const fallbackProductPk = parsePositiveInt(
     getResponsiveValue(section.properties?.['product-pk'], currentBreakpoint, '')
   );
-  const { data: fallbackProductResponse } = useGetProductByPkQuery(
+  // currentData (not data): data is sticky across args, so a cleared
+  // product-pk would keep rendering the previously fetched product.
+  const { currentData: fallbackProductResponse } = useGetProductByPkQuery(
     fallbackProductPk as number,
     {
       skip: products.length > 0 || !fallbackProductPk

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

@@ -593,7 +593,9 @@ export default function FindInStoreSection({
     currentBreakpoint
   );
 
-  const { data: productResponse, isLoading: productLoading } =
+  // currentData (not data): data is sticky across args, so a cleared
+  // product-pk would keep rendering the previously fetched product.
+  const { currentData: productResponse, isLoading: productLoading } =
     useGetProductByPkQuery(resolvedProductPk as number, {
       skip: !resolvedProductPk
     });

package/src/sections/installment-options-section.tsx

@@ -565,13 +565,15 @@ export default function InstallmentOptionsSection({
   const resolvedProductPk = parseProductPk(collectionProduct?.pk) ?? propertyProductPk;
 
   const shouldFetchProduct = !collectionProduct && resolvedProductPk !== null;
-  const { data: productResponse } = useGetProductByPkQuery(
+  // currentData (not data): data is sticky across args, so a cleared
+  // product-pk would keep rendering the previous product/installments.
+  const { currentData: productResponse } = useGetProductByPkQuery(
     resolvedProductPk as number,
     {
       skip: !shouldFetchProduct
     }
   );
-  const { data: installmentsData, isLoading } = useGetInstallmentsQuery(
+  const { currentData: installmentsData, isLoading } = useGetInstallmentsQuery(
     resolvedProductPk as number,
     {
       skip: resolvedProductPk === null

package/src/sections/pre-order-launch-banner-section.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { useGetProductByPkQuery } from '@akinon/next/data/client/product';
+import { useLocalization } from '@akinon/next/hooks';
 
 import ThemeBlock, { Block } from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
@@ -216,10 +217,16 @@ const getRemainingTime = (
   };
 };
 
-const formatLaunchDate = (value: Date | null): string | null => {
+// Locale must be explicit: Intl with `undefined` resolves to the runtime
+// default, which differs between the SSR node process and the browser and
+// causes hydration mismatches on the rendered date text.
+const formatLaunchDate = (
+  value: Date | null,
+  locale?: string
+): string | null => {
   if (!value) return null;
 
-  return new Intl.DateTimeFormat(undefined, {
+  return new Intl.DateTimeFormat(locale || 'en', {
     month: 'long',
     day: 'numeric',
     year: 'numeric'
@@ -304,6 +311,7 @@ export default function PreOrderLaunchBannerSection({
   selectedBlockId = null
 }: PreOrderLaunchBannerSectionProps) {
   const themeSettings = useThemeSettingsContext();
+  const { locale } = useLocalization();
 
   const maxWidth = getResponsiveValue(
     section.styles?.['max-width'],
@@ -362,7 +370,9 @@ export default function PreOrderLaunchBannerSection({
       ''
     )
   );
-  const { data: fallbackProductResponse } = useGetProductByPkQuery(
+  // currentData (not data): data is sticky across args, so a cleared
+  // product-pk would keep rendering the previously fetched product.
+  const { currentData: fallbackProductResponse } = useGetProductByPkQuery(
     fallbackProductPk as number,
     {
       skip: products.length > 0 || !fallbackProductPk
@@ -385,8 +395,8 @@ export default function PreOrderLaunchBannerSection({
     [product, propertyLaunchDate]
   );
   const launchDateText = useMemo(
-    () => formatLaunchDate(launchDate),
-    [launchDate]
+    () => formatLaunchDate(launchDate, locale),
+    [launchDate, locale]
   );
 
   const showCountdown = parseBoolean(

package/src/sections/section-wrapper.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import ActionToolbar from '../components/action-toolbar';
 import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
@@ -58,6 +58,30 @@ export default function SectionWrapper({
     section.properties?.['error-message']
   ).trim();
 
+  const sectionRef = useRef<HTMLElement>(null);
+
+  // Custom-renderer sections render through this wrapper instead of the
+  // default <section> in theme-section, so the editor's SCROLL_TO_SECTION
+  // must be handled here too.
+  useEffect(() => {
+    if (!isDesigner) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      if (
+        event.data?.type === 'SCROLL_TO_SECTION' &&
+        event.data?.data?.sectionId === section.id
+      ) {
+        sectionRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [section.id, isDesigner]);
+
   const handleClick = (e: React.MouseEvent) => {
     if (isDesigner && onSelect) {
       e.stopPropagation();
@@ -80,6 +104,7 @@ export default function SectionWrapper({
 
   return (
     <section
+      ref={sectionRef}
       data-section-id={section.id}
       data-newsletter-signup={isNewsletterSection ? 'true' : undefined}
       data-newsletter-endpoint={

package/src/theme-placeholder-client.tsx

@@ -10,10 +10,14 @@ import { useVisibilityContext } from './hooks/use-visibility-context';
 import { applyVisibilityRulesToSections } from './utils/visibility-rules';
 import { isPublishWindowVisible } from './utils/publish-window';
 
-// Global flag to track if IFRAME_READY has been sent (survives component remount)
+// Global flags that must survive component remounts (e.g. in-iframe route
+// changes): IFRAME_READY is sent once per document, and the designer flag
+// arrives once from the editor in response — remounted components must not
+// reset to non-designer state.
 declare global {
   interface Window {
     __iframeReadySent?: boolean;
+    __themeEditorDesigner?: boolean;
   }
 }
 
@@ -36,7 +40,9 @@ export default function ThemePlaceholderClient({
   );
   const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
   const [currentBreakpoint, setCurrentBreakpoint] = useState<string>('desktop');
-  const [isDesigner, setIsDesigner] = useState(false);
+  const [isDesigner, setIsDesigner] = useState(
+    () => typeof window !== 'undefined' && window.__themeEditorDesigner === true
+  );
   const visibilityContext = useVisibilityContext(currentBreakpoint);
   const renderedSections = applyVisibilityRulesToSections(
     sections,
@@ -73,6 +79,7 @@ export default function ThemePlaceholderClient({
       switch (event.data?.type) {
         case 'SET_THEME_EDITOR_COOKIE':
           if (event.data.data) {
+            window.__themeEditorDesigner = true;
             setIsDesigner(true);
           }
           break;

package/src/theme-placeholder-wrapper.tsx

@@ -297,7 +297,13 @@ export default function ThemePlaceholderWrapper({
   );
   const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
   const [currentBreakpoint, setCurrentBreakpoint] = useState<string>('desktop');
-  const [isDesigner, setIsDesigner] = useState(isDesignMode);
+  // Designer flag survives remounts via the window global; the editor sends
+  // SET_THEME_EDITOR_COOKIE only once per document (IFRAME_READY guard).
+  const [isDesigner, setIsDesigner] = useState(
+    () =>
+      isDesignMode ||
+      (typeof window !== 'undefined' && window.__themeEditorDesigner === true)
+  );
   const [dataSources, setDataSources] = useState<any[]>(initialDataSources);
   const [themeSettings, setThemeSettings] = useState<Record<
     string,
@@ -502,6 +508,7 @@ export default function ThemePlaceholderWrapper({
       switch (event.data?.type) {
         case 'SET_THEME_EDITOR_COOKIE':
           if (event.data.data) {
+            window.__themeEditorDesigner = true;
             setIsDesigner(true);
           }
           break;