@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/order-detail/components/fulfilment.mjs

@@ -0,0 +1,315 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergedSettings } from "../engine.mjs";
+import { fillTemplate } from "../money.mjs";
+import { ExternalLink, Package, Store, Truck } from "./icons.mjs";
+function OrderPickupDetails({ pickup, labels, date }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-muted/30 p-3 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 font-medium", children: [
+        /* @__PURE__ */ jsx(Store, {}),
+        labels.logistics.pickupTitle
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "rounded-full border border-border px-2 py-0.5", children: labels.logistics.pickupStatus[pickup.status] })
+    ] }),
+    /* @__PURE__ */ jsxs("dl", { className: "mt-2 space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.pickupPoint }),
+        /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words text-right text-foreground", children: pickup.locationName })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.address }),
+        /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words text-right text-foreground", children: pickup.address })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.schedule }),
+        /* @__PURE__ */ jsx("dd", { className: "min-w-0 text-right text-foreground", children: pickup.schedule })
+      ] }),
+      pickup.instructions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.instructions }),
+        /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words text-right text-foreground", children: pickup.instructions })
+      ] }) : null,
+      pickup.availableFrom ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.availableFrom }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: date(pickup.availableFrom) })
+      ] }) : null,
+      pickup.expiresAt ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.expiresAt }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: date(pickup.expiresAt) })
+      ] }) : null,
+      pickup.code ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.code }),
+        /* @__PURE__ */ jsx("dd", { className: "text-base font-semibold tracking-wide text-foreground", children: pickup.code })
+      ] }) : null,
+      pickup.evidence ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-x-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.evidence }),
+        /* @__PURE__ */ jsx("dd", { className: "text-right text-foreground", children: pickup.evidence })
+      ] }) : null
+    ] })
+  ] });
+}
+function OrderShipmentTracking({
+  order,
+  fulfillment,
+  mode,
+  labels,
+  settings: input,
+  date
+}) {
+  const settings = mergedSettings(input);
+  const pickup = mode === "pickup";
+  const physical = !pickup && fulfillment.packages.length > 0;
+  const tracking = !pickup && settings.tracking === true && Boolean(fulfillment.trackingNumber || fulfillment.trackingUrl);
+  const hasDetails = fulfillment.packages.length > 0 || fulfillment.allocations.length > 0 || fulfillment.events.length > 0 || Boolean(fulfillment.evidence);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-background p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-xs font-medium", children: [
+          pickup ? /* @__PURE__ */ jsx(Store, {}) : /* @__PURE__ */ jsx(Package, {}),
+          pickup ? labels.logistics.pickupFulfillment : labels.logistics.shipment
+        ] }),
+        fulfillment.carrier ?? fulfillment.provider ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: fulfillment.carrier ?? fulfillment.provider }) : null
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "rounded-full border border-border px-2 py-0.5 text-xs", children: labels.fulfilmentStatus[fulfillment.status] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xs", children: [
+      tracking && fulfillment.trackingNumber ? /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          labels.logistics.trackingNumber,
+          ":"
+        ] }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium break-all", children: fulfillment.trackingNumber })
+      ] }) : null,
+      tracking && fulfillment.trackingUrl ? /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: fulfillment.trackingUrl,
+          target: "_blank",
+          rel: "noreferrer",
+          "aria-label": `${labels.logistics.track}: ${fulfillment.trackingNumber ?? fulfillment.trackingUrl}`,
+          className: "inline-flex items-center gap-1 rounded-sm font-medium underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+          children: [
+            labels.logistics.track,
+            /* @__PURE__ */ jsx(ExternalLink, { className: "size-3.5" })
+          ]
+        }
+      ) : null,
+      !pickup && physical && settings.tracking === true && !tracking ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.logistics.noTracking }) : null,
+      fulfillment.deliveredAt ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        labels.logistics.deliveredAt,
+        ": ",
+        date(fulfillment.deliveredAt)
+      ] }) : fulfillment.shippedAt ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        labels.logistics.shippedAt,
+        ": ",
+        date(fulfillment.shippedAt)
+      ] }) : null
+    ] }),
+    hasDetails ? /* @__PURE__ */ jsxs("details", { className: "mt-2 text-xs", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer rounded-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: labels.logistics.details }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2 border-t pt-2", children: [
+        fulfillment.packages.length > 0 ? /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+          labels.logistics.packages,
+          ":",
+          " ",
+          fulfillment.packages.map((entry) => entry.label).join(" \xB7 ")
+        ] }) : null,
+        fulfillment.allocations.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: fulfillment.allocations.map((allocation) => {
+          const line = order.lines.find((entry) => entry.id === allocation.lineId);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex justify-between gap-3",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-muted-foreground", children: line?.name ?? allocation.lineId }),
+                /* @__PURE__ */ jsxs("span", { className: "shrink-0 tabular-nums", children: [
+                  allocation.quantity,
+                  " ",
+                  labels.logistics.units
+                ] })
+              ]
+            },
+            `${fulfillment.id}-${allocation.lineId}`
+          );
+        }) }) : null,
+        fulfillment.evidence ? /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+          labels.logistics.evidence,
+          ": ",
+          fulfillment.evidence
+        ] }) : null,
+        fulfillment.events.length > 0 ? /* @__PURE__ */ jsx("ol", { className: "space-y-1 border-l pl-3", children: fulfillment.events.map((event) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
+          /* @__PURE__ */ jsx("span", { className: "ml-2 text-muted-foreground", children: date(event.at) }),
+          event.place ? /* @__PURE__ */ jsx("span", { className: "ml-2 text-muted-foreground", children: event.place }) : null
+        ] }, event.id)) }) : null
+      ] })
+    ] }) : null
+  ] });
+}
+function OrderFulfillmentGroup({
+  order,
+  group,
+  fulfillments,
+  labels,
+  settings: input,
+  money,
+  date,
+  promotions
+}) {
+  const settings = mergedSettings(input);
+  const Icon = group.mode === "pickup" ? Store : Truck;
+  const lineIds = new Set(fulfillments.flatMap((entry) => entry.allocations.map((a) => a.lineId)));
+  const units = fulfillments.flatMap((entry) => entry.allocations).reduce((total, allocation) => total + allocation.quantity, 0);
+  const activeFulfillments = fulfillments.filter((entry) => entry.status !== "cancelled");
+  const cancelledGroup = fulfillments.length > 0 && activeFulfillments.length === 0;
+  const delivered = activeFulfillments.length > 0 && activeFulfillments.every(
+    (entry) => entry.status === "delivered" || entry.status === "picked_up"
+  );
+  const pendingUnits = activeFulfillments.filter((entry) => entry.status !== "delivered" && entry.status !== "picked_up").flatMap((entry) => entry.allocations).reduce((total, allocation) => total + allocation.quantity, 0);
+  const deliveredAt = fulfillments.map((entry) => entry.deliveredAt).filter((value) => Boolean(value)).sort().at(-1);
+  const taxTotal = group.taxes.reduce((total, entry) => total + entry.amount.amount, 0);
+  const freeShipping = group.shippingSubtotal.amount > 0 && group.total.amount === 0;
+  const promotionEntries = settings.promotions === true ? promotions : [];
+  const promotionAdjustmentIds = new Set(promotionEntries.flatMap((entry) => entry.adjustmentIds));
+  const manualDiscounts = group.discounts.filter(
+    (entry) => !promotionAdjustmentIds.has(entry.id)
+  );
+  const pickup = group.mode === "pickup" ? group.pickup ?? fulfillments.find((f) => f.pickup)?.pickup : void 0;
+  const groupState = cancelledGroup ? labels.fulfilmentStatus.cancelled : delivered ? group.mode === "pickup" ? labels.logistics.pickupCompleted : labels.logistics.completed : pickup?.status === "ready" ? labels.logistics.pickupStatus.ready : labels.logistics.inProgress;
+  const shippingCards = /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [...fulfillments].sort((left, right) => {
+    const rank = (entry) => entry.status === "cancelled" ? 3 : entry.status === "delivered" || entry.status === "picked_up" ? 2 : 1;
+    return rank(left) - rank(right);
+  }).map((fulfillment) => /* @__PURE__ */ jsx(
+    OrderShipmentTracking,
+    {
+      order,
+      fulfillment,
+      mode: group.mode,
+      labels,
+      settings,
+      date
+    },
+    fulfillment.id
+  )) });
+  return /* @__PURE__ */ jsxs("article", { className: "rounded-lg border bg-background p-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-sm font-medium", children: [
+        /* @__PURE__ */ jsx(Icon, {}),
+        group.method.name
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+        groupState,
+        group.etaLabel && !delivered ? ` \xB7 ${group.etaLabel}` : "",
+        delivered && deliveredAt ? ` \xB7 ${date(deliveredAt)}` : ""
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+        fillTemplate(
+          lineIds.size === 1 ? labels.logistics.groupSummaryOne : labels.logistics.groupSummary,
+          {
+            units,
+            products: lineIds.size
+          }
+        ),
+        pendingUnits > 0 && !delivered ? ` \xB7 ${fillTemplate(
+          group.mode === "pickup" ? labels.logistics.pendingPickup : labels.logistics.pendingUnits,
+          { count: pendingUnits }
+        )}` : ""
+      ] })
+    ] }) }),
+    group.shippingSubtotal.amount > 0 || group.discounts.length > 0 ? /* @__PURE__ */ jsxs("dl", { className: "mt-2 space-y-1 text-xs", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: labels.logistics.originalCost }),
+        /* @__PURE__ */ jsx("dd", { className: "tabular-nums", children: money(group.shippingSubtotal) })
+      ] }),
+      promotionEntries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("dt", { className: "min-w-0 break-words text-muted-foreground", children: [
+          labels.logistics.promotion,
+          ": ",
+          entry.name,
+          entry.code ? ` (${entry.code})` : ""
+        ] }),
+        /* @__PURE__ */ jsxs("dd", { className: "shrink-0 tabular-nums", children: [
+          "\u2212",
+          money(entry.appliedAmount)
+        ] })
+      ] }, entry.id)),
+      manualDiscounts.map((entry) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("dt", { className: "min-w-0 break-words text-muted-foreground", children: [
+          entry.direction === "surcharge" ? labels.items.adjustment : labels.logistics.discounts,
+          ": ",
+          entry.label
+        ] }),
+        /* @__PURE__ */ jsxs("dd", { className: "shrink-0 tabular-nums", children: [
+          entry.direction === "surcharge" ? "+" : "\u2212",
+          money(entry.amount)
+        ] })
+      ] }, entry.id)),
+      settings.detailedTaxes === true && taxTotal > 0 ? group.taxes.map((entry) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "min-w-0 text-muted-foreground", children: entry.label }),
+        /* @__PURE__ */ jsx("dd", { className: "shrink-0 tabular-nums", children: money(entry.amount) })
+      ] }, entry.id)) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3 border-t pt-1", children: [
+        /* @__PURE__ */ jsx("dt", { className: "font-medium text-foreground", children: labels.logistics.finalCost }),
+        /* @__PURE__ */ jsx("dd", { className: "font-semibold tabular-nums", children: freeShipping ? labels.logistics.shippingFree : money(group.total) })
+      ] })
+    ] }) : null,
+    pickup && settings.pickup === true ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+      /* @__PURE__ */ jsx(OrderPickupDetails, { pickup, labels, date }),
+      fulfillments.some((entry) => entry.allocations.length > 0 || entry.events.length > 0) ? /* @__PURE__ */ jsxs("details", { className: "text-xs", children: [
+        /* @__PURE__ */ jsx(
+          "summary",
+          {
+            "aria-label": `${labels.logistics.details}: ${pickup.locationName}`,
+            className: "cursor-pointer rounded-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+            children: labels.logistics.details
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2 border-t pt-2", children: [
+          fulfillments.flatMap(
+            (entry) => entry.allocations.map((allocation) => {
+              const line = order.lines.find((item) => item.id === allocation.lineId);
+              return /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  className: "flex justify-between gap-3",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-muted-foreground", children: line?.name ?? allocation.lineId }),
+                    /* @__PURE__ */ jsxs("span", { className: "shrink-0 tabular-nums", children: [
+                      allocation.quantity,
+                      " ",
+                      labels.logistics.units
+                    ] })
+                  ]
+                },
+                `${entry.id}-${allocation.lineId}`
+              );
+            })
+          ),
+          fulfillments.flatMap(
+            (entry) => entry.events.map((event) => /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+              event.label,
+              " \xB7 ",
+              date(event.at)
+            ] }, event.id))
+          )
+        ] })
+      ] }) : null
+    ] }) : delivered ? /* @__PURE__ */ jsxs("details", { className: "mt-3 text-xs", children: [
+      /* @__PURE__ */ jsx(
+        "summary",
+        {
+          "aria-label": `${labels.logistics.details}: ${group.method.name}`,
+          className: "cursor-pointer rounded-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+          children: labels.logistics.details
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 border-t pt-2", children: shippingCards })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "mt-3", children: shippingCards })
+  ] });
+}
+export {
+  OrderFulfillmentGroup,
+  OrderPickupDetails,
+  OrderShipmentTracking
+};
+//# sourceMappingURL=fulfilment.mjs.map

package/dist/blocks/designs/order-detail/components/fulfilment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-detail/components/fulfilment.tsx"],"sourcesContent":["import type {\n  Fulfillment,\n  LogisticsGroup,\n  OrderDetailLabels,\n  OrderDetailOrder,\n  OrderDetailSettings,\n  PickupDetails,\n  PromotionPresentation,\n} from '../contracts'\nimport { mergedSettings } from '../engine'\nimport { fillTemplate } from '../money'\nimport { ExternalLink, Package, Store, Truck } from './icons'\nimport type { DateFormatter, MoneyFormatter } from './ui'\n\ntype PickupProps = {\n  pickup: PickupDetails\n  labels: OrderDetailLabels\n  date: DateFormatter\n}\n\n/** Pickup facts only: no carrier, no tracking, no package fiction. */\nexport function OrderPickupDetails({ pickup, labels, date }: PickupProps) {\n  return (\n    <div className=\"rounded-lg border bg-muted/30 p-3 text-xs\">\n      <div className=\"flex flex-wrap items-start justify-between gap-2\">\n        <p className=\"flex items-center gap-1.5 font-medium\">\n          <Store />\n          {labels.logistics.pickupTitle}\n        </p>\n        <span className=\"rounded-full border border-border px-2 py-0.5\">\n          {labels.logistics.pickupStatus[pickup.status]}\n        </span>\n      </div>\n      <dl className=\"mt-2 space-y-1\">\n        <div className=\"flex flex-wrap justify-between gap-x-3\">\n          <dt className=\"text-muted-foreground\">{labels.logistics.pickupPoint}</dt>\n          <dd className=\"min-w-0 break-words text-right text-foreground\">{pickup.locationName}</dd>\n        </div>\n        <div className=\"flex flex-wrap justify-between gap-x-3\">\n          <dt className=\"text-muted-foreground\">{labels.logistics.address}</dt>\n          <dd className=\"min-w-0 break-words text-right text-foreground\">{pickup.address}</dd>\n        </div>\n        <div className=\"flex flex-wrap justify-between gap-x-3\">\n          <dt className=\"text-muted-foreground\">{labels.logistics.schedule}</dt>\n          <dd className=\"min-w-0 text-right text-foreground\">{pickup.schedule}</dd>\n        </div>\n        {pickup.instructions ? (\n          <div className=\"flex flex-wrap justify-between gap-x-3\">\n            <dt className=\"text-muted-foreground\">{labels.logistics.instructions}</dt>\n            <dd className=\"min-w-0 break-words text-right text-foreground\">{pickup.instructions}</dd>\n          </div>\n        ) : null}\n        {pickup.availableFrom ? (\n          <div className=\"flex flex-wrap justify-between gap-x-3\">\n            <dt className=\"text-muted-foreground\">{labels.logistics.availableFrom}</dt>\n            <dd className=\"text-foreground\">{date(pickup.availableFrom)}</dd>\n          </div>\n        ) : null}\n        {pickup.expiresAt ? (\n          <div className=\"flex flex-wrap justify-between gap-x-3\">\n            <dt className=\"text-muted-foreground\">{labels.logistics.expiresAt}</dt>\n            <dd className=\"text-foreground\">{date(pickup.expiresAt)}</dd>\n          </div>\n        ) : null}\n        {pickup.code ? (\n          <div className=\"flex flex-wrap items-baseline justify-between gap-x-3\">\n            <dt className=\"text-muted-foreground\">{labels.logistics.code}</dt>\n            <dd className=\"text-base font-semibold tracking-wide text-foreground\">{pickup.code}</dd>\n          </div>\n        ) : null}\n        {pickup.evidence ? (\n          <div className=\"flex flex-wrap justify-between gap-x-3\">\n            <dt className=\"text-muted-foreground\">{labels.logistics.evidence}</dt>\n            <dd className=\"text-right text-foreground\">{pickup.evidence}</dd>\n          </div>\n        ) : null}\n      </dl>\n    </div>\n  )\n}\n\ntype TrackingProps = {\n  order: OrderDetailOrder\n  fulfillment: Fulfillment\n  mode: 'shipping' | 'pickup'\n  labels: OrderDetailLabels\n  settings: OrderDetailSettings\n  date: DateFormatter\n}\n\n/**\n * One fulfilment inside a shipping group. Status, carrier and tracking stay\n * visible; packages, allocations and events live behind a nested disclosure so\n * a partial delivery can be scanned without reading a technical log.\n */\nexport function OrderShipmentTracking({\n  order,\n  fulfillment,\n  mode,\n  labels,\n  settings: input,\n  date,\n}: TrackingProps) {\n  const settings = mergedSettings(input)\n  const pickup = mode === 'pickup'\n  const physical = !pickup && fulfillment.packages.length > 0\n  const tracking =\n    !pickup &&\n    settings.tracking === true &&\n    Boolean(fulfillment.trackingNumber || fulfillment.trackingUrl)\n  const hasDetails =\n    fulfillment.packages.length > 0 ||\n    fulfillment.allocations.length > 0 ||\n    fulfillment.events.length > 0 ||\n    Boolean(fulfillment.evidence)\n\n  return (\n    <div className=\"rounded-lg border bg-background p-3\">\n      <div className=\"flex flex-wrap items-start justify-between gap-2\">\n        <div className=\"min-w-0\">\n          <p className=\"flex items-center gap-1.5 text-xs font-medium\">\n            {pickup ? <Store /> : <Package />}\n            {pickup ? labels.logistics.pickupFulfillment : labels.logistics.shipment}\n          </p>\n          {fulfillment.carrier ?? fulfillment.provider ? (\n            <p className=\"mt-0.5 text-xs text-muted-foreground\">\n              {fulfillment.carrier ?? fulfillment.provider}\n            </p>\n          ) : null}\n        </div>\n        <span className=\"rounded-full border border-border px-2 py-0.5 text-xs\">\n          {labels.fulfilmentStatus[fulfillment.status]}\n        </span>\n      </div>\n\n      <div className=\"mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xs\">\n        {tracking && fulfillment.trackingNumber ? (\n          <span className=\"min-w-0\">\n            <span className=\"text-muted-foreground\">{labels.logistics.trackingNumber}:</span>{' '}\n            <span className=\"font-medium break-all\">{fulfillment.trackingNumber}</span>\n          </span>\n        ) : null}\n        {tracking && fulfillment.trackingUrl ? (\n          <a\n            href={fulfillment.trackingUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            aria-label={`${labels.logistics.track}: ${fulfillment.trackingNumber ?? fulfillment.trackingUrl}`}\n            className=\"inline-flex items-center gap-1 rounded-sm font-medium underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n          >\n            {labels.logistics.track}\n            <ExternalLink className=\"size-3.5\" />\n          </a>\n        ) : null}\n        {!pickup && physical && settings.tracking === true && !tracking ? (\n          <span className=\"text-muted-foreground\">{labels.logistics.noTracking}</span>\n        ) : null}\n        {fulfillment.deliveredAt ? (\n          <span className=\"text-muted-foreground\">\n            {labels.logistics.deliveredAt}: {date(fulfillment.deliveredAt)}\n          </span>\n        ) : fulfillment.shippedAt ? (\n          <span className=\"text-muted-foreground\">\n            {labels.logistics.shippedAt}: {date(fulfillment.shippedAt)}\n          </span>\n        ) : null}\n      </div>\n\n      {hasDetails ? (\n        <details className=\"mt-2 text-xs\">\n          <summary className=\"cursor-pointer rounded-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\">\n            {labels.logistics.details}\n          </summary>\n          <div className=\"mt-2 space-y-2 border-t pt-2\">\n            {fulfillment.packages.length > 0 ? (\n              <p className=\"text-muted-foreground\">\n                {labels.logistics.packages}:{' '}\n                {fulfillment.packages.map((entry) => entry.label).join(' · ')}\n              </p>\n            ) : null}\n\n            {fulfillment.allocations.length > 0 ? (\n              <ul className=\"space-y-0.5\">\n                {fulfillment.allocations.map((allocation) => {\n                  const line = order.lines.find((entry) => entry.id === allocation.lineId)\n                  return (\n                    <li\n                      key={`${fulfillment.id}-${allocation.lineId}`}\n                      className=\"flex justify-between gap-3\"\n                    >\n                      <span className=\"min-w-0 break-words text-muted-foreground\">\n                        {line?.name ?? allocation.lineId}\n                      </span>\n                      <span className=\"shrink-0 tabular-nums\">\n                        {allocation.quantity} {labels.logistics.units}\n                      </span>\n                    </li>\n                  )\n                })}\n              </ul>\n            ) : null}\n\n            {fulfillment.evidence ? (\n              <p className=\"text-muted-foreground\">\n                {labels.logistics.evidence}: {fulfillment.evidence}\n              </p>\n            ) : null}\n\n            {fulfillment.events.length > 0 ? (\n              <ol className=\"space-y-1 border-l pl-3\">\n                {fulfillment.events.map((event) => (\n                  <li key={event.id}>\n                    <span className=\"text-foreground\">{event.label}</span>\n                    <span className=\"ml-2 text-muted-foreground\">{date(event.at)}</span>\n                    {event.place ? (\n                      <span className=\"ml-2 text-muted-foreground\">{event.place}</span>\n                    ) : null}\n                  </li>\n                ))}\n              </ol>\n            ) : null}\n          </div>\n        </details>\n      ) : null}\n    </div>\n  )\n}\n\ntype GroupProps = {\n  order: OrderDetailOrder\n  group: LogisticsGroup\n  fulfillments: Fulfillment[]\n  labels: OrderDetailLabels\n  settings: OrderDetailSettings\n  money: MoneyFormatter\n  date: DateFormatter\n  promotions: PromotionPresentation[]\n}\n\nexport function OrderFulfillmentGroup({\n  order,\n  group,\n  fulfillments,\n  labels,\n  settings: input,\n  money,\n  date,\n  promotions,\n}: GroupProps) {\n  const settings = mergedSettings(input)\n  const Icon = group.mode === 'pickup' ? Store : Truck\n  const lineIds = new Set(fulfillments.flatMap((entry) => entry.allocations.map((a) => a.lineId)))\n  const units = fulfillments\n    .flatMap((entry) => entry.allocations)\n    .reduce((total, allocation) => total + allocation.quantity, 0)\n  const activeFulfillments = fulfillments.filter((entry) => entry.status !== 'cancelled')\n  const cancelledGroup = fulfillments.length > 0 && activeFulfillments.length === 0\n  const delivered =\n    activeFulfillments.length > 0 &&\n    activeFulfillments.every(\n      (entry) => entry.status === 'delivered' || entry.status === 'picked_up',\n    )\n  const pendingUnits = activeFulfillments\n    .filter((entry) => entry.status !== 'delivered' && entry.status !== 'picked_up')\n    .flatMap((entry) => entry.allocations)\n    .reduce((total, allocation) => total + allocation.quantity, 0)\n  const deliveredAt = fulfillments\n    .map((entry) => entry.deliveredAt)\n    .filter((value): value is string => Boolean(value))\n    .sort()\n    .at(-1)\n  const taxTotal = group.taxes.reduce((total, entry) => total + entry.amount.amount, 0)\n  const freeShipping = group.shippingSubtotal.amount > 0 && group.total.amount === 0\n  const promotionEntries = settings.promotions === true ? promotions : []\n  const promotionAdjustmentIds = new Set(promotionEntries.flatMap((entry) => entry.adjustmentIds))\n  const manualDiscounts = group.discounts.filter(\n    (entry) => !promotionAdjustmentIds.has(entry.id),\n  )\n\n  const pickup = group.mode === 'pickup' ? (group.pickup ?? fulfillments.find((f) => f.pickup)?.pickup) : undefined\n  const groupState = cancelledGroup\n    ? labels.fulfilmentStatus.cancelled\n    : delivered\n      ? group.mode === 'pickup'\n        ? labels.logistics.pickupCompleted\n        : labels.logistics.completed\n      : pickup?.status === 'ready'\n        ? labels.logistics.pickupStatus.ready\n        : labels.logistics.inProgress\n\n  const shippingCards = (\n    <div className=\"space-y-2\">\n      {[...fulfillments]\n        .sort((left, right) => {\n          const rank = (entry: Fulfillment) =>\n            entry.status === 'cancelled'\n              ? 3\n              : entry.status === 'delivered' || entry.status === 'picked_up'\n                ? 2\n                : 1\n          return rank(left) - rank(right)\n        })\n        .map((fulfillment) => (\n          <OrderShipmentTracking\n            key={fulfillment.id}\n            order={order}\n            fulfillment={fulfillment}\n            mode={group.mode}\n            labels={labels}\n            settings={settings}\n            date={date}\n          />\n        ))}\n    </div>\n  )\n\n  return (\n    <article className=\"rounded-lg border bg-background p-3\">\n      <div className=\"flex flex-wrap items-start justify-between gap-2\">\n        <div className=\"min-w-0\">\n          <p className=\"flex items-center gap-1.5 text-sm font-medium\">\n            <Icon />\n            {group.method.name}\n          </p>\n          <p className=\"mt-0.5 text-xs text-muted-foreground\">\n            {groupState}\n            {group.etaLabel && !delivered ? ` · ${group.etaLabel}` : ''}\n            {delivered && deliveredAt ? ` · ${date(deliveredAt)}` : ''}\n          </p>\n          <p className=\"mt-1 text-xs text-muted-foreground\">\n            {fillTemplate(\n              lineIds.size === 1 ? labels.logistics.groupSummaryOne : labels.logistics.groupSummary,\n              {\n                units,\n                products: lineIds.size,\n              },\n            )}\n            {pendingUnits > 0 && !delivered\n              ? ` · ${fillTemplate(\n                  group.mode === 'pickup'\n                    ? labels.logistics.pendingPickup\n                    : labels.logistics.pendingUnits,\n                  { count: pendingUnits },\n                )}`\n              : ''}\n          </p>\n        </div>\n      </div>\n\n      {group.shippingSubtotal.amount > 0 || group.discounts.length > 0 ? (\n        <dl className=\"mt-2 space-y-1 text-xs\">\n          <div className=\"flex justify-between gap-3\">\n            <dt className=\"text-muted-foreground\">{labels.logistics.originalCost}</dt>\n            <dd className=\"tabular-nums\">{money(group.shippingSubtotal)}</dd>\n          </div>\n          {promotionEntries.map((entry) => (\n            <div key={entry.id} className=\"flex justify-between gap-3\">\n              <dt className=\"min-w-0 break-words text-muted-foreground\">\n                {labels.logistics.promotion}: {entry.name}\n                {entry.code ? ` (${entry.code})` : ''}\n              </dt>\n              <dd className=\"shrink-0 tabular-nums\">−{money(entry.appliedAmount)}</dd>\n            </div>\n          ))}\n          {manualDiscounts.map((entry) => (\n            <div key={entry.id} className=\"flex justify-between gap-3\">\n              <dt className=\"min-w-0 break-words text-muted-foreground\">\n                {entry.direction === 'surcharge'\n                  ? labels.items.adjustment\n                  : labels.logistics.discounts}\n                : {entry.label}\n              </dt>\n              <dd className=\"shrink-0 tabular-nums\">\n                {entry.direction === 'surcharge' ? '+' : '−'}\n                {money(entry.amount)}\n              </dd>\n            </div>\n          ))}\n          {settings.detailedTaxes === true && taxTotal > 0\n            ? group.taxes.map((entry) => (\n                <div key={entry.id} className=\"flex justify-between gap-3\">\n                  <dt className=\"min-w-0 text-muted-foreground\">{entry.label}</dt>\n                  <dd className=\"shrink-0 tabular-nums\">{money(entry.amount)}</dd>\n                </div>\n              ))\n            : null}\n          <div className=\"flex justify-between gap-3 border-t pt-1\">\n            <dt className=\"font-medium text-foreground\">{labels.logistics.finalCost}</dt>\n            <dd className=\"font-semibold tabular-nums\">\n              {freeShipping ? labels.logistics.shippingFree : money(group.total)}\n            </dd>\n          </div>\n        </dl>\n      ) : null}\n\n      {pickup && settings.pickup === true ? (\n        <div className=\"mt-3 space-y-2\">\n          <OrderPickupDetails pickup={pickup} labels={labels} date={date} />\n          {fulfillments.some((entry) => entry.allocations.length > 0 || entry.events.length > 0) ? (\n            <details className=\"text-xs\">\n              <summary\n                aria-label={`${labels.logistics.details}: ${pickup.locationName}`}\n                className=\"cursor-pointer rounded-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n              >\n                {labels.logistics.details}\n              </summary>\n              <div className=\"mt-2 space-y-2 border-t pt-2\">\n                {fulfillments.flatMap((entry) =>\n                  entry.allocations.map((allocation) => {\n                    const line = order.lines.find((item) => item.id === allocation.lineId)\n                    return (\n                      <p\n                        key={`${entry.id}-${allocation.lineId}`}\n                        className=\"flex justify-between gap-3\"\n                      >\n                        <span className=\"min-w-0 break-words text-muted-foreground\">\n                          {line?.name ?? allocation.lineId}\n                        </span>\n                        <span className=\"shrink-0 tabular-nums\">\n                          {allocation.quantity} {labels.logistics.units}\n                        </span>\n                      </p>\n                    )\n                  }),\n                )}\n                {fulfillments.flatMap((entry) =>\n                  entry.events.map((event) => (\n                    <p key={event.id} className=\"text-muted-foreground\">\n                      {event.label} · {date(event.at)}\n                    </p>\n                  )),\n                )}\n              </div>\n            </details>\n          ) : null}\n        </div>\n      ) : delivered ? (\n        <details className=\"mt-3 text-xs\">\n          <summary\n            aria-label={`${labels.logistics.details}: ${group.method.name}`}\n            className=\"cursor-pointer rounded-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n          >\n            {labels.logistics.details}\n          </summary>\n          <div className=\"mt-2 border-t pt-2\">{shippingCards}</div>\n        </details>\n      ) : (\n        <div className=\"mt-3\">{shippingCards}</div>\n      )}\n    </article>\n  )\n}\n"],"mappings":"AAyBQ,SACE,KADF;AAhBR,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,SAAS,OAAO,aAAa;AAU7C,SAAS,mBAAmB,EAAE,QAAQ,QAAQ,KAAK,GAAgB;AACxE,SACE,qBAAC,SAAI,WAAU,6CACb;AAAA,yBAAC,SAAI,WAAU,oDACb;AAAA,2BAAC,OAAE,WAAU,yCACX;AAAA,4BAAC,SAAM;AAAA,QACN,OAAO,UAAU;AAAA,SACpB;AAAA,MACA,oBAAC,UAAK,WAAU,iDACb,iBAAO,UAAU,aAAa,OAAO,MAAM,GAC9C;AAAA,OACF;AAAA,IACA,qBAAC,QAAG,WAAU,kBACZ;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,aAAY;AAAA,QACpE,oBAAC,QAAG,WAAU,kDAAkD,iBAAO,cAAa;AAAA,SACtF;AAAA,MACA,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,SAAQ;AAAA,QAChE,oBAAC,QAAG,WAAU,kDAAkD,iBAAO,SAAQ;AAAA,SACjF;AAAA,MACA,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,UAAS;AAAA,QACjE,oBAAC,QAAG,WAAU,sCAAsC,iBAAO,UAAS;AAAA,SACtE;AAAA,MACC,OAAO,eACN,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,cAAa;AAAA,QACrE,oBAAC,QAAG,WAAU,kDAAkD,iBAAO,cAAa;AAAA,SACtF,IACE;AAAA,MACH,OAAO,gBACN,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,eAAc;AAAA,QACtE,oBAAC,QAAG,WAAU,mBAAmB,eAAK,OAAO,aAAa,GAAE;AAAA,SAC9D,IACE;AAAA,MACH,OAAO,YACN,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,WAAU;AAAA,QAClE,oBAAC,QAAG,WAAU,mBAAmB,eAAK,OAAO,SAAS,GAAE;AAAA,SAC1D,IACE;AAAA,MACH,OAAO,OACN,qBAAC,SAAI,WAAU,yDACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,MAAK;AAAA,QAC7D,oBAAC,QAAG,WAAU,yDAAyD,iBAAO,MAAK;AAAA,SACrF,IACE;AAAA,MACH,OAAO,WACN,qBAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,UAAS;AAAA,QACjE,oBAAC,QAAG,WAAU,8BAA8B,iBAAO,UAAS;AAAA,SAC9D,IACE;AAAA,OACN;AAAA,KACF;AAEJ;AAgBO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAAkB;AAChB,QAAM,WAAW,eAAe,KAAK;AACrC,QAAM,SAAS,SAAS;AACxB,QAAM,WAAW,CAAC,UAAU,YAAY,SAAS,SAAS;AAC1D,QAAM,WACJ,CAAC,UACD,SAAS,aAAa,QACtB,QAAQ,YAAY,kBAAkB,YAAY,WAAW;AAC/D,QAAM,aACJ,YAAY,SAAS,SAAS,KAC9B,YAAY,YAAY,SAAS,KACjC,YAAY,OAAO,SAAS,KAC5B,QAAQ,YAAY,QAAQ;AAE9B,SACE,qBAAC,SAAI,WAAU,uCACb;AAAA,yBAAC,SAAI,WAAU,oDACb;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA,6BAAC,OAAE,WAAU,iDACV;AAAA,mBAAS,oBAAC,SAAM,IAAK,oBAAC,WAAQ;AAAA,UAC9B,SAAS,OAAO,UAAU,oBAAoB,OAAO,UAAU;AAAA,WAClE;AAAA,QACC,YAAY,WAAW,YAAY,WAClC,oBAAC,OAAE,WAAU,wCACV,sBAAY,WAAW,YAAY,UACtC,IACE;AAAA,SACN;AAAA,MACA,oBAAC,UAAK,WAAU,yDACb,iBAAO,iBAAiB,YAAY,MAAM,GAC7C;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,8DACZ;AAAA,kBAAY,YAAY,iBACvB,qBAAC,UAAK,WAAU,WACd;AAAA,6BAAC,UAAK,WAAU,yBAAyB;AAAA,iBAAO,UAAU;AAAA,UAAe;AAAA,WAAC;AAAA,QAAQ;AAAA,QAClF,oBAAC,UAAK,WAAU,yBAAyB,sBAAY,gBAAe;AAAA,SACtE,IACE;AAAA,MACH,YAAY,YAAY,cACvB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,YAAY;AAAA,UAClB,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,cAAY,GAAG,OAAO,UAAU,KAAK,KAAK,YAAY,kBAAkB,YAAY,WAAW;AAAA,UAC/F,WAAU;AAAA,UAET;AAAA,mBAAO,UAAU;AAAA,YAClB,oBAAC,gBAAa,WAAU,YAAW;AAAA;AAAA;AAAA,MACrC,IACE;AAAA,MACH,CAAC,UAAU,YAAY,SAAS,aAAa,QAAQ,CAAC,WACrD,oBAAC,UAAK,WAAU,yBAAyB,iBAAO,UAAU,YAAW,IACnE;AAAA,MACH,YAAY,cACX,qBAAC,UAAK,WAAU,yBACb;AAAA,eAAO,UAAU;AAAA,QAAY;AAAA,QAAG,KAAK,YAAY,WAAW;AAAA,SAC/D,IACE,YAAY,YACd,qBAAC,UAAK,WAAU,yBACb;AAAA,eAAO,UAAU;AAAA,QAAU;AAAA,QAAG,KAAK,YAAY,SAAS;AAAA,SAC3D,IACE;AAAA,OACN;AAAA,IAEC,aACC,qBAAC,aAAQ,WAAU,gBACjB;AAAA,0BAAC,aAAQ,WAAU,qIAChB,iBAAO,UAAU,SACpB;AAAA,MACA,qBAAC,SAAI,WAAU,gCACZ;AAAA,oBAAY,SAAS,SAAS,IAC7B,qBAAC,OAAE,WAAU,yBACV;AAAA,iBAAO,UAAU;AAAA,UAAS;AAAA,UAAE;AAAA,UAC5B,YAAY,SAAS,IAAI,CAAC,UAAU,MAAM,KAAK,EAAE,KAAK,QAAK;AAAA,WAC9D,IACE;AAAA,QAEH,YAAY,YAAY,SAAS,IAChC,oBAAC,QAAG,WAAU,eACX,sBAAY,YAAY,IAAI,CAAC,eAAe;AAC3C,gBAAM,OAAO,MAAM,MAAM,KAAK,CAAC,UAAU,MAAM,OAAO,WAAW,MAAM;AACvE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cAEV;AAAA,oCAAC,UAAK,WAAU,6CACb,gBAAM,QAAQ,WAAW,QAC5B;AAAA,gBACA,qBAAC,UAAK,WAAU,yBACb;AAAA,6BAAW;AAAA,kBAAS;AAAA,kBAAE,OAAO,UAAU;AAAA,mBAC1C;AAAA;AAAA;AAAA,YARK,GAAG,YAAY,EAAE,IAAI,WAAW,MAAM;AAAA,UAS7C;AAAA,QAEJ,CAAC,GACH,IACE;AAAA,QAEH,YAAY,WACX,qBAAC,OAAE,WAAU,yBACV;AAAA,iBAAO,UAAU;AAAA,UAAS;AAAA,UAAG,YAAY;AAAA,WAC5C,IACE;AAAA,QAEH,YAAY,OAAO,SAAS,IAC3B,oBAAC,QAAG,WAAU,2BACX,sBAAY,OAAO,IAAI,CAAC,UACvB,qBAAC,QACC;AAAA,8BAAC,UAAK,WAAU,mBAAmB,gBAAM,OAAM;AAAA,UAC/C,oBAAC,UAAK,WAAU,8BAA8B,eAAK,MAAM,EAAE,GAAE;AAAA,UAC5D,MAAM,QACL,oBAAC,UAAK,WAAU,8BAA8B,gBAAM,OAAM,IACxD;AAAA,aALG,MAAM,EAMf,CACD,GACH,IACE;AAAA,SACN;AAAA,OACF,IACE;AAAA,KACN;AAEJ;AAaO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,WAAW,eAAe,KAAK;AACrC,QAAM,OAAO,MAAM,SAAS,WAAW,QAAQ;AAC/C,QAAM,UAAU,IAAI,IAAI,aAAa,QAAQ,CAAC,UAAU,MAAM,YAAY,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC/F,QAAM,QAAQ,aACX,QAAQ,CAAC,UAAU,MAAM,WAAW,EACpC,OAAO,CAAC,OAAO,eAAe,QAAQ,WAAW,UAAU,CAAC;AAC/D,QAAM,qBAAqB,aAAa,OAAO,CAAC,UAAU,MAAM,WAAW,WAAW;AACtF,QAAM,iBAAiB,aAAa,SAAS,KAAK,mBAAmB,WAAW;AAChF,QAAM,YACJ,mBAAmB,SAAS,KAC5B,mBAAmB;AAAA,IACjB,CAAC,UAAU,MAAM,WAAW,eAAe,MAAM,WAAW;AAAA,EAC9D;AACF,QAAM,eAAe,mBAClB,OAAO,CAAC,UAAU,MAAM,WAAW,eAAe,MAAM,WAAW,WAAW,EAC9E,QAAQ,CAAC,UAAU,MAAM,WAAW,EACpC,OAAO,CAAC,OAAO,eAAe,QAAQ,WAAW,UAAU,CAAC;AAC/D,QAAM,cAAc,aACjB,IAAI,CAAC,UAAU,MAAM,WAAW,EAChC,OAAO,CAAC,UAA2B,QAAQ,KAAK,CAAC,EACjD,KAAK,EACL,GAAG,EAAE;AACR,QAAM,WAAW,MAAM,MAAM,OAAO,CAAC,OAAO,UAAU,QAAQ,MAAM,OAAO,QAAQ,CAAC;AACpF,QAAM,eAAe,MAAM,iBAAiB,SAAS,KAAK,MAAM,MAAM,WAAW;AACjF,QAAM,mBAAmB,SAAS,eAAe,OAAO,aAAa,CAAC;AACtE,QAAM,yBAAyB,IAAI,IAAI,iBAAiB,QAAQ,CAAC,UAAU,MAAM,aAAa,CAAC;AAC/F,QAAM,kBAAkB,MAAM,UAAU;AAAA,IACtC,CAAC,UAAU,CAAC,uBAAuB,IAAI,MAAM,EAAE;AAAA,EACjD;AAEA,QAAM,SAAS,MAAM,SAAS,WAAY,MAAM,UAAU,aAAa,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,SAAU;AACxG,QAAM,aAAa,iBACf,OAAO,iBAAiB,YACxB,YACE,MAAM,SAAS,WACb,OAAO,UAAU,kBACjB,OAAO,UAAU,YACnB,QAAQ,WAAW,UACjB,OAAO,UAAU,aAAa,QAC9B,OAAO,UAAU;AAEzB,QAAM,gBACJ,oBAAC,SAAI,WAAU,aACZ,WAAC,GAAG,YAAY,EACd,KAAK,CAAC,MAAM,UAAU;AACrB,UAAM,OAAO,CAAC,UACZ,MAAM,WAAW,cACb,IACA,MAAM,WAAW,eAAe,MAAM,WAAW,cAC/C,IACA;AACR,WAAO,KAAK,IAAI,IAAI,KAAK,KAAK;AAAA,EAChC,CAAC,EACA,IAAI,CAAC,gBACJ;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA,MAAM,MAAM;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IANK,YAAY;AAAA,EAOnB,CACD,GACL;AAGF,SACE,qBAAC,aAAQ,WAAU,uCACjB;AAAA,wBAAC,SAAI,WAAU,oDACb,+BAAC,SAAI,WAAU,WACb;AAAA,2BAAC,OAAE,WAAU,iDACX;AAAA,4BAAC,QAAK;AAAA,QACL,MAAM,OAAO;AAAA,SAChB;AAAA,MACA,qBAAC,OAAE,WAAU,wCACV;AAAA;AAAA,QACA,MAAM,YAAY,CAAC,YAAY,SAAM,MAAM,QAAQ,KAAK;AAAA,QACxD,aAAa,cAAc,SAAM,KAAK,WAAW,CAAC,KAAK;AAAA,SAC1D;AAAA,MACA,qBAAC,OAAE,WAAU,sCACV;AAAA;AAAA,UACC,QAAQ,SAAS,IAAI,OAAO,UAAU,kBAAkB,OAAO,UAAU;AAAA,UACzE;AAAA,YACE;AAAA,YACA,UAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,QACC,eAAe,KAAK,CAAC,YAClB,SAAM;AAAA,UACJ,MAAM,SAAS,WACX,OAAO,UAAU,gBACjB,OAAO,UAAU;AAAA,UACrB,EAAE,OAAO,aAAa;AAAA,QACxB,CAAC,KACD;AAAA,SACN;AAAA,OACF,GACF;AAAA,IAEC,MAAM,iBAAiB,SAAS,KAAK,MAAM,UAAU,SAAS,IAC7D,qBAAC,QAAG,WAAU,0BACZ;AAAA,2BAAC,SAAI,WAAU,8BACb;AAAA,4BAAC,QAAG,WAAU,yBAAyB,iBAAO,UAAU,cAAa;AAAA,QACrE,oBAAC,QAAG,WAAU,gBAAgB,gBAAM,MAAM,gBAAgB,GAAE;AAAA,SAC9D;AAAA,MACC,iBAAiB,IAAI,CAAC,UACrB,qBAAC,SAAmB,WAAU,8BAC5B;AAAA,6BAAC,QAAG,WAAU,6CACX;AAAA,iBAAO,UAAU;AAAA,UAAU;AAAA,UAAG,MAAM;AAAA,UACpC,MAAM,OAAO,KAAK,MAAM,IAAI,MAAM;AAAA,WACrC;AAAA,QACA,qBAAC,QAAG,WAAU,yBAAwB;AAAA;AAAA,UAAE,MAAM,MAAM,aAAa;AAAA,WAAE;AAAA,WAL3D,MAAM,EAMhB,CACD;AAAA,MACA,gBAAgB,IAAI,CAAC,UACpB,qBAAC,SAAmB,WAAU,8BAC5B;AAAA,6BAAC,QAAG,WAAU,6CACX;AAAA,gBAAM,cAAc,cACjB,OAAO,MAAM,aACb,OAAO,UAAU;AAAA,UAAU;AAAA,UAC5B,MAAM;AAAA,WACX;AAAA,QACA,qBAAC,QAAG,WAAU,yBACX;AAAA,gBAAM,cAAc,cAAc,MAAM;AAAA,UACxC,MAAM,MAAM,MAAM;AAAA,WACrB;AAAA,WAVQ,MAAM,EAWhB,CACD;AAAA,MACA,SAAS,kBAAkB,QAAQ,WAAW,IAC3C,MAAM,MAAM,IAAI,CAAC,UACf,qBAAC,SAAmB,WAAU,8BAC5B;AAAA,4BAAC,QAAG,WAAU,iCAAiC,gBAAM,OAAM;AAAA,QAC3D,oBAAC,QAAG,WAAU,yBAAyB,gBAAM,MAAM,MAAM,GAAE;AAAA,WAFnD,MAAM,EAGhB,CACD,IACD;AAAA,MACJ,qBAAC,SAAI,WAAU,4CACb;AAAA,4BAAC,QAAG,WAAU,+BAA+B,iBAAO,UAAU,WAAU;AAAA,QACxE,oBAAC,QAAG,WAAU,8BACX,yBAAe,OAAO,UAAU,eAAe,MAAM,MAAM,KAAK,GACnE;AAAA,SACF;AAAA,OACF,IACE;AAAA,IAEH,UAAU,SAAS,WAAW,OAC7B,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,sBAAmB,QAAgB,QAAgB,MAAY;AAAA,MAC/D,aAAa,KAAK,CAAC,UAAU,MAAM,YAAY,SAAS,KAAK,MAAM,OAAO,SAAS,CAAC,IACnF,qBAAC,aAAQ,WAAU,WACjB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAY,GAAG,OAAO,UAAU,OAAO,KAAK,OAAO,YAAY;AAAA,YAC/D,WAAU;AAAA,YAET,iBAAO,UAAU;AAAA;AAAA,QACpB;AAAA,QACA,qBAAC,SAAI,WAAU,gCACZ;AAAA,uBAAa;AAAA,YAAQ,CAAC,UACrB,MAAM,YAAY,IAAI,CAAC,eAAe;AACpC,oBAAM,OAAO,MAAM,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,WAAW,MAAM;AACrE,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAU;AAAA,kBAEV;AAAA,wCAAC,UAAK,WAAU,6CACb,gBAAM,QAAQ,WAAW,QAC5B;AAAA,oBACA,qBAAC,UAAK,WAAU,yBACb;AAAA,iCAAW;AAAA,sBAAS;AAAA,sBAAE,OAAO,UAAU;AAAA,uBAC1C;AAAA;AAAA;AAAA,gBARK,GAAG,MAAM,EAAE,IAAI,WAAW,MAAM;AAAA,cASvC;AAAA,YAEJ,CAAC;AAAA,UACH;AAAA,UACC,aAAa;AAAA,YAAQ,CAAC,UACrB,MAAM,OAAO,IAAI,CAAC,UAChB,qBAAC,OAAiB,WAAU,yBACzB;AAAA,oBAAM;AAAA,cAAM;AAAA,cAAI,KAAK,MAAM,EAAE;AAAA,iBADxB,MAAM,EAEd,CACD;AAAA,UACH;AAAA,WACF;AAAA,SACF,IACE;AAAA,OACN,IACE,YACF,qBAAC,aAAQ,WAAU,gBACjB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,GAAG,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,IAAI;AAAA,UAC7D,WAAU;AAAA,UAET,iBAAO,UAAU;AAAA;AAAA,MACpB;AAAA,MACA,oBAAC,SAAI,WAAU,sBAAsB,yBAAc;AAAA,OACrD,IAEA,oBAAC,SAAI,WAAU,QAAQ,yBAAc;AAAA,KAEzC;AAEJ;","names":[]}

package/dist/blocks/designs/order-detail/components/header.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { OrderDetailLabels, OrderDetailOrder, OrderDetailSettings } from '../contracts';
+import { type DateFormatter, type MoneyFormatter } from './ui';
+type HeaderProps = {
+    order: OrderDetailOrder;
+    labels: OrderDetailLabels;
+    settings: OrderDetailSettings;
+    money: MoneyFormatter;
+    date: DateFormatter;
+    onBack?: () => void;
+    headerActions?: ReactNode;
+};
+/**
+ * One compact header: reference, date, one main status, payment · items and the
+ * total. Complex facts live in the status strip below, never duplicated here.
+ */
+export declare function OrderDetailHeader({ order, labels, settings: input, money, date, onBack, headerActions, }: HeaderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=header.d.ts.map

package/dist/blocks/designs/order-detail/components/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/order-detail/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAS5F,OAAO,EAAsB,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,MAAM,CAAA;AAElF,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,gBAAgB,CAAA;IACvB,MAAM,EAAE,iBAAiB,CAAA;IACzB,QAAQ,EAAE,mBAAmB,CAAA;IAC7B,KAAK,EAAE,cAAc,CAAA;IACrB,IAAI,EAAE,aAAa,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EACN,QAAQ,EAAE,KAAK,EACf,KAAK,EACL,IAAI,EACJ,MAAM,EACN,aAAa,GACd,EAAE,WAAW,+BA8Db"}

package/dist/blocks/designs/order-detail/components/header.js

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var header_exports = {};
+__export(header_exports, {
+  OrderDetailHeader: () => OrderDetailHeader
+});
+module.exports = __toCommonJS(header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_engine = require("../engine.js");
+var import_money = require("../money.js");
+var import_icons = require("./icons.js");
+var import_ui = require("./ui.js");
+function OrderDetailHeader({
+  order,
+  labels,
+  settings: input,
+  money,
+  date,
+  onBack,
+  headerActions
+}) {
+  const settings = (0, import_engine.mergedSettings)(input);
+  const { status, tone } = (0, import_engine.resolvePresentationStatus)(order);
+  const payment = (0, import_engine.paymentStatusId)(order);
+  const quantities = (0, import_engine.orderQuantities)(order);
+  const chargeable = quantities.ordered - quantities.cancelled;
+  const items = chargeable === 1 ? labels.header.itemsOne : (0, import_money.fillTemplate)(labels.header.items, { count: chargeable });
+  const reference = settings.b2b === true ? order.business?.purchaseOrder ?? order.business?.internalReference : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      onBack ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.ActionButton, { variant: "ghost", onClick: onBack, className: "-ml-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeft, {}),
+        labels.header.back
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
+      headerActions
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border bg-card p-4 text-card-foreground sm:p-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "break-words text-xl leading-tight font-semibold", children: (0, import_money.fillTemplate)(labels.header.title, { number: order.number }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: date(order.createdAt) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Pill, { label: labels.status[status], tone })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2 border-t pt-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "min-w-0 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-foreground", children: labels.paymentStatus[payment] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: items }),
+          reference ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: reference })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            className: "text-xl font-semibold tabular-nums",
+            "aria-label": `${labels.header.total}: ${money(order.totals.total)}`,
+            children: money(order.totals.total)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OrderDetailHeader
+});
+//# sourceMappingURL=header.js.map

