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

package/src/blocks/checkout-summary-block.tsx

@@ -0,0 +1,449 @@
+'use client';
+
+import React from 'react';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useThemePageContext } from '../theme-page-context';
+import { formatMoney, parseAmount } from './commerce-format';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/** Live basket line, as `getBasket` returns it. */
+interface BasketLineLike {
+  id?: number;
+  quantity?: number;
+  image?: string;
+  price?: string;
+  unit_price?: string;
+  total_amount?: string;
+  currency_type?: string;
+  product?: { pk?: number; name?: string; image?: string } | null;
+}
+
+interface BasketTotalsLike {
+  total_amount?: string;
+  total_product_amount?: string;
+  total_discount_amount?: string;
+  voucher_code?: string | null;
+  basketitem_set?: BasketLineLike[];
+}
+
+/** Basket line as `buildBasketPageContext()` normalises it (different keys). */
+interface ContextLineLike {
+  name?: string;
+  title?: string;
+  image?: string;
+  quantity?: number;
+  price?: string;
+  unitPrice?: string;
+  totalAmount?: string;
+  currency?: string;
+  product?: { pk?: number } | null;
+}
+
+interface SummaryLine {
+  key: string;
+  name: string;
+  image: string;
+  quantity: number;
+  total: string;
+  currency: string;
+}
+
+interface TotalsRow {
+  key: string;
+  label: string;
+  value: string;
+  /** `total` is the grand total; it carries its own part and weight. */
+  type: 'subtotal' | 'shipping' | 'discount' | 'total';
+}
+
+const readCount = (value: unknown, fallback: number): number => {
+  const numeric = Math.round(Number(value));
+
+  return Number.isFinite(numeric) && numeric >= 0 ? numeric : fallback;
+};
+
+/**
+ * Read-only checkout sidebar recap. Deliberately has no affordances: no
+ * quantity steppers, no remove buttons, no coupon form and no product links.
+ * A shopper who leaves the checkout page mid-flow loses the pre-order the
+ * payment step is built on, so this block only ever displays.
+ *
+ * Totals come from the basket (`useGetBasketQuery`, the same source as
+ * basket-summary-block). Shipping is the one figure the basket payload does
+ * not carry — it only exists on the checkout pre-order — so it is read from
+ * the checkout redux slice, read-only, and the row is skipped entirely
+ * outside checkout where no pre-order exists.
+ *
+ * Parts: root, list, item, image, content, name, quantity, line-total, totals,
+ * row, row-label, row-value, total, total-label, total-value, coupon,
+ * coupon-label, coupon-code, empty. A child marked as the item template
+ * replaces either the line rows or the totals rows (`itemTemplateTarget`).
+ */
+const CheckoutSummaryBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const boolProp = (key: string, fallback: boolean) =>
+    readToggle(block.properties?.[key], currentBreakpoint, fallback);
+
+  const showLineItems = boolProp('showLineItems', true);
+  const showCoupon = boolProp('showCoupon', true);
+  const showSubtotal = boolProp('showSubtotal', true);
+  const showShipping = boolProp('showShipping', true);
+  const showDiscount = boolProp('showDiscount', true);
+  const showItemImage = boolProp('showItemImage', true);
+  const showItemQuantity = boolProp('showItemQuantity', true);
+
+  const subtotalLabel = prop('subtotalLabel', 'Subtotal');
+  const shippingLabel = prop('shippingLabel', 'Shipping');
+  const discountLabel = prop('discountLabel', 'Discount');
+  const totalLabel = prop('totalLabel', 'Total');
+  const couponLabel = prop('couponLabel', 'Coupon');
+  const discountPrefix = prop('discountPrefix', '-');
+  const quantityPrefix = prop('quantityPrefix', '×');
+  const emptyLabel = prop('emptyLabel', '').trim();
+  const loadingLabel = prop('loadingLabel', '').trim();
+  const templateTarget = prop('itemTemplateTarget', 'items');
+
+  const imageWidth = readCount(
+    getResponsiveValue(block.properties?.imageWidth, currentBreakpoint, 56),
+    56
+  );
+  const imageHeight = readCount(
+    getResponsiveValue(block.properties?.imageHeight, currentBreakpoint, 75),
+    75
+  );
+  const maxItems = readCount(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
+    0
+  );
+
+  const pageContext = useThemePageContext();
+  const { locale, currency: localeCurrency } = useLocalization();
+  const { data: basket, isLoading } = useGetBasketQuery(undefined as never);
+
+  // Read-only view of the checkout pre-order. Selecting a single primitive-ish
+  // branch keeps this from re-rendering on every unrelated checkout action.
+  const preOrder = useAppSelector(
+    (state: Record<string, any>) => state?.checkout?.preOrder
+  ) as
+    | { shipping_amount?: string; unpaid_amount?: string }
+    | null
+    | undefined;
+
+  const liveBasket = basket as BasketTotalsLike | undefined;
+  const contextBasket = (pageContext?.basket ?? null) as {
+    totalAmount?: string;
+    totalProductAmount?: string;
+    totalDiscountAmount?: string;
+    voucherCode?: string;
+    items?: ContextLineLike[];
+  } | null;
+
+  const liveLines = liveBasket?.basketitem_set;
+
+  // The live query owns the post-mutation state; the SSR page context is only
+  // a first-paint fallback so the sidebar is not blank before it resolves.
+  const allLines: SummaryLine[] = Array.isArray(liveLines)
+    ? liveLines.map((item, index) => ({
+        key: String(item.id ?? item.product?.pk ?? index),
+        name: item.product?.name || '',
+        image: item.image || item.product?.image || '',
+        quantity: Number(item.quantity ?? 1),
+        total: String(item.total_amount ?? item.price ?? ''),
+        // The line reports the currency it was priced in; the storefront
+        // currency is only the fallback when commerce omits it.
+        currency: item.currency_type || localeCurrency || ''
+      }))
+    : (contextBasket?.items || []).map((item, index) => ({
+        key: String(item.product?.pk ?? index),
+        name: item.name || item.title || '',
+        image: item.image || '',
+        quantity: Number(item.quantity ?? 1),
+        total: String(item.totalAmount ?? item.price ?? ''),
+        currency: item.currency || localeCurrency || ''
+      }));
+
+  const lines = maxItems > 0 ? allLines.slice(0, maxItems) : allLines;
+
+  const totals = {
+    subtotal:
+      liveBasket?.total_product_amount ?? contextBasket?.totalProductAmount,
+    discount:
+      liveBasket?.total_discount_amount ?? contextBasket?.totalDiscountAmount,
+    // The pre-order's unpaid amount is the payable figure (it already includes
+    // shipping and any installment interest); the basket total is the
+    // pre-checkout fallback.
+    total:
+      preOrder?.unpaid_amount ??
+      liveBasket?.total_amount ??
+      contextBasket?.totalAmount,
+    shipping: preOrder?.shipping_amount,
+    voucher: liveBasket?.voucher_code ?? contextBasket?.voucherCode ?? ''
+  };
+
+  const currency =
+    lines[0]?.currency ||
+    liveBasket?.basketitem_set?.[0]?.currency_type ||
+    localeCurrency ||
+    '';
+
+  const money = (value?: string | number) =>
+    formatMoney(value, { locale, currency });
+
+  const hasBasket = Boolean(liveBasket || contextBasket);
+
+  const rows: TotalsRow[] = [];
+
+  if (showSubtotal && totals.subtotal !== undefined) {
+    rows.push({
+      key: 'subtotal',
+      label: subtotalLabel,
+      value: money(totals.subtotal),
+      type: 'subtotal'
+    });
+  }
+
+  // Shipping only exists on the checkout pre-order, so the row is omitted
+  // rather than guessed at when there is none.
+  if (showShipping && totals.shipping !== undefined) {
+    rows.push({
+      key: 'shipping',
+      label: shippingLabel,
+      value: money(totals.shipping),
+      type: 'shipping'
+    });
+  }
+
+  if (showDiscount && (parseAmount(totals.discount) ?? 0) > 0) {
+    rows.push({
+      key: 'discount',
+      label: discountLabel,
+      value: `${discountPrefix}${money(totals.discount)}`,
+      type: 'discount'
+    });
+  }
+
+  rows.push({
+    key: 'total',
+    label: totalLabel,
+    value: money(totals.total),
+    type: 'total'
+  });
+
+  // Plain objects so a designer binds item.name / item.image / item.quantity /
+  // item.total in their own row layout.
+  const templateLines = lines.map((line) => ({
+    key: line.key,
+    name: line.name,
+    image: line.image,
+    quantity: line.quantity,
+    total: formatMoney(line.total, { locale, currency: line.currency }),
+    currency: line.currency
+  }));
+
+  const hasTemplate = hasItemTemplate(block, currentBreakpoint);
+
+  const customLines =
+    hasTemplate && templateTarget !== 'totals' ? (
+      <ItemTemplateList
+        block={block}
+        items={templateLines as unknown as Record<string, unknown>[]}
+        placeholderId={placeholderId}
+        sectionId={sectionId}
+        isDesigner={isDesigner}
+        selectedBlockId={selectedBlockId}
+        currentBreakpoint={currentBreakpoint}
+      />
+    ) : null;
+
+  const customTotals =
+    hasTemplate && templateTarget === 'totals' ? (
+      <ItemTemplateList
+        block={block}
+        items={rows as unknown as Record<string, unknown>[]}
+        placeholderId={placeholderId}
+        sectionId={sectionId}
+        isDesigner={isDesigner}
+        selectedBlockId={selectedBlockId}
+        currentBreakpoint={currentBreakpoint}
+      />
+    ) : null;
+
+  if (!hasBasket) {
+    const authoredLabel = isLoading ? loadingLabel : emptyLabel;
+
+    if (!isDesigner && !authoredLabel) return null;
+
+    const designerLabel = isLoading
+      ? 'Checkout summary (loading)'
+      : 'Checkout summary (no basket data)';
+
+    return (
+      <div
+        data-checkout-summary=""
+        data-checkout-summary-state="empty"
+        {...partAttrs('empty', { empty: true, loading: isLoading })}
+      >
+        {authoredLabel || (isDesigner ? designerLabel : '')}
+      </div>
+    );
+  }
+
+  const rowStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '12px',
+    padding: '4px 0'
+  };
+
+  return (
+    <div
+      data-checkout-summary=""
+      {...partAttrs('root')}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--checkout-summary-gap, 12px)'
+      }}
+    >
+      {showLineItems && (lines.length > 0 || customLines) && (
+        <ul
+          data-checkout-summary-items=""
+          {...partAttrs('list')}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0
+          }}
+        >
+          {customLines ??
+            lines.map((line) => (
+              <li
+                key={line.key}
+                data-checkout-summary-item=""
+                {...partAttrs('item')}
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: '12px'
+                }}
+              >
+                {showItemImage && line.image && (
+                  // Plain img: basket thumbnails come from arbitrary commerce
+                  // CDNs that the brand next.config may not allow.
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={line.image}
+                    alt={line.name}
+                    width={imageWidth}
+                    height={imageHeight}
+                    {...partAttrs('image')}
+                    style={{
+                      objectFit: 'cover',
+                      display: 'block',
+                      flex: '0 0 auto'
+                    }}
+                  />
+                )}
+
+                <div
+                  {...partAttrs('content')}
+                  style={{ flex: '1 1 auto', minWidth: 0 }}
+                >
+                  <span
+                    data-checkout-summary-item-name=""
+                    {...partAttrs('name')}
+                  >
+                    {line.name}
+                  </span>
+                  {showItemQuantity && (
+                    <div
+                      data-checkout-summary-item-quantity=""
+                      {...partAttrs('quantity')}
+                      style={{ marginTop: '2px', opacity: 0.8 }}
+                    >
+                      {quantityPrefix}
+                      {line.quantity}
+                    </div>
+                  )}
+                </div>
+
+                <span
+                  data-checkout-summary-item-total=""
+                  {...partAttrs('line-total')}
+                  style={{ flex: '0 0 auto' }}
+                >
+                  {formatMoney(line.total, { locale, currency: line.currency })}
+                </span>
+              </li>
+            ))}
+        </ul>
+      )}
+
+      <div data-checkout-summary-totals="" {...partAttrs('totals')}>
+        {customTotals ??
+          rows.map((row) =>
+            row.type === 'total' ? (
+              <div
+                key={row.key}
+                style={{ ...rowStyle, fontWeight: 600 }}
+                data-checkout-summary-row="total"
+                {...partAttrs('total')}
+              >
+                <span {...partAttrs('total-label')}>{row.label}</span>
+                <span {...partAttrs('total-value')}>{row.value}</span>
+              </div>
+            ) : (
+              <div
+                key={row.key}
+                style={rowStyle}
+                data-checkout-summary-row={row.type}
+                {...partAttrs('row')}
+              >
+                <span {...partAttrs('row-label')}>{row.label}</span>
+                <span {...partAttrs('row-value')}>{row.value}</span>
+              </div>
+            )
+          )}
+      </div>
+
+      {/* Display only: applying or removing a coupon mid-checkout recalculates
+          the pre-order, which is the payment step's job — not this block's. */}
+      {showCoupon && totals.voucher && (
+        <div
+          data-checkout-summary-coupon=""
+          {...partAttrs('coupon', { selected: true })}
+          style={{ display: 'flex', justifyContent: 'space-between', gap: '12px' }}
+        >
+          <span {...partAttrs('coupon-label')}>{couponLabel}</span>
+          <span
+            data-checkout-summary-coupon-code=""
+            {...partAttrs('coupon-code')}
+          >
+            {totals.voucher}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CheckoutSummaryBlock;

package/src/blocks/countdown-block.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+const pad = (value: number) => String(value).padStart(2, '0');
+
+/**
+ * Functional content block: a campaign countdown for landing pages.
+ *
+ * The remaining time is only computed after mount. Rendering it during SSR
+ * would bake the server clock into the HTML and hydrate against a different
+ * client clock — a guaranteed mismatch on a value that changes every second —
+ * so the first paint shows placeholder digits with the final markup shape.
+ *
+ * Parts: root, segment, value, label, separator, expired.
+ */
+const CountdownBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const [now, setNow] = useState<number | null>(null);
+
+  useEffect(() => {
+    setNow(Date.now());
+
+    const timer = setInterval(() => setNow(Date.now()), SECOND);
+    return () => clearInterval(timer);
+  }, []);
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const boolProp = (key: string, fallback: boolean) =>
+    readToggle(block.properties?.[key], currentBreakpoint, fallback);
+
+  const targetDate = prop('targetDate', '').trim();
+  const expiredLabel = prop('expiredLabel', 'Campaign ended');
+  const showLabels = boolProp('showLabels', true);
+  const padDigits = boolProp('padDigits', true);
+  const separator = prop('separator', '');
+  const placeholder = prop('placeholder', '--');
+
+  const units = [
+    {
+      key: 'days',
+      ms: DAY,
+      label: prop('daysLabel', 'Days'),
+      shown: boolProp('showDays', true)
+    },
+    {
+      key: 'hours',
+      ms: HOUR,
+      label: prop('hoursLabel', 'Hours'),
+      shown: boolProp('showHours', true)
+    },
+    {
+      key: 'minutes',
+      ms: MINUTE,
+      label: prop('minutesLabel', 'Minutes'),
+      shown: boolProp('showMinutes', true)
+    },
+    {
+      key: 'seconds',
+      ms: SECOND,
+      label: prop('secondsLabel', 'Seconds'),
+      shown: boolProp('showSeconds', true)
+    }
+  ];
+
+  const target = targetDate ? Date.parse(targetDate) : Number.NaN;
+
+  if (!Number.isFinite(target)) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Countdown (set a target date, e.g. 2026-12-31T23:59:00)"
+        attribute="data-countdown"
+      />
+    ) : null;
+  }
+
+  const remaining = now === null ? null : Math.max(0, target - now);
+  const state =
+    remaining === null ? 'pending' : remaining === 0 ? 'expired' : 'running';
+
+  if (state === 'expired') {
+    return (
+      <div
+        data-countdown=""
+        data-countdown-state="expired"
+        {...partAttrs('expired', { empty: true })}
+      >
+        {expiredLabel}
+      </div>
+    );
+  }
+
+  // A hidden unit rolls into the next visible one, so switching days off shows
+  // the total hours rather than silently dropping a day from the total.
+  let rest = remaining;
+  const segments = units
+    .filter((unit) => unit.shown)
+    .map((unit) => {
+      if (rest === null) return { key: unit.key, label: unit.label, value: null };
+
+      const value = Math.floor(rest / unit.ms);
+      rest = rest % unit.ms;
+
+      return { key: unit.key, label: unit.label, value };
+    });
+
+  return (
+    <div
+      data-countdown=""
+      data-countdown-state={state}
+      {...partAttrs('root', { loading: remaining === null })}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--countdown-gap, 12px)'
+      }}
+    >
+      {segments.map((segment, index) => (
+        <React.Fragment key={segment.key}>
+          <div
+            data-countdown-segment={segment.key}
+            {...partAttrs('segment')}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              lineHeight: 1.2
+            }}
+          >
+            <span
+              data-countdown-value=""
+              {...partAttrs('value')}
+              style={{ fontVariantNumeric: 'tabular-nums' }}
+            >
+              {segment.value === null
+                ? placeholder
+                : padDigits
+                ? pad(segment.value)
+                : String(segment.value)}
+            </span>
+            {showLabels && (
+              <span
+                data-countdown-label=""
+                {...partAttrs('label')}
+                style={{ fontSize: '0.75em', opacity: 0.7 }}
+              >
+                {segment.label}
+              </span>
+            )}
+          </div>
+
+          {separator && index < segments.length - 1 && (
+            <span
+              data-countdown-separator=""
+              aria-hidden="true"
+              {...partAttrs('separator')}
+            >
+              {separator}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default CountdownBlock;