@akinon/pz-theme 2.0.74-rc.1 → 2.0.74

package/CHANGELOG.md

@@ -1,44 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.74-rc.1
-
-### Patch Changes
-
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.74-rc.1
-  - @akinon/theme-contract@2.0.74-rc.1
-
-## 2.0.74-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.74-rc.0
-  - @akinon/theme-contract@2.0.74-rc.0
+## 2.0.74
+
+### Patch Changes
+
+- e03dbf7c: Add coupon-wallet block: a two-column (active/used) coupon list for the account coupons page, selectable from the theme editor as an alternative to the default page — same takeover mechanism as the order detail page.
+  - @akinon/next@2.0.74
+  - @akinon/theme-contract@2.0.74
 
 ## 2.0.73
 

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

package/src/__tests__/registry-parity.test.ts

@@ -45,6 +45,7 @@ const EXPECTED_BLOCK_TYPES = [
   'countdown',
   'counter',
   'coupon-list',
+  'coupon-wallet',
   'currency-selector',
   'divider',
   'embed',

package/src/blocks/block-renderer-registry.tsx

@@ -49,6 +49,7 @@ import ProfileFormBlock from './profile-form-block';
 import ChangePasswordFormBlock from './change-password-form-block';
 import OrderDetailBlock from './order-detail-block';
 import CouponListBlock from './coupon-list-block';
+import CouponWalletBlock from './coupon-wallet-block';
 import FavouritesGridBlock from './favourites-grid-block';
 import MegaMenuBlock from './mega-menu-block';
 import CurrencySelectorBlock from './currency-selector-block';
@@ -164,6 +165,7 @@ blockRendererRegistry.register('profile-form', ProfileFormBlock);
 blockRendererRegistry.register('change-password-form', ChangePasswordFormBlock);
 blockRendererRegistry.register('order-detail', OrderDetailBlock);
 blockRendererRegistry.register('coupon-list', CouponListBlock);
+blockRendererRegistry.register('coupon-wallet', CouponWalletBlock);
 blockRendererRegistry.register('favourites-grid', FavouritesGridBlock);
 
 // Chrome extras
@@ -180,13 +182,22 @@ blockRendererRegistry.register('checkout-steps', CheckoutStepsBlock);
 blockRendererRegistry.register('order-success', OrderSuccessBlock);
 blockRendererRegistry.register('order-tracking', OrderTrackingBlock);
 blockRendererRegistry.register('checkout-flow-outlet', CheckoutFlowOutletBlock);
-blockRendererRegistry.register('checkout-steps-outlet', CheckoutStepsOutletBlock);
-blockRendererRegistry.register('checkout-summary-outlet', CheckoutSummaryOutletBlock);
+blockRendererRegistry.register(
+  'checkout-steps-outlet',
+  CheckoutStepsOutletBlock
+);
+blockRendererRegistry.register(
+  'checkout-summary-outlet',
+  CheckoutSummaryOutletBlock
+);
 
 // Catalog extras
 blockRendererRegistry.register('product-breadcrumb', ProductBreadcrumbBlock);
 blockRendererRegistry.register('product-attributes', ProductAttributesBlock);
-blockRendererRegistry.register('product-recommendations', ProductRecommendationsBlock);
+blockRendererRegistry.register(
+  'product-recommendations',
+  ProductRecommendationsBlock
+);
 blockRendererRegistry.register('panel', PanelBlock);
 // Legacy alias: published widget JSON still carries `size-guide`, and the AI
 // generator manifest still emits it. Same renderer, same parts, same markup.

package/src/blocks/coupon-wallet-block.tsx

@@ -0,0 +1,348 @@
+'use client';
+
+import React from 'react';
+import { useSession } from 'next-auth/react';
+import {
+  useGetBasketOffersQuery,
+  useGetDiscountItemsQuery
+} from '@akinon/next/data/client/account';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { formatDate, formatMoney } from './commerce-format';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+interface CouponLike {
+  pk?: number;
+  label?: string;
+  voucher_code?: string;
+  amount?: string;
+  percentage?: string | number;
+  // 'fixed' -> amount is a currency value; 'percentage' -> percentage is the
+  // discount rate. Missing/unknown falls back to "whichever field is set".
+  benefit_type?: string;
+  start_datetime?: string;
+  end_datetime?: string;
+  created_date?: string;
+  order_number?: string;
+}
+
+/**
+ * The active-coupon endpoint answers with `{ discounts: [...] }` while some
+ * payloads answer with the paginated `{ results: [...] }` shape. Both are
+ * probed (plus a bare array) so one reader covers every response — same
+ * approach as coupon-list-block.
+ */
+const readCoupons = (payload: unknown): CouponLike[] => {
+  if (Array.isArray(payload)) return payload as CouponLike[];
+
+  const record = (payload ?? {}) as Record<string, unknown>;
+
+  if (Array.isArray(record.discounts)) return record.discounts as CouponLike[];
+  if (Array.isArray(record.results)) return record.results as CouponLike[];
+
+  return [];
+};
+
+/**
+ * Functional account block: the shopper's coupon wallet split into two
+ * columns — active and used — on a CSS grid with two equal `1fr` tracks
+ * (collapsing to one track when only one side is shown), so the split stays
+ * exactly 50/50 regardless of which side has more rows, fewer rows, or none
+ * at all — a grid track's size is set by the track definition, not by the
+ * content inside it, which is what a flex `flex-basis` split can't guarantee
+ * once one side is empty. Stacked full-width on mobile. "Active" reads the
+ * basket-offers endpoint; "used" reads the discount-items endpoint (a coupon
+ * that was actually redeemed on an order), which is a different fact than
+ * "expired" (coupon-list-block's distinction).
+ * The column title's HTML tag is fixed (h2) — its visual style is a
+ * `column-title` typography preset (font, size, weight in one step), applied
+ * from the editor, not a per-block property.
+ * Properties: activeTitle, showActive, activeEmptyLabel, usedTitle, showUsed,
+ * usedEmptyLabel, limit, showDate, showCode, showAmount, percentagePrefix,
+ * termsLinkLabel, termsHref, termsLinkTarget.
+ * Parts: wrapper, column (active/used via data-coupon-wallet-column),
+ * column-title, list, item (state: disabled, for a used/redeemed row), date,
+ * title, code, amount, terms-link, empty.
+ */
+const CouponWalletBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const showActive = readToggle(
+    block.properties?.showActive,
+    currentBreakpoint,
+    true
+  );
+  const showUsed = readToggle(
+    block.properties?.showUsed,
+    currentBreakpoint,
+    true
+  );
+  const showCode = readToggle(
+    block.properties?.showCode,
+    currentBreakpoint,
+    true
+  );
+  const showAmount = readToggle(
+    block.properties?.showAmount,
+    currentBreakpoint,
+    true
+  );
+  const showDate = readToggle(
+    block.properties?.showDate,
+    currentBreakpoint,
+    true
+  );
+  const text = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+  const activeTitle = text('activeTitle', 'Active Coupons');
+  const usedTitle = text('usedTitle', 'Used Coupons');
+  const percentagePrefix = text('percentagePrefix', '%');
+  const activeEmptyLabel = text('activeEmptyLabel', '');
+  const usedEmptyLabel = text('usedEmptyLabel', '');
+  const termsLinkLabel = text('termsLinkLabel', '');
+  const termsHref = text('termsHref', '');
+  const termsLinkTarget = text('termsLinkTarget', '_self');
+  const rawLimit = Math.round(
+    Number(getResponsiveValue(block.properties?.limit, currentBreakpoint, 0))
+  );
+  const limit = Number.isFinite(rawLimit) && rawLimit > 0 ? rawLimit : 0;
+
+  const isMobile = currentBreakpoint === 'mobile';
+  const { locale, currency } = useLocalization();
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+
+  // Guests have no coupon wallet; skipping avoids a guaranteed 403 on every
+  // page that hosts this block.
+  const { data: activeData, isLoading: activeLoading } =
+    useGetBasketOffersQuery(undefined, {
+      skip: !isAuthenticated || !showActive
+    });
+  const { data: usedData, isLoading: usedLoading } = useGetDiscountItemsQuery(
+    undefined,
+    { skip: !isAuthenticated || !showUsed }
+  );
+
+  const activeCoupons = readCoupons(activeData);
+  const usedCoupons = readCoupons(usedData);
+  const visibleActive =
+    limit > 0 ? activeCoupons.slice(0, limit) : activeCoupons;
+  const visibleUsed = limit > 0 ? usedCoupons.slice(0, limit) : usedCoupons;
+
+  /** The one value a row actually prices at, driven by `benefit_type`. */
+  const describeValue = (coupon: CouponLike): string => {
+    const amount = formatMoney(coupon.amount, { locale, currency });
+    const percentage =
+      coupon.percentage !== undefined &&
+      coupon.percentage !== null &&
+      String(coupon.percentage).trim()
+        ? `${percentagePrefix}${coupon.percentage}`
+        : '';
+    const benefitType = String(coupon.benefit_type || '').toLowerCase();
+
+    if (benefitType === 'fixed') return amount;
+    if (benefitType === 'percentage') return percentage;
+
+    // Payload omitted benefit_type: fall back to whichever field is set.
+    return percentage || amount;
+  };
+
+  const guard = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  const renderTermsLink = () =>
+    termsLinkLabel ? (
+      <a
+        href={isDesigner ? '#' : termsHref || '#'}
+        target={isDesigner ? undefined : termsLinkTarget}
+        rel={termsLinkTarget === '_blank' ? 'noreferrer' : undefined}
+        onClick={guard}
+        data-coupon-wallet-terms-link=""
+        {...partAttrs('terms-link')}
+        style={{
+          display: 'inline-block',
+          marginTop: '8px',
+          color: 'inherit',
+          textDecoration: 'none'
+        }}
+      >
+        → {termsLinkLabel}
+      </a>
+    ) : null;
+
+  const renderColumn = (
+    title: string,
+    coupons: CouponLike[],
+    isUsed: boolean,
+    emptyLabel: string,
+    loading: boolean
+  ) => (
+    // A column with nothing to show still renders its shell (title + empty
+    // state) so the grid keeps both tracks — see the block doc comment above
+    // for why the split is a grid track, not a flex-basis split.
+    <div
+      data-coupon-wallet-column={isUsed ? 'used' : 'active'}
+      {...partAttrs('column')}
+      style={{ minWidth: 0 }}
+    >
+      <h2
+        data-coupon-wallet-column-title=""
+        {...partAttrs('column-title')}
+        style={{ marginBottom: '24px' }}
+      >
+        {title}
+      </h2>
+
+      {coupons.length > 0 ? (
+        <ul
+          data-coupon-wallet-list=""
+          {...partAttrs('list')}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--coupon-wallet-item-gap, 24px)',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0
+          }}
+        >
+          {coupons.map((coupon, index) => {
+            const value = describeValue(coupon);
+
+            return (
+              <li
+                key={coupon.pk ?? `${coupon.voucher_code}-${index}`}
+                data-coupon-wallet-item=""
+                data-coupon-wallet-item-used={isUsed ? 'true' : 'false'}
+                {...partAttrs('item', { disabled: isUsed })}
+                style={{ opacity: isUsed ? 0.5 : 1 }}
+              >
+                {showDate && (
+                  <span
+                    data-coupon-wallet-date=""
+                    {...partAttrs('date')}
+                    style={{
+                      display: 'inline-block',
+                      padding: '4px 10px',
+                      marginBottom: '12px',
+                      background: 'var(--coupon-wallet-date-bg, #efece3)',
+                      fontSize: '12px'
+                    }}
+                  >
+                    {formatDate(
+                      isUsed ? coupon.created_date : coupon.end_datetime,
+                      locale
+                    )}
+                  </span>
+                )}
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'baseline',
+                    flexWrap: 'wrap',
+                    gap: '8px'
+                  }}
+                >
+                  <span
+                    data-coupon-wallet-title=""
+                    {...partAttrs('title')}
+                    style={{ fontWeight: 600, textTransform: 'uppercase' }}
+                  >
+                    {coupon.label}
+                  </span>
+                  {showCode && coupon.voucher_code && (
+                    <span
+                      data-coupon-wallet-code=""
+                      {...partAttrs('code')}
+                      style={{ letterSpacing: '0.05em' }}
+                    >
+                      {coupon.voucher_code}
+                    </span>
+                  )}
+                  {showAmount && value && (
+                    <span
+                      data-coupon-wallet-amount=""
+                      {...partAttrs('amount')}
+                      style={{ opacity: 0.7 }}
+                    >
+                      {value}
+                    </span>
+                  )}
+                </div>
+                {renderTermsLink()}
+              </li>
+            );
+          })}
+        </ul>
+      ) : isDesigner ? (
+        <DesignerPlaceholder
+          label={loading ? 'Coupons (loading)' : 'Coupons (none)'}
+          attribute="data-coupon-wallet-list"
+        />
+      ) : (
+        !loading &&
+        emptyLabel && (
+          <div
+            data-coupon-wallet-empty=""
+            {...partAttrs('empty')}
+            style={{ opacity: 0.6 }}
+          >
+            {emptyLabel}
+          </div>
+        )
+      )}
+    </div>
+  );
+
+  if (!showActive && !showUsed) return null;
+
+  const bothShown = showActive && showUsed;
+
+  return (
+    <div
+      data-coupon-wallet=""
+      {...partAttrs('wrapper')}
+      style={
+        isMobile
+          ? {
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '48px',
+              width: '100%'
+            }
+          : {
+              display: 'grid',
+              // Two equal tracks only when both columns render — a single
+              // shown column gets the one track it needs, not half the row.
+              gridTemplateColumns: bothShown ? '1fr 1fr' : '1fr',
+              gap: '64px',
+              // Without an explicit width, a grid box's auto-width can shrink
+              // to its content's min-content instead of filling the row (the
+              // theme editor's own root "width" style targets the block's
+              // outer wrapper, not this element), so the 1fr/1fr split never
+              // gets a full row to divide.
+              width: '100%'
+            }
+      }
+    >
+      {showActive &&
+        renderColumn(
+          activeTitle,
+          visibleActive,
+          false,
+          activeEmptyLabel,
+          activeLoading
+        )}
+      {showUsed &&
+        renderColumn(usedTitle, visibleUsed, true, usedEmptyLabel, usedLoading)}
+    </div>
+  );
+};
+
+export default CouponWalletBlock;