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

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

@@ -0,0 +1,274 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
+import { useGetOrdersQuery } 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 { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+interface OrderLike {
+  id?: number;
+  number?: string;
+  amount?: string;
+  created_date?: string;
+  status?: { value?: string; label?: string };
+  currency?: { value?: string; label?: string };
+  orderitem_set?: unknown[];
+}
+
+/** 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;
+
+  const time = (order: OrderLike) => {
+    const parsed = new Date(order.created_date as string).getTime();
+
+    return Number.isNaN(parsed) ? 0 : parsed;
+  };
+
+  return [...orders].sort((a, b) =>
+    sort === 'newest' ? time(b) - time(a) : time(a) - time(b)
+  );
+};
+
+/**
+ * Functional account block: the customer's most recent orders. Order CONTENT
+ * stays commerce-driven (account orders service); the editor owns how many
+ * 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.
+ */
+const OrderListBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const rawLimit = Number(
+    getResponsiveValue(block.properties?.limit, currentBreakpoint, 5)
+  );
+  const limit =
+    Number.isFinite(rawLimit) && rawLimit > 0 ? Math.min(rawLimit, 20) : 5;
+  const orderHrefBase = String(
+    getResponsiveValue(
+      block.properties?.orderHrefBase,
+      currentBreakpoint,
+      '/account/orders'
+    )
+  );
+  const sort = String(
+    getResponsiveValue(block.properties?.sort, currentBreakpoint, 'default')
+  );
+  const showDate = readToggle(
+    block.properties?.showDate,
+    currentBreakpoint,
+    true
+  );
+  const showStatus = readToggle(
+    block.properties?.showStatus,
+    currentBreakpoint,
+    true
+  );
+  const showAmount = readToggle(
+    block.properties?.showAmount,
+    currentBreakpoint,
+    true
+  );
+  const emptyLabel = String(
+    getResponsiveValue(block.properties?.emptyLabel, currentBreakpoint, '')
+  );
+
+  const { locale, currency: localeCurrency } = useLocalization();
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+
+  // Guests have no orders endpoint; skipping avoids a guaranteed 403 on every
+  // page that hosts this block.
+  const { data, isLoading } = useGetOrdersQuery(
+    { limit, page: 1 },
+    { skip: !isAuthenticated }
+  );
+
+  const orders: OrderLike[] =
+    (data as { results?: OrderLike[] } | undefined)?.results ?? [];
+
+  // Navigating inside the designer iframe would drop the author out of the
+  // page they are editing, so the order links are inert there.
+  const guard = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  const hrefFor = (order: OrderLike) =>
+    order.id ? `${orderHrefBase.replace(/\/$/, '')}/${order.id}` : orderHrefBase;
+
+  const visibleOrders = sortOrders(orders, sort).slice(0, limit);
+
+  const rows = visibleOrders.map((order, index) => ({
+    id: order.id ?? '',
+    key: String(order.id ?? order.number ?? index),
+    number: order.number || `#${order.id ?? ''}`,
+    name: order.number || `#${order.id ?? ''}`,
+    // Every field is published whatever the show/hide toggles say: those
+    // govern the built-in row, and a designer's own layout decides for itself.
+    date: formatDate(order.created_date, locale),
+    total: formatMoney(order.amount, {
+      locale,
+      currency: order.currency?.value || localeCurrency
+    }),
+    price: formatMoney(order.amount, {
+      locale,
+      currency: order.currency?.value || localeCurrency
+    }),
+    status: order.status?.label || '',
+    statusValue: order.status?.value || '',
+    itemCount: Array.isArray(order.orderitem_set)
+      ? order.orderitem_set.length
+      : 0,
+    url: hrefFor(order),
+    href: hrefFor(order)
+  }));
+
+  // A designer who marked a child as the row layout gets that layout repeated
+  // per order; otherwise the built-in row renders unchanged.
+  const customRows = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={rows}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : 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>
+      );
+    }
+
+    // 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;
+
+    return (
+      <div
+        data-order-list=""
+        data-order-list-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {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>
+                )}
+              </div>
+
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-end'
+                }}
+              >
+                {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 }}
+                  >
+                    {order.status.label}
+                  </span>
+                )}
+              </div>
+            </li>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default OrderListBlock;