@akinon/pz-theme 2.0.37-rc.0 → 2.0.38-beta.0

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

@@ -0,0 +1,292 @@
+'use client';
+
+import React from 'react';
+import { useSession } from 'next-auth/react';
+import {
+  useGetBasketOffersQuery,
+  useGetExpiredBasketOffersQuery
+} from '@akinon/next/data/client/account';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { formatDate, formatMoney } from './commerce-format';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+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;
+  start_datetime?: string;
+  end_datetime?: string;
+  created_date?: string;
+}
+
+/**
+ * The active-coupon endpoint answers with `{ discounts: [...] }` while the
+ * expired one answers with the paginated `{ results: [...] }` shape. Both are
+ * probed (plus a bare array) so one reader covers every response.
+ */
+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 coupons/vouchers. Coupon CONTENT
+ * stays commerce-driven (account offers service); the editor owns whether the
+ * expired ones are listed too, which fields the card carries, the card columns
+ * and the styling.
+ * Properties: showExpired, showLabel, showCode, showValue, showValidity, limit,
+ * columns, percentagePrefix, validitySeparator, emptyLabel.
+ * Parts: list, item (disabled on an expired coupon), label, code, value,
+ * validity, empty.
+ */
+const CouponListBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const showExpired = readToggle(
+    block.properties?.showExpired,
+    currentBreakpoint,
+    false
+  );
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    true
+  );
+  const showCode = readToggle(
+    block.properties?.showCode,
+    currentBreakpoint,
+    true
+  );
+  const showValue = readToggle(
+    block.properties?.showValue,
+    currentBreakpoint,
+    true
+  );
+  const showValidity = readToggle(
+    block.properties?.showValidity,
+    currentBreakpoint,
+    true
+  );
+  const text = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+  const percentagePrefix = text('percentagePrefix', '%');
+  const validitySeparator = text('validitySeparator', ' – ');
+  const emptyLabel = text('emptyLabel', '');
+  const rawLimit = Math.round(
+    Number(getResponsiveValue(block.properties?.limit, currentBreakpoint, 0))
+  );
+  // 0 keeps the whole wallet on screen, which is what the block has always done.
+  const limit = Number.isFinite(rawLimit) && rawLimit > 0 ? rawLimit : 0;
+  const rawColumns = Math.round(
+    Number(getResponsiveValue(block.properties?.columns, currentBreakpoint, 1))
+  );
+  const columns =
+    Number.isFinite(rawColumns) && rawColumns > 0 ? Math.min(rawColumns, 4) : 1;
+
+  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 } = useGetBasketOffersQuery(undefined, {
+    skip: !isAuthenticated
+  });
+  // Called unconditionally (hook order is fixed) but skipped when the toggle is
+  // off, so the extra request is only paid for when the list is actually shown.
+  const { data: expiredData } = useGetExpiredBasketOffersQuery(undefined, {
+    skip: !isAuthenticated || !showExpired
+  });
+
+  const allCoupons: Array<CouponLike & { expired: boolean }> = [
+    ...readCoupons(activeData).map((coupon) => ({ ...coupon, expired: false })),
+    ...(showExpired
+      ? readCoupons(expiredData).map((coupon) => ({ ...coupon, expired: true }))
+      : [])
+  ];
+  const coupons = limit > 0 ? allCoupons.slice(0, limit) : allCoupons;
+
+  const describe = (coupon: CouponLike) => {
+    const validUntil = formatDate(coupon.end_datetime, locale);
+    const validFrom = formatDate(
+      coupon.start_datetime || coupon.created_date,
+      locale
+    );
+    const amount = formatMoney(coupon.amount, { locale, currency });
+    const percentage =
+      coupon.percentage !== undefined &&
+      coupon.percentage !== null &&
+      String(coupon.percentage).trim()
+        ? `${percentagePrefix}${coupon.percentage}`
+        : '';
+
+    return { validFrom, validUntil, amount, percentage };
+  };
+
+  const rows = coupons.map((coupon, index) => {
+    const { validFrom, validUntil, amount, percentage } = describe(coupon);
+
+    return {
+      key: String(coupon.pk ?? coupon.voucher_code ?? index),
+      pk: coupon.pk ?? '',
+      name: coupon.label || '',
+      label: coupon.label || '',
+      code: coupon.voucher_code || '',
+      value: percentage || amount,
+      amount,
+      percentage,
+      validFrom,
+      validUntil,
+      // `expiry` is the name the binding picker offers for the end date.
+      expiry: validUntil,
+      validity: [validFrom, validUntil].filter(Boolean).join(validitySeparator),
+      expired: coupon.expired
+    };
+  });
+
+  // A designer who marked a child as the card layout gets that layout repeated
+  // per coupon; otherwise the built-in card renders unchanged.
+  const customCards = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={rows}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  if (coupons.length === 0 && !customCards) {
+    if (isDesigner) {
+      return (
+        <DesignerPlaceholder
+          label={isLoading ? 'Coupons (loading)' : 'Coupons (none)'}
+          attribute="data-coupon-list"
+        />
+      );
+    }
+
+    // Without an empty message the block stays absent, which is what every
+    // published composition renders today.
+    if (!isAuthenticated || isLoading || !emptyLabel) return null;
+
+    return (
+      <div
+        data-coupon-list=""
+        data-coupon-list-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  // One column keeps the flex column the block has always rendered; a grid is
+  // only introduced once the author actually asks for more than one.
+  const listLayout: React.CSSProperties =
+    columns > 1
+      ? {
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+        }
+      : { display: 'flex', flexDirection: 'column' };
+
+  return (
+    <ul
+      data-coupon-list=""
+      data-coupon-list-columns={columns}
+      {...partAttrs('list')}
+      style={{
+        ...listLayout,
+        gap: 'var(--coupon-list-gap, 16px)',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0
+      }}
+    >
+      {customCards ??
+        coupons.map((coupon, index) => {
+          const { validFrom, validUntil, amount, percentage } =
+            describe(coupon);
+
+          return (
+            <li
+              key={coupon.pk ?? coupon.voucher_code ?? index}
+              data-coupon-item=""
+              data-coupon-item-expired={coupon.expired ? 'true' : 'false'}
+              {...partAttrs('item', { disabled: coupon.expired })}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '6px',
+                padding: '16px',
+                border: '1px dashed var(--coupon-list-border, #e5e7eb)',
+                // Expired coupons stay listed but read as inactive.
+                opacity: coupon.expired ? 0.6 : 1
+              }}
+            >
+              {showLabel && coupon.label && (
+                <span
+                  data-coupon-label=""
+                  {...partAttrs('label')}
+                  style={{ fontWeight: 600 }}
+                >
+                  {coupon.label}
+                </span>
+              )}
+
+              {showCode && coupon.voucher_code && (
+                <span
+                  data-coupon-code=""
+                  {...partAttrs('code')}
+                  style={{ letterSpacing: '0.08em' }}
+                >
+                  {coupon.voucher_code}
+                </span>
+              )}
+
+              {showValue && (percentage || amount) && (
+                <span data-coupon-value="" {...partAttrs('value')}>
+                  {percentage || amount}
+                </span>
+              )}
+
+              {showValidity && (validFrom || validUntil) && (
+                <span
+                  data-coupon-validity=""
+                  {...partAttrs('validity')}
+                  style={{ opacity: 0.8 }}
+                >
+                  {[validFrom, validUntil]
+                    .filter(Boolean)
+                    .join(validitySeparator)}
+                </span>
+              )}
+            </li>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default CouponListBlock;