@akinon/pz-theme 2.0.81-rc.0 → 2.0.81

package/CHANGELOG.md

@@ -1,38 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.81-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.81-rc.0
-  - @akinon/theme-contract@2.0.81-rc.0
+## 2.0.81
+
+### Patch Changes
+
+- ab131f37: ZERO-4835: add loyalty slug, favourites source and slider peek
+  - @akinon/next@2.0.81
+  - @akinon/theme-contract@2.0.81
 
 ## 2.0.80
 

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.81-rc.0",
+  "version": "2.0.81",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.81-rc.0",
+    "@akinon/next": "2.0.81",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.81-rc.0",
+    "@akinon/theme-contract": "2.0.81",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.81-rc.0",
+    "@akinon/next": "2.0.81",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/account-slot-coverage.test.ts

@@ -42,7 +42,8 @@ const EXPECTED_MOUNTS: Record<string, string> = {
 // that is the cue to mount the slot and shrink this list.
 const UNMOUNTED_ACCOUNT_KEYS: Record<string, string> = {
   accountNotifications: 'notification-settings',
-  accountStockAlerts: 'stock-waiting-products'
+  accountStockAlerts: 'stock-waiting-products',
+  accountLoyalty: 'loyalty'
 };
 
 const getMountableAccountKeys = () =>

package/src/blocks/__tests__/product-recommendations-block.test.tsx

@@ -17,6 +17,7 @@ let mockWidget: Record<string, unknown> | undefined;
 let mockDetail: Record<string, unknown> | undefined;
 /** Every payload that reached the basket endpoint, in order. */
 const mockAdds: Record<string, unknown>[] = [];
+let mockFavourites: Record<string, unknown> | undefined;
 
 /**
  * Every `@akinon/next/data/client/*` subpath is folded onto one mock module by
@@ -44,7 +45,12 @@ function mockDataClient() {
         return { unwrap: () => Promise.resolve({}) };
       },
       { isLoading: false }
-    ]
+    ],
+    useGetFavoritesQuery: (_args: unknown, options?: { skip?: boolean }) => ({
+      data: options?.skip ? undefined : mockFavourites,
+      isLoading: false,
+      isFetching: false
+    })
   };
 }
 
@@ -869,3 +875,83 @@ describe('section source', () => {
     expect(container.textContent).toContain('Source panel');
   });
 });
+
+describe('struck list price and discount badge', () => {
+  const DISCOUNTED = {
+    pk: 91,
+    name: 'Polo',
+    absolute_url: '/polo',
+    price: '2999',
+    retail_price: '3999',
+    discount_ratio: 25.01,
+    currency_type: 'TRY'
+  };
+
+  afterEach(() => {
+    mockWidget = undefined;
+  });
+
+  it('keeps the single price span while both toggles are off', () => {
+    mockWidget = { products: [DISCOUNTED] };
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock {...props({ collectionId: 'c1' })} />
+    );
+
+    expect(container.querySelector('[data-product-card-price]')).toBeTruthy();
+    expect(container.querySelector('[data-product-card-price-row]')).toBeNull();
+    expect(
+      container.querySelector('[data-product-card-retail-price]')
+    ).toBeNull();
+    expect(container.querySelector('[data-product-card-badge]')).toBeNull();
+  });
+
+  it('draws the struck price, the discounted state and the -%N chip', () => {
+    mockWidget = { products: [DISCOUNTED] };
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({
+          collectionId: 'c1',
+          showRetailPrice: true,
+          showDiscountBadge: true
+        })}
+      />
+    );
+
+    const retail = container.querySelector(
+      '[data-product-card-retail-price]'
+    ) as HTMLElement;
+    const price = container.querySelector(
+      '[data-product-card-price]'
+    ) as HTMLElement;
+    const badge = container.querySelector(
+      '[data-product-card-badge]'
+    ) as HTMLElement;
+
+    expect(retail.tagName).toBe('S');
+    expect(retail.textContent).toContain('3,999');
+    expect(price.getAttribute('data-state')).toContain('discounted');
+    expect(badge.textContent).toBe('-%25');
+  });
+
+  it('hides the struck price and the chip for a product without a discount', () => {
+    mockWidget = { products: [CARD] };
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({
+          collectionId: 'c1',
+          showRetailPrice: true,
+          showDiscountBadge: true
+        })}
+      />
+    );
+
+    expect(
+      container.querySelector('[data-product-card-retail-price]')
+    ).toBeNull();
+    expect(container.querySelector('[data-product-card-badge]')).toBeNull();
+    const price = container.querySelector(
+      '[data-product-card-price]'
+    ) as HTMLElement;
+    expect(price.getAttribute('data-state') || '').not.toContain('discounted');
+  });
+});

package/src/blocks/product-recommendations-block.tsx

@@ -2,7 +2,9 @@
 
 import React, { useRef } from 'react';
 import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
 import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { useGetFavoritesQuery } from '@akinon/next/data/client/wishlist';
 import {
   useAddProductMutation,
   useGetProductByPkQuery
@@ -21,6 +23,7 @@ import { DESIGNER_SAMPLE_PRODUCT } from './item-template-utils';
 import {
   formatListingPrice,
   listingPlaceholderStyle,
+  normalizeListingProduct,
   readToggle
 } from './listing-context';
 import {
@@ -60,7 +63,7 @@ const ALLOWED_DECIMALS = ['always', 'auto', 'never'];
 const ALLOWED_CURRENCY_DISPLAYS = ['', 'symbol', 'code', 'custom', 'none'];
 const ALLOWED_CURRENCY_POSITIONS = ['', 'before', 'after'];
 /** `collection` is the source the block has always had, so it is the default. */
-const ALLOWED_SOURCES = ['collection', 'recently-viewed', 'section'];
+const ALLOWED_SOURCES = ['collection', 'recently-viewed', 'section', 'favourites'];
 const ALLOWED_QUICK_VIEW_ICONS = ['eye', 'plus', 'none'];
 
 const DEFAULT_QUICK_VIEW_FEEDBACK = 2000;
@@ -207,6 +210,9 @@ interface RecommendationCard {
   url: string;
   image: string;
   price: string;
+  retailPrice?: string;
+  hasDiscount?: boolean;
+  discountPercent?: number;
 }
 
 /**
@@ -312,6 +318,7 @@ const ProductRecommendationsBlock = ({
   // collection picked in the editor's Source panel), so the strip needs no
   // collection id of its own.
   const isSectionSource = source === 'section';
+  const isFavourites = source === 'favourites';
   const sectionData = useThemeSectionData();
 
   const title = String(
@@ -362,6 +369,16 @@ const ProductRecommendationsBlock = ({
     currentBreakpoint,
     true
   );
+  const showRetailPrice = readToggle(
+    block.properties?.showRetailPrice,
+    currentBreakpoint,
+    false
+  );
+  const showDiscountBadge = readToggle(
+    block.properties?.showDiscountBadge,
+    currentBreakpoint,
+    false
+  );
   const imageRatioValue = prop('imageRatio', '');
   const imageRatio = ALLOWED_IMAGE_RATIOS.includes(imageRatioValue)
     ? imageRatioValue
@@ -514,9 +531,15 @@ const ProductRecommendationsBlock = ({
   // is what prevents a request before the author has named a collection — and
   // now also a request for a collection the recently-viewed source never uses.
   const { data, isFetching } = useGetWidgetQuery(collectionId, {
-    skip: !collectionId || isRecentlyViewed || isSectionSource
+    skip: !collectionId || isRecentlyViewed || isSectionSource || isFavourites
   });
 
+  const { status: sessionStatus } = useSession();
+  const { data: favouritesData } = useGetFavoritesQuery(
+    { limit: 100, page: 1 },
+    { skip: !isFavourites || sessionStatus !== 'authenticated' }
+  );
+
   // The arrows report where the track stands: the previous arrow is disabled
   // at the start and the next one at the end, re-read on scroll and resize.
   // In the designer both stay enabled so the author can style them.
@@ -539,7 +562,7 @@ const ProductRecommendationsBlock = ({
       track.removeEventListener('scroll', update);
       window.removeEventListener('resize', update);
     };
-  }, [showArrows, isDesigner, data, recentEntries, sectionData]);
+  }, [showArrows, isDesigner, data, recentEntries, sectionData, favouritesData]);
 
   /**
    * The overlay's own request. A row carries a summary only, so the variant
@@ -674,6 +697,35 @@ const ProductRecommendationsBlock = ({
     []
   );
 
+  const discountFields = (
+    priceRaw: unknown,
+    retailRaw: unknown,
+    ratioRaw: unknown,
+    currency: string
+  ): Pick<
+    RecommendationCard,
+    'hasDiscount' | 'retailPrice' | 'discountPercent'
+  > => {
+    const priceValue = parsePriceValue(priceRaw);
+    const retailValue = parsePriceValue(retailRaw);
+    const hasDiscount =
+      priceValue !== null && retailValue !== null && retailValue > priceValue;
+
+    if (!hasDiscount) return { hasDiscount: false };
+
+    const ratio = Number(ratioRaw);
+    const discountPercent =
+      Number.isFinite(ratio) && ratio > 0
+        ? Math.round(ratio)
+        : Math.round((1 - (priceValue as number) / (retailValue as number)) * 100);
+
+    return {
+      hasDiscount: true,
+      retailPrice: formatListingPrice(retailRaw, currency, locale, money),
+      discountPercent
+    };
+  };
+
   const collectionProducts: RecommendationCard[] = (
     (isSectionSource
       ? sectionData?.items || []
@@ -714,6 +766,12 @@ const ProductRecommendationsBlock = ({
           currency,
           locale,
           money
+        ),
+        ...discountFields(
+          entry.price ?? activePrice.price,
+          entry.retail_price ?? activePrice.retail_price,
+          entry.discount_ratio,
+          currency
         )
       };
     })
@@ -744,8 +802,64 @@ const ProductRecommendationsBlock = ({
       )
     }));
 
+  const favouriteCards: RecommendationCard[] = (
+    (favouritesData as
+      | {
+          results?: Array<{
+            pk?: number;
+            product?: Record<string, unknown> | null;
+          }>;
+        }
+      | undefined)?.results ?? []
+  )
+    .filter((favourite) => Boolean(favourite.product))
+    .slice(0, limit)
+    .map((favourite, index) => {
+      const product = favourite.product as Record<string, unknown>;
+      const normalized = normalizeListingProduct(product, index, {
+        locale,
+        currency: localeCurrency
+      });
+      const activePrice = (product.active_price ?? {}) as Record<
+        string,
+        unknown
+      >;
+      const currency =
+        toText(product.currency_type) ||
+        toText(activePrice.currency_type) ||
+        localeCurrency ||
+        '';
+      const url =
+        normalized?.url && normalized.url !== '#'
+          ? normalized.url
+          : toText(product.absolute_url);
+
+      return {
+        ...(normalized ?? {}),
+        key: toText(favourite.pk ?? product.pk) || `favourite-${index}`,
+        pk: toProductPk(product.pk),
+        name: normalized?.name || toText(product.name),
+        url: url || '#',
+        image: normalized?.image || normalized?.images?.[0] || '',
+        price: formatListingPrice(
+          product.price ?? activePrice.price,
+          currency,
+          locale,
+          money
+        ),
+        ...discountFields(
+          product.price ?? activePrice.price,
+          product.retail_price ?? activePrice.retail_price,
+          product.discount_ratio,
+          currency
+        )
+      };
+    });
+
   const products = isRecentlyViewed
     ? recentlyViewedProducts
+    : isFavourites
+    ? favouriteCards
     : collectionProducts;
 
   /**
@@ -757,7 +871,7 @@ const ProductRecommendationsBlock = ({
    */
   const designerRows: RecommendationCard[] | null =
     isDesigner &&
-    isRecentlyViewed &&
+    (isRecentlyViewed || isFavourites) &&
     products.length === 0 &&
     // An authored card layout already draws its own placeholder rows
     // (`designerPlaceholderCount`), so adding built-in ones would double them.
@@ -765,8 +879,8 @@ const ProductRecommendationsBlock = ({
       ? Array.from(
           { length: Math.min(limit, columnsDesktop + 1) },
           (_, index) => ({
-            key: `recently-viewed-placeholder-${index}`,
-            name: recentlyViewedEmptyLabel,
+            key: `${source}-placeholder-${index}`,
+            name: isFavourites ? 'Favourites' : recentlyViewedEmptyLabel,
             url: '#',
             image: '',
             price: ''
@@ -1226,11 +1340,57 @@ const ProductRecommendationsBlock = ({
                 </span>
               )}
 
-              {showPrice && product.price && (
-                <span data-product-card-price="" {...partAttrs('card-price')}>
-                  {product.price}
-                </span>
-              )}
+              {showPrice &&
+                product.price &&
+                !(showRetailPrice || showDiscountBadge) && (
+                  <span data-product-card-price="" {...partAttrs('card-price')}>
+                    {product.price}
+                  </span>
+                )}
+
+              {showPrice &&
+                product.price &&
+                (showRetailPrice || showDiscountBadge) && (
+                  <span
+                    data-product-card-price-row=""
+                    {...partAttrs('card-price-row')}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      columnGap: '9px',
+                      flexWrap: 'wrap'
+                    }}
+                  >
+                    {showRetailPrice &&
+                      product.hasDiscount &&
+                      product.retailPrice && (
+                        <s
+                          data-product-card-retail-price=""
+                          {...partAttrs('card-retail-price')}
+                        >
+                          {product.retailPrice}
+                        </s>
+                      )}
+                    <span
+                      data-product-card-price=""
+                      {...partAttrs('card-price', {
+                        discounted: Boolean(product.hasDiscount)
+                      })}
+                    >
+                      {product.price}
+                    </span>
+                    {showDiscountBadge &&
+                      product.hasDiscount &&
+                      product.discountPercent !== undefined && (
+                        <span
+                          data-product-card-badge=""
+                          {...partAttrs('card-badge')}
+                        >
+                          {`-%${product.discountPercent}`}
+                        </span>
+                      )}
+                  </span>
+                )}
             </NextLink>
             );
 

package/src/blocks/slider-block.tsx

@@ -107,14 +107,24 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const desktopSlides = clampNumber(slidesConfig.desktop, 1, 8);
   const mobileSlides = clampNumber(slidesConfig.mobile, 1, 8);
 
+  const slidePeek = getConfigEntry('slide-peek');
+  const desktopPeek = parseNumber(
+    getResponsiveValue(slidePeek, 'desktop', 0),
+    0
+  );
+  const mobilePeek = parseNumber(getResponsiveValue(slidePeek, 'mobile', 0), 0);
+  const partialVisible = desktopPeek > 0 || mobilePeek > 0;
+
   const carouselResponsive = {
     desktop: {
       breakpoint: { max: 4000, min: 768 },
-      items: desktopItems
+      items: desktopItems,
+      ...(desktopPeek > 0 ? { partialVisibilityGutter: desktopPeek } : {})
     },
     mobile: {
       breakpoint: { max: 768, min: 0 },
-      items: mobileItems
+      items: mobileItems,
+      ...(mobilePeek > 0 ? { partialVisibilityGutter: mobilePeek } : {})
     }
   };
 
@@ -473,6 +483,12 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
         : undefined
     );
 
+  const arrowsOutside =
+    leftArrowButtonStyle.top !== undefined ||
+    leftArrowButtonStyle.bottom !== undefined ||
+    rightArrowButtonStyle.top !== undefined ||
+    rightArrowButtonStyle.bottom !== undefined;
+
   const handleLeftArrowClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -590,10 +606,11 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           ref={carouselRef}
           key={`${desktopItems}-${mobileItems}-${desktopSlides}-${mobileSlides}-${visibleCount}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
           responsive={carouselResponsive}
+          partialVisible={partialVisible}
           slidesToSlide={currentSlidesToSlide}
           swipeable={true}
           draggable={true}
-          arrows={isDesigner ? false : Boolean(showArrows)}
+          arrows={isDesigner ? false : Boolean(showArrows) && !arrowsOutside}
           showDots={Boolean(showDots)}
           renderDotsOutside={Boolean(showDots)}
           infinite={Boolean(useInfinite)}
@@ -604,10 +621,14 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           containerClass="slider-carousel"
           dotListClass="slider-dots"
           customLeftArrow={
-            !isDesigner && showArrows ? <CustomLeftArrow /> : undefined
+            !isDesigner && showArrows && !arrowsOutside ? (
+              <CustomLeftArrow />
+            ) : undefined
           }
           customRightArrow={
-            !isDesigner && showArrows ? <CustomRightArrow /> : undefined
+            !isDesigner && showArrows && !arrowsOutside ? (
+              <CustomRightArrow />
+            ) : undefined
           }
         >
           {sortedBlocks.map((childBlock, index) => {
@@ -652,7 +673,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           })}
         </Carousel>
 
-        {isDesigner &&
+        {(isDesigner || arrowsOutside) &&
         showArrows &&
         sortedBlocks.length > 0 &&
         leftArrowIconBlock &&

package/src/chrome/placeholder-slugs.ts

@@ -34,6 +34,7 @@ export const PLACEHOLDER_SLUGS = {
   accountChangePassword: 'account-change-password-body',
   accountChangeEmail: 'account-change-email-body',
   accountCoupons: 'account-coupons-body',
+  accountLoyalty: 'account-loyalty-body',
   accountFavourites: 'account-favourites-body',
   accountFaq: 'account-faq-content',
   accountContact: 'account-contact-body',

package/src/chrome/route-slug.ts

@@ -35,6 +35,7 @@ const DEFAULT_RULES: RouteSlugRule[] = [
   [/^\/account\/change-password(\/|$)/, PLACEHOLDER_SLUGS.accountChangePassword],
   [/^\/account\/change-email(\/|$)/, PLACEHOLDER_SLUGS.accountChangeEmail],
   [/^\/account\/coupons(\/|$)/, PLACEHOLDER_SLUGS.accountCoupons],
+  [/^\/account\/loyalty(\/|$)/, PLACEHOLDER_SLUGS.accountLoyalty],
   [
     /^\/account\/(favourite-products|favorite-products|favourites|favorites|wishlist)(\/|$)/,
     PLACEHOLDER_SLUGS.accountFavourites
@@ -127,6 +128,7 @@ const PAGE_MOUNTED_SLUGS = new Set<string>([
   PLACEHOLDER_SLUGS.accountChangePassword,
   PLACEHOLDER_SLUGS.accountChangeEmail,
   PLACEHOLDER_SLUGS.accountCoupons,
+  PLACEHOLDER_SLUGS.accountLoyalty,
   PLACEHOLDER_SLUGS.accountFavourites,
   PLACEHOLDER_SLUGS.accountStockAlerts,
   PLACEHOLDER_SLUGS.accountNotifications,