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

package/src/blocks/__tests__/basket-line-price.test.tsx

@@ -0,0 +1,227 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import BasketItemsBlock from '../basket-items-block';
+
+/**
+ * The basket page redesign shows three kinds of line price: the plain unit
+ * price, a struck retail figure with the sale price and a "-30%" badge, and
+ * the undiscounted price with an "in basket: 2.999 TL" badge when a basket
+ * campaign cut the line. It also puts a wishlist toggle in the picture's
+ * corner. All of it is opt-in; the default row is the single price line.
+ */
+let sessionStatus = 'authenticated';
+let favoritesPayload: unknown = { results: [] };
+const addFavorite = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+const removeFavorite = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+
+const money = {
+  decimals: 'never',
+  currencyDisplay: 'custom',
+  currencyText: 'TL',
+  currencyPosition: 'after'
+};
+
+const plainLine = {
+  id: 1,
+  quantity: 1,
+  price: '5499.00',
+  retail_price: '5499.00',
+  unit_price: '5499.00',
+  total_amount: '5499.00',
+  discount_amount: '0.00',
+  currency_type: 'try',
+  attributes: {},
+  product: {
+    pk: 1001,
+    name: 'Gömlek',
+    absolute_url: '/gomlek/',
+    price: '5499.00',
+    retail_price: '5499.00',
+    productimage_set: [{ image: '/gomlek.jpg' }]
+  }
+};
+
+const discountedLine = {
+  ...plainLine,
+  id: 2,
+  price: '3849.00',
+  unit_price: '3849.00',
+  total_amount: '3849.00',
+  retail_price: '5499.00',
+  product: { ...plainLine.product, pk: 1002, price: '3849.00' }
+};
+
+const basketDiscountLine = {
+  ...plainLine,
+  id: 3,
+  quantity: 2,
+  unit_price: '2999.00',
+  total_amount: '5998.00',
+  discount_amount: '5000.00',
+  product: { ...plainLine.product, pk: 1003 }
+};
+
+let basketData: unknown = { basketitem_set: [plainLine] };
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ data: null, status: sessionStatus })
+}));
+
+jest.mock('@akinon/next/redux/hooks', () => ({
+  __esModule: true,
+  useAppSelector: () => undefined,
+  useAppDispatch: () => jest.fn()
+}));
+
+// Every `@akinon/next/data/client/*` subpath maps to the same mock file, so
+// one factory has to serve the basket and the wishlist client alike.
+jest.mock('@akinon/next/data/client/basket', () => ({
+  __esModule: true,
+  useGetBasketQuery: () => ({ data: basketData, isLoading: false }),
+  useUpdateQuantityMutation: () => [jest.fn(), { isLoading: false }],
+  useGetFavoritesQuery: (_arg: unknown, options?: { skip?: boolean }) => ({
+    data: options?.skip ? undefined : favoritesPayload,
+    isLoading: false
+  }),
+  useAddFavoriteMutation: () => [addFavorite, { isLoading: false }],
+  useRemoveFavoriteMutation: () => [removeFavorite, { isLoading: false }]
+}));
+
+const renderLines = (properties: Record<string, unknown> = {}) =>
+  render(
+    <BasketItemsBlock
+      block={{
+        id: 'basket-items-1',
+        type: 'basket-items',
+        properties,
+        styles: {},
+        blocks: []
+      }}
+      placeholderId="p1"
+      sectionId="s1"
+      isDesigner={false}
+    />
+  );
+
+const text = (root: ParentNode, part: string) =>
+  root.querySelector(`[data-part="${part}"]`)?.textContent ?? null;
+
+beforeEach(() => {
+  sessionStatus = 'authenticated';
+  favoritesPayload = { results: [] };
+  basketData = { basketitem_set: [plainLine] };
+  addFavorite.mockClear();
+  removeFavorite.mockClear();
+});
+
+describe('basket-items price extras', () => {
+  it('keeps the single price line by default', () => {
+    basketData = { basketitem_set: [discountedLine] };
+    const { container } = renderLines(money);
+
+    expect(container.querySelector('[data-part="price-row"]')).toBeNull();
+    expect(container.querySelector('[data-part="retail-price"]')).toBeNull();
+    expect(text(container, 'price')).toBe('3,849 TL');
+  });
+
+  it('strikes the retail figure and badges the cut on a discounted line', () => {
+    basketData = { basketitem_set: [discountedLine] };
+    const { container } = renderLines({
+      ...money,
+      showRetailPrice: true,
+      showDiscountBadge: true,
+      discountBadgeFormat: '-%{percent}'
+    });
+
+    expect(text(container, 'retail-price')).toBe('5,499 TL');
+    const price = container.querySelector('[data-part="price"]');
+    expect(price?.textContent).toBe('3,849 TL');
+    expect(price?.getAttribute('data-state')).toBe('selected');
+    expect(text(container, 'discount-badge')).toBe('-%30');
+  });
+
+  it('draws nothing extra on a line priced at retail', () => {
+    const { container } = renderLines({
+      ...money,
+      showRetailPrice: true,
+      showDiscountBadge: true
+    });
+
+    expect(container.querySelector('[data-part="retail-price"]')).toBeNull();
+    expect(container.querySelector('[data-part="discount-badge"]')).toBeNull();
+    expect(container.querySelector('[data-part="price"]')?.getAttribute('data-state')).toBeNull();
+    expect(text(container, 'price')).toBe('5,499 TL');
+  });
+
+  it('shows the undiscounted price with the in-basket figure when a campaign cut the line', () => {
+    basketData = { basketitem_set: [basketDiscountLine] };
+    const { container } = renderLines({
+      ...money,
+      showBasketDiscount: true,
+      basketDiscountFormat: 'SEPETTE {price}'
+    });
+
+    expect(text(container, 'price')).toBe('5,499 TL');
+    expect(text(container, 'basket-price')).toBe('SEPETTE 2,999 TL');
+    expect(container.querySelector('[data-part="retail-price"]')).toBeNull();
+  });
+});
+
+describe('basket-items favourite toggle', () => {
+  it('is absent by default and the picture keeps its bare link', () => {
+    const { container } = renderLines();
+
+    expect(container.querySelector('[data-part="favorite"]')).toBeNull();
+    expect(container.querySelector('[data-part="media"]')).toBeNull();
+    expect(container.querySelector('[data-part="image"]')?.parentElement?.tagName).toBe('A');
+  });
+
+  it('adds a product to the favourites and removes a favourited one', () => {
+    const { container, rerender } = renderLines({ showFavorite: true });
+
+    const media = container.querySelector('[data-part="media"]');
+    expect(media?.querySelector('[data-part="image"]')).not.toBeNull();
+    const toggle = media?.querySelector(
+      '[data-part="favorite"]'
+    ) as HTMLButtonElement;
+    expect(toggle.tagName).toBe('BUTTON');
+    expect(toggle.getAttribute('aria-pressed')).toBe('false');
+
+    fireEvent.click(toggle);
+    expect(addFavorite).toHaveBeenCalledWith(1001);
+
+    favoritesPayload = { results: [{ pk: 77, product: { pk: 1001 } }] };
+    rerender(
+      <BasketItemsBlock
+        block={{
+          id: 'basket-items-1',
+          type: 'basket-items',
+          properties: { showFavorite: true },
+          styles: {},
+          blocks: []
+        }}
+        placeholderId="p1"
+        sectionId="s1"
+        isDesigner={false}
+      />
+    );
+    const active = container.querySelector(
+      '[data-part="favorite"]'
+    ) as HTMLButtonElement;
+    expect(active.getAttribute('data-state')).toBe('selected');
+    fireEvent.click(active);
+    expect(removeFavorite).toHaveBeenCalledWith(77);
+  });
+
+  it('sends a guest to the login page instead', () => {
+    sessionStatus = 'unauthenticated';
+    const { container } = renderLines({
+      showFavorite: true,
+      favoriteLoginHref: '/users/auth'
+    });
+
+    const link = container.querySelector('[data-part="favorite"]');
+    expect(link?.tagName).toBe('A');
+    expect(link?.getAttribute('href')).toBe('/users/auth');
+  });
+});

