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

package/CHANGELOG.md

@@ -1,12 +1,13 @@
 # @akinon/pz-theme
 
-## 2.0.69-beta.0
+## 2.0.69
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.69-beta.0
-  - @akinon/theme-contract@2.0.69-beta.0
+- 877f938: ZERO-4837: Enhance wishlist functionality and styling across components
+- Updated dependencies [877f938]
+  - @akinon/next@2.0.69
+  - @akinon/theme-contract@2.0.69
 
 ## 2.0.68
 

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

package/src/blocks/__tests__/normalize-listing-product.test.ts

@@ -0,0 +1,78 @@
+import { normalizeListingProduct } from '../listing-context';
+
+/**
+ * The favourites grid publishes wishlist entries through this normalizer so a
+ * card designed against a product-grid row binds identically over a
+ * favourites row. These cases pin the fields that card actually needs:
+ * keyed attributes (Renk/Beden rows), the discount chip and the
+ * "Sepette …" basket-offer chip.
+ */
+describe('normalizeListingProduct', () => {
+  const wishlistProduct = {
+    pk: 42,
+    name: 'GANT Erkek Beyaz Regular Fit Bisiklet Yaka T-Shirt',
+    absolute_url: '/p/42',
+    image: '',
+    productimage_set: [{ image: 'https://cdn.example/1.jpg' }],
+    price: '5499.00',
+    retail_price: '7856.00',
+    currency_type: 'try',
+    in_stock: true,
+    attributes: {
+      integration_renk: 'Beyaz',
+      integration_beden: 'S'
+    },
+    attributes_kwargs: {
+      integration_renk: { value: 'Beyaz' },
+      integration_beden: { value: 'S' }
+    },
+    basket_offers: [
+      {
+        pk: 7,
+        label: 'Sepette 2.999 TL',
+        kwargs: { show_benefit_products: false },
+        listing_kwargs: { discounted_total_price: '2999.00' }
+      }
+    ]
+  };
+
+  it('publishes the keyed attributes a Renk/Beden row binds', () => {
+    const row = normalizeListingProduct(wishlistProduct, 0, {
+      locale: 'tr',
+      currency: 'try'
+    });
+
+    expect(row?.attributes?.integration_renk).toBe('Beyaz');
+    expect(row?.attributes?.integration_beden).toBe('S');
+  });
+
+  it('derives the discount chip off the struck retail price', () => {
+    const row = normalizeListingProduct(wishlistProduct, 0, {
+      locale: 'tr',
+      currency: 'try'
+    });
+
+    expect(row?.hasDiscount).toBe(true);
+    expect(row?.discountPercent).toBe(30);
+  });
+
+  it('publishes the basket offer as a bindable label and price', () => {
+    const row = normalizeListingProduct(wishlistProduct, 0, {
+      locale: 'tr',
+      currency: 'try'
+    });
+
+    expect(row?.basketOffers?.[0]?.label).toBe('Sepette 2.999 TL');
+    expect(row?.basketOffers?.[0]?.price).toContain('2.999');
+  });
+
+  it('falls back to the image set when the flat image field is empty', () => {
+    const row = normalizeListingProduct(wishlistProduct, 0, {
+      locale: 'tr',
+      currency: 'try'
+    });
+
+    // The favourites card reads `image || images[0]`.
+    expect(row?.images?.[0]).toBe('https://cdn.example/1.jpg');
+  });
+});

package/src/blocks/add-to-cart-block.tsx

