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

package/CHANGELOG.md

@@ -1,36 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.67-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- 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 [e9598c71]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.67-rc.0
-  - @akinon/theme-contract@2.0.67-rc.0
+## 2.0.68-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd75]
+  - @akinon/next@2.0.68-beta.0
+  - @akinon/theme-contract@2.0.68-beta.0
+
+## 2.0.67
+
+### Patch Changes
+
+- bf503b3: ZERO-4819: add basket redesign block features and line image fix
+  - @akinon/next@2.0.67
+  - @akinon/theme-contract@2.0.67
 
 ## 2.0.66
 

package/jest/__mocks__/akinon-next-plugin-module.js

@@ -0,0 +1,18 @@
+// Mock for @akinon/next/components/plugin-module: the real one dynamically
+// imports brand plugins, which have no place in a unit test. The slot renders
+// a marker so a test can assert where a block placed it.
+const React = require('react');
+
+const Component = {
+  BasketGiftPack: 'BasketGiftPack',
+  CheckoutGiftPack: 'CheckoutGiftPack'
+};
+
+const PluginModule = ({ component }) =>
+  React.createElement('div', { 'data-plugin-module': component });
+
+module.exports = {
+  __esModule: true,
+  default: PluginModule,
+  Component
+};

package/jest.config.js

@@ -30,6 +30,8 @@ module.exports = {
       '<rootDir>/jest/__mocks__/akinon-next-modal.js',
     '^@akinon/next/components/price$':
       '<rootDir>/jest/__mocks__/akinon-next-price.js',
+    '^@akinon/next/components/plugin-module$':
+      '<rootDir>/jest/__mocks__/akinon-next-plugin-module.js',
     '^@akinon/next/components/loader-spinner$':
       '<rootDir>/jest/__mocks__/akinon-next-loader-spinner.js',
     '^@akinon/next/data/client/(.*)$':

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

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import BasketItemsBlock from '../basket-items-block';
+import CheckoutSummaryBlock from '../checkout-summary-block';
+import { getLineImage, groupOrderItems } from '../product-block-utils';
+
+/**
+ * Commerce basket and order payloads carry the product picture only in
+ * `product.productimage_set`; `line.image` and `product.image` come back
+ * empty. The blocks that read the live query used to look at the two empty
+ * fields and draw no image at all, on every brand, in every basket layout.
+ */
+const CDN_IMAGE = 'https://cdn.example.com/products/polo.jpg';
+
+const basketLine = {
+  id: 1,
+  quantity: 1,
+  image: null,
+  price: '5999.00',
+  unit_price: '5999.00',
+  total_amount: '5999.00',
+  currency_type: 'try',
+  attributes: {},
+  product: {
+    pk: 37727,
+    name: 'GANT Erkek Siyah Polo',
+    absolute_url: '/polo/',
+    productimage_set: [{ image: CDN_IMAGE }]
+  }
+};
+
+let basketData: unknown = { basketitem_set: [basketLine] };
+
+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: () => ({ data: undefined, isLoading: false }),
+  useAddFavoriteMutation: () => [jest.fn(), { isLoading: false }],
+  useRemoveFavoriteMutation: () => [jest.fn(), { isLoading: false }]
+}));
+
+const renderBlock = (
+  Component: React.ComponentType<any>,
+  type: string,
+  properties: Record<string, unknown> = {}
+) =>
+  render(
+    <Component
+      block={{ id: `${type}-1`, type, properties, styles: {}, blocks: [] }}
+      placeholderId="p1"
+      sectionId="s1"
+      isDesigner={false}
+    />
+  );
+
+describe('getLineImage', () => {
+  it('falls back through line, product and the product gallery', () => {
+    expect(getLineImage({ image: '/line.jpg', product: null })).toBe(
+      '/line.jpg'
+    );
+    expect(
+      getLineImage({ image: '', product: { image: '/product.jpg' } })
+    ).toBe('/product.jpg');
+    expect(getLineImage(basketLine)).toBe(CDN_IMAGE);
+    expect(
+      getLineImage({ product: { productimage_set: [{ url: '/url.jpg' }] } })
+    ).toBe('/url.jpg');
+    expect(getLineImage({ product: { productimage_set: [] } })).toBe('');
+    expect(getLineImage(null)).toBe('');
+  });
+
+  it('is what grouped order lines use for their image', () => {
+    const [line] = groupOrderItems([
+      { id: 9, price: '10', quantity: 1, product: basketLine.product }
+    ]);
+
+    expect(line.image).toBe(CDN_IMAGE);
+  });
+});
+
+describe('basket line images', () => {
+  beforeEach(() => {
+    basketData = { basketitem_set: [basketLine] };
+  });
+
+  it('basket-items draws the gallery image when the line carries no direct one', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items');
+
+    const img = container.querySelector('[data-part="image"]');
+    expect(img).not.toBeNull();
+    expect(img?.getAttribute('src')).toBe(CDN_IMAGE);
+  });
+
+  it('basket-items still prefers a direct line image', () => {
+    basketData = {
+      basketitem_set: [{ ...basketLine, image: '/direct.jpg' }]
+    };
+
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items');
+
+    expect(
+      container.querySelector('[data-part="image"]')?.getAttribute('src')
+    ).toBe('/direct.jpg');
+  });
+
+  it('checkout-summary draws the gallery image for its line list', () => {
+    const { container } = renderBlock(
+      CheckoutSummaryBlock,
+      'checkout-summary',
+      { showItemImage: true }
+    );
+
+    const img = container.querySelector('[data-part="image"]');
+    expect(img).not.toBeNull();
+    expect(img?.getAttribute('src')).toBe(CDN_IMAGE);
+  });
+});

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