package/dist/blocks/designs/order-detail/components/header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-detail/components/header.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport type { OrderDetailLabels, OrderDetailOrder, OrderDetailSettings } from '../contracts'\nimport {\n  mergedSettings,\n  orderQuantities,\n  paymentStatusId,\n  resolvePresentationStatus,\n} from '../engine'\nimport { fillTemplate } from '../money'\nimport { ArrowLeft } from './icons'\nimport { ActionButton, Pill, type DateFormatter, type MoneyFormatter } from './ui'\n\ntype HeaderProps = {\n  order: OrderDetailOrder\n  labels: OrderDetailLabels\n  settings: OrderDetailSettings\n  money: MoneyFormatter\n  date: DateFormatter\n  onBack?: () => void\n  headerActions?: ReactNode\n}\n\n/**\n * One compact header: reference, date, one main status, payment · items and the\n * total. Complex facts live in the status strip below, never duplicated here.\n */\nexport function OrderDetailHeader({\n  order,\n  labels,\n  settings: input,\n  money,\n  date,\n  onBack,\n  headerActions,\n}: HeaderProps) {\n  const settings = mergedSettings(input)\n  const { status, tone } = resolvePresentationStatus(order)\n  const payment = paymentStatusId(order)\n  const quantities = orderQuantities(order)\n  const chargeable = quantities.ordered - quantities.cancelled\n  const items =\n    chargeable === 1\n      ? labels.header.itemsOne\n      : fillTemplate(labels.header.items, { count: chargeable })\n  const reference =\n    settings.b2b === true\n      ? (order.business?.purchaseOrder ?? order.business?.internalReference)\n      : undefined\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        {onBack ? (\n          <ActionButton variant=\"ghost\" onClick={onBack} className=\"-ml-2\">\n            <ArrowLeft />\n            {labels.header.back}\n          </ActionButton>\n        ) : (\n          <span />\n        )}\n        {headerActions}\n      </div>\n\n      <div className=\"rounded-xl border bg-card p-4 text-card-foreground sm:p-5\">\n        <div className=\"flex flex-wrap items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h2 className=\"break-words text-xl leading-tight font-semibold\">\n              {fillTemplate(labels.header.title, { number: order.number })}\n            </h2>\n            <p className=\"mt-1 text-xs text-muted-foreground\">{date(order.createdAt)}</p>\n          </div>\n          <Pill label={labels.status[status]} tone={tone} />\n        </div>\n\n        <div className=\"mt-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2 border-t pt-3\">\n          <p className=\"min-w-0 text-sm text-muted-foreground\">\n            <span className=\"text-foreground\">{labels.paymentStatus[payment]}</span>\n            <span aria-hidden=\"true\"> · </span>\n            <span>{items}</span>\n            {reference ? (\n              <>\n                <span aria-hidden=\"true\"> · </span>\n                <span>{reference}</span>\n              </>\n            ) : null}\n          </p>\n          <p\n            className=\"text-xl font-semibold tabular-nums\"\n            aria-label={`${labels.header.total}: ${money(order.totals.total)}`}\n          >\n            {money(order.totals.total)}\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsDU;AAnDV,oBAKO;AACP,mBAA6B;AAC7B,mBAA0B;AAC1B,gBAA4E;AAgBrE,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,eAAW,8BAAe,KAAK;AACrC,QAAM,EAAE,QAAQ,KAAK,QAAI,yCAA0B,KAAK;AACxD,QAAM,cAAU,+BAAgB,KAAK;AACrC,QAAM,iBAAa,+BAAgB,KAAK;AACxC,QAAM,aAAa,WAAW,UAAU,WAAW;AACnD,QAAM,QACJ,eAAe,IACX,OAAO,OAAO,eACd,2BAAa,OAAO,OAAO,OAAO,EAAE,OAAO,WAAW,CAAC;AAC7D,QAAM,YACJ,SAAS,QAAQ,OACZ,MAAM,UAAU,iBAAiB,MAAM,UAAU,oBAClD;AAEN,SACE,6CAAC,SAAI,WAAU,aACb;AAAA,iDAAC,SAAI,WAAU,qDACZ;AAAA,eACC,6CAAC,0BAAa,SAAQ,SAAQ,SAAS,QAAQ,WAAU,SACvD;AAAA,oDAAC,0BAAU;AAAA,QACV,OAAO,OAAO;AAAA,SACjB,IAEA,4CAAC,UAAK;AAAA,MAEP;AAAA,OACH;AAAA,IAEA,6CAAC,SAAI,WAAU,6DACb;AAAA,mDAAC,SAAI,WAAU,oDACb;AAAA,qDAAC,SAAI,WAAU,WACb;AAAA,sDAAC,QAAG,WAAU,mDACX,yCAAa,OAAO,OAAO,OAAO,EAAE,QAAQ,MAAM,OAAO,CAAC,GAC7D;AAAA,UACA,4CAAC,OAAE,WAAU,sCAAsC,eAAK,MAAM,SAAS,GAAE;AAAA,WAC3E;AAAA,QACA,4CAAC,kBAAK,OAAO,OAAO,OAAO,MAAM,GAAG,MAAY;AAAA,SAClD;AAAA,MAEA,6CAAC,SAAI,WAAU,+EACb;AAAA,qDAAC,OAAE,WAAU,yCACX;AAAA,sDAAC,UAAK,WAAU,mBAAmB,iBAAO,cAAc,OAAO,GAAE;AAAA,UACjE,4CAAC,UAAK,eAAY,QAAO,oBAAG;AAAA,UAC5B,4CAAC,UAAM,iBAAM;AAAA,UACZ,YACC,4EACE;AAAA,wDAAC,UAAK,eAAY,QAAO,oBAAG;AAAA,YAC5B,4CAAC,UAAM,qBAAU;AAAA,aACnB,IACE;AAAA,WACN;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAY,GAAG,OAAO,OAAO,KAAK,KAAK,MAAM,MAAM,OAAO,KAAK,CAAC;AAAA,YAE/D,gBAAM,MAAM,OAAO,KAAK;AAAA;AAAA,QAC3B;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/designs/order-detail/components/header.mjs

@@ -0,0 +1,68 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  mergedSettings,
+  orderQuantities,
+  paymentStatusId,
+  resolvePresentationStatus
+} from "../engine.mjs";
+import { fillTemplate } from "../money.mjs";
+import { ArrowLeft } from "./icons.mjs";
+import { ActionButton, Pill } from "./ui.mjs";
+function OrderDetailHeader({
+  order,
+  labels,
+  settings: input,
+  money,
+  date,
+  onBack,
+  headerActions
+}) {
+  const settings = mergedSettings(input);
+  const { status, tone } = resolvePresentationStatus(order);
+  const payment = paymentStatusId(order);
+  const quantities = orderQuantities(order);
+  const chargeable = quantities.ordered - quantities.cancelled;
+  const items = chargeable === 1 ? labels.header.itemsOne : fillTemplate(labels.header.items, { count: chargeable });
+  const reference = settings.b2b === true ? order.business?.purchaseOrder ?? order.business?.internalReference : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      onBack ? /* @__PURE__ */ jsxs(ActionButton, { variant: "ghost", onClick: onBack, className: "-ml-2", children: [
+        /* @__PURE__ */ jsx(ArrowLeft, {}),
+        labels.header.back
+      ] }) : /* @__PURE__ */ jsx("span", {}),
+      headerActions
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-4 text-card-foreground sm:p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("h2", { className: "break-words text-xl leading-tight font-semibold", children: fillTemplate(labels.header.title, { number: order.number }) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: date(order.createdAt) })
+        ] }),
+        /* @__PURE__ */ jsx(Pill, { label: labels.status[status], tone })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2 border-t pt-3", children: [
+        /* @__PURE__ */ jsxs("p", { className: "min-w-0 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: labels.paymentStatus[payment] }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+          /* @__PURE__ */ jsx("span", { children: items }),
+          reference ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ jsx("span", { children: reference })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-xl font-semibold tabular-nums",
+            "aria-label": `${labels.header.total}: ${money(order.totals.total)}`,
+            children: money(order.totals.total)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  OrderDetailHeader
+};
+//# sourceMappingURL=header.mjs.map

package/dist/blocks/designs/order-detail/components/header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-detail/components/header.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport type { OrderDetailLabels, OrderDetailOrder, OrderDetailSettings } from '../contracts'\nimport {\n  mergedSettings,\n  orderQuantities,\n  paymentStatusId,\n  resolvePresentationStatus,\n} from '../engine'\nimport { fillTemplate } from '../money'\nimport { ArrowLeft } from './icons'\nimport { ActionButton, Pill, type DateFormatter, type MoneyFormatter } from './ui'\n\ntype HeaderProps = {\n  order: OrderDetailOrder\n  labels: OrderDetailLabels\n  settings: OrderDetailSettings\n  money: MoneyFormatter\n  date: DateFormatter\n  onBack?: () => void\n  headerActions?: ReactNode\n}\n\n/**\n * One compact header: reference, date, one main status, payment · items and the\n * total. Complex facts live in the status strip below, never duplicated here.\n */\nexport function OrderDetailHeader({\n  order,\n  labels,\n  settings: input,\n  money,\n  date,\n  onBack,\n  headerActions,\n}: HeaderProps) {\n  const settings = mergedSettings(input)\n  const { status, tone } = resolvePresentationStatus(order)\n  const payment = paymentStatusId(order)\n  const quantities = orderQuantities(order)\n  const chargeable = quantities.ordered - quantities.cancelled\n  const items =\n    chargeable === 1\n      ? labels.header.itemsOne\n      : fillTemplate(labels.header.items, { count: chargeable })\n  const reference =\n    settings.b2b === true\n      ? (order.business?.purchaseOrder ?? order.business?.internalReference)\n      : undefined\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        {onBack ? (\n          <ActionButton variant=\"ghost\" onClick={onBack} className=\"-ml-2\">\n            <ArrowLeft />\n            {labels.header.back}\n          </ActionButton>\n        ) : (\n          <span />\n        )}\n        {headerActions}\n      </div>\n\n      <div className=\"rounded-xl border bg-card p-4 text-card-foreground sm:p-5\">\n        <div className=\"flex flex-wrap items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h2 className=\"break-words text-xl leading-tight font-semibold\">\n              {fillTemplate(labels.header.title, { number: order.number })}\n            </h2>\n            <p className=\"mt-1 text-xs text-muted-foreground\">{date(order.createdAt)}</p>\n          </div>\n          <Pill label={labels.status[status]} tone={tone} />\n        </div>\n\n        <div className=\"mt-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2 border-t pt-3\">\n          <p className=\"min-w-0 text-sm text-muted-foreground\">\n            <span className=\"text-foreground\">{labels.paymentStatus[payment]}</span>\n            <span aria-hidden=\"true\"> · </span>\n            <span>{items}</span>\n            {reference ? (\n              <>\n                <span aria-hidden=\"true\"> · </span>\n                <span>{reference}</span>\n              </>\n            ) : null}\n          </p>\n          <p\n            className=\"text-xl font-semibold tabular-nums\"\n            aria-label={`${labels.header.total}: ${money(order.totals.total)}`}\n          >\n            {money(order.totals.total)}\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAsDU,SA2BI,UA1BF,KADF;AAnDV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,cAAc,YAAqD;AAgBrE,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,WAAW,eAAe,KAAK;AACrC,QAAM,EAAE,QAAQ,KAAK,IAAI,0BAA0B,KAAK;AACxD,QAAM,UAAU,gBAAgB,KAAK;AACrC,QAAM,aAAa,gBAAgB,KAAK;AACxC,QAAM,aAAa,WAAW,UAAU,WAAW;AACnD,QAAM,QACJ,eAAe,IACX,OAAO,OAAO,WACd,aAAa,OAAO,OAAO,OAAO,EAAE,OAAO,WAAW,CAAC;AAC7D,QAAM,YACJ,SAAS,QAAQ,OACZ,MAAM,UAAU,iBAAiB,MAAM,UAAU,oBAClD;AAEN,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,qDACZ;AAAA,eACC,qBAAC,gBAAa,SAAQ,SAAQ,SAAS,QAAQ,WAAU,SACvD;AAAA,4BAAC,aAAU;AAAA,QACV,OAAO,OAAO;AAAA,SACjB,IAEA,oBAAC,UAAK;AAAA,MAEP;AAAA,OACH;AAAA,IAEA,qBAAC,SAAI,WAAU,6DACb;AAAA,2BAAC,SAAI,WAAU,oDACb;AAAA,6BAAC,SAAI,WAAU,WACb;AAAA,8BAAC,QAAG,WAAU,mDACX,uBAAa,OAAO,OAAO,OAAO,EAAE,QAAQ,MAAM,OAAO,CAAC,GAC7D;AAAA,UACA,oBAAC,OAAE,WAAU,sCAAsC,eAAK,MAAM,SAAS,GAAE;AAAA,WAC3E;AAAA,QACA,oBAAC,QAAK,OAAO,OAAO,OAAO,MAAM,GAAG,MAAY;AAAA,SAClD;AAAA,MAEA,qBAAC,SAAI,WAAU,+EACb;AAAA,6BAAC,OAAE,WAAU,yCACX;AAAA,8BAAC,UAAK,WAAU,mBAAmB,iBAAO,cAAc,OAAO,GAAE;AAAA,UACjE,oBAAC,UAAK,eAAY,QAAO,oBAAG;AAAA,UAC5B,oBAAC,UAAM,iBAAM;AAAA,UACZ,YACC,iCACE;AAAA,gCAAC,UAAK,eAAY,QAAO,oBAAG;AAAA,YAC5B,oBAAC,UAAM,qBAAU;AAAA,aACnB,IACE;AAAA,WACN;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAY,GAAG,OAAO,OAAO,KAAK,KAAK,MAAM,MAAM,OAAO,KAAK,CAAC;AAAA,YAE/D,gBAAM,MAAM,OAAO,KAAK;AAAA;AAAA,QAC3B;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/designs/order-detail/components/icons.d.ts

@@ -0,0 +1,18 @@
+type IconProps = {
+    className?: string;
+};
+export declare const ArrowLeft: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const ChevronDown: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const Truck: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const Store: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const Download: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const Package: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const AlertTriangle: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const ExternalLink: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const Refresh: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const CreditCard: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const FileText: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const ReturnIcon: ({ className }: IconProps) => import("react").JSX.Element;
+export declare const Flag: ({ className }: IconProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/dist/blocks/designs/order-detail/components/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/order-detail/components/icons.tsx"],"names":[],"mappings":"AAKA,KAAK,SAAS,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAmBvC,eAAO,MAAM,SAAS,GAAI,eAAe,SAAS,gCACC,CAAA;AAEnD,eAAO,MAAM,WAAW,GAAI,eAAe,SAAS,gCAA8C,CAAA;AAElG,eAAO,MAAM,KAAK,GAAI,eAAe,SAAS,gCAS3C,CAAA;AAEH,eAAO,MAAM,KAAK,GAAI,eAAe,SAAS,gCAQ3C,CAAA;AAEH,eAAO,MAAM,QAAQ,GAAI,eAAe,SAAS,gCAO9C,CAAA;AAEH,eAAO,MAAM,OAAO,GAAI,eAAe,SAAS,gCAO7C,CAAA;AAEH,eAAO,MAAM,aAAa,GAAI,eAAe,SAAS,gCAOnD,CAAA;AAEH,eAAO,MAAM,YAAY,GAAI,eAAe,SAAS,gCAQlD,CAAA;AAEH,eAAO,MAAM,OAAO,GAAI,eAAe,SAAS,gCAS7C,CAAA;AAEH,eAAO,MAAM,UAAU,GAAI,eAAe,SAAS,gCAOhD,CAAA;AAEH,eAAO,MAAM,QAAQ,GAAI,eAAe,SAAS,gCAO9C,CAAA;AAEH,eAAO,MAAM,UAAU,GAAI,eAAe,SAAS,gCAOhD,CAAA;AAEH,eAAO,MAAM,IAAI,GAAI,eAAe,SAAS,gCAO1C,CAAA"}