@akinon/pz-theme 2.0.166-rc.1 → 2.0.166

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

@@ -8,9 +8,13 @@ import { useLocalization } from '@akinon/next/hooks';
 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 {
+  hasItemTemplate,
+  ITEM_TEMPLATE_ROLE,
+  ItemTemplateList
+} from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
+import type { Block } from '../theme-block';
 import {
   DesignerPlaceholder,
   groupOrderItems,
@@ -25,7 +29,7 @@ import {
   useOrderActionRules
 } from '../utils/order-action-rules';
 
-type OrderItemLike = {
+interface OrderItemLike {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -33,18 +37,21 @@ type OrderItemLike = {
   status?: { value?: string; label?: string };
   tracking_url?: string;
   tracking_number?: string;
+  shipping_company?: { value?: string; label?: string } | null;
   estimated_delivery_date?: string;
   price_currency?: { value?: string; label?: string };
   is_refundable?: boolean;
   active_cancellation_request?: unknown;
   product?: {
     pk?: number;
+    sku?: string;
+    base_code?: string;
     name?: string;
     image?: string;
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-};
+}
 
 interface AddressLike {
   first_name?: string;
@@ -70,6 +77,7 @@ interface OrderLike {
   shipping_amount?: string;
   tracking_url?: string;
   tracking_number?: string;
+  shipping_company?: { value?: string; label?: string } | null;
   status?: { value?: string; label?: string };
   currency?: { value?: string; label?: string };
   orderitem_set?: OrderItemLike[];
@@ -108,6 +116,19 @@ const ORDER_PARAM_KEYS = [
 // opts into h1/h2/h3 when the order number is the page's main heading.
 const NUMBER_TAGS = ['span', 'div', 'h1', 'h2', 'h3'];
 
+/**
+ * A child group marked with this role is the whole order page, drawn in place
+ * of everything the block renders itself (ZERO-5509). It is repeated once, over
+ * the order: its blocks bind `item.*` to the order (number, date, totals,
+ * addresses, payment), and a repeat inside it over `item.lines` draws one row
+ * per order line, so the header, the line rows, the totals and every caption
+ * are blocks the panel arranges instead of fixed markup styled with CSS.
+ */
+export const ORDER_LAYOUT_ROLE = 'order-detail-layout';
+
+const readChildRole = (child: Block, breakpoint: string): string =>
+  String(getResponsiveValue(child.properties?.role, breakpoint, '') ?? '');
+
 const firstString = (
   read: (key: string) => unknown,
   keys: string[]
@@ -409,7 +430,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, item-actions,
+ * 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.
@@ -673,8 +694,16 @@ const OrderDetailBlock = ({
     ? {}
     : { width: '50%', marginLeft: '50%' };
 
+  // A row publishes every field the built-in line can show, whatever its own
+  // show/hide toggles say: those govern the built-in line, and a designer's
+  // own layout decides for itself what to draw (ZERO-5509).
   const lineRows = groupedItems.map((line) => {
     const lineCurrency = line.item.price_currency?.value || currency;
+    const attributes = line.item.product?.attributes;
+    const returnDetails = resolveReturnDetails(
+      line.item.active_cancellation_request
+    );
+    const lineStatusValue = String(line.item.status?.value ?? '');
 
     return {
       key: line.key,
@@ -694,7 +723,43 @@ const OrderDetailBlock = ({
         ...moneyStyle
       }),
       status: line.item.status?.label || '',
-      statusValue: line.item.status?.value || ''
+      statusValue: lineStatusValue,
+      color: resolveAttribute(attributes, colorAttributeKey),
+      size: resolveAttribute(attributes, sizeAttributeKey),
+      trackingNumber: line.item.tracking_number || '',
+      trackingUrl: isDesigner ? '#' : line.item.tracking_url || '',
+      shippingCompany: line.item.shipping_company?.label || '',
+      returnCode: resolveReturnCode(line.item.active_cancellation_request),
+      returnMethod:
+        returnDetails.method === 'appointment'
+          ? appointmentReturnLabel
+          : returnDetails.method === 'standard'
+          ? standardReturnLabel
+          : '',
+      returnCarrier: returnDetails.carrier,
+      pickupDate: returnDetails.pickupDate
+        ? formatPickupDate(returnDetails.pickupDate, locale)
+        : '',
+      // The line seen as a one-line order, for blocks that act on an order
+      // from inside a row — the rate & review "Rate" action reads `id`,
+      // `number` and `items` off its row, so inside a line row it offers a
+      // review for that line's product only.
+      id: order.id ?? '',
+      number: order.number || orderKey,
+      createdDate: order.created_date || '',
+      items: [
+        {
+          id: line.item.id ?? line.key,
+          name: line.name,
+          image: line.image,
+          statusValue: lineStatusValue,
+          product: {
+            sku: line.item.product?.sku || '',
+            base_code: line.item.product?.base_code || '',
+            name: line.name
+          }
+        }
+      ]
     };
   });
 
@@ -778,6 +843,116 @@ const OrderDetailBlock = ({
     );
   };
 
+  // The designer's whole-order layout, when there is one: drawn once over
+  // the order instead of everything below. Hidden on the storefront when the
+  // author hid it, still drawn on the canvas so it can be designed.
+  const layoutChild =
+    (block.blocks || []).find(
+      (child) =>
+        readChildRole(child, currentBreakpoint) === ORDER_LAYOUT_ROLE &&
+        (isDesigner || !child.hidden)
+    ) ?? null;
+
+  if (layoutChild) {
+    const shippingLines = formatAddress(order.shipping_address);
+    const billingLines = formatAddress(order.billing_address);
+    const pieceCount = groupedItems.reduce(
+      (sum, line) => sum + Number(line.quantity || 0),
+      0
+    );
+    const shippingAmount = Number(order.shipping_amount || 0);
+    const signedMoney = (value: unknown) => {
+      const amount = Math.abs(Number(value || 0));
+      return amount > 0 ? `-${money(String(amount))}` : money('0');
+    };
+    const deliveryLine = items.find((item) => item.estimated_delivery_date);
+    const linkOrInert = (href: string) => (isDesigner && href ? '#' : href);
+
+    // One row: the order. Every value is already formatted the way the block
+    // formats it (money style, locale date), so a text block bound to
+    // `item.total` prints "15.499 TL" exactly as the built-in header does.
+    const orderRows = [
+      {
+        key: String(order.id ?? order.number ?? orderKey),
+        id: order.id ?? '',
+        number: order.number || orderKey,
+        date: formatDate(order.created_date, locale),
+        createdDate: order.created_date || '',
+        status: order.status?.label || '',
+        statusValue: String(order.status?.value ?? ''),
+        total: money(order.amount),
+        pieceCount,
+        pieceSubtotal,
+        shipping: money(order.shipping_amount),
+        isFreeShipping: !(shippingAmount > 0),
+        discountTotal: signedMoney(order.discount_amount),
+        hasDiscount: Number(order.discount_amount || 0) !== 0,
+        discounts: (order.discountitem_set || []).map((discount, index) => ({
+          key: String(index),
+          name: discount.name || discountLabel,
+          amount: signedMoney(discount.amount)
+        })),
+        hasInstallments: installmentCount > 1,
+        installmentCount,
+        installmentAmount: perInstallment,
+        invoiceUrl: linkOrInert(order.e_archive_url || ''),
+        hasInvoice: Boolean(order.e_archive_url),
+        canCancel: offersCancel && Boolean(cancelHref),
+        canReturn: offersReturn && Boolean(cancelHref),
+        cancelUrl: linkOrInert(cancelHref),
+        trackingNumber: order.tracking_number || '',
+        trackingUrl: linkOrInert(order.tracking_url || ''),
+        hasTracking: Boolean(order.tracking_url || order.tracking_number),
+        shippingCompany: order.shipping_company?.label || '',
+        estimatedDelivery: deliveryLine
+          ? formatDate(deliveryLine.estimated_delivery_date, locale)
+          : '',
+        shippingName: shippingLines.length > 1 ? shippingLines[0] : '',
+        shippingAddress: shippingLines[shippingLines.length - 1] || '',
+        billingName: billingLines.length > 1 ? billingLines[0] : '',
+        billingAddress: billingLines[billingLines.length - 1] || '',
+        hasBillingAddress: billingLines.length > 0,
+        bankName: order.bank?.name || '',
+        paymentMethod: order.payment_option?.name || '',
+        lineCount: lineRows.length,
+        lines: lineRows,
+        // The order's delivered lines, for an order-wide rate & review block
+        // placed outside the line repeat.
+        items: lineRows.flatMap((row) => row.items)
+      }
+    ];
+
+    return (
+      <div
+        data-order-detail=""
+        data-order-detail-layout=""
+        style={{ width: '100%' }}
+      >
+        <ItemTemplateList
+          block={{
+            ...block,
+            blocks: [
+              {
+                ...layoutChild,
+                properties: {
+                  ...(layoutChild.properties || {}),
+                  role: ITEM_TEMPLATE_ROLE
+                }
+              }
+            ]
+          }}
+          items={orderRows}
+          placeholderId={placeholderId}
+          sectionId={sectionId}
+          isDesigner={isDesigner}
+          selectedBlockId={selectedBlockId}
+          currentBreakpoint={currentBreakpoint}
+          designerPlaceholderCount={1}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
       data-order-detail=""
@@ -956,21 +1131,6 @@ 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
@@ -1086,100 +1246,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>
-                        )}
-                        {/* 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>
-                    )}
+                    {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/text-block.tsx

@@ -7,7 +7,6 @@ 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';
 // Rich-text element defaults from the theme settings.
 import {
   THEME_RICH_TEXT_ATTRIBUTE,
@@ -20,7 +19,7 @@ const TextBlock = ({
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
   const localize = useLocalizeHref();
-  const { defaultLocale } = useValueLocale();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
   const themeSettings = useThemeSettingsContext();
 
   const getLocalizedContent = (): string => {
@@ -36,10 +35,7 @@ const TextBlock = ({
 
     if (typeof value === 'object' && value !== null) {
       return (
-        value[locale] ||
-        (defaultLocale && value[defaultLocale]) ||
-        Object.values(value)[0] ||
-        ''
+        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
       );
     }