@@ -0,0 +1,336 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import BasketItemsBlock from '../basket-items-block';
+import BasketSummaryBlock from '../basket-summary-block';
+
+/**
+ * The basket page redesign needs the line and the summary to say things the
+ * built-in rows never did: attribute rows with their own labels, a quantity
+ * select, the remove control under the line, the gift wrap plugin slot, and a
+ * voucher / gift card panel that opens on demand below the checkout button.
+ * Every default stays exactly what published compositions render today.
+ */
+const updateQuantity = jest.fn(() => ({ unwrap: () => Promise.resolve({}) }));
+const applyVoucher = jest.fn(() => ({
+  unwrap: () => Promise.resolve({ total_amount: '1.00' })
+}));
+
+const basketLine = {
+  id: 1,
+  quantity: 2,
+  price: '5999.00',
+  unit_price: '5999.00',
+  total_amount: '11998.00',
+  currency_type: 'try',
+  attributes: {},
+  product: {
+    pk: 37727,
+    name: 'GANT Erkek Siyah Polo',
+    absolute_url: '/polo/',
+    productimage_set: [{ image: '/polo.jpg' }],
+    attributes: { integration_renk_detay: 'Siyah', integration_beden: 'S' },
+    attributes_kwargs: {
+      integration_beden: { label: 'S', value: 'S' }
+    }
+  }
+};
+
+let basketData: unknown = {
+  basketitem_set: [basketLine],
+  total_quantity: 2,
+  total_product_amount: '11998.00',
+  total_discount_amount: '0.00',
+  total_amount: '11998.00',
+  voucher_code: null
+};
+
+// 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,
+  basketApi: { util: { updateQueryData: () => ({ type: 'noop' }) } },
+  useGetBasketQuery: () => ({ data: basketData, isLoading: false }),
+  useUpdateQuantityMutation: () => [updateQuantity, { isLoading: false }],
+  useApplyVoucherCodeMutation: () => [applyVoucher, { isLoading: false }],
+  useRemoveVoucherCodeMutation: () => [jest.fn(), { isLoading: false }],
+  useGetBasketOffersQuery: () => ({ data: undefined, 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 renderBlock = (
+  Component: React.ComponentType<any>,
+  type: string,
+  properties: Record<string, unknown> = {},
+  isDesigner = false
+) =>
+  render(
+    <Component
+      block={{ id: `${type}-1`, type, properties, styles: {}, blocks: [] }}
+      placeholderId="p1"
+      sectionId="s1"
+      isDesigner={isDesigner}
+    />
+  );
+
+beforeEach(() => {
+  updateQuantity.mockClear();
+  applyVoucher.mockClear();
+});
+
+describe('basket-items line layout', () => {
+  it('keeps the built-in row unchanged by default', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items');
+
+    expect(container.querySelector('[data-part="variant-row"]')).toBeNull();
+    expect(container.querySelector('[data-part="quantity-select"]')).toBeNull();
+    expect(container.querySelector('[data-part="gift-wrap"]')).toBeNull();
+    // The remove control still sits in the aside column.
+    const actions = container.querySelector('[data-part="actions"]');
+    expect(actions?.querySelector('[data-part="remove"]')).not.toBeNull();
+  });
+
+  it('draws labelled attribute rows from the product when the line carries none', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
+      showVariant: true,
+      variantLayout: 'rows',
+      variantRows: 'integration_renk_detay:Renk, integration_beden:Beden',
+      variantLabelSuffix: ':'
+    });
+
+    const rows = container.querySelectorAll('[data-part="variant-row"]');
+    expect(rows).toHaveLength(2);
+    expect(rows[0].querySelector('[data-part="variant-label"]')?.textContent).toBe(
+      'Renk:'
+    );
+    expect(rows[0].querySelector('[data-part="variant-value"]')?.textContent).toBe(
+      'Siyah'
+    );
+    expect(rows[1].querySelector('[data-part="variant-value"]')?.textContent).toBe(
+      'S'
+    );
+  });
+
+  it('skips attribute rows the payload cannot fill and defaults to a bare label', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
+      showVariant: true,
+      variantLayout: 'rows',
+      variantRows: 'integration_beden, missing_key:Missing'
+    });
+
+    const rows = container.querySelectorAll('[data-part="variant-row"]');
+    expect(rows).toHaveLength(1);
+    expect(rows[0].querySelector('[data-part="variant-label"]')?.textContent).toBe(
+      'Integration beden'
+    );
+  });
+
+  it('offers a quantity select that updates the line', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
+      quantityControl: 'select',
+      quantityMax: 5
+    });
+
+    const select = container.querySelector(
+      '[data-part="quantity-select"]'
+    ) as HTMLSelectElement;
+    expect(select).not.toBeNull();
+    expect(select.value).toBe('2');
+    expect(select.querySelectorAll('option')).toHaveLength(5);
+
+    fireEvent.change(select, { target: { value: '4' } });
+    expect(updateQuantity).toHaveBeenCalledWith(
+      expect.objectContaining({ product: 37727, quantity: 4 })
+    );
+  });
+
+  it('moves the remove control under the line and mounts the gift wrap slot', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
+      removePlacement: 'inline',
+      showGiftWrap: true,
+      removeIcon: 'text',
+      removeLabel: 'Sil'
+    });
+
+    const content = container.querySelector('[data-part="content"]');
+    expect(content?.querySelector('[data-part="remove"]')?.textContent).toBe(
+      'Sil'
+    );
+    expect(
+      container.querySelector('[data-part="actions"] [data-part="remove"]')
+    ).toBeNull();
+    expect(
+      content?.querySelector(
+        '[data-part="gift-wrap"] [data-plugin-module="BasketGiftPack"]'
+      )
+    ).not.toBeNull();
+  });
+
+  it('formats the unit price with the shared money options', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
+      decimals: 'never',
+      currencyDisplay: 'custom',
+      currencyText: 'TL',
+      currencyPosition: 'after'
+    });
+
+    expect(container.querySelector('[data-part="price"]')?.textContent).toBe(
+      '5,999 TL'
+    );
+  });
+});
+
+describe('basket-summary panels', () => {
+  it('renders the voucher form inline before the button by default', () => {
+    const { container } = renderBlock(BasketSummaryBlock, 'basket-summary');
+
+    const root = container.querySelector('[data-part="root"]') as HTMLElement;
+    const children = Array.from(root.children).map((child) =>
+      child.getAttribute('data-part')
+    );
+    expect(children).toEqual(['totals', 'coupon', 'cta']);
+    expect(container.querySelector('[data-part="coupon-toggle"]')).toBeNull();
+    expect(container.querySelector('[data-part="coupon-form"]')).not.toBeNull();
+  });
+
+  it('hides the voucher form behind a header that opens it, below the button', () => {
+    const { container } = renderBlock(BasketSummaryBlock, 'basket-summary', {
+      couponPresentation: 'collapsible',
+      couponPlacement: 'after-cta',
+      couponToggleLabel: 'Promosyon Kodu',
+      ctaNote: 'Free shipping for members'
+    });
+
+    const root = container.querySelector('[data-part="root"]') as HTMLElement;
+    const children = Array.from(root.children).map((child) =>
+      child.getAttribute('data-part')
+    );
+    expect(children).toEqual(['totals', 'cta', 'cta-note', 'coupon']);
+
+    const toggle = container.querySelector(
+      '[data-part="coupon-toggle"]'
+    ) as HTMLButtonElement;
+    expect(toggle.textContent).toContain('Promosyon Kodu');
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(container.querySelector('[data-part="coupon-form"]')).toBeNull();
+
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(
+      container.querySelector('[data-part="coupon"]')?.getAttribute('data-state')
+    ).toBe('open');
+    expect(container.querySelector('[data-part="coupon-form"]')).not.toBeNull();
+  });
+
+  it('adds a gift card panel that redeems through the voucher endpoint', () => {
+    const { container } = renderBlock(BasketSummaryBlock, 'basket-summary', {
+      showCoupon: false,
+      showGiftCard: true,
+      couponPlacement: 'after-cta',
+      giftCardToggleLabel: 'Hediye Kartı',
+      giftCardApplyLabel: 'Uygula'
+    });
+
+    const toggle = container.querySelector(
+      '[data-part="gift-card-toggle"]'
+    ) as HTMLButtonElement;
+    expect(toggle.textContent).toContain('Hediye Kartı');
+    expect(container.querySelector('[data-part="gift-card-form"]')).toBeNull();
+
+    fireEvent.click(toggle);
+    const number = container.querySelector(
+      '[data-part="gift-card-input"]'
+    ) as HTMLInputElement;
+    fireEvent.change(number, { target: { value: '1234 5678' } });
+    fireEvent.submit(
+      container.querySelector('[data-part="gift-card-form"]') as HTMLFormElement
+    );
+
+    expect(applyVoucher).toHaveBeenCalledWith({ voucher_code: '1234 5678' });
+  });
+
+  it('prints one discount row per basket campaign when asked to', () => {
+    basketData = {
+      basketitem_set: [basketLine],
+      total_quantity: 2,
+      total_product_amount: '11998.00',
+      total_discount_amount: '4998.00',
+      total_amount: '7000.00',
+      voucher_code: 'GANT2026',
+      discounts: [
+        { description: 'Sepette %30 İndirim', discount: '2499.00' },
+        { description: 'Kupon Kodu - GANT2026', discount: '2499.00' },
+        { description: 'Sıfır', discount: '0.00' }
+      ]
+    };
+
+    const itemised = renderBlock(BasketSummaryBlock, 'basket-summary', {
+      discountRows: 'each',
+      discountPrefix: '-',
+      decimals: 'never',
+      currencyDisplay: 'custom',
+      currencyText: 'TL',
+      currencyPosition: 'after'
+    });
+    const labels = Array.from(
+      itemised.container.querySelectorAll('[data-basket-summary-row="discount"]')
+    ).map((row) => row.textContent);
+    expect(labels).toEqual([
+      'Sepette %30 İndirim-2,499 TL',
+      'Kupon Kodu - GANT2026-2,499 TL'
+    ]);
+    itemised.unmount();
+
+    // The default stays the single summed row.
+    const summed = renderBlock(BasketSummaryBlock, 'basket-summary', {
+      discountLabel: 'İndirim',
+      decimals: 'never',
+      currencyDisplay: 'custom',
+      currencyText: 'TL',
+      currencyPosition: 'after'
+    });
+    expect(
+      Array.from(
+        summed.container.querySelectorAll('[data-basket-summary-row="discount"]')
+      ).map((row) => row.textContent)
+    ).toEqual(['İndirim-4,998 TL']);
+
+    basketData = {
+      basketitem_set: [basketLine],
+      total_quantity: 2,
+      total_product_amount: '11998.00',
+      total_discount_amount: '0.00',
+      total_amount: '11998.00',
+      voucher_code: null
+    };
+  });
+
+  it('prints the piece count and the authored shipping row', () => {
+    const { container } = renderBlock(BasketSummaryBlock, 'basket-summary', {
+      subtotalLabel: '{count} Parça',
+      shippingLabel: 'Kargo',
+      shippingValue: '0 TL',
+      decimals: 'never',
+      currencyDisplay: 'custom',
+      currencyText: 'TL',
+      currencyPosition: 'after'
+    });
+
+    const labels = Array.from(
+      container.querySelectorAll('[data-part="row-label"], [data-part="total-label"]')
+    ).map((node) => node.textContent);
+    expect(labels).toEqual(['2 Parça', 'Kargo', 'Total']);
+
+    const values = Array.from(
+      container.querySelectorAll('[data-part="row-value"], [data-part="total-value"]')
+    ).map((node) => node.textContent);
+    expect(values).toEqual(['11,998 TL', '0 TL', '11,998 TL']);
+  });
+});