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

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import NextLink from 'next/link';
 import { useSession } from 'next-auth/react';
 import { useGetOrdersQuery } from '@akinon/next/data/client/account';
@@ -11,10 +11,6 @@ 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;
@@ -22,15 +18,9 @@ interface OrderLike {
   created_date?: string;
   status?: { value?: string; label?: string };
   currency?: { value?: string; label?: string };
-  orderitem_set?: OrderItemLike[];
+  orderitem_set?: unknown[];
 }
 
-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;
@@ -52,11 +42,8 @@ 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,
- * 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.
+ * emptyLabel.
+ * Parts: list, item, link, date, total, status, empty.
  */
 const OrderListBlock = ({
   block,
@@ -96,108 +83,23 @@ 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: effectiveLimit, page: showPagination ? currentPage : 1 },
+    { limit, page: 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.
@@ -206,11 +108,9 @@ 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, effectiveLimit);
+  const visibleOrders = sortOrders(orders, sort).slice(0, limit);
 
   const rows = visibleOrders.map((order, index) => ({
     id: order.id ?? '',
@@ -233,15 +133,6 @@ 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)
   }));
@@ -260,390 +151,123 @@ 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 (
-        <>
-          {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>
-        </>
+        <div
+          data-order-list=""
+          data-order-list-state="empty"
+          {...partAttrs('empty', { empty: true })}
+        >
+          {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 titleNode;
+    if (!isAuthenticated || isLoading || !emptyLabel) return null;
 
     return (
-      <>
-        {titleNode}
-        <div
-          data-order-list=""
-          data-order-list-state="empty"
-          {...partAttrs('empty', { empty: true })}
-          style={{ width: '100%' }}
-        >
-          {emptyLabel}
-        </div>
-      </>
+      <div
+        data-order-list=""
+        data-order-list-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {emptyLabel}
+      </div>
     );
   }
 
   return (
-    <>
-      {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>
-                )}
-                <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'
-                  }}
+    <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' }}
                 >
-                  {value}
-                </span>
-              </React.Fragment>
-            );
+                  {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>
+                )}
+              </div>
 
-            return (
-              <li
-                key={order.id ?? order.number ?? index}
-                data-order-list-item=""
-                {...partAttrs('item')}
+              <div
                 style={{
                   display: 'flex',
-                  flexDirection: isMobile ? 'column' : 'row',
-                  alignItems: isMobile ? 'stretch' : 'flex-start',
-                  gap: isMobile ? '16px' : '24px',
-                  padding: '20px 0',
-                  borderBottom: '1px solid var(--order-list-border, #e5e7eb)'
+                  flexDirection: 'column',
+                  alignItems: 'flex-end'
                 }}
               >
-                {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
-                    }}
-                  >
-                    {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>
+                {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>
                 )}
-
-                {/* 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'
-                    }}
+                {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 }}
                   >
-                    {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>
-      )}
-    </>
+                    {order.status.label}
+                  </span>
+                )}
+              </div>
+            </li>
+          );
+        })}
+    </ul>
   );
 };