@akinon/pz-theme 2.0.157 → 2.0.158-rc.14

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

@@ -9,14 +9,23 @@ 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,
   groupOrderItems,
   readToggle
 } from './product-block-utils';
-
-interface OrderItemLike {
+import {
+  allowsLineReturn,
+  allowsOrderCancel,
+  type OrderActionLine,
+  type OrderActionOrder,
+  type OrderActionRules,
+  useOrderActionRules
+} from '../utils/order-action-rules';
+
+type OrderItemLike = {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -35,7 +44,7 @@ interface OrderItemLike {
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-}
+};
 
 interface AddressLike {
   first_name?: string;
@@ -117,31 +126,39 @@ const firstString = (
 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.
+ * Whether the order still has a line to return: one commerce flags
+ * refundable, with no request open on it, that the brand's rules let a return
+ * start from (`registerOrderActionRules`: from which statuses, for how long
+ * after the order — ZERO-5302). Commerce 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 again after the shopper has asked. Lines that carry no
+ * flag at all (an older payload) go by the order's flag, still through the
+ * brand's rules.
  */
-const hasReturnableLine = (order: OrderLike): boolean => {
+const hasReturnableLine = (
+  order: OrderLike,
+  rules: OrderActionRules
+): boolean => {
   if (!order.is_refundable) return false;
 
   const lines = order.orderitem_set ?? [];
+  const allows = (item: OrderItemLike | null | undefined) =>
+    allowsLineReturn(
+      rules,
+      (item ?? {}) as OrderActionLine,
+      order as OrderActionOrder
+    );
 
   if (!lines.some((item) => item && 'is_refundable' in item)) {
-    return String(order.status?.value ?? '') === DELIVERED;
+    return lines.length === 0 ? allows(null) : lines.some(allows);
   }
 
   return lines.some(
     (item) =>
-      String(item?.status?.value ?? '') === DELIVERED &&
       item?.is_refundable &&
-      !hasOpenRequest(item.active_cancellation_request)
+      !hasOpenRequest(item.active_cancellation_request) &&
+      allows(item)
   );
 };
 
@@ -373,6 +390,8 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * 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.
+ * The cancel and return links offer what commerce allows and the brand's
+ * `registerOrderActionRules` lets through (ZERO-5302).
  * Properties: numberLabel, numberTag, dateLabel, headerTotalLabel,
  * showInvoiceLink, invoiceLinkLabel, showCancelLink, cancelLinkLabel,
  * showReturnLink, returnLinkLabel, cancelHrefBase, showShipmentStatus, showItems, showImage, imageWidth,
@@ -390,7 +409,7 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * currencyText, currencyPosition.
  * Parts: detail, header, number, date, header-total, status,
  * invoice-link, cancel-link, return-link, list, item, image, name, quantity,
- * color, size, item-status, item-tracking, item-return-code,
+ * color, size, item-status, item-tracking, item-return-code, item-actions,
  * 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.
@@ -588,6 +607,8 @@ const OrderDetailBlock = ({
   // 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 });
+  // The brand's say over the return and cancel links (ZERO-5302).
+  const actionRules = useOrderActionRules();
 
   const liveOrder = (data ?? null) as OrderLike | null;
   // See DESIGNER_SAMPLE_ORDER's own comment: the preview route's order id is
@@ -621,11 +642,16 @@ 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.
+  // The sample order shows both links for styling, whatever the brand's
+  // rules would make of it.
   const offersReturn =
     order === DESIGNER_SAMPLE_ORDER
       ? Boolean(order.is_refundable)
-      : hasReturnableLine(order);
+      : hasReturnableLine(order, actionRules);
+  const offersCancel =
+    Boolean(order.is_cancellable) &&
+    (order === DESIGNER_SAMPLE_ORDER ||
+      allowsOrderCancel(actionRules, order as OrderActionOrder));
 
   // Navigating inside the designer iframe would drop the author out of the page
   // they are editing, so every link is inert there.
@@ -830,7 +856,7 @@ const OrderDetailBlock = ({
                     → {invoiceLinkLabel}
                   </a>
                 )}
-                {showCancelLink && order.is_cancellable && cancelHref && (
+                {showCancelLink && offersCancel && cancelHref && (
                   <NextLink
                     href={isDesigner ? '#' : cancelHref}
                     onClick={guard}
@@ -930,6 +956,21 @@ const OrderDetailBlock = ({
                 showPickupDate && returnDetails.pickupDate
                   ? formatPickupDate(returnDetails.pickupDate, locale)
                   : '';
+              const lineActions = renderOrderLineActions({
+                order,
+                line,
+                isDesigner
+              });
+              const showLineMeta =
+                showShipmentStatus &&
+                Boolean(
+                  item.status?.label ||
+                    trackingValue ||
+                    returnCodeValue ||
+                    returnMethodValue ||
+                    returnCarrierValue ||
+                    pickupDateValue
+                );
 
               return (
                 <li
@@ -1045,98 +1086,100 @@ const OrderDetailBlock = ({
                       </div>
                     </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>
-                      )}
+                    {(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>
+                        )}
+                        {/* Label and value in their own spans, so a
+                            composition can colour them apart. */}
+                        {showLineMeta && 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>
+                        )}
+                        {showLineMeta && 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>
+                        )}
+                        {showLineMeta && 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>
+                        )}
+                        {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>
+                    )}
                   </div>
                 </li>
               );

package/src/blocks/order-line-actions.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import type { GroupedOrderLine, OrderLineLike } from './product-block-utils';
+
+export interface OrderLineActionsOrder {
+  id?: number;
+  number?: string;
+  created_date?: string;
+}
+
+export type OrderLineActionsItem = OrderLineLike & {
+  status?: { value?: string; label?: string };
+  [key: string]: unknown;
+};
+
+export interface OrderLineActionsContext {
+  order: OrderLineActionsOrder;
+  line: GroupedOrderLine<OrderLineActionsItem>;
+  isDesigner: boolean;
+}
+
+export type OrderLineActionsRenderer = (
+  context: OrderLineActionsContext
+) => ReactNode;
+
+let renderer: OrderLineActionsRenderer | null = null;
+
+export const registerOrderLineActions = (
+  fn: OrderLineActionsRenderer
+): (() => void) => {
+  renderer = fn;
+  return () => {
+    if (renderer === fn) renderer = null;
+  };
+};
+
+export const renderOrderLineActions = (
+  context: OrderLineActionsContext
+): ReactNode => {
+  if (!renderer) return null;
+  try {
+    return renderer(context) ?? null;
+  } catch {
+    return null;
+  }
+};

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

@@ -13,7 +13,14 @@ import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 interface OrderItemLike {
-  product?: { image?: string; name?: string } | null;
+  id?: number;
+  status?: { value?: string | number; label?: string };
+  product?: {
+    image?: string;
+    name?: string;
+    sku?: string;
+    base_code?: string;
+  } | null;
 }
 
 interface OrderLike {
@@ -248,7 +255,23 @@ const OrderListBlock = ({
         maxImages
     ),
     url: hrefFor(order),
-    href: 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 || ''
+        }
+      })
+    )
   }));
 
   // A designer who marked a child as the row layout gets that layout repeated

package/src/blocks/row-scope.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+
+export interface ThemeRowScopeValue {
+  listType: string;
+  row: Record<string, unknown>;
+  index: number;
+}
+
+const ThemeRowScopeContext = React.createContext<ThemeRowScopeValue | null>(
+  null
+);
+
+export const ThemeRowScopeProvider = ({
+  listType,
+  row,
+  index,
+  children
+}: ThemeRowScopeValue & { children: React.ReactNode }) => {
+  const value = React.useMemo(
+    () => ({ listType, row, index }),
+    [listType, row, index]
+  );
+
+  return (
+    <ThemeRowScopeContext.Provider value={value}>
+      {children}
+    </ThemeRowScopeContext.Provider>
+  );
+};
+
+/** Non-null while a repeated row of any list renders; null everywhere else. */
+export const useThemeRowScope = (): ThemeRowScopeValue | null =>
+  React.useContext(ThemeRowScopeContext);

package/src/blocks/text-block.tsx

@@ -7,6 +7,7 @@ import { getInnerRootInlineStyles, partAttrs } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { useLocalizeHref } from '../hooks/use-localize-href';
 import { localizeHtmlLinks } from '../utils/localize-href';
+import { useValueLocale } from '../utils/localized-value';
 
 const TextBlock = ({
   block,
@@ -14,7 +15,7 @@ const TextBlock = ({
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
   const localize = useLocalizeHref();
-  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
+  const { defaultLocale } = useValueLocale();
   const themeSettings = useThemeSettingsContext();
 
   const getLocalizedContent = (): string => {
@@ -30,7 +31,10 @@ const TextBlock = ({
 
     if (typeof value === 'object' && value !== null) {
       return (
-        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
+        value[locale] ||
+        (defaultLocale && value[defaultLocale]) ||
+        Object.values(value)[0] ||
+        ''
       );
     }
 

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

@@ -41,7 +41,7 @@ const orderPayload = {
   orderitem_set: [
     {
       price: '649.95',
-      status: { label: 'Shipped' },
+      status: { value: '500', label: 'Shipped' },
       product: {
         name: 'Spring Sneaker',
         image: '/i.jpg',
@@ -63,6 +63,19 @@ 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,6 +59,9 @@ 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('-')
@@ -479,6 +482,7 @@ export const buildOrderPageContext = ({
       unitPrice: toStringValue(item.price),
       quantity: 1,
       status: toStringValue(toRecord(item.status).label),
+      statusValue: toCodeValue(toRecord(item.status).value),
       currency
     };
   });