package/src/blocks/__tests__/basket-offers.test.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import BasketSummaryBlock from '../basket-summary-block';
+
+/**
+ * The basket page redesign surfaces the shopper's coupon wallet inside the
+ * summary: a card per active offer with its validity date, label, value and
+ * an apply control that puts the offer's voucher code on the basket. Nothing
+ * renders for guests or by default — the wallet is opt-in through
+ * `showOffers`.
+ */
+let sessionStatus = 'authenticated';
+let offersPayload: unknown = {
+  discounts: [
+    {
+      pk: 11,
+      label: 'GANT REDESIGN',
+      amount: '100.00',
+      voucher_code: 'REDESIGN100',
+      start_datetime: '2025-03-01T00:00:00Z',
+      end_datetime: '2025-04-10T12:00:00Z'
+    },
+    {
+      pk: 12,
+      label: 'Yüzde',
+      percentage: 10,
+      voucher_code: null,
+      end_datetime: '2025-05-01T12:00:00Z'
+    }
+  ]
+};
+let voucherCode: string | null = null;
+
+const applyVoucher = jest.fn(() => ({
+  unwrap: () => Promise.resolve({ total_amount: '1.00' })
+}));
+const removeVoucher = jest.fn(() => ({
+  unwrap: () => Promise.resolve({ total_amount: '2.00' })
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ data: null, status: sessionStatus })
+}));
+
+// Every `@akinon/next/data/client/*` subpath maps to the same mock file, so
+// one factory has to serve the basket and the account client alike.
+jest.mock('@akinon/next/data/client/basket', () => ({
+  __esModule: true,
+  useGetBasketOffersQuery: (_arg: unknown, options?: { skip?: boolean }) => ({
+    data: options?.skip ? undefined : offersPayload,
+    isLoading: false
+  }),
+  basketApi: { util: { updateQueryData: () => ({ type: 'noop' }) } },
+  useGetBasketQuery: () => ({
+    data: {
+      basketitem_set: [{ currency_type: 'try' }],
+      total_quantity: 1,
+      total_product_amount: '500.00',
+      total_amount: '500.00',
+      voucher_code: voucherCode
+    },
+    isLoading: false
+  }),
+  useUpdateQuantityMutation: () => [jest.fn(), { isLoading: false }],
+  useApplyVoucherCodeMutation: () => [applyVoucher, { isLoading: false }],
+  useRemoveVoucherCodeMutation: () => [removeVoucher, { isLoading: false }],
+  useGetFavoritesQuery: () => ({ data: undefined, isLoading: false }),
+  useAddFavoriteMutation: () => [jest.fn(), { isLoading: false }],
+  useRemoveFavoriteMutation: () => [jest.fn(), { isLoading: false }]
+}));
+
+jest.mock('@akinon/next/redux/hooks', () => ({
+  __esModule: true,
+  useAppSelector: () => undefined,
+  useAppDispatch: () => jest.fn()
+}));
+
+const renderSummary = (
+  properties: Record<string, unknown> = {},
+  isDesigner = false
+) =>
+  render(
+    <BasketSummaryBlock
+      block={{
+        id: 'basket-summary-1',
+        type: 'basket-summary',
+        properties,
+        styles: {},
+        blocks: []
+      }}
+      placeholderId="p1"
+      sectionId="s1"
+      isDesigner={isDesigner}
+    />
+  );
+
+beforeEach(() => {
+  sessionStatus = 'authenticated';
+  voucherCode = null;
+  applyVoucher.mockClear();
+  removeVoucher.mockClear();
+});
+
+describe('basket-summary coupon wallet', () => {
+  it('stays absent by default', () => {
+    const { container } = renderSummary();
+
+    expect(container.querySelector('[data-part="offers"]')).toBeNull();
+  });
+
+  it('lists the wallet as cards above the voucher panel and applies an offer', () => {
+    const { container } = renderSummary({
+      showOffers: true,
+      offerApplyLabel: 'Uygula',
+      couponPlacement: 'after-cta',
+      decimals: 'never',
+      currencyDisplay: 'custom',
+      currencyText: 'TL',
+      currencyPosition: 'after'
+    });
+
+    const root = container.querySelector('[data-part="root"]') as HTMLElement;
+    const order = Array.from(root.children).map((child) =>
+      child.getAttribute('data-part')
+    );
+    expect(order).toEqual(['totals', 'cta', 'offers', 'coupon']);
+
+    const cards = container.querySelectorAll('[data-part="offer"]');
+    expect(cards).toHaveLength(2);
+
+    const first = cards[0];
+    // The end date prints in the storefront locale (the hooks mock is en-US;
+    // a tr storefront shows 10.04.2025).
+    expect(first.querySelector('[data-part="offer-date"]')?.textContent).toBe(
+      '04/10/2025'
+    );
+    expect(first.querySelector('[data-part="offer-label"]')?.textContent).toBe(
+      'GANT REDESIGN'
+    );
+    expect(first.querySelector('[data-part="offer-value"]')?.textContent).toBe(
+      '100 TL'
+    );
+    const apply = first.querySelector(
+      '[data-part="offer-apply"]'
+    ) as HTMLButtonElement;
+    expect(apply.textContent).toContain('Uygula');
+
+    // An automatic campaign without a code is informational only.
+    expect(cards[1].querySelector('[data-part="offer-value"]')?.textContent).toBe(
+      '%10'
+    );
+    expect(cards[1].querySelector('[data-part="offer-apply"]')).toBeNull();
+
+    fireEvent.click(apply);
+    expect(applyVoucher).toHaveBeenCalledWith({ voucher_code: 'REDESIGN100' });
+  });
+
+  it('marks the applied offer and lets the shopper take it off again', () => {
+    voucherCode = 'REDESIGN100';
+    const { container } = renderSummary({
+      showOffers: true,
+      offerRemoveLabel: 'Kaldır'
+    });
+
+    const card = container.querySelector('[data-part="offer"]') as HTMLElement;
+    expect(card.getAttribute('data-state')).toBe('selected');
+    const control = card.querySelector(
+      '[data-part="offer-apply"]'
+    ) as HTMLButtonElement;
+    expect(control.textContent).toContain('Kaldır');
+
+    fireEvent.click(control);
+    expect(removeVoucher).toHaveBeenCalled();
+    expect(applyVoucher).not.toHaveBeenCalled();
+  });
+
+  it('shows nothing to guests and a sample card to the designer', () => {
+    sessionStatus = 'unauthenticated';
+
+    const guest = renderSummary({ showOffers: true });
+    expect(guest.container.querySelector('[data-part="offers"]')).toBeNull();
+    guest.unmount();
+
+    const designer = renderSummary({ showOffers: true }, true);
+    const card = designer.container.querySelector('[data-part="offer"]');
+    expect(card).not.toBeNull();
+    expect(
+      (card?.querySelector('[data-part="offer-apply"]') as HTMLButtonElement)
+        .disabled
+    ).toBe(true);
+  });
+
+  it('caps the list with offersLimit', () => {
+    const { container } = renderSummary({ showOffers: true, offersLimit: 1 });
+
+    expect(container.querySelectorAll('[data-part="offer"]')).toHaveLength(1);
+  });
+});

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

