@akinon/pz-theme 2.0.154-rc.6 → 2.0.154

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

@@ -9,7 +9,6 @@ import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
 import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
-import { renderOrderLineActions } from './order-line-actions';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -17,7 +16,7 @@ import {
   readToggle
 } from './product-block-utils';
 
-type OrderItemLike = {
+interface OrderItemLike {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -27,6 +26,7 @@ type OrderItemLike = {
   tracking_number?: string;
   estimated_delivery_date?: string;
   price_currency?: { value?: string; label?: string };
+  is_refundable?: boolean;
   active_cancellation_request?: unknown;
   product?: {
     pk?: number;
@@ -35,7 +35,7 @@ type OrderItemLike = {
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-};
+}
 
 interface AddressLike {
   first_name?: string;
@@ -66,6 +66,7 @@ interface OrderLike {
   orderitem_set?: OrderItemLike[];
   discountitem_set?: DiscountItemLike[];
   is_cancellable?: boolean;
+  is_refundable?: boolean;
   e_archive_url?: string | null;
   shipping_address?: AddressLike | null;
   billing_address?: AddressLike | null;
@@ -113,6 +114,37 @@ const firstString = (
   return '';
 };
 
+const hasOpenRequest = (request: unknown): boolean =>
+  Array.isArray(request) ? request.length > 0 : Boolean(request);
+
+/** Commerce's "Teslim edildi". */
+const DELIVERED = '550';
+
+/**
+ * Whether the order still has a line to return: delivered, refundable, with
+ * no request open on it. Commerce also marks a shipped line refundable, and
+ * keeps `is_refundable` true on the order and the line while a return request
+ * is open, so the order flag alone would offer a return before the parcel
+ * arrives and again after the shopper has asked. Lines that carry no flag at
+ * all (an older payload) leave the decision to the order's flag and status.
+ */
+const hasReturnableLine = (order: OrderLike): boolean => {
+  if (!order.is_refundable) return false;
+
+  const lines = order.orderitem_set ?? [];
+
+  if (!lines.some((item) => item && 'is_refundable' in item)) {
+    return String(order.status?.value ?? '') === DELIVERED;
+  }
+
+  return lines.some(
+    (item) =>
+      String(item?.status?.value ?? '') === DELIVERED &&
+      item?.is_refundable &&
+      !hasOpenRequest(item.active_cancellation_request)
+  );
+};
+
 /** Positive integers only; anything else falls back to the shipped size. */
 const readSize = (value: unknown, fallback: number): number => {
   const numeric = Math.round(Number(value));
@@ -146,6 +178,7 @@ const DESIGNER_SAMPLE_ORDER: OrderLike = {
   status: { value: '10', label: 'Approved' },
   currency: { value: 'try', label: 'TRY' },
   is_cancellable: true,
+  is_refundable: true,
   e_archive_url: '#',
   installment_count: 3,
   orderitem_set: [
@@ -159,7 +192,16 @@ const DESIGNER_SAMPLE_ORDER: OrderLike = {
       tracking_number: '1Z999AA10123456784',
       tracking_url: '#',
       active_cancellation_request: [
-        { easy_return: { code: '12345678912345' } }
+        {
+          easy_return: {
+            code: '12345678912345',
+            shipping_company: { value: 'carrier', label: 'Carrier' }
+          },
+          pickup_date: {
+            date: '2026-04-11',
+            hour_range: { start: '09:00:00', end: '18:00:00' }
+          }
+        }
       ],
       product: {
         pk: 1,
@@ -250,6 +292,63 @@ const resolveReturnCode = (value: unknown): string => {
   return typeof code === 'string' ? code : '';
 };
 
+interface ReturnRequestLike {
+  pickup_date?: { date?: string } | null;
+  easy_return?: {
+    code?: string;
+    shipping_company?: { label?: string } | null;
+  } | null;
+}
+
+/**
+ * How a returned line goes back: `appointment` when the request booked a
+ * pickup (it carries a pickup day), `standard` for an easy return dropped off
+ * at a branch, nothing for a plain cancellation. The carrier and the pickup
+ * day come from the same request; both shapes of the field are probed, as
+ * for the return code.
+ */
+const resolveReturnDetails = (
+  value: unknown
+): {
+  method: 'appointment' | 'standard' | null;
+  carrier: string;
+  pickupDate: string;
+} => {
+  const entry = (Array.isArray(value) ? value[0] : value) as
+    | ReturnRequestLike
+    | null
+    | undefined;
+  const pickupDate = entry?.pickup_date?.date;
+  const carrier = entry?.easy_return?.shipping_company?.label;
+
+  return {
+    method: pickupDate ? 'appointment' : entry?.easy_return ? 'standard' : null,
+    carrier: typeof carrier === 'string' ? carrier : '',
+    pickupDate: typeof pickupDate === 'string' ? pickupDate : ''
+  };
+};
+
+/** "2026-04-11" read as a calendar day in the page's locale (no time zone shift). */
+const formatPickupDate = (value: string, locale?: string): string => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+  if (!match) return value;
+
+  try {
+    return new Intl.DateTimeFormat(locale || undefined, {
+      timeZone: 'UTC',
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    }).format(
+      new Date(
+        Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]), 12)
+      )
+    );
+  } catch {
+    return value;
+  }
+};
+
 const formatAddress = (address: AddressLike | null | undefined): string[] => {
   if (!address) return [];
   const name = [address.first_name, address.last_name]
@@ -273,16 +372,16 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * 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. A brand may hang per-line actions on the
- * built-in line through `registerOrderLineActions`; they render inside the
- * line's `item-actions` part.
+ * one the built-in line renders.
  * Properties: numberLabel, numberTag, dateLabel, headerTotalLabel,
  * showInvoiceLink, invoiceLinkLabel, showCancelLink, cancelLinkLabel,
- * cancelHrefBase, showShipmentStatus, showItems, showImage, imageWidth,
+ * showReturnLink, returnLinkLabel, cancelHrefBase, showShipmentStatus, showItems, showImage, imageWidth,
  * imageHeight, showQuantity, quantityLabel, showColor,
  * colorLabel, colorAttributeKey, showSize, sizeLabel, sizeAttributeKey,
  * showLineTracking, lineTrackingLabel, showReturnCode,
- * returnCodeLabel, showShippingAddress, shippingAddressLabel,
+ * returnCodeLabel, showReturnMethod, returnMethodLabel,
+ * appointmentReturnLabel, standardReturnLabel, showReturnCarrier,
+ * returnCarrierLabel, showPickupDate, pickupDateLabel, showShippingAddress, shippingAddressLabel,
  * showBillingAddress, billingAddressLabel, showTotals, showPieceCount,
  * pieceCountLabel, showDiscountItems, showInstallmentInfo,
  * installmentInfoLabel, subtotalLabel, discountLabel, shippingLabel,
@@ -290,8 +389,9 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * showPaymentInfo, paymentInfoLabel, decimals, currencyDisplay,
  * currencyText, currencyPosition.
  * Parts: detail, header, number, date, header-total, status,
- * invoice-link, cancel-link, list, item, image, name, quantity, color, size,
- * item-status, item-tracking, item-return-code, item-actions, price, shipment,
+ * invoice-link, cancel-link, return-link, list, item, image, name, quantity,
+ * color, size, item-status, item-tracking, item-return-code,
+ * item-return-method, item-return-carrier, item-pickup-date, price, shipment,
  * delivery, tracking, addresses, address, address-label, totals, total-row,
  * total-label, total-value, grand-total, payment-info, payment-info-label.
  */
@@ -402,6 +502,38 @@ const OrderDetailBlock = ({
     false
   );
   const returnCodeLabel = text('returnCodeLabel', 'Return code:');
+  // ZERO-5183: the easy-return screens start from here, and a returned line
+  // says how it goes back. The cancel link only shows while the order can
+  // still be cancelled; a delivered order needs its own way in.
+  const showReturnLink = readToggle(
+    block.properties?.showReturnLink,
+    currentBreakpoint,
+    false
+  );
+  const returnLinkLabel = text('returnLinkLabel', 'Easy return');
+  const showReturnMethod = readToggle(
+    block.properties?.showReturnMethod,
+    currentBreakpoint,
+    false
+  );
+  const returnMethodLabel = text('returnMethodLabel', 'Return method:');
+  const appointmentReturnLabel = text(
+    'appointmentReturnLabel',
+    'Scheduled pickup'
+  );
+  const standardReturnLabel = text('standardReturnLabel', 'Standard');
+  const showReturnCarrier = readToggle(
+    block.properties?.showReturnCarrier,
+    currentBreakpoint,
+    false
+  );
+  const returnCarrierLabel = text('returnCarrierLabel', 'Carrier:');
+  const showPickupDate = readToggle(
+    block.properties?.showPickupDate,
+    currentBreakpoint,
+    false
+  );
+  const pickupDateLabel = text('pickupDateLabel', 'Pickup date:');
 
   const showShippingAddress = readToggle(
     block.properties?.showShippingAddress,
@@ -489,6 +621,12 @@ const OrderDetailBlock = ({
   const money = (value: unknown) =>
     formatMoney(value, { locale, currency, ...moneyStyle });
 
+  // The sample order is not a delivered one; it shows the link for styling.
+  const offersReturn =
+    order === DESIGNER_SAMPLE_ORDER
+      ? Boolean(order.is_refundable)
+      : hasReturnableLine(order);
+
   // 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) => {
@@ -667,7 +805,7 @@ const OrderDetailBlock = ({
                 {headerTotalLabel} {money(order.amount)}
               </span>
             )}
-            {(showInvoiceLink || showCancelLink) && (
+            {(showInvoiceLink || showCancelLink || showReturnLink) && (
               <div
                 style={{
                   display: 'flex',
@@ -707,6 +845,21 @@ const OrderDetailBlock = ({
                     → {cancelLinkLabel}
                   </NextLink>
                 )}
+                {showReturnLink && offersReturn && cancelHref && (
+                  <NextLink
+                    href={isDesigner ? '#' : cancelHref}
+                    onClick={guard}
+                    data-order-detail-return-link=""
+                    {...partAttrs('return-link')}
+                    style={{
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      whiteSpace: 'nowrap'
+                    }}
+                  >
+                    → {returnLinkLabel}
+                  </NextLink>
+                )}
               </div>
             )}
           </div>
@@ -761,14 +914,22 @@ const OrderDetailBlock = ({
               const returnCodeValue = showReturnCode
                 ? resolveReturnCode(item.active_cancellation_request)
                 : '';
-              const lineActions = renderOrderLineActions({
-                order,
-                line,
-                isDesigner
-              });
-              const showLineMeta =
-                showShipmentStatus &&
-                Boolean(item.status?.label || trackingValue || returnCodeValue);
+              const returnDetails = resolveReturnDetails(
+                item.active_cancellation_request
+              );
+              const returnMethodValue =
+                showReturnMethod && returnDetails.method
+                  ? returnDetails.method === 'appointment'
+                    ? appointmentReturnLabel
+                    : standardReturnLabel
+                  : '';
+              const returnCarrierValue = showReturnCarrier
+                ? returnDetails.carrier
+                : '';
+              const pickupDateValue =
+                showPickupDate && returnDetails.pickupDate
+                  ? formatPickupDate(returnDetails.pickupDate, locale)
+                  : '';
 
               return (
                 <li
@@ -884,68 +1045,98 @@ const OrderDetailBlock = ({
                       </div>
                     </div>
 
-                    {(showLineMeta || lineActions) && (
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'column',
-                          alignItems: isMobile ? 'flex-start' : 'flex-end',
-                          textAlign: isMobile ? 'left' : 'right',
-                          gap: '4px',
-                          flex: isMobile ? '1 1 100%' : '0 0 auto'
-                        }}
-                      >
-                        {lineActions && (
-                          <div
-                            data-order-detail-item-actions=""
-                            {...partAttrs('item-actions')}
-                          >
-                            {lineActions}
-                          </div>
-                        )}
-                        {showLineMeta && item.status?.label && (
-                          <span
-                            data-order-detail-item-status=""
-                            data-order-status-value={item.status.value}
-                            {...partAttrs('item-status')}
-                            style={{ display: 'inline-block' }}
-                          >
-                            {item.status.label}
-                          </span>
-                        )}
-                        {showLineMeta && trackingValue && (
-                          <span
-                            data-order-detail-item-tracking=""
-                            {...partAttrs('item-tracking')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {lineTrackingLabel}{' '}
-                            {item.tracking_url ? (
-                              <a
-                                href={isDesigner ? '#' : item.tracking_url}
-                                onClick={guard}
-                                target={isDesigner ? undefined : '_blank'}
-                                rel="noreferrer"
-                                style={{ color: 'inherit' }}
-                              >
-                                {item.tracking_number || item.tracking_url}
-                              </a>
-                            ) : (
-                              trackingValue
-                            )}
-                          </span>
-                        )}
-                        {showLineMeta && returnCodeValue && (
-                          <span
-                            data-order-detail-item-return-code=""
-                            {...partAttrs('item-return-code')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {returnCodeLabel} {returnCodeValue}
-                          </span>
-                        )}
-                      </div>
-                    )}
+                    {showShipmentStatus &&
+                      (item.status?.label ||
+                        trackingValue ||
+                        returnCodeValue ||
+                        returnMethodValue ||
+                        returnCarrierValue ||
+                        pickupDateValue) && (
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: isMobile ? 'flex-start' : 'flex-end',
+                            textAlign: isMobile ? 'left' : 'right',
+                            gap: '4px',
+                            flex: isMobile ? '1 1 100%' : '0 0 auto'
+                          }}
+                        >
+                          {item.status?.label && (
+                            <span
+                              data-order-detail-item-status=""
+                              data-order-status-value={item.status.value}
+                              {...partAttrs('item-status')}
+                              style={{ display: 'inline-block' }}
+                            >
+                              {item.status.label}
+                            </span>
+                          )}
+                          {/* Label and value in their own spans, so a
+                              composition can colour them apart. */}
+                          {returnMethodValue && (
+                            <span
+                              data-order-detail-item-return-method=""
+                              {...partAttrs('item-return-method')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnMethodLabel}</span>{' '}
+                              <span data-value="">{returnMethodValue}</span>
+                            </span>
+                          )}
+                          {returnCarrierValue && (
+                            <span
+                              data-order-detail-item-return-carrier=""
+                              {...partAttrs('item-return-carrier')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnCarrierLabel}</span>{' '}
+                              <span data-value="">{returnCarrierValue}</span>
+                            </span>
+                          )}
+                          {pickupDateValue && (
+                            <span
+                              data-order-detail-item-pickup-date=""
+                              {...partAttrs('item-pickup-date')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{pickupDateLabel}</span>{' '}
+                              <span data-value="">{pickupDateValue}</span>
+                            </span>
+                          )}
+                          {trackingValue && (
+                            <span
+                              data-order-detail-item-tracking=""
+                              {...partAttrs('item-tracking')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {lineTrackingLabel}{' '}
+                              {item.tracking_url ? (
+                                <a
+                                  href={isDesigner ? '#' : item.tracking_url}
+                                  onClick={guard}
+                                  target={isDesigner ? undefined : '_blank'}
+                                  rel="noreferrer"
+                                  style={{ color: 'inherit' }}
+                                >
+                                  {item.tracking_number || item.tracking_url}
+                                </a>
+                              ) : (
+                                trackingValue
+                              )}
+                            </span>
+                          )}
+                          {returnCodeValue && (
+                            <span
+                              data-order-detail-item-return-code=""
+                              {...partAttrs('item-return-code')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {returnCodeLabel} {returnCodeValue}
+                            </span>
+                          )}
+                        </div>
+                      )}
                   </div>
                 </li>
               );

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

@@ -13,14 +13,7 @@ import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 interface OrderItemLike {
-  id?: number;
-  status?: { value?: string | number; label?: string };
-  product?: {
-    image?: string;
-    name?: string;
-    sku?: string;
-    base_code?: string;
-  } | null;
+  product?: { image?: string; name?: string } | null;
 }
 
 interface OrderLike {
@@ -255,23 +248,7 @@ const OrderListBlock = ({
         maxImages
     ),
     url: hrefFor(order),
-    href: hrefFor(order),
-    createdDate: order.created_date || '',
-    items: (Array.isArray(order.orderitem_set) ? order.orderitem_set : []).map(
-      (item, itemIndex) => ({
-        id: item?.id ?? itemIndex,
-        name: item?.product?.name || '',
-        image: item?.product?.image || '',
-        status: item?.status?.label || '',
-        statusValue: String(item?.status?.value ?? ''),
-        product: {
-          sku: item?.product?.sku || '',
-          base_code: item?.product?.base_code || '',
-          name: item?.product?.name || '',
-          image: item?.product?.image || ''
-        }
-      })
-    )
+    href: hrefFor(order)
   }));
 
   // A designer who marked a child as the row layout gets that layout repeated

package/src/blocks/product-block-utils.tsx

@@ -240,6 +240,8 @@ export interface OrderLineLike {
   price?: string | number;
   quantity?: string | number;
   total_amount?: string | number;
+  status?: { value?: string | number; label?: string } | null;
+  active_cancellation_request?: unknown;
   product?: {
     pk?: number;
     name?: string;
@@ -278,7 +280,10 @@ export const getLineImage = (
 };
 
 export interface GroupedOrderLine<T extends OrderLineLike> {
-  /** Stable React key: the product pk when the payload carries one. */
+  /**
+   * Stable React key: the product pk when the payload carries one (with a
+   * `-2`, `-3`… suffix for the product's further rows, see groupOrderItems).
+   */
   key: string;
   name: string;
   image: string;
@@ -301,21 +306,28 @@ export interface GroupedOrderLine<T extends OrderLineLike> {
  * `quantity` is summed rather than counted so a payload that does carry a line
  * quantity (older commerce versions, and brands that merge lines server-side)
  * is respected instead of being flattened back to one.
+ *
+ * Units of one product only share a row while nothing sets them apart: once
+ * one of them is cancelled or returned (its status moves on, or it carries a
+ * cancellation / return request) it gets a row of its own. A shared row shows
+ * its first unit's status and return details, so "return 1 of 2" would
+ * otherwise read as both units returned.
  */
 export const groupOrderItems = <T extends OrderLineLike>(
   items: T[] | null | undefined
 ): GroupedOrderLine<T>[] => {
   const source = Array.isArray(items) ? items : [];
+  const groups: GroupedOrderLine<T>[] = [];
+  const byIdentity = new Map<string, GroupedOrderLine<T>>();
+  const rowsPerKey = new Map<string, number>();
 
-  return source.reduce<GroupedOrderLine<T>[]>((accumulator, item) => {
+  source.forEach((item) => {
     const pk = item.product?.pk;
-    const key = String(pk ?? item.id ?? accumulator.length);
     // Lines without a product pk cannot be proven identical, so they stay
     // separate rows instead of collapsing into an arbitrary neighbour.
-    const existing =
-      pk === undefined || pk === null
-        ? undefined
-        : accumulator.find((entry) => entry.key === key);
+    const identity =
+      pk === undefined || pk === null ? null : `${pk}#${lineState(item)}`;
+    const existing = identity === null ? undefined : byIdentity.get(identity);
     const quantity = parseAmount(item.quantity) ?? 1;
     const lineTotal = parseAmount(item.total_amount || item.price);
 
@@ -324,11 +336,15 @@ export const groupOrderItems = <T extends OrderLineLike>(
       existing.total =
         lineTotal === null ? existing.total : (existing.total ?? 0) + lineTotal;
 
-      return accumulator;
+      return;
     }
 
-    accumulator.push({
-      key,
+    const baseKey = String(pk ?? item.id ?? groups.length);
+    const rows = (rowsPerKey.get(baseKey) ?? 0) + 1;
+    rowsPerKey.set(baseKey, rows);
+
+    const group: GroupedOrderLine<T> = {
+      key: rows === 1 ? baseKey : `${baseKey}-${rows}`,
       name: item.product?.name || '',
       image: getLineImage(item),
       href: item.product?.absolute_url || '',
@@ -336,10 +352,30 @@ export const groupOrderItems = <T extends OrderLineLike>(
       total: lineTotal,
       quantity,
       item
-    });
+    };
+    groups.push(group);
+    if (identity !== null) byIdentity.set(identity, group);
+  });
+
+  return groups;
+};
+
+/**
+ * What tells one unit of a product apart from another in the same order: its
+ * status and the cancellation / return request it carries (one object or a
+ * one-item array, depending on the pz version).
+ */
+const lineState = (item: OrderLineLike): string => {
+  const value = item.active_cancellation_request;
+  const request = (Array.isArray(value) ? value[0] : value) as
+    | { id?: unknown; easy_return?: { code?: unknown } | null }
+    | null
+    | undefined;
+  const requestKey = request
+    ? String(request.id ?? request.easy_return?.code ?? 'request')
+    : '';
 
-    return accumulator;
-  }, []);
+  return `${item.status?.value ?? ''}|${requestKey}`;
 };
 
 /**

package/src/chrome/__tests__/page-context-builders.test.ts

@@ -41,7 +41,7 @@ const orderPayload = {
   orderitem_set: [
     {
       price: '649.95',
-      status: { value: '500', label: 'Shipped' },
+      status: { label: 'Shipped' },
       product: {
         name: 'Spring Sneaker',
         image: '/i.jpg',
@@ -63,19 +63,6 @@ describe('buildOrderPageContext', () => {
     expect(context.order.currency).toBe('TRY');
     expect(context.order.items).toHaveLength(1);
     expect(context.order.items[0].title).toBe('Spring Sneaker');
-    expect(context.order.items[0].status).toBe('Shipped');
-    expect(context.order.items[0].statusValue).toBe('500');
-  });
-
-  it('stringifies a numeric order item status code', () => {
-    const context = buildOrderPageContext({
-      order: {
-        ...orderPayload,
-        orderitem_set: [{ status: { value: 550, label: 'Delivered' } }]
-      }
-    });
-
-    expect(context.order.items[0].statusValue).toBe('550');
   });
 
   it('does not publish the identity fields the raw payload carries', () => {

package/src/chrome/page-context.ts

@@ -59,9 +59,6 @@ const toRecord = (value: unknown): UnknownRecord =>
 const toStringValue = (value: unknown, fallback = ''): string =>
   typeof value === 'string' ? value : fallback;
 
-const toCodeValue = (value: unknown): string =>
-  typeof value === 'number' ? String(value) : toStringValue(value);
-
 const humanizeSlug = (value: string) =>
   value
     .split('-')
@@ -482,7 +479,6 @@ export const buildOrderPageContext = ({
       unitPrice: toStringValue(item.price),
       quantity: 1,
       status: toStringValue(toRecord(item.status).label),
-      statusValue: toCodeValue(toRecord(item.status).value),
       currency
     };
   });