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

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

@@ -30,10 +30,26 @@ interface OrderItemLike {
     name?: string;
     image?: string;
     absolute_url?: string;
+    attributes?: Record<string, unknown>;
   } | null;
 }
 
+interface AddressLike {
+  first_name?: string;
+  last_name?: string;
+  line?: string;
+  township?: { name?: string } | null;
+  district?: { name?: string } | null;
+  city?: { name?: string } | null;
+}
+
+interface DiscountItemLike {
+  name?: string;
+  amount?: string;
+}
+
 interface OrderLike {
+  id?: number;
   number?: string;
   created_date?: string;
   amount?: string;
@@ -45,6 +61,14 @@ interface OrderLike {
   status?: { value?: string; label?: string };
   currency?: { value?: string; label?: string };
   orderitem_set?: OrderItemLike[];
+  discountitem_set?: DiscountItemLike[];
+  is_cancellable?: boolean;
+  e_archive_url?: string | null;
+  shipping_address?: AddressLike | null;
+  billing_address?: AddressLike | null;
+  bank?: { name?: string } | null;
+  payment_option?: { name?: string } | null;
+  installment_count?: number;
 }
 
 /**
@@ -88,6 +112,135 @@ const readSize = (value: unknown, fallback: number): number => {
   return Number.isFinite(numeric) && numeric > 0 ? numeric : fallback;
 };
 
+/**
+ * pz-dynamic-widget's page picker points the designer at a fixed, almost
+ * certainly non-existent order id (`PREVIEW_ORDER_PK`) so the route mounts
+ * without depending on the preview session having a real order — deliberate,
+ * per that file's own comment. The trade-off lands here: without a sample
+ * object, every section below (header, lines, addresses, totals, payment)
+ * would sit behind one "order not found" box, unstylable. This mirrors
+ * `DESIGNER_SAMPLE_PRODUCT`'s role for item-template rows, just for the
+ * whole order. Never reached outside `isDesigner`, so real shoppers never
+ * see it. The color/size attribute keys are duplicated under a few common
+ * names so a brand's configured key is more likely to resolve to something
+ * out of the box.
+ */
+const DESIGNER_SAMPLE_ORDER: OrderLike = {
+  // Never 0 — `order.id ? ... : ''` further down would read a real falsy
+  // zero as "no id" and hide the cancellation link.
+  id: 999999,
+  number: '20920397829',
+  created_date: '2026-01-15T10:00:00Z',
+  amount: '4099.20',
+  amount_without_discount: '4599.00',
+  discount_amount: '3497.00',
+  shipping_amount: '0.00',
+  status: { value: '10', label: 'Approved' },
+  currency: { value: 'try', label: 'TRY' },
+  is_cancellable: true,
+  e_archive_url: '#',
+  installment_count: 3,
+  orderitem_set: [
+    {
+      id: 1,
+      price: '2299.50',
+      quantity: 1,
+      total_amount: '2299.50',
+      status: { value: '10', label: 'Approved' },
+      price_currency: { value: 'try', label: 'TRY' },
+      product: {
+        pk: 1,
+        name: 'Sample Product',
+        image: 'https://placehold.co/220x300',
+        absolute_url: '#',
+        attributes: {
+          color: 'Navy',
+          size: 'M',
+          filterable_color: 'Navy',
+          integration_renk_detay: 'Navy',
+          filtrenebilir_beden: 'M'
+        }
+      }
+    },
+    {
+      id: 2,
+      price: '2299.50',
+      quantity: 1,
+      total_amount: '2299.50',
+      status: { value: '10', label: 'Approved' },
+      price_currency: { value: 'try', label: 'TRY' },
+      product: {
+        pk: 2,
+        name: 'Sample Product 2',
+        image: 'https://placehold.co/220x300',
+        absolute_url: '#',
+        attributes: {
+          color: 'Black',
+          size: 'L',
+          filterable_color: 'Black',
+          integration_renk_detay: 'Black',
+          filtrenebilir_beden: 'L'
+        }
+      }
+    }
+  ],
+  discountitem_set: [
+    { name: 'Basket discount', amount: '-2499.00' },
+    { name: 'Promo code', amount: '-998.00' }
+  ],
+  shipping_address: {
+    first_name: 'Jane',
+    last_name: 'Doe',
+    line: '123 Sample Street',
+    district: { name: 'Downtown' },
+    township: { name: 'Central' },
+    city: { name: 'Istanbul' }
+  },
+  billing_address: {
+    first_name: 'Jane',
+    last_name: 'Doe',
+    line: '123 Sample Street',
+    district: { name: 'Downtown' },
+    township: { name: 'Central' },
+    city: { name: 'Istanbul' }
+  },
+  bank: { name: 'Sample Bank' },
+  payment_option: { name: 'Credit Card' }
+};
+
+/**
+ * Attribute names are brand-specific (a raw commerce feed, not a fixed
+ * schema), so color/size read from a designer-configured key rather than a
+ * hardcoded one — the alternative is a block that only ever works for the
+ * one brand whose attribute names happened to match.
+ */
+const resolveAttribute = (
+  attributes: Record<string, unknown> | undefined | null,
+  key: string
+): string => {
+  if (!key || !attributes) return '';
+  const value = attributes[key];
+
+  return typeof value === 'string' ? value : '';
+};
+
+const formatAddress = (address: AddressLike | null | undefined): string[] => {
+  if (!address) return [];
+  const name = [address.first_name, address.last_name]
+    .filter(Boolean)
+    .join(' ');
+  const locality = [
+    address.district?.name,
+    address.township?.name,
+    address.city?.name
+  ]
+    .filter(Boolean)
+    .join(' / ');
+  const lineWithLocality = [address.line, locality].filter(Boolean).join(' ');
+
+  return [name, lineWithLocality].filter(Boolean);
+};
+
 /**
  * Functional account block: one order's lines, totals, status and shipment
  * info. Order CONTENT stays commerce-driven (account order service) and the
@@ -95,12 +248,22 @@ const readSize = (value: unknown, fallback: number): number => {
  * 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.
- * Properties: showShipmentStatus, showItems, showImage, imageWidth,
- * imageHeight, showQuantity, showTotals, quantityPrefix, subtotalLabel,
- * discountLabel, shippingLabel, totalLabel, trackingLabel.
- * Parts: detail, header, number, date, status, list, item, image, name,
- * quantity, item-status, price, shipment, delivery, tracking, totals,
- * total-row, total-label, total-value, grand-total.
+ * Properties: packageLabel, numberLabel, dateLabel, headerTotalLabel,
+ * showInvoiceLink, invoiceLinkLabel, showCancelLink, cancelLinkLabel,
+ * cancelHrefBase, showShipmentStatus, showItems, showImage, imageWidth,
+ * imageHeight, showQuantity, quantityLabel, quantityPrefix, showColor,
+ * colorLabel, colorAttributeKey, showSize, sizeLabel, sizeAttributeKey,
+ * showShippingAddress, shippingAddressLabel, showBillingAddress,
+ * billingAddressLabel, showTotals, showPieceCount, pieceCountLabel,
+ * showDiscountItems, showInstallmentInfo, installmentInfoLabel,
+ * subtotalLabel, discountLabel, shippingLabel, freeShippingLabel, totalLabel,
+ * trackingLabel,
+ * showPaymentInfo, paymentInfoLabel.
+ * Parts: detail, header, package-label, number, date, header-total, status,
+ * invoice-link, cancel-link, list, item, image, name, quantity, color, size,
+ * item-status, price, shipment, delivery, tracking, addresses, address,
+ * address-label, totals, total-row, total-label, total-value, grand-total,
+ * payment-info, payment-info-label.
  */
 const OrderDetailBlock = ({
   block,
@@ -148,25 +311,110 @@ const OrderDetailBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
   const quantityPrefix = text('quantityPrefix', 'x');
+  const quantityLabel = text('quantityLabel', '');
   const subtotalLabel = text('subtotalLabel', 'Subtotal');
   const discountLabel = text('discountLabel', 'Discount');
   const shippingLabel = text('shippingLabel', 'Shipping');
+  const freeShippingLabel = text('freeShippingLabel', 'Free');
   const totalLabel = text('totalLabel', 'Total');
   const trackingLabel = text('trackingLabel', 'Track shipment');
 
+  // Header: empty keeps the original bare header (no package tag, no
+  // separate labelled total line, no invoice/cancel links) — every one of
+  // these is an opt-in addition, same as the order-list block's labels.
+  const packageLabel = text('packageLabel', '');
+  const numberLabel = text('numberLabel', '');
+  const dateLabel = text('dateLabel', '');
+  const headerTotalLabel = text('headerTotalLabel', '');
+  const showInvoiceLink = readToggle(
+    block.properties?.showInvoiceLink,
+    currentBreakpoint,
+    false
+  );
+  const invoiceLinkLabel = text('invoiceLinkLabel', 'Invoice');
+  const showCancelLink = readToggle(
+    block.properties?.showCancelLink,
+    currentBreakpoint,
+    false
+  );
+  const cancelLinkLabel = text('cancelLinkLabel', 'Easy cancellation');
+  const cancelHrefBase = text('cancelHrefBase', '/account/orders');
+
+  const showColor = readToggle(
+    block.properties?.showColor,
+    currentBreakpoint,
+    false
+  );
+  const colorLabel = text('colorLabel', 'Color:');
+  const colorAttributeKey = text('colorAttributeKey', '');
+  const showSize = readToggle(
+    block.properties?.showSize,
+    currentBreakpoint,
+    false
+  );
+  const sizeLabel = text('sizeLabel', 'Size:');
+  const sizeAttributeKey = text('sizeAttributeKey', '');
+
+  const showShippingAddress = readToggle(
+    block.properties?.showShippingAddress,
+    currentBreakpoint,
+    false
+  );
+  const shippingAddressLabel = text('shippingAddressLabel', 'Delivery address');
+  const showBillingAddress = readToggle(
+    block.properties?.showBillingAddress,
+    currentBreakpoint,
+    false
+  );
+  const billingAddressLabel = text('billingAddressLabel', 'Billing address');
+
+  const showPieceCount = readToggle(
+    block.properties?.showPieceCount,
+    currentBreakpoint,
+    false
+  );
+  const pieceCountLabel = text('pieceCountLabel', 'pieces');
+  const showDiscountItems = readToggle(
+    block.properties?.showDiscountItems,
+    currentBreakpoint,
+    false
+  );
+  const showInstallmentInfo = readToggle(
+    block.properties?.showInstallmentInfo,
+    currentBreakpoint,
+    false
+  );
+  const installmentInfoLabel = text('installmentInfoLabel', 'Installments');
+
+  const showPaymentInfo = readToggle(
+    block.properties?.showPaymentInfo,
+    currentBreakpoint,
+    false
+  );
+  const paymentInfoLabel = text('paymentInfoLabel', 'Payment information');
+
+  const isMobile = currentBreakpoint === 'mobile';
+
   const { locale, currency: localeCurrency } = useLocalization();
   const params = useParams();
   const searchParams = useSearchParams();
 
   const orderKey =
-    firstString((key) => (params as Record<string, unknown>)?.[key], ORDER_PARAM_KEYS) ||
-    firstString((key) => searchParams?.get(key), ORDER_PARAM_KEYS);
+    firstString(
+      (key) => (params as Record<string, unknown>)?.[key],
+      ORDER_PARAM_KEYS
+    ) || firstString((key) => searchParams?.get(key), ORDER_PARAM_KEYS);
 
   // 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 });
 
-  const order = (data ?? null) as OrderLike | null;
+  const liveOrder = (data ?? null) as OrderLike | null;
+  // See DESIGNER_SAMPLE_ORDER's own comment: the preview route's order id is
+  // fake by design, so a designer gets a fully populated sample instead of
+  // the section collapsing to one "not found" box the moment it's empty.
+  const order: OrderLike | null =
+    liveOrder ?? (isDesigner && !isLoading ? DESIGNER_SAMPLE_ORDER : null);
   const items = order?.orderitem_set ?? [];
   // pz writes one order line per unit; the same shared grouping the thank-you
   // page uses keeps a three-unit order from listing as three "x1" rows here.
@@ -180,8 +428,6 @@ const OrderDetailBlock = ({
         label={
           isLoading
             ? 'Order detail (loading)'
-            : orderKey
-            ? 'Order detail (order not found)'
             : 'Order detail (no order in URL)'
         }
         attribute="data-order-detail"
@@ -251,6 +497,59 @@ const OrderDetailBlock = ({
       </div>
     ) : null;
 
+  // Matches the storefront's own account-orders page: the amount before
+  // shipping is what "N pieces" prices against, not the grand total.
+  const pieceSubtotal = money(
+    String(
+      Number(order.amount_without_discount || 0) -
+        Number(order.shipping_amount || 0)
+    )
+  );
+  const cancelHref = order.id
+    ? `${cancelHrefBase.replace(/\/$/, '')}/${order.id}/cancellation`
+    : '';
+  const installmentCount = Math.max(0, Number(order.installment_count) || 0);
+  const perInstallment =
+    installmentCount > 1
+      ? money(String(Number(order.amount || 0) / installmentCount))
+      : '';
+
+  const addressBlock = (
+    address: AddressLike | null | undefined,
+    label: string,
+    part: string
+  ) => {
+    const lines = formatAddress(address);
+    if (lines.length === 0) return null;
+
+    return (
+      <div
+        {...partAttrs('address')}
+        data-order-detail-address={part}
+        style={{ flex: isMobile ? '1 1 auto' : '0 1 50%', minWidth: 0 }}
+      >
+        <div
+          {...partAttrs('address-label')}
+          style={{ fontWeight: 600, marginBottom: '8px' }}
+        >
+          {label}
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            opacity: 0.8
+          }}
+        >
+          {lines.map((line, index) => (
+            <span key={index}>{line}</span>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div
       data-order-detail=""
@@ -264,136 +563,246 @@ const OrderDetailBlock = ({
       <header
         data-order-detail-header=""
         {...partAttrs('header')}
-        style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+        style={{
+          display: 'flex',
+          flexDirection: isMobile ? 'column' : 'row',
+          alignItems: isMobile ? 'stretch' : 'flex-start',
+          justifyContent: 'space-between',
+          gap: isMobile ? '12px' : '24px'
+        }}
       >
-        <span
-          data-order-detail-number=""
-          {...partAttrs('number')}
-          style={{ fontWeight: 600 }}
-        >
-          {order.number || orderKey}
-        </span>
-        <span
-          data-order-detail-date=""
-          {...partAttrs('date')}
-          style={{ opacity: 0.8 }}
-        >
-          {formatDate(order.created_date, locale)}
-        </span>
-        {order.status?.label && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          {packageLabel && (
+            <span
+              data-order-detail-package=""
+              {...partAttrs('package-label')}
+              style={{ opacity: 0.7 }}
+            >
+              {packageLabel}
+            </span>
+          )}
           <span
-            data-order-detail-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')}
+            data-order-detail-number=""
+            {...partAttrs('number')}
+            style={{ fontWeight: 600 }}
           >
-            {order.status.label}
+            {numberLabel ? `${numberLabel} ` : ''}
+            {order.number || orderKey}
           </span>
-        )}
-      </header>
+        </div>
 
-      {showItems && (groupedItems.length > 0 || customLines) && (
-        <ul
-          data-order-detail-items=""
-          {...partAttrs('list')}
+        <div
           style={{
             display: 'flex',
-            flexDirection: 'column',
-            gap: '16px',
-            listStyle: 'none',
-            margin: 0,
-            padding: 0
+            flexDirection: isMobile ? 'column' : 'row',
+            alignItems: isMobile ? 'stretch' : 'flex-start',
+            gap: isMobile ? '8px' : '24px'
           }}
         >
-          {customLines ??
-            groupedItems.map((line) => {
-            // Status, currency and thumbnails are identical across the lines of
-            // a group, so the first line represents the whole row.
-            const item = line.item;
-            const name = line.name;
-            const href = line.href;
-            const lineCurrency = item.price_currency?.value || currency;
-
-            return (
-              <li
-                key={line.key}
-                data-order-detail-item=""
-                {...partAttrs('item')}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            <span data-order-detail-date="" {...partAttrs('date')}>
+              {dateLabel ? `${dateLabel} ` : ''}
+              {formatDate(order.created_date, locale)}
+            </span>
+            {headerTotalLabel && (
+              <span
+                data-order-detail-header-total=""
+                {...partAttrs('header-total')}
+              >
+                {headerTotalLabel} {money(order.amount)}
+              </span>
+            )}
+            {(showInvoiceLink || showCancelLink) && (
+              <div
                 style={{
                   display: 'flex',
-                  alignItems: 'flex-start',
-                  gap: '12px',
-                  paddingBottom: '16px',
-                  borderBottom: '1px solid var(--order-detail-border, #e5e7eb)'
+                  gap: '16px',
+                  marginTop: '4px'
                 }}
               >
-                {showImage && item.product?.image && (
-                  <NextLink
-                    href={isDesigner ? '#' : href || '#'}
+                {showInvoiceLink && order.e_archive_url && (
+                  <a
+                    href={isDesigner ? '#' : order.e_archive_url}
                     onClick={guard}
-                    style={{ flex: '0 0 auto', display: 'block' }}
+                    target={isDesigner ? undefined : '_blank'}
+                    rel="noreferrer"
+                    data-order-detail-invoice-link=""
+                    {...partAttrs('invoice-link')}
+                    style={{
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      whiteSpace: 'nowrap'
+                    }}
                   >
-                    {/* Plain img: order line thumbnails come from arbitrary
-                        commerce CDNs that the brand next.config may not allow. */}
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
-                      src={item.product.image}
-                      alt={name}
-                      width={imageWidth}
-                      height={imageHeight}
-                      {...partAttrs('image')}
-                      style={{ objectFit: 'cover', display: 'block' }}
-                    />
-                  </NextLink>
+                    → {invoiceLinkLabel}
+                  </a>
                 )}
-
-                <div style={{ flex: '1 1 auto', minWidth: 0 }}>
+                {showCancelLink && order.is_cancellable && cancelHref && (
                   <NextLink
-                    href={isDesigner ? '#' : href || '#'}
+                    href={isDesigner ? '#' : cancelHref}
                     onClick={guard}
-                    data-order-detail-item-name=""
-                    {...partAttrs('name')}
-                    style={{ color: 'inherit', textDecoration: 'none' }}
+                    data-order-detail-cancel-link=""
+                    {...partAttrs('cancel-link')}
+                    style={{
+                      color: 'inherit',
+                      textDecoration: 'none',
+                      whiteSpace: 'nowrap'
+                    }}
                   >
-                    {name}
+                    → {cancelLinkLabel}
                   </NextLink>
+                )}
+              </div>
+            )}
+          </div>
 
-                  {showQuantity && (
-                    <div
-                      data-order-detail-item-quantity=""
-                      {...partAttrs('quantity')}
-                      style={{ marginTop: '4px', opacity: 0.8 }}
-                    >
-                      {`${quantityPrefix}${line.quantity}`}
-                    </div>
-                  )}
+          {order.status?.label && (
+            <span
+              data-order-detail-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 style group owns
+              // that, same reasoning as the order-list block's status pill.
+              style={{ display: 'inline-block', flex: '0 0 auto' }}
+            >
+              {order.status.label}
+            </span>
+          )}
+        </div>
+      </header>
 
-                  {showShipmentStatus && item.status?.label && (
-                    <div
-                      data-order-detail-item-status=""
-                      data-order-status-value={item.status.value}
-                      {...partAttrs('item-status')}
-                      style={{ marginTop: '4px', opacity: 0.8 }}
+      {showItems && (groupedItems.length > 0 || customLines) && (
+        <ul
+          data-order-detail-items=""
+          {...partAttrs('list')}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0
+          }}
+        >
+          {customLines ??
+            groupedItems.map((line) => {
+              // Status, currency and thumbnails are identical across the lines of
+              // a group, so the first line represents the whole row.
+              const item = line.item;
+              const name = line.name;
+              const href = line.href;
+              const lineCurrency = item.price_currency?.value || currency;
+              const colorValue = showColor
+                ? resolveAttribute(item.product?.attributes, colorAttributeKey)
+                : '';
+              const sizeValue = showSize
+                ? resolveAttribute(item.product?.attributes, sizeAttributeKey)
+                : '';
+
+              return (
+                <li
+                  key={line.key}
+                  data-order-detail-item=""
+                  {...partAttrs('item')}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: '12px',
+                    paddingBottom: '16px',
+                    borderBottom:
+                      '1px solid var(--order-detail-border, #e5e7eb)'
+                  }}
+                >
+                  {showImage && item.product?.image && (
+                    <NextLink
+                      href={isDesigner ? '#' : href || '#'}
+                      onClick={guard}
+                      style={{ flex: '0 0 auto', display: 'block' }}
                     >
-                      {item.status.label}
-                    </div>
+                      {/* Plain img: order line thumbnails come from arbitrary
+                        commerce CDNs that the brand next.config may not allow. */}
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img
+                        src={item.product.image}
+                        alt={name}
+                        width={imageWidth}
+                        height={imageHeight}
+                        {...partAttrs('image')}
+                        style={{ objectFit: 'cover', display: 'block' }}
+                      />
+                    </NextLink>
                   )}
-                </div>
 
-                <span data-order-detail-item-price="" {...partAttrs('price')}>
-                  {/* The row now stands for every unit of the product, so the
+                  <div style={{ flex: '1 1 auto', minWidth: 0 }}>
+                    <NextLink
+                      href={isDesigner ? '#' : href || '#'}
+                      onClick={guard}
+                      data-order-detail-item-name=""
+                      {...partAttrs('name')}
+                      style={{ textDecoration: 'none' }}
+                    >
+                      {name}
+                    </NextLink>
+
+                    {showColor && colorValue && (
+                      <div
+                        data-order-detail-item-color=""
+                        {...partAttrs('color')}
+                        style={{ marginTop: '4px' }}
+                      >
+                        {colorLabel} {colorValue}
+                      </div>
+                    )}
+
+                    {showSize && sizeValue && (
+                      <div
+                        data-order-detail-item-size=""
+                        {...partAttrs('size')}
+                        style={{ marginTop: '4px' }}
+                      >
+                        {sizeLabel} {sizeValue}
+                      </div>
+                    )}
+
+                    {showQuantity && (
+                      <div
+                        data-order-detail-item-quantity=""
+                        {...partAttrs('quantity')}
+                        style={{ marginTop: '4px', opacity: 0.8 }}
+                      >
+                        {quantityLabel
+                          ? `${quantityLabel} ${line.quantity}`
+                          : `${quantityPrefix}${line.quantity}`}
+                      </div>
+                    )}
+
+                    {showShipmentStatus && item.status?.label && (
+                      <div
+                        data-order-detail-item-status=""
+                        data-order-status-value={item.status.value}
+                        {...partAttrs('item-status')}
+                        style={{ marginTop: '4px', opacity: 0.8 }}
+                      >
+                        {item.status.label}
+                      </div>
+                    )}
+                  </div>
+
+                  <span data-order-detail-item-price="" {...partAttrs('price')}>
+                    {/* The row now stands for every unit of the product, so the
                       group's summed line total is what it must price — the
                       single line's total_amount would understate an "x3" row.
                       For an ungrouped row this is the value printed before. */}
-                  {formatMoney(line.total, {
-                    locale,
-                    currency: lineCurrency
-                  })}
-                </span>
-              </li>
-            );
-          })}
+                    {formatMoney(line.total, {
+                      locale,
+                      currency: lineCurrency
+                    })}
+                  </span>
+                </li>
+              );
+            })}
         </ul>
       )}
 
@@ -438,33 +847,100 @@ const OrderDetailBlock = ({
         </section>
       )}
 
+      {(showShippingAddress || showBillingAddress) && (
+        <section
+          data-order-detail-addresses=""
+          {...partAttrs('addresses')}
+          style={{
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            gap: isMobile ? '16px' : '40px'
+          }}
+        >
+          {showShippingAddress &&
+            addressBlock(
+              order.shipping_address,
+              shippingAddressLabel,
+              'shipping'
+            )}
+          {showBillingAddress &&
+            addressBlock(order.billing_address, billingAddressLabel, 'billing')}
+        </section>
+      )}
+
       {showTotals && (
         <section
           data-order-detail-totals=""
           {...partAttrs('totals')}
           style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
         >
-          {totalRow(
-            subtotalLabel,
-            money(order.amount_without_discount),
-            'data-order-detail-subtotal'
-          )}
-          {totalRow(
-            discountLabel,
-            money(order.discount_amount),
-            'data-order-detail-discount'
-          )}
+          {showPieceCount &&
+            totalRow(
+              `${groupedItems.reduce(
+                (sum, line) => sum + Number(line.quantity || 0),
+                0
+              )} ${pieceCountLabel}`,
+              pieceSubtotal,
+              'data-order-detail-piece-count'
+            )}
           {totalRow(
             shippingLabel,
-            money(order.shipping_amount),
+            Number(order.shipping_amount || 0) > 0
+              ? money(order.shipping_amount)
+              : freeShippingLabel,
             'data-order-detail-shipping'
           )}
+          {showDiscountItems
+            ? (order.discountitem_set || []).map((discount, index) =>
+                totalRow(
+                  discount.name || discountLabel,
+                  money(discount.amount),
+                  `data-order-detail-discount-${index}`
+                )
+              )
+            : totalRow(
+                discountLabel,
+                money(order.discount_amount),
+                'data-order-detail-discount'
+              )}
           {totalRow(
             totalLabel,
             money(order.amount),
             'data-order-detail-total',
             'grand-total'
           )}
+          {showInstallmentInfo &&
+            installmentCount > 1 &&
+            totalRow(
+              installmentInfoLabel,
+              `${installmentCount} x ${perInstallment}`,
+              'data-order-detail-installments'
+            )}
+        </section>
+      )}
+
+      {showPaymentInfo && (order.bank?.name || order.payment_option?.name) && (
+        <section
+          data-order-detail-payment=""
+          {...partAttrs('payment-info')}
+          style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+        >
+          <div
+            {...partAttrs('payment-info-label')}
+            style={{ fontWeight: 600, marginBottom: '4px' }}
+          >
+            {paymentInfoLabel}
+          </div>
+          {formatAddress(order.billing_address)
+            .slice(0, 1)
+            .map((line, index) => (
+              <span key={index}>{line}</span>
+            ))}
+          <span style={{ opacity: 0.8 }}>
+            {[order.bank?.name, order.payment_option?.name]
+              .filter(Boolean)
+              .join(' — ')}
+          </span>
         </section>
       )}
     </div>