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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.66-beta.0
+## 2.0.66
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.66-beta.0
-  - @akinon/theme-contract@2.0.66-beta.0
+- Updated dependencies [7891fab]
+  - @akinon/theme-contract@2.0.66
+  - @akinon/next@2.0.66
 
 ## 2.0.65
 

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.66-beta.0",
+  "version": "2.0.66",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.66-beta.0",
+    "@akinon/next": "2.0.66",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.66-beta.0",
+    "@akinon/theme-contract": "2.0.66",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.66-beta.0",
+    "@akinon/next": "2.0.66",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

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

@@ -7,6 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import ThemeBlock from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { safeDeepClone } from '../utils/safe-clone';
+import { getPriceWithCurrency, isPriceBinding } from '../utils/iterator-utils';
 import {
   applyFirstSlideImageLoading,
   getCSSStyles,
@@ -64,6 +65,23 @@ const cloneBlock = (block: any): any => ({
     : undefined
 });
 
+const parseProductPrice = (value: unknown): number => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const readProductPricePair = (productData: Record<string, unknown>) => {
+  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
+    )
+  };
+};
+
 const replaceBlockValues = (
   blockToReplace: any,
   productData: Record<string, unknown>,
@@ -78,6 +96,65 @@ const replaceBlockValues = (
       'item.',
       ''
     );
+
+    // No payload carries a discount percentage, but every one carries the two
+    // prices it derives from — so `item.discount_percentage` is computed here.
+    // A non-discounted product hides the block instead of printing "-%0".
+    if (bindingPath === 'discount_percentage') {
+      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;
+      }
+      if (newBlock.blocks && newBlock.blocks.length > 0) {
+        newBlock.blocks = newBlock.blocks.map((childBlock: any) =>
+          replaceBlockValues(childBlock, productData, productIndex)
+        );
+      }
+      return newBlock;
+    }
+
+    // Prices resolve through the pair reader rather than the literal path:
+    // v2 collection items publish them under `active_price`, PDP-shaped
+    // payloads at the top level, and a composition bound against the one the
+    // brand's endpoint doesn't ship would otherwise render an empty block
+    // (imports blank a bound block's placeholder value on purpose).
+    if (isPriceBinding(String(newBlock.properties.dataBinding))) {
+      const { current, retail } = readProductPricePair(productData);
+      const isRetail =
+        bindingPath === 'retail_price' ||
+        bindingPath === 'active_price.retail_price';
+      const activePrice = (productData as any)?.active_price as
+        | Record<string, unknown>
+        | undefined;
+      const currency =
+        activePrice?.currency_type ??
+        (productData as any)?.currency_type ??
+        (productData as any)?.currency;
+
+      if (isRetail) {
+        // A struck-through retail price only means something when it is
+        // higher than what the shopper pays; the same figure twice reads as
+        // a rendering bug, so non-discounted products hide it.
+        if (retail > 0 && current > 0 && retail > current) {
+          newBlock.value = getPriceWithCurrency(retail, currency);
+        } else {
+          newBlock.hidden = true;
+        }
+      } else if (current > 0) {
+        newBlock.value = getPriceWithCurrency(current, currency);
+      }
+
+      if (newBlock.blocks && newBlock.blocks.length > 0) {
+        newBlock.blocks = newBlock.blocks.map((childBlock: any) =>
+          replaceBlockValues(childBlock, productData, productIndex)
+        );
+      }
+      return newBlock;
+    }
+
     const resolvedValue = getNestedValue(productData, bindingPath);
 
     if (resolvedValue !== undefined) {
@@ -92,6 +169,11 @@ const replaceBlockValues = (
             ? String(resolvedValue)
             : resolvedValue;
       }
+    } else if (newBlock.type === 'image') {
+      // Real data arrived but this binding has no value on it (e.g. a swatch
+      // field the collection endpoint doesn't ship). A broken/placeholder
+      // image is worse than no image, so the clone hides it.
+      newBlock.hidden = true;
     }
   } else if (isPlaceholderMode && newBlock.type === 'image') {
     const placeholderImages = [
@@ -383,6 +465,49 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
   const useInfinite = infinite && hasMultipleSlides;
   const useAutoPlay = autoPlay && hasMultipleSlides;
 
+  // 'overlay' keeps the library's centred side arrows; 'top-right' moves
+  // navigation into a header row above the track (with an optional inline
+  // title), the pattern fashion sliders use. Composition-driven via section
+  // properties, so a brand opts in per section without a renderer fork.
+  const arrowPosition = getResponsiveValue(
+    getConfigEntry('arrow-position'),
+    currentBreakpoint,
+    'overlay'
+  );
+  const sliderTitle =
+    typeof section.properties?.['slider-title'] === 'string'
+      ? section.properties['slider-title']
+      : '';
+  const useTopNav = showArrows && arrowPosition === 'top-right';
+  const carouselRef = React.useRef<Carousel | null>(null);
+
+  const topNavChevron = (direction: 'left' | 'right') => (
+    <svg
+      width="8"
+      height="12"
+      viewBox="0 0 8 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={direction === 'right' ? { transform: 'scaleX(-1)' } : undefined}
+    >
+      <path d="M6.5 1L1.5 6l5 5" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  );
+
+  const topNavButtonStyle: React.CSSProperties = {
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: '2px',
+    color: '#000000',
+    cursor: 'pointer',
+    padding: 0
+  };
+
   const postBlockAction = (
     type: PreviewToEditorMessageType,
     blockId: string,
@@ -418,13 +543,57 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
       )}
       style={sectionStyles}
     >
+      {useTopNav && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: sliderTitle ? 'space-between' : 'flex-end',
+            padding: '16px 14px 16px 24px'
+          }}
+        >
+          {sliderTitle && (
+            <p
+              style={{
+                margin: 0,
+                fontSize: '14px',
+                fontWeight: 400,
+                lineHeight: 1.4,
+                color: '#000000',
+                textTransform: 'uppercase'
+              }}
+            >
+              {sliderTitle}
+            </p>
+          )}
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <button
+              type="button"
+              aria-label="Previous"
+              style={topNavButtonStyle}
+              onClick={() => carouselRef.current?.previous(currentSlidesToSlide)}
+            >
+              {topNavChevron('left')}
+            </button>
+            <button
+              type="button"
+              aria-label="Next"
+              style={topNavButtonStyle}
+              onClick={() => carouselRef.current?.next(currentSlidesToSlide)}
+            >
+              {topNavChevron('right')}
+            </button>
+          </div>
+        </div>
+      )}
       <Carousel
         key={`${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${currentBreakpoint}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
+        ref={carouselRef}
         responsive={carouselResponsive}
         {...(isDesigner ? { slidesToSlide: currentSlidesToSlide } : {})}
         swipeable={true}
         draggable={true}
-        arrows={showArrows}
+        arrows={showArrows && !useTopNav}
         showDots={showDots}
         renderDotsOutside={showDots}
         infinite={useInfinite}

package/src/utils/iterator-utils.ts

@@ -457,7 +457,10 @@ const normalizeCurrencyLabel = (rawCurrency: unknown): string => {
   return normalized;
 };
 
-const getPriceWithCurrency = (value: unknown, currency: unknown): string => {
+export const getPriceWithCurrency = (
+  value: unknown,
+  currency: unknown
+): string => {
   const amount = formatDisplayPrice(value);
   const currencyLabel = normalizeCurrencyLabel(currency);
 
@@ -499,10 +502,15 @@ const buildProductPriceHtml = (
   return currentText;
 };
 
-const isPriceBinding = (dataBinding: string): boolean => {
+export const isPriceBinding = (dataBinding: string): boolean => {
   const path = dataBinding.replace('item.', '');
   return (
-    path === 'active_price.price' || path === 'price' || path === 'retail_price'
+    path === 'active_price.price' ||
+    path === 'price' ||
+    path === 'retail_price' ||
+    // Retail price travels under active_price on v2 payloads; leaving it out
+    // printed "3999.00" beside a formatted "2.999 TL" in the same row.
+    path === 'active_price.retail_price'
   );
 };