@@ -700,3 +700,172 @@ describe('the strip root is a real focus target only where it is needed', () =>
     expect(document.activeElement).toBe(root);
   });
 });
+
+describe('editorial header and arrows', () => {
+  const CARDS = Array.from({ length: 3 }, (_, index) => ({
+    pk: 100 + index,
+    name: `Card ${index}`,
+    absolute_url: `/card-${index}`,
+    productimage_set: [{ image: `https://cdn/card-${index}.jpg` }],
+    price: '5499.00',
+    currency_type: 'try'
+  }));
+
+  beforeEach(() => {
+    mockWidget = { products: CARDS };
+  });
+
+  afterEach(() => {
+    mockWidget = undefined;
+  });
+
+  it('keeps the title above the arrows by default', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ collectionId: 'c1', title: 'Picked', showArrows: true })}
+      />
+    );
+
+    expect(container.querySelector('[data-part="header"]')).toBeNull();
+    const root = container.firstElementChild as HTMLElement;
+    const parts = Array.from(root.children).map((child) =>
+      child.getAttribute('data-part')
+    );
+    expect(parts.slice(0, 3)).toEqual([null, 'title', 'arrow-list']);
+  });
+
+  it('puts the title and the arrows on one row when asked to', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({
+          collectionId: 'c1',
+          title: 'Picked',
+          showArrows: true,
+          headerLayout: 'inline',
+          arrowIcon: 'arrow'
+        })}
+      />
+    );
+
+    const header = container.querySelector('[data-part="header"]');
+    expect(header).not.toBeNull();
+    expect(header?.querySelector('[data-part="title"]')).not.toBeNull();
+    expect(header?.querySelector('[data-part="arrow-list"]')).not.toBeNull();
+    // The line arrow is drawn on an 8×8 canvas; the default chevron is 24×24.
+    expect(
+      header?.querySelector('[data-product-recommendations-arrow="prev"] svg')
+        ?.getAttribute('viewBox')
+    ).toBe('0 0 8 8');
+  });
+
+  it('disables the previous arrow at the start of the track', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ collectionId: 'c1', showArrows: true })}
+      />
+    );
+
+    const prev = container.querySelector(
+      '[data-product-recommendations-arrow="prev"]'
+    ) as HTMLButtonElement;
+    const next = container.querySelector(
+      '[data-product-recommendations-arrow="next"]'
+    ) as HTMLButtonElement;
+    // jsdom lays nothing out, so scrollLeft stays 0: start of track (and
+    // nothing to scroll to, so the next arrow rests too).
+    expect(prev.getAttribute('data-state')).toBe('disabled');
+    expect(prev.getAttribute('aria-disabled')).toBe('true');
+    expect(next.getAttribute('aria-label')).toBe('Next products');
+  });
+
+  it('formats card prices with the shared money options', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({
+          collectionId: 'c1',
+          decimals: 'never',
+          currencyDisplay: 'custom',
+          currencyText: 'TL',
+          currencyPosition: 'after'
+        })}
+      />
+    );
+
+    expect(
+      container.querySelector('[data-part="card-price"]')?.textContent
+    ).toBe('5,499 TL');
+  });
+});
+
+describe('section source', () => {
+  it('draws the rows the section data source resolved to, no collection id needed', () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { ThemeSectionDataProvider } = require('../../theme-section-data-context');
+    const items = [
+      {
+        pk: 501,
+        name: 'Editorial Shirt',
+        absolute_url: '/editorial-shirt',
+        productimage_set: [{ image: 'https://cdn/editorial.jpg' }],
+        price: '5499.00',
+        currency_type: 'try'
+      }
+    ];
+
+    const { container } = render(
+      <ThemeSectionDataProvider items={items}>
+        <ProductRecommendationsBlock
+          {...props({ source: 'section', title: 'Picked', showArrows: true })}
+        />
+      </ThemeSectionDataProvider>
+    );
+
+    expect(container.querySelector('[data-part="card-name"]')?.textContent).toBe(
+      'Editorial Shirt'
+    );
+    expect(
+      container.querySelector('[data-part="card-image"]')?.getAttribute('src')
+    ).toBe('https://cdn/editorial.jpg');
+  });
+
+  it('reads the price of an Omnitron-shaped row (editor preview)', () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { ThemeSectionDataProvider } = require('../../theme-section-data-context');
+    const items = [
+      {
+        pk: 502,
+        name: 'Omnitron Shirt',
+        productimage_set: [{ image: 'https://cdn/omni.jpg' }],
+        active_price: { price: '3999.00', retail_price: '5999.00', currency_type: 'try' }
+      }
+    ];
+
+    const { container } = render(
+      <ThemeSectionDataProvider items={items}>
+        <ProductRecommendationsBlock
+          {...props({
+            source: 'section',
+            decimals: 'never',
+            currencyDisplay: 'custom',
+            currencyText: 'TL',
+            currencyPosition: 'after'
+          })}
+        />
+      </ThemeSectionDataProvider>
+    );
+
+    expect(container.querySelector('[data-part="card-price"]')?.textContent).toBe(
+      '3,999 TL'
+    );
+  });
+
+  it('tells the designer to pick a collection when the section has none', () => {
+    const { container } = renderBlock(
+      <ProductRecommendationsBlock
+        {...props({ source: 'section' }, { isDesigner: true })}
+      />
+    );
+
+    expect(container.textContent).toContain('Source panel');
+  });
+});