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

package/src/blocks/order-detail-block.tsx

@@ -0,0 +1,474 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { useParams, useSearchParams } from 'next/navigation';
+import { useGetOrderQuery } 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,
+  groupOrderItems,
+  readToggle
+} from './product-block-utils';
+
+interface OrderItemLike {
+  id?: number;
+  price?: string;
+  quantity?: string | number;
+  total_amount?: string;
+  status?: { value?: string; label?: string };
+  tracking_url?: string;
+  tracking_number?: string;
+  estimated_delivery_date?: string;
+  price_currency?: { value?: string; label?: string };
+  product?: {
+    pk?: number;
+    name?: string;
+    image?: string;
+    absolute_url?: string;
+  } | null;
+}
+
+interface OrderLike {
+  number?: string;
+  created_date?: string;
+  amount?: string;
+  amount_without_discount?: string;
+  discount_amount?: string;
+  shipping_amount?: string;
+  tracking_url?: string;
+  tracking_number?: string;
+  status?: { value?: string; label?: string };
+  currency?: { value?: string; label?: string };
+  orderitem_set?: OrderItemLike[];
+}
+
+/**
+ * The order key lives in the route on account pages (`/account/orders/[id]`)
+ * but in the query string on the anonymous tracking page, and brands name the
+ * segment differently. Both sources are probed so the block works wherever it
+ * is dropped, without asking the author to configure a data path.
+ *
+ * `pk` is in the list because it is the segment name pz uses for every other
+ * detail route (product/[pk], category/[pk], flat-page/[pk]), so an order route
+ * copied from those reads its key from `pk` rather than from `id`.
+ */
+const ORDER_PARAM_KEYS = [
+  'id',
+  'pk',
+  'orderId',
+  'orderNumber',
+  'number',
+  'order'
+];
+
+const firstString = (
+  read: (key: string) => unknown,
+  keys: string[]
+): string => {
+  for (const key of keys) {
+    const value = read(key);
+    const text = Array.isArray(value) ? value[0] : value;
+
+    if (typeof text === 'string' && text.trim()) return text.trim();
+    if (typeof text === 'number') return String(text);
+  }
+
+  return '';
+};
+
+/** Positive integers only; anything else falls back to the shipped size. */
+const readSize = (value: unknown, fallback: number): number => {
+  const numeric = Math.round(Number(value));
+
+  return Number.isFinite(numeric) && numeric > 0 ? numeric : fallback;
+};
+
+/**
+ * Functional account block: one order's lines, totals, status and shipment
+ * info. Order CONTENT stays commerce-driven (account order service) and the
+ * order key is read from the URL; the editor owns which sections are exposed,
+ * every caption and the styling.
+ * A designer can mark one child as the row layout for the order lines; without
+ * one the built-in line renders.
+ * Properties: showShipmentStatus, showItems, showImage, imageWidth,
+ * imageHeight, showQuantity, showTotals, quantityPrefix, subtotalLabel,
+ * discountLabel, shippingLabel, totalLabel, trackingLabel.
+ * Parts: detail, header, number, date, status, list, item, image, name,
+ * quantity, item-status, price, shipment, delivery, tracking, totals,
+ * total-row, total-label, total-value, grand-total.
+ */
+const OrderDetailBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const showShipmentStatus = readToggle(
+    block.properties?.showShipmentStatus,
+    currentBreakpoint,
+    true
+  );
+  const showItems = readToggle(
+    block.properties?.showItems,
+    currentBreakpoint,
+    true
+  );
+  const showImage = readToggle(
+    block.properties?.showImage,
+    currentBreakpoint,
+    true
+  );
+  const showQuantity = readToggle(
+    block.properties?.showQuantity,
+    currentBreakpoint,
+    true
+  );
+  const showTotals = readToggle(
+    block.properties?.showTotals,
+    currentBreakpoint,
+    true
+  );
+  const imageWidth = readSize(
+    getResponsiveValue(block.properties?.imageWidth, currentBreakpoint, 72),
+    72
+  );
+  const imageHeight = readSize(
+    getResponsiveValue(block.properties?.imageHeight, currentBreakpoint, 96),
+    96
+  );
+  const text = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+  const quantityPrefix = text('quantityPrefix', 'x');
+  const subtotalLabel = text('subtotalLabel', 'Subtotal');
+  const discountLabel = text('discountLabel', 'Discount');
+  const shippingLabel = text('shippingLabel', 'Shipping');
+  const totalLabel = text('totalLabel', 'Total');
+  const trackingLabel = text('trackingLabel', 'Track shipment');
+
+  const { locale, currency: localeCurrency } = useLocalization();
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+  const orderKey =
+    firstString((key) => (params as Record<string, unknown>)?.[key], ORDER_PARAM_KEYS) ||
+    firstString((key) => searchParams?.get(key), ORDER_PARAM_KEYS);
+
+  // Not gated on the session: brands expose the same endpoint for anonymous
+  // order tracking. Without a key there is nothing to ask for at all.
+  const { data, isLoading } = useGetOrderQuery(orderKey, { skip: !orderKey });
+
+  const order = (data ?? null) as OrderLike | null;
+  const items = order?.orderitem_set ?? [];
+  // pz writes one order line per unit; the same shared grouping the thank-you
+  // page uses keeps a three-unit order from listing as three "x1" rows here.
+  // The raw lines are still used for the shipment section, which reads the
+  // per-line delivery estimate.
+  const groupedItems = groupOrderItems(items);
+
+  if (!order) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label={
+          isLoading
+            ? 'Order detail (loading)'
+            : orderKey
+            ? 'Order detail (order not found)'
+            : 'Order detail (no order in URL)'
+        }
+        attribute="data-order-detail"
+      />
+    ) : null;
+  }
+
+  // The order carries the currency it was placed in; the storefront currency is
+  // only the fallback for payloads that omit it.
+  const currency = order.currency?.value || localeCurrency;
+  const money = (value: unknown) => formatMoney(value, { locale, currency });
+
+  // Navigating inside the designer iframe would drop the author out of the page
+  // they are editing, so every link is inert there.
+  const guard = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  const rowStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '12px'
+  };
+
+  const lineRows = groupedItems.map((line) => {
+    const lineCurrency = line.item.price_currency?.value || currency;
+
+    return {
+      key: line.key,
+      name: line.name,
+      image: line.image,
+      url: line.href,
+      href: line.href,
+      quantity: line.quantity,
+      price: formatMoney(line.price, { locale, currency: lineCurrency }),
+      total: formatMoney(line.total, { locale, currency: lineCurrency }),
+      status: line.item.status?.label || '',
+      statusValue: line.item.status?.value || ''
+    };
+  });
+
+  // A designer who marked a child as the row layout gets that layout repeated
+  // per order line; otherwise the built-in line renders unchanged.
+  const customLines = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={lineRows}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  const totalRow = (
+    label: string,
+    value: string,
+    attribute: string,
+    part = 'total-row'
+  ) =>
+    value ? (
+      <div {...{ [attribute]: '' }} {...partAttrs(part)} style={rowStyle}>
+        <span {...partAttrs('total-label')}>{label}</span>
+        <span {...partAttrs('total-value')}>{value}</span>
+      </div>
+    ) : null;
+
+  return (
+    <div
+      data-order-detail=""
+      {...partAttrs('detail')}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--order-detail-gap, 24px)'
+      }}
+    >
+      <header
+        data-order-detail-header=""
+        {...partAttrs('header')}
+        style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+      >
+        <span
+          data-order-detail-number=""
+          {...partAttrs('number')}
+          style={{ fontWeight: 600 }}
+        >
+          {order.number || orderKey}
+        </span>
+        <span
+          data-order-detail-date=""
+          {...partAttrs('date')}
+          style={{ opacity: 0.8 }}
+        >
+          {formatDate(order.created_date, locale)}
+        </span>
+        {order.status?.label && (
+          <span
+            data-order-detail-status=""
+            // The raw status code is published so scoped custom CSS can paint
+            // one status differently from the rest.
+            data-order-status-value={order.status.value}
+            {...partAttrs('status')}
+          >
+            {order.status.label}
+          </span>
+        )}
+      </header>
+
+      {showItems && (groupedItems.length > 0 || customLines) && (
+        <ul
+          data-order-detail-items=""
+          {...partAttrs('list')}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0
+          }}
+        >
+          {customLines ??
+            groupedItems.map((line) => {
+            // Status, currency and thumbnails are identical across the lines of
+            // a group, so the first line represents the whole row.
+            const item = line.item;
+            const name = line.name;
+            const href = line.href;
+            const lineCurrency = item.price_currency?.value || currency;
+
+            return (
+              <li
+                key={line.key}
+                data-order-detail-item=""
+                {...partAttrs('item')}
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: '12px',
+                  paddingBottom: '16px',
+                  borderBottom: '1px solid var(--order-detail-border, #e5e7eb)'
+                }}
+              >
+                {showImage && item.product?.image && (
+                  <NextLink
+                    href={isDesigner ? '#' : href || '#'}
+                    onClick={guard}
+                    style={{ flex: '0 0 auto', display: 'block' }}
+                  >
+                    {/* Plain img: order line 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={item.product.image}
+                      alt={name}
+                      width={imageWidth}
+                      height={imageHeight}
+                      {...partAttrs('image')}
+                      style={{ objectFit: 'cover', display: 'block' }}
+                    />
+                  </NextLink>
+                )}
+
+                <div style={{ flex: '1 1 auto', minWidth: 0 }}>
+                  <NextLink
+                    href={isDesigner ? '#' : href || '#'}
+                    onClick={guard}
+                    data-order-detail-item-name=""
+                    {...partAttrs('name')}
+                    style={{ color: 'inherit', textDecoration: 'none' }}
+                  >
+                    {name}
+                  </NextLink>
+
+                  {showQuantity && (
+                    <div
+                      data-order-detail-item-quantity=""
+                      {...partAttrs('quantity')}
+                      style={{ marginTop: '4px', opacity: 0.8 }}
+                    >
+                      {`${quantityPrefix}${line.quantity}`}
+                    </div>
+                  )}
+
+                  {showShipmentStatus && item.status?.label && (
+                    <div
+                      data-order-detail-item-status=""
+                      data-order-status-value={item.status.value}
+                      {...partAttrs('item-status')}
+                      style={{ marginTop: '4px', opacity: 0.8 }}
+                    >
+                      {item.status.label}
+                    </div>
+                  )}
+                </div>
+
+                <span data-order-detail-item-price="" {...partAttrs('price')}>
+                  {/* The row now stands for every unit of the product, so the
+                      group's summed line total is what it must price — the
+                      single line's total_amount would understate an "x3" row.
+                      For an ungrouped row this is the value printed before. */}
+                  {formatMoney(line.total, {
+                    locale,
+                    currency: lineCurrency
+                  })}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {showShipmentStatus && (
+        <section
+          data-order-detail-shipment=""
+          {...partAttrs('shipment')}
+          style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+        >
+          {items.some((item) => item.estimated_delivery_date) && (
+            <span
+              data-order-detail-estimated-delivery=""
+              {...partAttrs('delivery')}
+            >
+              {formatDate(
+                items.find((item) => item.estimated_delivery_date)
+                  ?.estimated_delivery_date,
+                locale
+              )}
+            </span>
+          )}
+
+          {(order.tracking_number || order.tracking_url) && (
+            <span data-order-detail-tracking="" {...partAttrs('tracking')}>
+              {order.tracking_url ? (
+                // Carrier tracking is an external URL, so it stays a plain
+                // anchor — but it is guarded exactly like the internal links.
+                <a
+                  href={isDesigner ? '#' : order.tracking_url}
+                  onClick={guard}
+                  target={isDesigner ? undefined : '_blank'}
+                  rel="noreferrer"
+                  style={{ color: 'inherit' }}
+                >
+                  {order.tracking_number || trackingLabel}
+                </a>
+              ) : (
+                order.tracking_number
+              )}
+            </span>
+          )}
+        </section>
+      )}
+
+      {showTotals && (
+        <section
+          data-order-detail-totals=""
+          {...partAttrs('totals')}
+          style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+        >
+          {totalRow(
+            subtotalLabel,
+            money(order.amount_without_discount),
+            'data-order-detail-subtotal'
+          )}
+          {totalRow(
+            discountLabel,
+            money(order.discount_amount),
+            'data-order-detail-discount'
+          )}
+          {totalRow(
+            shippingLabel,
+            money(order.shipping_amount),
+            'data-order-detail-shipping'
+          )}
+          {totalRow(
+            totalLabel,
+            money(order.amount),
+            'data-order-detail-total',
+            'grand-total'
+          )}
+        </section>
+      )}
+    </div>
+  );
+};
+
+export default OrderDetailBlock;