@akinon/pz-theme 2.0.64-rc.0 → 2.0.65-beta.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import NextLink from 'next/link';
 import { useSession } from 'next-auth/react';
 import { useGetOrdersQuery } from '@akinon/next/data/client/account';
@@ -11,6 +11,10 @@ import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
+interface OrderItemLike {
+  product?: { image?: string; name?: string } | null;
+}
+
 interface OrderLike {
   id?: number;
   number?: string;
@@ -18,9 +22,15 @@ interface OrderLike {
   created_date?: string;
   status?: { value?: string; label?: string };
   currency?: { value?: string; label?: string };
-  orderitem_set?: unknown[];
+  orderitem_set?: OrderItemLike[];
 }
 
+const readCount = (value: unknown, fallback: number): number => {
+  const numeric = Math.round(Number(value));
+
+  return Number.isFinite(numeric) && numeric >= 0 ? numeric : fallback;
+};
+
 /** Newest/oldest first without mutating the array RTK Query handed us. */
 const sortOrders = (orders: OrderLike[], sort: string): OrderLike[] => {
   if (sort !== 'newest' && sort !== 'oldest') return orders;
@@ -42,8 +52,11 @@ const sortOrders = (orders: OrderLike[], sort: string): OrderLike[] => {
  * rows are shown, which fields the row carries, where a row links to and the
  * styling.
  * Properties: limit, orderHrefBase, sort, showDate, showStatus, showAmount,
- * emptyLabel.
- * Parts: list, item, link, date, total, status, empty.
+ * showItemImages, imageWidth, imageHeight, imageGap, imageAlign, maxImages,
+ * numberLabel, dateLabel, totalLabel, detailLinkLabel, showTitle, title,
+ * showPagination, perPage, emptyLabel.
+ * Parts: title, list, item, images, image-overflow, link, date, total,
+ * detail-link, status, pagination, empty.
  */
 const OrderListBlock = ({
   block,
@@ -83,23 +96,108 @@ const OrderListBlock = ({
     currentBreakpoint,
     true
   );
+  const showItemImages = readToggle(
+    block.properties?.showItemImages,
+    currentBreakpoint,
+    true
+  );
+  const imageWidth = readCount(
+    getResponsiveValue(block.properties?.imageWidth, currentBreakpoint, 64),
+    64
+  );
+  const imageHeight = readCount(
+    getResponsiveValue(block.properties?.imageHeight, currentBreakpoint, 96),
+    96
+  );
+  const imageGap = readCount(
+    getResponsiveValue(block.properties?.imageGap, currentBreakpoint, 8),
+    8
+  );
+  const imageAlignRaw = String(
+    getResponsiveValue(block.properties?.imageAlign, currentBreakpoint, 'left')
+  );
+  const imageJustify =
+    imageAlignRaw === 'center'
+      ? 'center'
+      : imageAlignRaw === 'right'
+      ? 'flex-end'
+      : 'flex-start';
+  const maxImages = Math.max(
+    1,
+    readCount(
+      getResponsiveValue(block.properties?.maxImages, currentBreakpoint, 3),
+      3
+    )
+  );
   const emptyLabel = String(
     getResponsiveValue(block.properties?.emptyLabel, currentBreakpoint, '')
   );
+  // Empty keeps the built-in row exactly as it always rendered — a brand
+  // opts into labels and a standalone detail link by setting these.
+  const numberLabel = String(
+    getResponsiveValue(block.properties?.numberLabel, currentBreakpoint, '')
+  );
+  const dateLabel = String(
+    getResponsiveValue(block.properties?.dateLabel, currentBreakpoint, '')
+  );
+  const totalLabel = String(
+    getResponsiveValue(block.properties?.totalLabel, currentBreakpoint, '')
+  );
+  const detailLinkLabel = String(
+    getResponsiveValue(block.properties?.detailLinkLabel, currentBreakpoint, '')
+  );
+  const showTitle = readToggle(
+    block.properties?.showTitle,
+    currentBreakpoint,
+    false
+  );
+  const title = String(
+    getResponsiveValue(block.properties?.title, currentBreakpoint, '')
+  );
+  const showPagination = readToggle(
+    block.properties?.showPagination,
+    currentBreakpoint,
+    false
+  );
+  const perPage = Math.max(
+    1,
+    readCount(
+      getResponsiveValue(block.properties?.perPage, currentBreakpoint, 10),
+      10
+    )
+  );
+
+  const isMobile = currentBreakpoint === 'mobile';
 
   const { locale, currency: localeCurrency } = useLocalization();
   const { status } = useSession();
   const isAuthenticated = status === 'authenticated';
 
+  // Paged mode reads perPage/currentPage from the server; unpaged mode keeps
+  // the original single fetch capped by `limit`.
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // A brand switching pageSize (or sort) mid-session should not strand the
+  // shopper on a page number that no longer exists.
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [perPage, sort, showPagination]);
+
+  const effectiveLimit = showPagination ? perPage : limit;
+
   // Guests have no orders endpoint; skipping avoids a guaranteed 403 on every
   // page that hosts this block.
   const { data, isLoading } = useGetOrdersQuery(
-    { limit, page: 1 },
+    { limit: effectiveLimit, page: showPagination ? currentPage : 1 },
     { skip: !isAuthenticated }
   );
 
   const orders: OrderLike[] =
     (data as { results?: OrderLike[] } | undefined)?.results ?? [];
+  const totalCount = (data as { count?: number } | undefined)?.count ?? 0;
+  const totalPages = showPagination
+    ? Math.max(1, Math.ceil(totalCount / perPage))
+    : 1;
 
   // Navigating inside the designer iframe would drop the author out of the
   // page they are editing, so the order links are inert there.
@@ -108,9 +206,11 @@ const OrderListBlock = ({
   };
 
   const hrefFor = (order: OrderLike) =>
-    order.id ? `${orderHrefBase.replace(/\/$/, '')}/${order.id}` : orderHrefBase;
+    order.id
+      ? `${orderHrefBase.replace(/\/$/, '')}/${order.id}`
+      : orderHrefBase;
 
-  const visibleOrders = sortOrders(orders, sort).slice(0, limit);
+  const visibleOrders = sortOrders(orders, sort).slice(0, effectiveLimit);
 
   const rows = visibleOrders.map((order, index) => ({
     id: order.id ?? '',
@@ -133,6 +233,15 @@ const OrderListBlock = ({
     itemCount: Array.isArray(order.orderitem_set)
       ? order.orderitem_set.length
       : 0,
+    images: (Array.isArray(order.orderitem_set) ? order.orderitem_set : [])
+      .slice(0, maxImages)
+      .map((item) => item?.product?.image || '')
+      .filter(Boolean),
+    imageOverflowCount: Math.max(
+      0,
+      (Array.isArray(order.orderitem_set) ? order.orderitem_set.length : 0) -
+        maxImages
+    ),
     url: hrefFor(order),
     href: hrefFor(order)
   }));
@@ -151,123 +260,390 @@ const OrderListBlock = ({
     />
   ) : null;
 
+  const titleNode =
+    showTitle && title ? (
+      <div
+        data-order-list-title=""
+        {...partAttrs('title')}
+        style={{
+          width: '100%',
+          fontSize: '16px',
+          fontWeight: 600,
+          marginBottom: '16px'
+        }}
+      >
+        {title}
+      </div>
+    ) : null;
+
   if (orders.length === 0 && !customRows) {
     if (isDesigner) {
       return (
-        <div
-          data-order-list=""
-          data-order-list-state="empty"
-          {...partAttrs('empty', { empty: true })}
-        >
-          {isLoading
-            ? 'Recent orders (loading)'
-            : emptyLabel || 'Recent orders (no orders)'}
-        </div>
+        <>
+          {titleNode}
+          <div
+            data-order-list=""
+            data-order-list-state="empty"
+            {...partAttrs('empty', { empty: true })}
+            style={{ width: '100%' }}
+          >
+            {isLoading
+              ? 'Recent orders (loading)'
+              : emptyLabel || 'Recent orders (no orders)'}
+          </div>
+        </>
       );
     }
 
     // The shopper-facing empty copy is only honest once the account query has
     // resolved; before that (and without a message) the block stays absent,
     // which is what every published composition renders today.
-    if (!isAuthenticated || isLoading || !emptyLabel) return null;
+    if (!isAuthenticated || isLoading || !emptyLabel) return titleNode;
 
     return (
-      <div
-        data-order-list=""
-        data-order-list-state="empty"
-        {...partAttrs('empty', { empty: true })}
-      >
-        {emptyLabel}
-      </div>
+      <>
+        {titleNode}
+        <div
+          data-order-list=""
+          data-order-list-state="empty"
+          {...partAttrs('empty', { empty: true })}
+          style={{ width: '100%' }}
+        >
+          {emptyLabel}
+        </div>
+      </>
     );
   }
 
   return (
-    <ul
-      data-order-list=""
-      {...partAttrs('list')}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 'var(--order-list-gap, 12px)',
-        listStyle: 'none',
-        margin: 0,
-        padding: 0
-      }}
-    >
-      {customRows ??
-        visibleOrders.map((order, index) => {
-          const href = hrefFor(order);
-
-          return (
-            <li
-              key={order.id ?? order.number ?? index}
-              data-order-list-item=""
-              {...partAttrs('item')}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: '12px',
-                padding: '12px 0',
-                borderBottom: '1px solid var(--order-list-border, #e5e7eb)'
-              }}
-            >
-              <div style={{ minWidth: 0 }}>
-                <NextLink
-                  href={isDesigner ? '#' : href}
-                  onClick={guard}
-                  data-order-list-number=""
-                  {...partAttrs('link')}
-                  style={{ color: 'inherit', textDecoration: 'none' }}
-                >
-                  {order.number || `#${order.id ?? ''}`}
-                </NextLink>
-                {showDate && (
-                  <div
-                    data-order-list-date=""
-                    {...partAttrs('date')}
-                    style={{ opacity: 0.8, marginTop: '2px' }}
-                  >
-                    {formatDate(order.created_date, locale)}
-                  </div>
+    <>
+      {titleNode}
+      <ul
+        data-order-list=""
+        {...partAttrs('list')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          gap: 'var(--order-list-gap, 12px)',
+          listStyle: 'none',
+          margin: 0,
+          padding: 0
+        }}
+      >
+        {customRows ??
+          visibleOrders.map((order, index) => {
+            const href = hrefFor(order);
+            const orderItems = Array.isArray(order.orderitem_set)
+              ? order.orderitem_set
+              : [];
+            const images = orderItems
+              .slice(0, maxImages)
+              .map((item) => item?.product?.image || '')
+              .filter(Boolean);
+            const imageOverflowCount = Math.max(
+              0,
+              orderItems.length - maxImages
+            );
+
+            // A label turns its row into a label/value grid pair; without one
+            // the value alone spans both columns, exactly as before.
+            const gridPair = (
+              label: string,
+              value: React.ReactNode,
+              partName: string,
+              dataAttr: string
+            ) => (
+              <React.Fragment>
+                {label && (
+                  <span style={{ fontWeight: 600, whiteSpace: 'nowrap' }}>
+                    {label}
+                  </span>
                 )}
-              </div>
+                <span
+                  {...{ [dataAttr]: '' }}
+                  {...partAttrs(partName)}
+                  // No default text color: the Order Number/Date/Total style
+                  // groups already expose one, and an inline default would
+                  // sit in front of that panel value rather than behind it.
+                  // A template asking for a muted value colour sets it as a
+                  // `link|date|total/color` style, not a code default.
+                  style={{
+                    gridColumn: label ? 'auto' : '1 / span 2',
+                    // An order number is one long unbroken digit string —
+                    // without this it can't wrap at all, so shrinking the
+                    // column (above) just pushes it past the row's edge.
+                    overflowWrap: 'anywhere'
+                  }}
+                >
+                  {value}
+                </span>
+              </React.Fragment>
+            );
 
-              <div
+            return (
+              <li
+                key={order.id ?? order.number ?? index}
+                data-order-list-item=""
+                {...partAttrs('item')}
                 style={{
                   display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'flex-end'
+                  flexDirection: isMobile ? 'column' : 'row',
+                  alignItems: isMobile ? 'stretch' : 'flex-start',
+                  gap: isMobile ? '16px' : '24px',
+                  padding: '20px 0',
+                  borderBottom: '1px solid var(--order-list-border, #e5e7eb)'
                 }}
               >
-                {showAmount && (
-                  <span data-order-list-amount="" {...partAttrs('total')}>
-                    {/* The order carries the currency it was placed in; the
-                        storefront currency is only the fallback. */}
-                    {formatMoney(order.amount, {
-                      locale,
-                      currency: order.currency?.value || localeCurrency
-                    })}
-                  </span>
-                )}
-                {showStatus && order.status?.label && (
-                  <span
-                    data-order-list-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')}
-                    style={{ opacity: 0.8 }}
+                {showItemImages && images.length > 0 && (
+                  <ul
+                    data-order-list-images=""
+                    style={{
+                      display: 'flex',
+                      // Where the images sit inside their half when they
+                      // don't fill it — a single order's one thumbnail on
+                      // an otherwise 3-image row, for instance.
+                      justifyContent: imageJustify,
+                      gap: `${imageGap}px`,
+                      listStyle: 'none',
+                      margin: 0,
+                      padding: 0,
+                      minWidth: 0,
+                      // Grow/shrink together with the info half (below), not
+                      // a rigid 50% — a host narrower than the full page (a
+                      // dashboard widget next to a sidebar, say) needs both
+                      // halves to give way instead of overflowing on top of
+                      // each other.
+                      flex: isMobile ? '0 0 auto' : '1 1 50%',
+                      width: isMobile ? '100%' : undefined
+                    }}
                   >
-                    {order.status.label}
-                  </span>
+                    {images.map((src, imageIndex) => (
+                      // Plain img: order thumbnails come from arbitrary commerce
+                      // CDNs that the brand next.config may not allow. The
+                      // Product Images style group targets each thumbnail
+                      // (not this wrapper), so its box controls land on an
+                      // element they actually make sense on.
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        key={imageIndex}
+                        {...partAttrs('images')}
+                        src={src}
+                        alt=""
+                        width={imageWidth}
+                        height={imageHeight}
+                        style={{
+                          objectFit: 'cover',
+                          display: 'block',
+                          flex: '0 0 auto'
+                        }}
+                      />
+                    ))}
+                    {imageOverflowCount > 0 && (
+                      <li
+                        data-order-list-image-overflow=""
+                        {...partAttrs('image-overflow')}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          flex: '0 0 auto'
+                        }}
+                      >
+                        +{imageOverflowCount}
+                      </li>
+                    )}
+                  </ul>
                 )}
-              </div>
-            </li>
-          );
-        })}
-    </ul>
+
+                {/* The other half of the row: number/date/total, the detail
+                    link and the status pill. Stacks full width on mobile,
+                    matches the images column's 50% on desktop. */}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: isMobile ? 'column' : 'row',
+                    alignItems: isMobile ? 'stretch' : 'flex-start',
+                    justifyContent: isMobile ? 'flex-start' : 'space-between',
+                    // A safety net for the row/status column below, on top
+                    // of the shrinking above: if there still isn't room once
+                    // both halves have given up all their slack, this drops
+                    // the status pill to its own line instead of it landing
+                    // on top of the order number.
+                    flexWrap: 'wrap',
+                    gap: isMobile ? '10px' : '24px',
+                    flex: isMobile ? '1 1 auto' : '1 1 50%',
+                    minWidth: 0,
+                    width: isMobile ? '100%' : undefined
+                  }}
+                >
+                  <div
+                    style={{
+                      minWidth: 0,
+                      // The value column: 'auto' alone has no minimum-width
+                      // floor, so a long unbroken value (a 16-digit order
+                      // number, say) refuses to shrink and pushes the grid
+                      // itself past the row's edge instead of wrapping.
+                      display: 'grid',
+                      gridTemplateColumns: 'auto minmax(0, auto)',
+                      columnGap: '10px',
+                      rowGap: '10px',
+                      justifyContent: 'start'
+                    }}
+                  >
+                    {gridPair(
+                      numberLabel,
+                      detailLinkLabel ? (
+                        order.number || `#${order.id ?? ''}`
+                      ) : (
+                        <NextLink
+                          href={isDesigner ? '#' : href}
+                          onClick={guard}
+                          style={{ textDecoration: 'none' }}
+                        >
+                          {order.number || `#${order.id ?? ''}`}
+                        </NextLink>
+                      ),
+                      'link',
+                      'data-order-list-number'
+                    )}
+                    {showDate &&
+                      gridPair(
+                        dateLabel,
+                        formatDate(order.created_date, locale),
+                        'date',
+                        'data-order-list-date'
+                      )}
+                    {showAmount &&
+                      totalLabel &&
+                      gridPair(
+                        totalLabel,
+                        formatMoney(order.amount, {
+                          locale,
+                          currency: order.currency?.value || localeCurrency
+                        }),
+                        'total',
+                        'data-order-list-total-inline'
+                      )}
+                  </div>
+
+                  {detailLinkLabel && (
+                    <NextLink
+                      href={isDesigner ? '#' : href}
+                      onClick={guard}
+                      data-order-list-detail-link=""
+                      {...partAttrs('detail-link')}
+                      // No inline colour: the Order Detail Link style group
+                      // owns that (an inline default would block it, same as
+                      // the value spans above).
+                      style={{
+                        flex: '0 0 auto',
+                        whiteSpace: 'nowrap',
+                        textDecoration: 'none'
+                      }}
+                    >
+                      → {detailLinkLabel}
+                    </NextLink>
+                  )}
+
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: isMobile ? 'flex-start' : 'flex-end',
+                      gap: '6px',
+                      flex: '0 0 auto',
+                      marginLeft: !isMobile && !detailLinkLabel ? 'auto' : 0
+                    }}
+                  >
+                    {showAmount && !totalLabel && (
+                      <span data-order-list-amount="" {...partAttrs('total')}>
+                        {/* The order carries the currency it was placed in; the
+                          storefront currency is only the fallback. */}
+                        {formatMoney(order.amount, {
+                          locale,
+                          currency: order.currency?.value || localeCurrency
+                        })}
+                      </span>
+                    )}
+                    {showStatus && order.status?.label && (
+                      <span
+                        data-order-list-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')}
+                        // No background/padding/radius here: the Status Pill
+                        // style group already exposes exactly those (and an
+                        // inline default would sit in front of a panel value,
+                        // not behind it — a designer could never turn it off).
+                        // A pill look is a template's `status/*` styles, not a
+                        // code default.
+                        style={{ display: 'inline-block', fontSize: '12px' }}
+                      >
+                        {order.status.label}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+      </ul>
+      {showPagination && totalPages > 1 && (
+        <nav
+          data-order-list-pagination=""
+          {...partAttrs('pagination')}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '16px',
+            marginTop: 'var(--order-list-pagination-margin, 16px)'
+          }}
+        >
+          <button
+            type="button"
+            data-order-list-pagination-prev=""
+            disabled={currentPage <= 1}
+            onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: currentPage <= 1 ? 'default' : 'pointer',
+              opacity: currentPage <= 1 ? 0.4 : 1,
+              padding: 0,
+              font: 'inherit',
+              color: 'inherit'
+            }}
+          >
+            ‹
+          </button>
+          <span data-order-list-pagination-status="">
+            {currentPage} / {totalPages}
+          </span>
+          <button
+            type="button"
+            data-order-list-pagination-next=""
+            disabled={currentPage >= totalPages}
+            onClick={() =>
+              setCurrentPage((page) => Math.min(totalPages, page + 1))
+            }
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: currentPage >= totalPages ? 'default' : 'pointer',
+              opacity: currentPage >= totalPages ? 0.4 : 1,
+              padding: 0,
+              font: 'inherit',
+              color: 'inherit'
+            }}
+          >
+            ›
+          </button>
+        </nav>
+      )}
+    </>
   );
 };