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

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

@@ -30,26 +30,10 @@ 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;
@@ -61,14 +45,6 @@ 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;
 }
 
 /**
@@ -112,135 +88,6 @@ 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
@@ -248,22 +95,12 @@ 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.
- * 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.
+ * 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.
  */
 const OrderDetailBlock = ({
   block,
@@ -311,110 +148,25 @@ 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 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 order = (data ?? null) as OrderLike | 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.
@@ -428,6 +180,8 @@ const OrderDetailBlock = ({
         label={
           isLoading
             ? 'Order detail (loading)'
+            : orderKey
+            ? 'Order detail (order not found)'
             : 'Order detail (no order in URL)'
         }
         attribute="data-order-detail"
@@ -497,59 +251,6 @@ 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=""
@@ -563,114 +264,33 @@ const OrderDetailBlock = ({
       <header
         data-order-detail-header=""
         {...partAttrs('header')}
-        style={{
-          display: 'flex',
-          flexDirection: isMobile ? 'column' : 'row',
-          alignItems: isMobile ? 'stretch' : 'flex-start',
-          justifyContent: 'space-between',
-          gap: isMobile ? '12px' : '24px'
-        }}
+        style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
       >
-        <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-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 && (
           <span
-            data-order-detail-number=""
-            {...partAttrs('number')}
-            style={{ fontWeight: 600 }}
+            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')}
           >
-            {numberLabel ? `${numberLabel} ` : ''}
-            {order.number || orderKey}
+            {order.status.label}
           </span>
-        </div>
-
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: isMobile ? 'column' : 'row',
-            alignItems: isMobile ? 'stretch' : 'flex-start',
-            gap: isMobile ? '8px' : '24px'
-          }}
-        >
-          <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',
-                  gap: '16px',
-                  marginTop: '4px'
-                }}
-              >
-                {showInvoiceLink && order.e_archive_url && (
-                  <a
-                    href={isDesigner ? '#' : order.e_archive_url}
-                    onClick={guard}
-                    target={isDesigner ? undefined : '_blank'}
-                    rel="noreferrer"
-                    data-order-detail-invoice-link=""
-                    {...partAttrs('invoice-link')}
-                    style={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      whiteSpace: 'nowrap'
-                    }}
-                  >
-                    → {invoiceLinkLabel}
-                  </a>
-                )}
-                {showCancelLink && order.is_cancellable && cancelHref && (
-                  <NextLink
-                    href={isDesigner ? '#' : cancelHref}
-                    onClick={guard}
-                    data-order-detail-cancel-link=""
-                    {...partAttrs('cancel-link')}
-                    style={{
-                      color: 'inherit',
-                      textDecoration: 'none',
-                      whiteSpace: 'nowrap'
-                    }}
-                  >
-                    → {cancelLinkLabel}
-                  </NextLink>
-                )}
-              </div>
-            )}
-          </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>
 
       {showItems && (groupedItems.length > 0 || customLines) && (
@@ -688,121 +308,92 @@ const OrderDetailBlock = ({
         >
           {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' }}
-                    >
-                      {/* Plain img: order line thumbnails come from arbitrary
+            // 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')}
+                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' }}
+                  >
+                    {/* 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>
+                    {/* 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 style={{ flex: '1 1 auto', minWidth: 0 }}>
+                  <NextLink
+                    href={isDesigner ? '#' : href || '#'}
+                    onClick={guard}
+                    data-order-detail-item-name=""
+                    {...partAttrs('name')}
+                    style={{ color: 'inherit', textDecoration: 'none' }}
+                  >
+                    {name}
+                  </NextLink>
+
+                  {showQuantity && (
+                    <div
+                      data-order-detail-item-quantity=""
+                      {...partAttrs('quantity')}
+                      style={{ marginTop: '4px', opacity: 0.8 }}
+                    >
+                      {`${quantityPrefix}${line.quantity}`}
+                    </div>
                   )}
 
-                  <div style={{ flex: '1 1 auto', minWidth: 0 }}>
-                    <NextLink
-                      href={isDesigner ? '#' : href || '#'}
-                      onClick={guard}
-                      data-order-detail-item-name=""
-                      {...partAttrs('name')}
-                      style={{ textDecoration: 'none' }}
+                  {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 }}
                     >
-                      {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
+                      {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>
       )}
 
@@ -847,100 +438,33 @@ 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' }}
         >
-          {showPieceCount &&
-            totalRow(
-              `${groupedItems.reduce(
-                (sum, line) => sum + Number(line.quantity || 0),
-                0
-              )} ${pieceCountLabel}`,
-              pieceSubtotal,
-              'data-order-detail-piece-count'
-            )}
+          {totalRow(
+            subtotalLabel,
+            money(order.amount_without_discount),
+            'data-order-detail-subtotal'
+          )}
+          {totalRow(
+            discountLabel,
+            money(order.discount_amount),
+            'data-order-detail-discount'
+          )}
           {totalRow(
             shippingLabel,
-            Number(order.shipping_amount || 0) > 0
-              ? money(order.shipping_amount)
-              : freeShippingLabel,
+            money(order.shipping_amount),
             '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>