@@ -19,19 +19,20 @@ import {
 
 const DEFAULT_FEEDBACK_TIMEOUT = 2000;
 
-const ALLOWED_ICONS = ['cart', 'bag', 'plus'];
+const ALLOWED_ICONS = ['cart', 'bag', 'plus', 'arrow'];
 const ALLOWED_ICON_POSITIONS = ['before', 'after'];
 
 const ICON_PATHS: Record<string, string> = {
   cart: 'M3 4h2l2.4 10.4a2 2 0 0 0 2 1.6h7.2a2 2 0 0 0 2-1.6L20.5 8H6M9 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z',
   bag: 'M6 8h12l-1 12H7L6 8Zm3 0V6a3 3 0 0 1 6 0v2',
-  plus: 'M12 5v14M5 12h14'
+  plus: 'M12 5v14M5 12h14',
+  arrow: 'M4 12h15M13 6l6 6-6 6'
 };
 
-const CartIcon = ({ name }: { name: string }) => (
+const CartIcon = ({ name, size = 18 }: { name: string; size?: number }) => (
   <svg
-    width="18"
-    height="18"
+    width={size}
+    height={size}
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
@@ -80,7 +81,8 @@ const readAvailableStock = (product: ThemeProduct | null): number | null => {
  *
  * Parts: button, label, icon, row, quantity, quantity-button, quantity-input.
  * Properties: label, addingLabel, addedLabel, errorLabel, outOfStockLabel,
- * fullWidth, quantity, showIcon, icon, iconPosition, hideWhenOutOfStock,
+ * fullWidth, quantity, showIcon, icon, iconSize, iconGap, iconPosition,
+ * hideWhenOutOfStock,
  * feedbackDuration, showQuantitySelector, quantityMin, quantityMax,
  * quantityStep, quantityPosition, decreaseLabel, increaseLabel,
  * decreaseAriaLabel, increaseAriaLabel.
@@ -128,6 +130,16 @@ const AddToCartBlock = ({
   );
   const iconValue = prop('icon', 'cart');
   const icon = ALLOWED_ICONS.includes(iconValue) ? iconValue : 'cart';
+  const iconSizeValue = Number(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 18)
+  );
+  const iconSize =
+    Number.isFinite(iconSizeValue) && iconSizeValue > 0 ? iconSizeValue : 18;
+  const iconGapValue = Number(
+    getResponsiveValue(block.properties?.iconGap, currentBreakpoint, 8)
+  );
+  const iconGap =
+    Number.isFinite(iconGapValue) && iconGapValue >= 0 ? iconGapValue : 8;
   const iconPositionValue = prop('iconPosition', 'before');
   const iconPosition = ALLOWED_ICON_POSITIONS.includes(iconPositionValue)
     ? iconPositionValue
@@ -282,7 +294,7 @@ const AddToCartBlock = ({
       {...partAttrs('icon')}
       style={{ display: 'inline-flex', flex: '0 0 auto' }}
     >
-      <CartIcon name={icon} />
+      <CartIcon name={icon} size={iconSize} />
     </span>
   ) : null;
 
@@ -301,7 +313,7 @@ const AddToCartBlock = ({
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: '8px',
+        gap: `${iconGap}px`,
         width: fullWidth ? '100%' : 'auto',
         padding: 0,
         margin: 0,

package/src/blocks/favourites-grid-block.tsx

@@ -16,7 +16,7 @@ import {
   MOBILE_MEDIA_QUERY_COMPACT,
   TABLET_MEDIA_QUERY_COMPACT
 } from '../utils/breakpoints';
-import { formatMoney, parseAmount } from './commerce-format';
+import { normalizeListingProduct } from './listing-context';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
@@ -156,6 +156,8 @@ const FavouritesGridBlock = ({
   const outOfStockLabel = text('outOfStockLabel', 'Out of Stock');
   const removeLabel = text('removeLabel', 'Remove from favourites');
   const emptyLabel = text('emptyLabel', '');
+  // Empty keeps the CSS-variable fallback every published grid renders with.
+  const gridGap = text('gridGap', '').trim();
   const removeIcon = REMOVE_ICONS[text('removeIcon', 'x')] || REMOVE_ICONS.x;
   const imageRatio = text('imageRatio', 'auto');
   const rawNameLines = Math.round(
@@ -218,40 +220,42 @@ const FavouritesGridBlock = ({
     }
   };
 
-  /** Everything the card (and a designer's own layout) reads off one entry. */
+  /**
+   * Everything the card (and a designer's own layout) reads off one entry.
+   *
+   * The product side is the listing row model, so a card designed against the
+   * product grid binds identically here — `attributes.*` (Renk/Beden rows),
+   * `discountPercent`, `basketOffers` ("Sepette …" chips), `colors`. On top of
+   * it ride the wishlist-only fields every published favourites card already
+   * binds: `pk` is the wishlist ENTRY (what remove calls), `productPk` the
+   * product behind it, `href` the alias `url` has always had.
+   */
   const describe = (favourite: FavouriteLike, index: number) => {
     const product = favourite.product as FavouriteProductLike;
-    const name = product.name || '';
-    const href = product.absolute_url || '';
-    const image = product.image || product.productimage_set?.[0]?.image || '';
-    // Commerce sends the currency per product; the active currency is only
-    // the fallback for payloads that omit it.
-    const currency = product.currency_type || localeCurrency;
-    const price = formatMoney(product.price, { locale, currency });
-    const retailPrice = formatMoney(product.retail_price, {
+    const normalized = normalizeListingProduct(product, index, {
       locale,
-      currency
+      // The normalizer prefers the product's own currency_type; the active
+      // currency is only the fallback for payloads that omit it.
+      currency: localeCurrency
     });
-    // Parsed with the shared parser, not Number(): "1.299,90" is NaN to
-    // Number() and would silently drop the discount flag.
-    const numericPrice = parseAmount(product.price);
-    const numericRetail = parseAmount(product.retail_price);
-    const hasDiscount =
-      numericPrice !== null &&
-      numericRetail !== null &&
-      numericRetail > numericPrice;
+    const href = normalized?.url && normalized.url !== '#'
+      ? normalized.url
+      : product.absolute_url || '';
 
     return {
+      ...(normalized ?? {}),
       key: String(favourite.pk ?? product.pk ?? index),
       pk: favourite.pk ?? '',
       productPk: product.pk ?? '',
-      name,
+      name: normalized?.name || product.name || '',
       url: href,
       href,
-      image,
-      price,
-      retailPrice,
-      hasDiscount,
+      image: normalized?.image || normalized?.images?.[0] || '',
+      price: normalized?.price || '',
+      retailPrice: normalized?.retailPrice || '',
+      hasDiscount: normalized?.hasDiscount ?? false,
+      // Deliberately NOT the normalizer's tri-state stock: unknown stock must
+      // not disable the add-to-cart CTA — commerce still validates on add.
       inStock: isInStock(product)
     };
   };
@@ -346,7 +350,10 @@ const FavouritesGridBlock = ({
       data-favourites-grid-id={gridId}
       aria-busy={isBusy}
       {...partAttrs('list')}
-      style={{ display: 'grid', gap: 'var(--favourites-grid-gap, 16px)' }}
+      style={{
+        display: 'grid',
+        gap: gridGap || 'var(--favourites-grid-gap, 16px)'
+      }}
     >
       <style>
         {`[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +

package/src/blocks/listing-context.ts

@@ -671,6 +671,19 @@ const normalizeProduct = (
   };
 };
 
+/**
+ * The row model above, for lists that are not listings. The favourites grid
+ * publishes its wishlist entries through this so a card designed against a
+ * product-grid row (`attributes.*`, `discountPercent`, `basketOffers`,
+ * `colors`) binds identically over a favourites row — one card design, both
+ * grids.
+ */
+export const normalizeListingProduct = (
+  entry: unknown,
+  index: number,
+  options: ListingLocalizationOptions
+): ListingProduct | null => normalizeProduct(entry, index, options);
+
 const normalizeFacet = (entry: unknown, index: number): ListingFacet | null => {
   const facet = toRecord(entry);
   const data = toRecord(facet.data);

package/src/chrome/__tests__/live-wishlist-page-context.test.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { useThemePageContext } from '../../theme-page-context';
+import { evaluateVisibilityRules } from '../../utils/visibility-rules';
+
+const useGetFavoritesQuery = jest.fn();
+
+jest.mock('@akinon/next/data/client/wishlist', () => ({
+  useGetFavoritesQuery: (...args: unknown[]) => useGetFavoritesQuery(...args)
+}));
+
+const useSession = jest.fn();
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => useSession()
+}));
+
+// Imported after the mocks so the provider picks them up.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const {
+  LiveWishlistPageContext
+} = require('../live-wishlist-page-context') as typeof import('../live-wishlist-page-context');
+
+/**
+ * Stands in for the section filter: the same rule a designer authors on the
+ * "no favourites yet" sections, evaluated against what the provider publishes.
+ */
+const EmptyStateProbe = () => {
+  const pageContext = useThemePageContext();
+  const wishlist = (pageContext as { wishlist?: unknown } | null)?.wishlist as
+    | { count: number; isEmpty: boolean }
+    | undefined;
+
+  const showsEmptyState = evaluateVisibilityRules(
+    {
+      enabled: true,
+      dataConditions: [
+        { path: 'wishlist.isEmpty', operator: 'equals', value: 'true' }
+      ]
+    },
+    {
+      authState: 'authenticated',
+      breakpoint: 'desktop',
+      locale: 'tr',
+      currency: 'TRY',
+      pathname: '/account/favourite-products',
+      pageContext
+    }
+  );
+
+  return (
+    <span data-testid="probe">
+      {wishlist ? `${wishlist.count}:${wishlist.isEmpty}` : 'unknown'}:
+      {showsEmptyState ? 'empty-state' : 'held'}
+    </span>
+  );
+};
+
+describe('LiveWishlistPageContext', () => {
+  beforeEach(() => {
+    useGetFavoritesQuery.mockReset();
+    useSession.mockReset();
+  });
+
+  it('publishes nothing while the session is still resolving', () => {
+    useSession.mockReturnValue({ status: 'loading' });
+    useGetFavoritesQuery.mockReturnValue({ data: undefined, isSuccess: false });
+
+    render(
+      <LiveWishlistPageContext>
+        <EmptyStateProbe />
+      </LiveWishlistPageContext>
+    );
+
+    // Conditions fail closed on a missing path: the empty-state sections hold
+    // back rather than flash before the wishlist is known.
+    expect(screen.getByTestId('probe')).toHaveTextContent('unknown:held');
+  });
+
+  it('resolves guests to an empty wishlist without touching the endpoint', () => {
+    useSession.mockReturnValue({ status: 'unauthenticated' });
+    useGetFavoritesQuery.mockReturnValue({ data: undefined, isSuccess: false });
+
+    render(
+      <LiveWishlistPageContext>
+        <EmptyStateProbe />
+      </LiveWishlistPageContext>
+    );
+
+    expect(screen.getByTestId('probe')).toHaveTextContent('0:true:empty-state');
+    expect(useGetFavoritesQuery).toHaveBeenCalledWith(
+      { limit: 1, page: 1 },
+      { skip: true }
+    );
+  });
+
+  it('holds back until the favourites query answers', () => {
+    useSession.mockReturnValue({ status: 'authenticated' });
+    useGetFavoritesQuery.mockReturnValue({ data: undefined, isSuccess: false });
+
+    render(
+      <LiveWishlistPageContext>
+        <EmptyStateProbe />
+      </LiveWishlistPageContext>
+    );
+
+    expect(screen.getByTestId('probe')).toHaveTextContent('unknown:held');
+  });
+
+  it('publishes the live count and hides the empty state when favourites exist', () => {
+    useSession.mockReturnValue({ status: 'authenticated' });
+    useGetFavoritesQuery.mockReturnValue({
+      data: { count: 7, results: [] },
+      isSuccess: true
+    });
+
+    render(
+      <LiveWishlistPageContext>
+        <EmptyStateProbe />
+      </LiveWishlistPageContext>
+    );
+
+    expect(screen.getByTestId('probe')).toHaveTextContent('7:false:held');
+  });
+
+  it('shows the empty state when the last favourite is removed', () => {
+    useSession.mockReturnValue({ status: 'authenticated' });
+    useGetFavoritesQuery.mockReturnValue({
+      data: { count: 1, results: [] },
+      isSuccess: true
+    });
+
+    const { rerender } = render(
+      <LiveWishlistPageContext>
+        <EmptyStateProbe />
+      </LiveWishlistPageContext>
+    );
+    expect(screen.getByTestId('probe')).toHaveTextContent('1:false:held');
+
+    // What the RTK cache write after the 'Favorite' tag invalidation looks
+    // like from here.
+    useGetFavoritesQuery.mockReturnValue({
+      data: { count: 0, results: [] },
+      isSuccess: true
+    });
+    rerender(
+      <LiveWishlistPageContext>
+        <EmptyStateProbe />
+      </LiveWishlistPageContext>
+    );
+
+    expect(screen.getByTestId('probe')).toHaveTextContent('0:true:empty-state');
+  });
+});

package/src/chrome/live-wishlist-page-context.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { PropsWithChildren, useMemo } from 'react';
+import { useSession } from 'next-auth/react';
+import { useGetFavoritesQuery } from '@akinon/next/data/client/wishlist';
+
+import { ThemePageContextProvider } from '../theme-page-context';
+
+/**
+ * Publishes the shopper's wishlist summary as page context for the slot below,
+ * so a composed favourites screen can split into an empty and a filled state
+ * with visibility rules: `wishlist.isEmpty equals true` on the "no favourites
+ * yet" sections, `wishlist.count gt 0` on the grid section.
+ *
+ * The wishlist is session-scoped and has no server data module, so — like
+ * LiveBasketPageContext — this subscribes the RTK Query cache the favourites
+ * blocks already invalidate through the 'Favorite' tag: removing the last
+ * favourite refetches this entry and the empty state appears without a reload.
+ * Only the count is read, so the query asks for a single row.
+ *
+ * The value stays null until the answer is known. Visibility data conditions
+ * fail closed on a missing path, so conditional sections hold back for that
+ * first paint instead of flashing the wrong state. Guests resolve immediately:
+ * no session means no favourites — and the account layout redirects them
+ * anyway, so this only decides what renders during that redirect.
+ */
+export const LiveWishlistPageContext = ({ children }: PropsWithChildren) => {
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+
+  const { data, isSuccess } = useGetFavoritesQuery(
+    { limit: 1, page: 1 },
+    { skip: !isAuthenticated }
+  );
+
+  const value = useMemo(() => {
+    if (status === 'loading') return null;
+
+    if (!isAuthenticated) {
+      return { wishlist: { count: 0, isEmpty: true } };
+    }
+
+    if (!isSuccess) return null;
+
+    const count = Number(data?.count) || 0;
+    return { wishlist: { count, isEmpty: count === 0 } };
+  }, [status, isAuthenticated, isSuccess, data]);
+
+  return (
+    <ThemePageContextProvider value={value}>
+      {children}
+    </ThemePageContextProvider>
+  );
+};

package/src/index.ts

@@ -38,6 +38,7 @@ export {
 } from './chrome/scroll-state';
 export { PreviewAuthStateReporter } from './chrome/preview-auth-state';
 export { LiveBasketPageContext } from './chrome/live-basket-page-context';
+export { LiveWishlistPageContext } from './chrome/live-wishlist-page-context';
 export {
   LiveOrderSuccessPageContext,
   LiveAccountOrderPageContext

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

@@ -478,6 +478,31 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
     typeof section.properties?.['slider-title'] === 'string'
       ? section.properties['slider-title']
       : '';
+  // Title styling is composition-driven with the values the title has always
+  // rendered with as defaults, so published sliders keep their exact look.
+  const titleColor = String(
+    getResponsiveValue(getConfigEntry('title-color'), currentBreakpoint, '') ||
+      '#000000'
+  );
+  const titleSizeRaw = Number(
+    getResponsiveValue(getConfigEntry('title-size'), currentBreakpoint, 14)
+  );
+  const titleSize =
+    Number.isFinite(titleSizeRaw) && titleSizeRaw > 0 ? titleSizeRaw : 14;
+  const titleWeight = String(
+    getResponsiveValue(getConfigEntry('title-weight'), currentBreakpoint, '') ||
+      '400'
+  );
+  const titleFont = String(
+    getResponsiveValue(getConfigEntry('title-font'), currentBreakpoint, '') || ''
+  ).trim();
+  const titleTransform = String(
+    getResponsiveValue(
+      getConfigEntry('title-transform'),
+      currentBreakpoint,
+      ''
+    ) || 'uppercase'
+  );
   const useTopNav = showArrows && arrowPosition === 'top-right';
   const carouselRef = React.useRef<Carousel | null>(null);
 
@@ -554,13 +579,16 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
         >
           {sliderTitle && (
             <p
+              data-slider-title=""
               style={{
                 margin: 0,
-                fontSize: '14px',
-                fontWeight: 400,
+                fontSize: `${titleSize}px`,
+                fontWeight: titleWeight,
                 lineHeight: 1.4,
-                color: '#000000',
-                textTransform: 'uppercase'
+                color: titleColor,
+                textTransform:
+                  titleTransform as React.CSSProperties['textTransform'],
+                ...(titleFont ? { fontFamily: titleFont } : null)
               }}
             >
               {sliderTitle}