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

package/CHANGELOG.md

@@ -1,37 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.75-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 [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.75-rc.0
-  - @akinon/theme-contract@2.0.75-rc.0
+## 2.0.75
+
+### Patch Changes
+
+- 01f69c6a: ZERO-4840: add basket gift card, wallet, gift wrap and upsell
+  - @akinon/next@2.0.75
+  - @akinon/theme-contract@2.0.75
 
 ## 2.0.74
 

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

@@ -1,6 +1,8 @@
 // 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.
+// a marker so a test can assert where a block placed it. When the block hands
+// the gift pack plugin a customUIRender, the mock drives it with a local
+// hasGiftPack so a test can exercise the add/remove toggling.
 const React = require('react');
 
 const Component = {
@@ -8,8 +10,22 @@ const Component = {
   CheckoutGiftPack: 'CheckoutGiftPack'
 };
 
-const PluginModule = ({ component }) =>
-  React.createElement('div', { 'data-plugin-module': component });
+const PluginModule = ({ component, props }) => {
+  const [hasGiftPack, setHasGiftPack] = React.useState(false);
+  const customUIRender = props?.customUIRender;
+  return React.createElement(
+    'div',
+    { 'data-plugin-module': component },
+    customUIRender
+      ? customUIRender({
+          hasGiftPack,
+          onAddGiftPack: () => setHasGiftPack(true),
+          onRemoveGiftPack: () => setHasGiftPack(false),
+          translations: props?.translations ?? {}
+        })
+      : null
+  );
+};
 
 module.exports = {
   __esModule: true,

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.75-rc.0",
+  "version": "2.0.75",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.75-rc.0",
+    "@akinon/next": "2.0.75",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.75-rc.0",
+    "@akinon/theme-contract": "2.0.75",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.75-rc.0",
+    "@akinon/next": "2.0.75",
     "@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-layout.test.tsx

@@ -38,6 +38,12 @@ const basketLine = {
 let basketData: unknown = {
   basketitem_set: [basketLine],
   total_quantity: 2,
+  upsell_details: [
+    {
+      message: '2 more to go',
+      params: { required: 3, partial: 1, remaining: 2 }
+    }
+  ],
   total_product_amount: '11998.00',
   total_discount_amount: '0.00',
   total_amount: '11998.00',
@@ -173,6 +179,53 @@ describe('basket-items line layout', () => {
     ).not.toBeNull();
   });
 
+  it('renders the checkbox gift wrap presentation and toggles it through the plugin', () => {
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
+      showGiftWrap: true,
+      giftWrapPresentation: 'checkbox',
+      giftWrapAddLabel: 'Hediye Paketi'
+    });
+
+    const toggle = container.querySelector(
+      '[data-part="gift-wrap-toggle"]'
+    ) as HTMLButtonElement;
+    expect(toggle).not.toBeNull();
+    expect(toggle.getAttribute('aria-checked')).toBe('false');
+    expect(
+      container.querySelector('[data-part="gift-wrap-label"]')?.textContent
+    ).toBe('Hediye Paketi');
+    expect(
+      container.querySelector('[data-part="gift-wrap-box"] svg')
+    ).toBeNull();
+
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute('aria-checked')).toBe('true');
+    expect(toggle.getAttribute('data-state')).toContain('checked');
+    expect(
+      container.querySelector('[data-part="gift-wrap-box"] svg')
+    ).not.toBeNull();
+
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('shows the upsell campaign banner only when asked, with placeholders', () => {
+    const silent = renderBlock(BasketItemsBlock, 'basket-items');
+    expect(
+      silent.container.querySelector('[data-part="upsell-banner"]')
+    ).toBeNull();
+
+    const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
+      showUpsellBanner: true,
+      upsellBannerFormat: 'Kampanya: {message} ({remaining}/{required})'
+    });
+    const banner = container.querySelector('[data-part="upsell-banner"]');
+    expect(banner?.textContent).toBe('Kampanya: 2 more to go (2/3)');
+    expect(
+      container.querySelector('[data-part="root"] > [data-part="upsell-banner"]')
+    ).not.toBeNull();
+  });
+
   it('formats the unit price with the shared money options', () => {
     const { container } = renderBlock(BasketItemsBlock, 'basket-items', {
       decimals: 'never',
@@ -229,13 +282,14 @@ describe('basket-summary panels', () => {
     expect(container.querySelector('[data-part="coupon-form"]')).not.toBeNull();
   });
 
-  it('adds a gift card panel that redeems through the voucher endpoint', () => {
+  it('redeems the gift card as number|cvv through the voucher endpoint', () => {
     const { container } = renderBlock(BasketSummaryBlock, 'basket-summary', {
       showCoupon: false,
       showGiftCard: true,
       couponPlacement: 'after-cta',
       giftCardToggleLabel: 'Hediye Kartı',
-      giftCardApplyLabel: 'Uygula'
+      giftCardApplyLabel: 'Uygula',
+      giftCardError: 'Geçersiz kart.'
     });
 
     const toggle = container.querySelector(
@@ -248,12 +302,127 @@ describe('basket-summary panels', () => {
     const number = container.querySelector(
       '[data-part="gift-card-input"]'
     ) as HTMLInputElement;
+    const form = container.querySelector(
+      '[data-part="gift-card-form"]'
+    ) as HTMLFormElement;
     fireEvent.change(number, { target: { value: '1234 5678' } });
-    fireEvent.submit(
-      container.querySelector('[data-part="gift-card-form"]') as HTMLFormElement
+
+    // A missing CVV is the same invalid-card answer, without the round trip;
+    // both fields carry the invalid state the design colours red.
+    fireEvent.submit(form);
+    expect(applyVoucher).not.toHaveBeenCalled();
+    expect(
+      container.querySelector('[data-part="gift-card-error"]')?.textContent
+    ).toBe('Geçersiz kart.');
+    expect(
+      container
+        .querySelector('[data-part="gift-card-input"]')
+        ?.getAttribute('data-state')
+    ).toBe('invalid');
+    expect(
+      container
+        .querySelector('[data-part="gift-card-cvv"]')
+        ?.getAttribute('data-state')
+    ).toBe('invalid');
+
+    fireEvent.change(
+      container.querySelector('[data-part="gift-card-cvv"]') as HTMLInputElement,
+      { target: { value: '123' } }
     );
+    fireEvent.submit(form);
+    expect(applyVoucher).toHaveBeenCalledWith({
+      voucher_code: '1234 5678|123'
+    });
+  });
 
-    expect(applyVoucher).toHaveBeenCalledWith({ voucher_code: '1234 5678' });
+  it('locks the gift card panel while a promo code is applied', () => {
+    basketData = {
+      basketitem_set: [basketLine],
+      total_quantity: 2,
+      total_product_amount: '11998.00',
+      total_discount_amount: '0.00',
+      total_amount: '11998.00',
+      voucher_code: 'GANT2026'
+    };
+
+    const { container } = renderBlock(BasketSummaryBlock, 'basket-summary', {
+      showGiftCard: true,
+      couponPresentation: 'collapsible'
+    });
+
+    const giftToggle = container.querySelector(
+      '[data-part="gift-card-toggle"]'
+    ) as HTMLButtonElement;
+    expect(giftToggle.disabled).toBe(true);
+    fireEvent.click(giftToggle);
+    expect(container.querySelector('[data-part="gift-card-form"]')).toBeNull();
+
+    // The promo panel is the applied code's owner and stays usable.
+    const couponToggle = container.querySelector(
+      '[data-part="coupon-toggle"]'
+    ) as HTMLButtonElement;
+    expect(couponToggle.disabled).toBe(false);
+    fireEvent.click(couponToggle);
+    expect(
+      container.querySelector('[data-part="coupon-code"]')?.textContent
+    ).toBe('GANT2026');
+
+    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('locks the promo panel while a gift card is applied and offers its removal', () => {
+    basketData = {
+      basketitem_set: [basketLine],
+      total_quantity: 2,
+      total_product_amount: '11998.00',
+      total_discount_amount: '0.00',
+      total_amount: '11998.00',
+      voucher_code: '1234 5678|123'
+    };
+
+    const { container } = renderBlock(BasketSummaryBlock, 'basket-summary', {
+      showGiftCard: true,
+      couponPresentation: 'collapsible',
+      giftCardRemoveLabel: 'Kaldır'
+    });
+
+    const couponToggle = container.querySelector(
+      '[data-part="coupon-toggle"]'
+    ) as HTMLButtonElement;
+    expect(couponToggle.disabled).toBe(true);
+    fireEvent.click(couponToggle);
+    expect(container.querySelector('[data-part="coupon-form"]')).toBeNull();
+    // The gift card's code must not leak into the promo panel's applied row.
+    expect(container.querySelector('[data-part="coupon-applied"]')).toBeNull();
+
+    const giftToggle = container.querySelector(
+      '[data-part="gift-card-toggle"]'
+    ) as HTMLButtonElement;
+    expect(giftToggle.disabled).toBe(false);
+    fireEvent.click(giftToggle);
+    // The applied row prints the number without its CVV.
+    expect(
+      container.querySelector('[data-part="gift-card-code"]')?.textContent
+    ).toBe('1234 5678');
+    expect(
+      container.querySelector('[data-part="gift-card-remove"]')?.textContent
+    ).toBe('Kaldır');
+
+    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 one discount row per basket campaign when asked to', () => {

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

@@ -61,6 +61,18 @@ const basketDiscountLine = {
   product: { ...plainLine.product, pk: 1003 }
 };
 
+// A basket-level voucher writes its share into `discount_amount` but leaves
+// the unit price alone — that must never read as an in-basket campaign.
+const voucherTouchedLine = {
+  ...plainLine,
+  id: 4,
+  price: '2199.00',
+  unit_price: '2199.00',
+  total_amount: '2199.00',
+  discount_amount: '2177.00',
+  product: { ...plainLine.product, pk: 1004, price: '2199.00' }
+};
+
 let basketData: unknown = { basketitem_set: [plainLine] };
 
 jest.mock('next-auth/react', () => ({
@@ -153,6 +165,18 @@ describe('basket-items price extras', () => {
     expect(text(container, 'price')).toBe('5,499 TL');
   });
 
+  it('does not badge a line whose discount came from a basket voucher', () => {
+    basketData = { basketitem_set: [voucherTouchedLine] };
+    const { container } = renderLines({
+      ...money,
+      showBasketDiscount: true,
+      basketDiscountFormat: 'SEPETTE {price}'
+    });
+
+    expect(container.querySelector('[data-part="basket-price"]')).toBeNull();
+    expect(text(container, 'price')).toBe('2,199 TL');
+  });
+
   it('shows the undiscounted price with the in-basket figure when a campaign cut the line', () => {
     basketData = { basketitem_set: [basketDiscountLine] };
     const { container } = renderLines({

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

@@ -30,6 +30,7 @@ let offersPayload: unknown = {
   ]
 };
 let voucherCode: string | null = null;
+let basketDiscounts: Array<{ description: string; discount: string }> = [];
 
 const applyVoucher = jest.fn(() => ({
   unwrap: () => Promise.resolve({ total_amount: '1.00' })
@@ -57,7 +58,8 @@ jest.mock('@akinon/next/data/client/basket', () => ({
       total_quantity: 1,
       total_product_amount: '500.00',
       total_amount: '500.00',
-      voucher_code: voucherCode
+      voucher_code: voucherCode,
+      discounts: basketDiscounts
     },
     isLoading: false
   }),
@@ -97,6 +99,7 @@ const renderSummary = (
 beforeEach(() => {
   sessionStatus = 'authenticated';
   voucherCode = null;
+  basketDiscounts = [];
   applyVoucher.mockClear();
   removeVoucher.mockClear();
 });
@@ -190,6 +193,98 @@ describe('basket-summary coupon wallet', () => {
     ).toBe(true);
   });
 
+  it('reads the all_discounts payload and keeps only the active entries', () => {
+    offersPayload = {
+      total_discount: 0,
+      discounts: [],
+      all_discounts: [
+        {
+          label: 'test kupon',
+          amount: 0,
+          percentage: 99,
+          end_datetime: '2026-08-31T15:22:19.709000Z',
+          voucher_code: null,
+          status: { value: 'active', label: 'Active' },
+          offer_type: { value: 'coupon', label: 'Coupon' }
+        },
+        {
+          label: 'test indirim kodu',
+          amount: 0,
+          percentage: 99,
+          end_datetime: '2026-08-31T08:23:41.887000Z',
+          voucher_code: '3BC357B3',
+          status: { value: 'active', label: 'Active' },
+          offer_type: { value: 'coupon_code', label: 'Coupon Code' }
+        },
+        {
+          label: 'bitmiş kampanya',
+          amount: 0,
+          percentage: 10,
+          voucher_code: 'OLD',
+          status: { value: 'expired', label: 'Expired' }
+        }
+      ]
+    };
+
+    const { container } = renderSummary({
+      showOffers: true,
+      offerApplyLabel: 'Uygula'
+    });
+
+    const cards = container.querySelectorAll('[data-part="offer"]');
+    expect(cards).toHaveLength(2);
+    expect(cards[0].querySelector('[data-part="offer-value"]')?.textContent).toBe(
+      '%99'
+    );
+    // The automatic coupon has no code, so no apply control.
+    expect(cards[0].querySelector('[data-part="offer-apply"]')).toBeNull();
+
+    const apply = cards[1].querySelector(
+      '[data-part="offer-apply"]'
+    ) as HTMLButtonElement;
+    fireEvent.click(apply);
+    expect(applyVoucher).toHaveBeenCalledWith({ voucher_code: '3BC357B3' });
+  });
+
+  it('prints the applied voucher discount row as "Kupon Kodu - <code>"', () => {
+    voucherCode = '3BC357B3';
+    basketDiscounts = [
+      { description: 'Sepette %30 İndirim', discount: '150.00' },
+      { description: 'test indirim kodu', discount: '345.00' }
+    ];
+    offersPayload = {
+      discounts: [],
+      all_discounts: [
+        {
+          label: 'test indirim kodu',
+          percentage: 99,
+          voucher_code: '3BC357B3',
+          status: { value: 'active' }
+        }
+      ]
+    };
+
+    const { container } = renderSummary({
+      showOffers: true,
+      discountRows: 'each',
+      voucherDiscountLabel: 'Kupon Kodu - {code}',
+      decimals: 'never',
+      currencyDisplay: 'custom',
+      currencyText: 'TL',
+      currencyPosition: 'after'
+    });
+
+    const labels = Array.from(
+      container.querySelectorAll('[data-basket-summary-row="discount"]')
+    ).map((row) => row.textContent);
+    // The campaign row keeps its name; the voucher's own row takes the
+    // "Kupon Kodu - <code>" form of the design.
+    expect(labels).toEqual([
+      'Sepette %30 İndirim-150 TL',
+      'Kupon Kodu - 3BC357B3-345 TL'
+    ]);
+  });
+
   it('caps the list with offersLimit', () => {
     const { container } = renderSummary({ showOffers: true, offersLimit: 1 });